前言¶
用 DeepSeek Harness（DSH）寫前端時，設計環節往往遊離在 agent 工作流之外：截圖貼進聊天、口頭描述改動、agent 改完代碼後自己開瀏覽器覈對。設計和編碼是兩條線，agent 看不到頁面，也無法驗證自己改了什麼。
DSH 的理念是「一切皆插件」，這條線可以由插件來補。下面介紹的 @sal7one/dsh-design-studio 由 Sal7one 維護，MIT 許可證，把即時預覽、元素選取、真實設計 agent 和視覺評審接進 harness，讓設計稿成爲 agent 能直接讀寫、驗證的文件。
這是什麼¶
一句話定位：一個把設計 mockup 變成一等 AI 工作流的 DeepSeek Harness 設計插件——即時預覽、元素選取、真實設計 agent 與視覺評審。
幾個基本盤：
- 當前版本 1.2.3，
engines要求 Node.js >= 22； - 零運行時依賴，純 JavaScript，無構建步驟；
- 結構是
dsh.bundle（宿主側）+dsh.client（Web UI 側）雙面包：dsh plugin add一次，design_studio工具、/design-studio預覽路由、提示詞段落和 Design Studio 標籤頁每次啓動都在； - 所有設計系統都是磁盤上
temp_design_folder/下的真實文件，設計、預設、配置、評審和 agent 歷史重啓後仍在。
核心功能¶
design_studio 工具與即時預覽¶
design_studio 是一個 agent 工具，主助手和子代理都能調用，支持 list / all / create / read / write / zip / reveal / delete / sweep 設計系統，管理身份預設、運行視覺評審、與設計 agent 對話、讀取歷史、配置 studio，操作範圍限定在 temp_design_folder/ 下的設計目錄。
即時預覽路由是 /design-studio/<slug>/html/index.html，由 harness web server 提供；Design Studio 標籤頁以 iframe 內嵌該路由，保存後熱重載。另有一段 Design-brief 提示詞，會把操作者的屏幕簡介自動轉成設計系統。
設計系統的文件結構¶
每個設計系統的文件結構固定：
html/index.html
css/style.css
css/token.css
js/app.js
design_prompts_forcoders.md
assets/images/
design_prompts_forcoders.md 是編碼 agent 要遵循的 brief；assets/images/ 存放上傳的圖片。mock 數據保持誠實——只有空態和加載態，不僞造線上數字。
每個設計系統按創建它的會話歸屬，標籤頁只顯示當前會話的設計。
設計 agent¶
設計 agent 不是包裝出來的角色，而是真實的 harness 子代理，行爲有四點：
- 每條消息內自行跨多次工具調用讀取、編輯設計文件，再彙總文件級改動；
- 讀取和編輯活動即時流入聊天，帶內聯錯誤、按系統持久化的歷史和運行超時；
- 視覺預檢（Vision pre-pass）：選擇器中選定的圖片先由配置的視覺模型描述，agent 不會在多個資產之間猜「這張圖」是哪張；
- 新鮮度戳
{hash, at}：插件經 harnessfs/observed流檢測任何編輯器的改動，agent 每輪記錄 design cache，下一輪據此證明 UNCHANGED 或 CHANGED。
元素選取與雙 agent 應用¶
點擊 🎯 Select，在即時預覽中點選任意元素並描述改動，然後三選一：
| 按鈕 | 行爲 |
|---|---|
| 🤖 Ask DeepSeek（默認） | 寫入 EDIT_REQUEST.md 並注入主聊天，DeepSeek 自己改文件；編輯落定後 studio 自動運行一次設計 agent 驗證 |
| ◈ 交由設計 agent | 經典流程：設計 agent 自己應用改動並在其聊天裏回覆 |
| 💾 僅保存 | 只寫 EDIT_REQUEST.md，之後從任一聊天應用 |
視覺評審與身份預設¶
- 👁 Review：基於 OpenRouter 視覺模型，對照 brief 給出誠實的
GOOD | POOR評語加一句話備註，模型、effort、options 均可配置； - 身份預設：保存調色板、字體、Logo；
preset_apply寫入css/token.css並複製 Logo 資產； OPENROUTER_API_KEY經 harness credential seam 處理，密鑰從不渲染或返回；- 📸 Shot：截取屏幕區域（macOS
screencapture）直接進入assets/images/。注意作者在 README Todos 中已計劃移除該功能，因其 buggy。
其他能力¶
- 拖放區：圖片或代碼文件拖入標籤頁，圖片落入
assets/images/並在 agent chat 選擇器中自動選中； - Zip 導出（
_zips/<slug>.zip，僅文件）、Finder 定位（open -R）、無 shell 的遞歸刪除，在沒有 POSIX shell 的主機上也能用； - Settings → Design Studio / All designs 頁面：配置、key 狀態、系統列表、逐設計的 zip/reveal/delete。
安裝與啓用¶
插件兼容兩種 harness 發行方式：npm 發行版和源碼 checkout。npm 發行版按下面三步走：
# 1. 啓動 harness（如未運行）
npx @deepseek-ai/dsh web
# 2. 安裝插件
dsh plugin --profile web add "github:sal7two/dsh-design-studio#main"
# 3. 重啓 harness，加載新層
源碼 checkout 用 pnpm dsh web 啓動。從本地 checkout 安裝：
dsh plugin --profile web add -w /absolute/path/to/dsh-design-studio
兩點注意：
-w僅當 profile 目錄是 pnpm workspace 根（存在pnpm-workspace.yaml）時需要，且路徑必須爲絕對路徑，否則會被誤讀爲 GitHubowner/repo簡寫；- 上面的安裝命令按 README 原文照錄，其中
sal7two與 GitHub 倉庫歸屬Sal7one/DSH-Design-Studio不一致，安裝前請以倉庫頁面給出的命令爲準。
典型用法¶
經過上面的步驟重啓 harness 後，Design Studio 標籤頁每次啓動都在。以元素選取流程爲例：
- 打開 Design Studio 標籤頁；
- 點擊 🎯 Select；
- 在即時預覽中點選任意元素，描述想要的改動；
- 選擇應用方式：默認的 🤖 Ask DeepSeek 把請求寫入
EDIT_REQUEST.md注入主聊天，DeepSeek 編輯文件，編輯落定後 studio 自動運行設計 agent 驗證；也可以 ◈ 交由設計 agent 執行，或 💾 僅保存，之後再從任一聊天應用。
另一條入口是 Design-brief 路由：在聊天裏給出屏幕簡介，系統提示詞段落會把它自動轉成設計系統，不用手動建目錄。
適用場景與注意¶
適合誰：用 DSH 做界面開發的開發者；需要在主聊天之外有一條獨立的設計線，且希望設計和編碼共享同一套真實文件，而不是貼圖和口頭交接。
使用前留意：
- 插件以當前 dsh 進程的權限運行，可讀寫
temp_design_folder/並調用視覺模型。安裝前建議檢查源碼與許可證（本插件爲 MIT）； - 運行環境要求 Node.js >= 22；
- 📸 Shot 截圖功能作者已標記爲 buggy 並計劃移除，使用時留意；
- 卸載等其餘操作參考倉庫 README。
小結¶
@sals7one/dsh-design-studio 把設計稿從貼圖變成 agent 可讀寫、可驗證的真實文件：即時預覽和元素選取讓改動有處可點，雙 agent 應用流程讓每次編輯都經過設計 agent 驗證，新鮮度戳和視覺預檢則處理多 agent 協作時的漂移問題。如果你在用 DSH 做界面開發，值得試一次。
- 社區目錄（獨立站點，非官方應用商店）：https://www.skillhub.cn/plugins/Sal7one/DSH-Design-Studio
- GitHub：https://github.com/Sal7one/DSH-Design-Studio
