前言¶
DeepSeek Harness (DSH) 插件生態中有一款名爲 DeepSeek Harness Design 的工具。它解決了傳統前端開發中“畫原型”與“寫代碼”割裂的問題。通過該插件，模型可以直接在對話中修改頁面，Design 側邊欄提供實時預覽，點擊元素可爲模型提供精準的上下文，從而將對話轉化爲可交互的 HTML 原型。
這是什麼¶
DeepSeek Harness Design 是一個社區維護的插件，開源協議爲 MIT。它將 HTML 原型開發流程嵌入到 DSH 的對話流中，模型負責編輯頁面，插件負責渲染和狀態管理。
核心功能¶
-
實時預覽與視口適配
插件提供手機、平板和桌面三種視口寬度的實時預覽（分別爲 390px、834px、1280px）。在側邊欄中可切換視口，內容過寬時需橫向滾動查看。 -
元素選擇與上下文交互
開啓元素選擇模式後，點擊頁面上的任意元素，可以將該元素的狀態（ID、類名、結構等）傳遞給模型。模型收到上下文後，可以針對該元素進行修改，而不需要重新描述整個頁面。 -
多方案管理與版本控制
支持創建多個設計方案（Alternatives）和每個方案的歷史修訂（Revisions）。可以通過下拉菜單切換方案或版本，無需操作工具欄即可快速對比不同狀態。 -
數據持久化與導出
會話數據保存在 Harness 的持久化存儲中。即使重啓 Harness 或寫入失敗，插件也能嘗試恢復或回滾。此外，支持將當前 HTML 文檔導出至會話工作區。
安裝與啓用¶
插件未發佈至 npm，需從 GitHub Release 下載 tarball 包。
- 從 GitHub Release v0.6.1 下載
deepseek-harness-design-0.6.1.tgz。 - 在下載目錄下執行安裝命令（以 Desktop 爲例）：
npx @deepseek-ai/dsh@0.2.0-rc.2 plugin --profile desktop add ./deepseek-harness-design-0.6.1.tgz
- 安裝完成後，完全退出並重新啓動 Harness。
- 打開右側邊欄，點擊
+卡片中的 Design。 - 確保使用的 DeepSeek Harness 版本爲 0.2.0-rc.2（已知兼容性），且運行環境 Node.js 版本在 22.12 以上。
典型用法¶
- 創建頁面：在對話中要求模型創建一個頁面。模型成功調用
design_apply工具後，Design 側邊欄的預覽區會更新。 - 精準修改：開啓元素選擇，點擊某個按鈕或文本，告訴模型“把這個按鈕改成圓角風格”。模型會讀取選中的元素並應用修改。
- 創建對比方案：在當前草稿基礎上，要求模型“創建一個暗色主題的編輯版本”。插件會保留當前草稿，並生成一個新方案供對比。
- 重命名方案：點擊方案選擇器旁的鉛筆圖標，可以重命名方案（如“暖色咖啡主頁”）。重命名僅更新標籤，不改變內部狀態。
- 版本對比：在對比模式下，左右兩側可以獨立選擇不同的方案和版本，實現並排對比。
注意事項¶
- 兼容性：插件已針對 DeepSeek Harness Desktop 0.2.0-rc.2 的 Web Profile 進行測試，其他版本兼容性未經驗證。
- 存儲限制：單次會話限制爲 32 個方案，每個方案最多 40 個歷史版本，單個 HTML 文檔字符數限制爲 400,000。
- 卸載舊包：若之前安裝過同名或不同名的舊插件（如
dsh-design），需先移除舊包名，再安裝新版：
dsh plugin --profile desktop remove dsh-design
- 獨立性聲明：該項目由社區獨立維護，與 DeepSeek 官方無隸屬關係。
總結¶
DeepSeek Harness Design 將原型設計流程直接集成到對話中，適合需要在開發前快速驗證 UI 界面或進行多方案比對的場景。通過元素選擇和持久化存儲，它降低了前端交互開發的門檻。更多細節可參考 GitHub 倉庫。
