前言¶
DeepSeek Harness（DSH）通過插件擴展功能。當智能體需要生成用戶界面時，單純的文本描述往往不足以評估交互邏輯或佈局效果。dsh-design 插件解決了這個問題，它允許 Agent 工具直接編寫 HTML，並在本地生成可點擊的原型預覽。
是什麼¶
這是一個客戶端插件，用於在 DeepSeek Harness 中生成和預覽可交互的 HTML 原型。
維護者：xbyzzZ
類別：客戶端
許可證：MIT
該插件通過 Agent 工具在項目目錄下的 .dsh-design/ 路徑中寫入 HTML 文件，並利用瀏覽器預覽技術，將頁面渲染爲按比例縮放的藝術板。
安裝與啓用¶
插件通過 dsh plugin 命令安裝。安裝後需要重啓 DSH 才能生效。
- 在插件目錄下執行安裝命令：
dsh plugin --profile web add .
插件會被安裝到 $DSH_HOME/profiles/web，並作爲補丁 bundle 加載。
-
重啓 DeepSeek Harness。
-
打開 Prototype 標籤頁：
- 如果安裝了dsh-better-sidebar，可以在側邊欄的+菜單中選擇 Prototype。
- 如果沒有該插件，可以在聊天頁面的視圖中打開預覽標籤頁。
核心功能¶
插件提供了一組 Agent 工具和預覽交互能力。
Agent 工具¶
Agent 可以使用以下工具與原型文件交互：
| 工具名 | 作用 |
|---|---|
design_status |
查看當前工作區和正在預覽的文件 |
design_systems |
獲取平臺信息、默認畫布尺寸以及 paper / ink 設計系統 |
design_create |
創建新項目，需傳入 platform（平臺）和 designSystem（設計系統） |
design_brief |
更新或修改現有項目的需求說明 |
design_write |
編寫 HTML / CSS / JS / SVG / 光柵圖片 |
design_list |
列出項目中的文件 |
design_open |
打開現有 HTML 文件或另一個項目 |
design_comments |
讀取畫布上的固定點信息 |
預覽與交互¶
在 Prototype 標籤頁中，頁面以按比例縮放的藝術板形式顯示：
- 平臺尺寸：Web (1280×800)，iOS (390×844)，Android (412×915)。
- 縮放與平移：使用
−/%/+縮放，或按住 Space 鍵拖動平移，支持雙指滾動和 ⌘/Ctrl+滾輪縮放。 - 原型選擇：同一工作區可能有多個原型，從工具欄下方的條帶中選擇。
- 固定：點擊頁面任意位置添加固定點，在聊天中提及該點，Agent 會讀取並據此修改代碼。
文件支持¶
- 支持嵌套文件夾。
- 支持外部鏈接（如
<link href="css/app.css">）。 - 支持內部鏈接（如
<a href="settings.html">）。 - 光柵圖片使用 Base64 編碼嵌入。
典型用法¶
- 在聊天中輸入指令，例如：“Make a login page.”
- Agent 會詢問平臺和設計系統（如 web/iOS/Android，paper/ink）。
- Agent 調用
design_create和design_write，生成 HTML 文件到.dsh-design/。 - 打開 Prototype 標籤頁，查看生成的頁面。
- 在頁面上點擊並固定一個位置，在聊天中輸入反饋，Agent 會根據固定點重新編寫代碼。
配置與限制¶
配置¶
插件自帶 cordis.patch.yml 補丁文件，官方補丁會整體替換配置。如需覆蓋特定配置項（如 maxFileBytes），需手動插入如下結構：
- insert:
- id: dsh-design
name: dsh-design
config:
maxFileBytes: 524288
限制¶
- 運行環境：需要 DeepSeek Harness 的 web profile 和 Node.js 22+。
- 文件大小：單文件最大 512 KiB (
maxFileBytes)。 - 存儲路徑：文件存儲在
<workspace>/.dsh-design/下，包含current.json、projects/<id>/等結構。
結尾¶
dsh-design 爲 DSH 的智能體開發提供了可視化的交互能力，使其不僅能寫代碼，還能“畫”頁面。更多細節和源碼，請訪問 GitHub 倉庫。
