dsh-visual-skin

DeepSeek Harness Skin Studio — DeepSeek Harness 向けワンクリックビジュアルスキンツール

A visual skin studio for DeepSeek Harness (DSH): design, preview and safely apply skins with one click — no config files to touch. Ship as an Agent Skill + MCP server + DSH plugin, with a one-shot PowerShell installer.

インストール後、AIアシスタントは画像1枚で、画像アップロード → テーマ作成 → 隔離プレビュー → 手動確認適用 という完全なスキン変更フローを自動実行できます。また、独立したStudioウェブページでスキンを視覚的に調整し、ワンクリックでDSHに書き込むこともできます。

✨ 機能

Related MCP server: dstools

🎬 デモ

アニメーション制作：huashu-design · ストーリーボード：docs/demo/storyboard.md · 方向性ボード：docs/demo/direction-boards.html

📦 インストール

前提条件

方法1：コマンドラインインストール（推奨）

# 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

インストーラーが自動で以下を実行します：

1. 自己完結型ポータブルランタイムのビルド/再利用（Controller + Studio + MCP + プラグイン、約51MB、Skillディレクトリにインストール）；

2. Skillを %DSH_HOME%\skills\deepseek-harness-skin-studio にインストール（DSHアシスタントが即座にスキルを取得）；

3. DSHプラグインを登録（cordis.patch.yml 管理ブロック、スキン設定 設定カードを含む）；

4. MCPサーバーを登録（mcp__skin-studio__*、インストール後の自己完結型ランタイムを指す）；

5. Studioを起動（Controller、デフォルトポート11862、ブラウザで http://127.0.0.1:11862 にアクセス）；

6. Codexを検出した場合、自動的にSkillを同期し、Codex MCPを登録します。

インストール完了後、DSHを一度再起動（またはデスクトップランチャーで再起動）して、プロファイルパッチとMCPクライアントを有効にしてください。

オプションパラメータ

例（カスタムインストール + インストール後にDSHを自動再起動）：

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

方法2：AIインストール

このリポジトリを任意のエージェントに渡し、次のように指示します：

READMEとこのリポジトリの install.ps1 を読んで、インストールを実行してください。

エージェントは上記のフローに従ってインストールを完了します（直接 install.ps1 を実行することもできます）。

インストールの確認

# 插件健康检查（在 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を開く：http://127.0.0.1:11862（またはスタートメニュー/タスクトレイアイコンをクリック）

• DSHの設定ページに「スキン設定」カードが表示されるはずです。アシスタントに「スキンを変更して」と言うと、mcp__skin-studio__* ツールがトリガーされます。

🚀 使い方

インストールして再起動したら、DSHアシスタントに直接話しかけてください：

• 「スキンを変更して」 / 「この画像を背景にして」 → アシスタントが自動的に mcp__skin-studio__* を呼び出して作成し、Studioでプレビューします；

• 「今のスキンの背景を変えて」 → アシスタントが現在のデザインを変更します；

• Studioで手動調整（背景、領域、トーン、セパレーター）→ 「DSHに書き込む」 をクリック、ポップアップする計画確認ウィンドウで手動確認 → DSHを再起動すると反映されます。

スキン変更フローチャート

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

🗂️ ディレクトリ構造

├─ 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 预览）

🛠️ 開発

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

🗑️ アンインストール

1. %DSH_HOME%\profiles\<profile>\cordis.patch.yml から、# >>> dsh-skin-studio と # <<< dsh-skin-studio のコメントブロック間のエントリをすべて削除します；

2. %DSH_HOME%\profiles\node_modules\@dsh-skin と %DSH_HOME%\skills\deepseek-harness-skin-studio を削除します；

3. DSHを再起動します；

4. Studioデータを削除する場合は、%LOCALAPPDATA%\DeepSeekHarnessSkinStudio を削除します。

🔒 セキュリティと互換性

• ターゲットDSHバージョン：0.1.0-rc.6（機能ピン留め、バージョン不一致時はプラグインはfail-closed）。

• スキンモデル（ThemeSpec）は構造化データのみ許可：リテラルCSS色、コンテンツアドレス可能画像（sha256）、制御されたトークン。任意のCSS/JS/URLは受け付けません。

• プレビューにはControllerが所有する隔離された一時DSHを使用します。確認と書き込みは、可視のStudio内の人間が行う必要があります。

• 残高照会：APIキーはホスト側でのみ解析されます（DSH_SKIN_BALANCE_API_KEY → DEEPSEEK_API_KEY → %DSH_HOME%\.credentials.yaml）。ブラウザには集約された残高のみが表示され、キーはブラウザに保存されません。

📄 ドキュメント

• docx/ — 実装計画、要件分析仕様書、技術アーキテクチャ設計仕様書

• CHANGELOG.md — 変更履歴

• RELEASING.md — リリースチェックリスト（GitHub Release / npm）

📃 License

MIT © 2026 trrrrrryg