dsh-visual-skin

DeepSeek Harness Skin Studio — Ein Ein-Klick-Visual-Skin-Tool für DeepSeek Harness

Ein visuelles Skin-Studio für DeepSeek Harness (DSH): Entwerfen, Vorschau und sicheres Anwenden von Skins mit einem Klick – ohne Konfigurationsdateien zu berühren. Auslieferung als Agent Skill + MCP Server + DSH Plugin, mit einem One-Shot-PowerShell-Installer.

Nach der Installation kann Ihr KI-Assistent mit nur einem Bild den gesamten Skin-Wechsel-Prozess automatisch durchführen: Bild-Upload → Theme-Erstellung → isolierte Vorschau → manuelle Bestätigung der Anwendung. Sie können auch die unabhängige Studio-Webseite öffnen, um Skins visuell anzupassen und mit einem Klick in DSH zu schreiben.

✨ Funktionen

Related MCP server: dstools

🎬 Demo

Animation erstellt von huashu-design · Storyboard-Karten unter docs/demo/storyboard.md · Richtungsboard unter docs/demo/direction-boards.html

📦 Installation

Voraussetzungen

Methode 1: Befehlszeileninstallation (empfohlen)

# 1. 获取项目
git clone https://github.com/trrrrrryg/dsh-visual-skin.git
cd dsh-visual-skin

# 2. 一键安装（默认目标：%USERPROFILE%\.dsh，profile: web，Controller 端口 11862）
powershell -NoProfile -ExecutionPolicy Bypass -File .\install.ps1

Der Installer führt automatisch aus:

1. Build/Wiederverwendung der selbstständigen portablen Runtime (Controller + Studio + MCP + Plugin, ca. 51 MB, installiert im Skill-Verzeichnis);

2. Installation des Skills in %DSH_HOME%\skills\deepseek-harness-skin-studio (DSH-Assistent erhält sofort diese Fähigkeit);

3. Registrierung des DSH-Plugins (cordis.patch.yml-Block, mit Karte "Skin-Einstellungen");

4. Registrierung des MCP-Servers (mcp__skin-studio__*, zeigt auf die installierte portable Runtime);

