前言¶

在 DeepSeek Harness（DSH）裏做界面設計，常見做法是讓 agent 生成描述或靜態圖，再由人手工轉成可運行頁面。交付物往往難以直接交接，質量也缺少可複覈的客觀指標。設計臺（dsh-design-studio）把整條鏈路裝進 DSH：畫布是真實 DOM 上的 HTML 文件，質檢走本機 Chrome/Edge 的渲染測量，最終可導出多種格式。它是 Claude Design 思路在 DSH 裏的原生實現，維護者爲 YansongG-HKU，分類爲客戶端插件，當前版本 1.3.1，MIT 許可證。

這是什麼¶

設計臺是裝在 DSH 裏的設計工作臺。包名與客戶端模塊 id 均爲 dsh-design-studio；項目數據落在 <DSH_HOME>/design-studio（DSH_HOME 默認爲 ~/.dsh）。面板路由前綴爲 /dsh-design-studio，對應請求頭 x-dsh-design-studio: 1。

工作流被拆成可覈查的步驟：建項目並寫 brief → 採集設計系統語境 → 在 design/ 下寫三檔 HTML 變體（A 規範、B 進階、C 前衛）→ 畫布編輯與評論 → 無頭瀏覽器五類檢查直到評分達標 → 導出。實現上包含 11 個 agent 工具、一組本地 HTTP 路由和側邊欄「設計臺」面板；純 Node ESM，無第三方運行時依賴。

與「只生成一張圖」的流程相比，agent 交付的是可運行的 HTML；質量結論來自真實渲染後的測量，而不是文字自評。

需求入口與設計面板¶

使用前需要分清兩個界面：

對話是需求入口，面板是設計工作臺。 頂欄有「回到對話」可切回主對話區；FlowStepper 階段條爲「開始 → 語境 → 變體 → 迭代 → 質檢 → 導出」（v1.3 起首段爲「開始」，並接入 6 步向導與 intake）。

開始：6 步向導與 intake（v1.3）¶

v1.3 對齊「開始 + 提問」：總覽首屏提供「開始一個新設計（6 步）」，並保留「快速開始（一句話）」給熟手。六步大致覆蓋：設計類型與目標、受衆與場景、語境來源、變體檔數與探索維度、Tweaks 與內容約束、交付格式與驗收標準（默認質檢 ≥90）。每步可點「不知道，讓 Claude 決定」把必答項交給 agent；完成後可「創建並去對話」或「只建項目」。

嚮導答案寫入結構化 intake，並與 brief 一併持久化。agent 側新增 design_intake：新或含糊請求先按問題清單問 ≤8 個關鍵問題，再 design_start；design_start 可接受可選 intake，創建時把摘要寫入 system/DESIGN.md。

核心能力¶

下面按 README 已列能力歸納，均可在面板或工具鏈中使用。

編輯器與畫布（v1.1.0 起）
三欄佈局、區域焦點（F6/Shift+F6）、由真實 DOM 推導的圖層樹、Shift 多選與框選、拖拽與八向縮放、浮動工具條、多變體畫板視圖、⌘K / Ctrl+K 命令面板（約 45 個動作）、深淺主題切換。

設計系統與變體
支持從 URL、代碼庫、圖片或手寫說明導入 token，寫入 system/tokens.json 與 DESIGN.md。三檔變體爲 design/a.html、b.html、c.html。

協作式迭代
內聯評論（comments.json）、畫布上直接改樣式與文字、撤銷/重做；Tweaks 通過頁面內 EDITMODE 與 __dsApplyTweaks 實時調參。

質檢
本機瀏覽器逐視口截圖並提取計算樣式，覆蓋無障礙、排版、間距、設計系統一致性、AI-slop 五類規則；不達標的 findings 可生成修復指令交回對話，目標通常爲評分 ≥ 90。

導出與版本
支持 HTML、ZIP、PDF（CDP printToPDF）、PNG、PPTX（本地最小 OOXML）。手動版本快照與面板保存自動歷史。

有意不做的事
無 Figma 式對象模型與約束系統（編輯直接作用 DOM）；無多人協作與雲端同步；PPTX 爲本地圖片型幻燈片，非 Google Slides API。

安裝與啓用¶

官方安裝方式是在包含 package.json 與 cordis.patch.yml 的插件目錄下執行 bundle 安裝，而不是憑倉庫名拼接 dsh plugin add：

plugin_manager install_bundle({ target: "<插件目錄>" })

環境要求：Node.js ≥ 22，DSH ≥ 0.2.2-rc.1。安裝成功後側邊欄「插件」列表應出現 設計臺，agent 側獲得 11 個 design_* 工具及 system-prompt 說明。若面板未出現，確認版本後重啓會話；Host 初始化失敗時會保持 inert 並寫 warn 日誌，不會拖垮 DSH。

插件以當前 DSH 進程權限運行，安裝前應自行查閱倉庫源碼與 MIT 許可證條款。

典型用法¶

在對話裏自然語言下任務
信息充分時可跳過提問；含糊時 agent 會先 design_intake 再開工。示例：

幫我做一個面向瑜伽工作室的預約落地頁，先看看 studio.breath.example 的設計系統，再給三檔方案，要求無障礙達標。

把 design/ 裏的三檔首頁做一次質檢，修到 90 分以上，然後導出 HTML 和 PDF。

這個海報項目導出 PPTX，另外把設計系統 token 寫進 system/tokens.json。

標準工具鏈順序（摘要）
design_intake → design_start（可帶 intake）→ design_context → 編寫 a/b/c 三檔 HTML → design_check 直至 ≥90 → design_export。具體參數與各工具字段見倉庫 README 與 docs/FLOW.md。

在面板內操作
總覽用 6 步向導或快速一句話建項目；工作區左欄「需求」tab 可編輯 brief 五字段，「複製給 Claude 並去對話」會帶上項目上下文與工具鏈指令；變體 tab 進入畫布編輯；右欄查看檢查報告與導出。

適用場景與注意¶

適合需要在 DSH 內完成「可交接 HTML + 可複覈質檢」的界面與營銷物料設計：落地頁、移動端頁、演示稿、海報等。依賴本機已安裝的 Chrome/Edge 做質檢與部分導出，數據全部在本地 ~/.dsh/design-studio（或你配置的 DSH_HOME）。

不適合需要 Figma 級約束與組件實例、或團隊雲端實時協作的場景。社區目錄 SkillHub 與 DeepSeek / 幻方無官方從屬關係，本文僅以倉庫 README 與 package.json 爲準。

結尾¶

設計臺把 Claude Design 式流程固化爲 DSH 插件：真實 HTML 畫布、11 個 agent 工具、側邊欄 Figma 級編輯體驗，以及瀏覽器實測的質量門禁與五種導出格式。進一步瞭解可打開目錄頁與 GitHub 倉庫：

• 目錄頁：https://www.skillhub.cn/plugins/YansongG-HKU/dsh-design-studio
• 倉庫：https://github.com/YansongG-HKU/dsh-design-studio