5. Start des Studios (Controller, Standard-Port 11862, Browser öffnet http://127.0.0.1:11862);

6. Bei Erkennung von Codex automatische Synchronisation des Skills und Registrierung des Codex-MCP.

Nach der Installation DSH einmal neu starten (oder im Desktop-Launcher neu starten), damit der Profile-Patch und der MCP-Client wirksam werden.

Optionale Parameter

Beispiel (benutzerdefinierte Installation + automatischer Neustart von DSH nach Installation):

.\install.ps1 -DshHome C:\Users\me\.dsh -ProfileName web -ControllerPort 12000 -RestartDsh

Methode 2: KI-Installation

Übergeben Sie dieses Repository an einen beliebigen Agenten und sagen Sie ihm:

Bitte lesen Sie die README und die install.ps1 in diesem Repository und führen Sie dann die Installation aus.

Der Agent führt die Installation gemäß dem obigen Ablauf durch (er kann auch direkt install.ps1 ausführen).

Installation überprüfen

# 插件健康检查（在 DSH 端口上，应返回 ok:true；默认 DSH 端口 10402）
Invoke-RestMethod http://127.0.0.1:10402/dsh-skin/health

# Controller / Studio 状态检查（应返回 ok:true、capabilities.compatible:true）
Invoke-RestMethod http://127.0.0.1:11862/api/v1/status

• Studio öffnen: http://127.0.0.1:11862 (oder über Startmenü/Taskleisten-Symbol)

• In den DSH-Einstellungen sollte die Karte "Skin-Einstellungen" erscheinen; sagen Sie dem Assistenten "Skin wechseln", um die mcp__skin-studio__*-Tools auszulösen.

🚀 Verwendung

Nach der Installation und dem Neustart sagen Sie direkt zum DSH-Assistenten:

• "Gib mir einen anderen Skin" / "Verwende dieses Bild als Hintergrund" → Der Assistent ruft automatisch mcp__skin-studio__* auf, erstellt das Design und zeigt eine Vorschau im Studio;

• "Tausche den aktuellen Skin-Hintergrund aus" → Der Assistent ändert das aktuelle Design;

• Manuelle Anpassungen im Studio (Hintergrund, Bereich, Token, Trennlinie) → Klicken Sie auf In mein DSH schreiben, bestätigen Sie im erscheinenden Plan-Bestätigungsfenster → nach DSH-Neustart wirksam.

Skin-Wechsel-Ablaufdiagramm

用户指令 / 图片 ──▶ Agent Skill ──▶ MCP (design_create → asset_upload → theme_patch
                                      → theme_validate → preview_start)
                                              │
                                              ▼
                              隔离 DSH 预览（真实渲染，不碰你的 DSH）
                                              │
                                              ▼
                          Studio 可见确认（theme_apply_plan → theme_apply）
                                              │
                                              ▼
                              你的 DSH 皮肤生效（可随时 Restore 还原）

🗂️ Verzeichnisstruktur

├─ install.ps1                     # 一键安装器（命令行 / AI）
├─ apps/
│  ├─ controller/                  # Studio 后端（API、隔离预览、apply/restore、GC）
│  └─ studio/                      # Studio Web UI（React + Vite）
├─ packages/
│  ├─ dsh-plugin/                  # DSH 插件（host 路由 + client 皮肤渲染）
│  ├─ theme-schema/                # ThemeSpec v2 数据契约
│  ├─ design-session-core/         # 设计会话 / 确认票据 / 操作日志
│  ├─ shared/                      # 跨端类型与错误码
│  ├─ agent-cli/                   # dsh-skin JSON CLI
│  ├─ mcp-server/                  # MCP stdio 服务器（26 个工具）
│  └─ portable-runtime/            # 便携运行时聚合
├─ agents/codex-skill/deepseek-harness-skin-studio/
│  ├─ SKILL.md                     # Agent Skill 指令（自动换肤流程）
│  └─ scripts/                     # open-studio / build-portable / install-local
├─ research/                       # 同类项目调研材料（16 个项目 README）
├─ docx/                           # 项目文档（实施计划 / 需求分析 / 架构设计）
└─ tests/                          # 回归测试（含真实 rc.6 隔离 Chromium 预览）

🛠️ Entwicklung

pnpm install          # 安装依赖（需要 Node 22+ / pnpm 11+）
pnpm build            # 构建全部包
pnpm test             # 回归测试（会启动真实 rc.6 隔离预览）
pnpm controller       # 本地启动 Controller（开发）
pnpm dev              # Studio 开发模式（Vite）

🗑️ Deinstallation

1. Entfernen Sie alle Einträge zwischen den Kommentarblöcken # >>> dsh-skin-studio und # <<< dsh-skin-studio in %DSH_HOME%\profiles\<profile>\cordis.patch.yml;

2. Löschen Sie %DSH_HOME%\profiles\node_modules\@dsh-skin und %DSH_HOME%\skills\deepseek-harness-skin-studio;

3. Starten Sie DSH neu;

4. Um Studio-Daten zu bereinigen, löschen Sie %LOCALAPPDATA%\DeepSeekHarnessSkinStudio.

🔒 Sicherheit und Kompatibilität

• Ziel-DSH-Version: 0.1.0-rc.6 (Fähigkeiten festgelegt; bei Versionsabweichung Plugin fail-closed).

• Skin-Modell (ThemeSpec) erlaubt nur strukturierte Daten: Literale CSS-Farben, inhaltsadressierte Bilder (sha256), kontrollierte Tokens; kein beliebiges CSS/JS/URL.

• Vorschau verwendet ein isoliertes temporäres DSH, das dem Controller gehört; Bestätigung und Schreiben müssen manuell im sichtbaren Studio erfolgen.

• Guthabenabfrage: API-Key wird nur auf der Host-Seite aufgelöst (DSH_SKIN_BALANCE_API_KEY → DEEPSEEK_API_KEY → %DSH_HOME%\.credentials.yaml), der Browser sieht nur aggregierte Guthaben, der Schlüssel landet nicht im Browser.

📄 Dokumentation

• docx/ — Implementierungsplan, Anforderungsanalyse-Spezifikation, technische Architektur-Spezifikation

• CHANGELOG.md — Änderungsprotokoll

• RELEASING.md — Veröffentlichungs-Checkliste (GitHub Release / npm)

📃 Lizenz

MIT © 2026 trrrrrryg