前言¶
DSH 的用法是「在會話裏把事做完」。產品設計類需求走到今天，常見的做法還是把 Figma 鏈接、截圖、Miro 白板來回貼，AI 生成的是文字描述，落到畫布上還得人工再搭一遍。這個插件把一塊可交互的產品畫布直接放進會話標籤頁，讓需求描述、AI 修改和畫布結果在同一處閉環。下面介紹 kycoming/dsh-product-design，維護者 KYCOMING，分類爲客戶端，目錄頁 2026-11-07 數據顯示星標 0，屬於較新的項目。
這是什麼¶
一句話定位：會話標籤頁裏的「簡化版 Figma」產品設計畫布。它不是獨立設計工具，而是 DSH 插件，通過 window.__ModuleLoader__ 掛載會話視圖、全屏畫布與空會話入口；瀏覽器半由 src/client 構建成單文件模塊，Host 半負責文檔讀寫、SSE 變更推送和 agent 工具註冊。
它解決的問題是：把「產品需求溝通」留在會話內。在畫布上直接搭原型，組件可交互；加載 / 空 / 錯誤等狀態變體可以由 AI 生成並在預覽中切換，而不是在文字裏描述。
當前版本 package.json 聲明爲 1.5.0，MIT 許可。兼容性方面，DSH 0.2.2-rc.1 是實測版本，0.2.0-rc.1 到 0.2.x 屬於 engines.dsh 允許範圍但未逐一實測，< 0.2.0 與 >= 0.3.0 未聲明支持。
核心能力¶
這一塊按「畫布 → 編輯 → 預覽 → 產出 → 數據」的順序介紹。
多畫板畫布¶
- 所有頁面橫向排在可平移、可縮放的畫布上，每頁獨立尺寸：手機 390×844、平板 768×1024、桌面 1280×800。
Ctrl/⌘ + 滾輪縮放，普通滾輪滾動，小方格網格隨縮放變化。- 組件庫 13 類：容器、按鈕、輸入框、卡片、導航欄、標籤頁、開關、複選框、頭像、文本、圖片、徽標、下拉框，點擊添加到當前頁。
編輯與排版¶
- 容器可嵌套任意組件並裁剪超出內容；拖入 / 拖出容器自動改變層級。
Shift + 點擊多選，畫板空白處拖拽框選。 - 磁吸對齊：拖動或縮放時吸附畫板邊緣、中心線與其它元素邊緣、中心，並顯示洋紅參考線，頂部「磁吸」開關可關閉。
- 約束（Constraints）：每個元素可設水平 / 垂直約束，如左/右固定、左右拉伸、居中、按比例；整頁行爲可在「按約束 / 整體縮放 / 保持不變」間切換。
- Auto Layout：容器與編組可開啓堆疊佈局（橫向 / 縱向、間距、四向內邊距、交叉軸對齊、主軸分佈），開啓後子元素座標由佈局接管，拖動改變的是順序。
- 圖層樹支持拖拽排序、顯隱、鎖定、重命名、按名稱搜索；支持撤銷重做（含 AI 改動）、複製粘貼（可跨頁）、編組、對齊與分佈。
組件狀態與預覽¶
- 每個組件帶獨立狀態集，例如按鈕
默認 / 懸停 / 按下 / 禁用，輸入框默認 / 聚焦 / 已填寫 / 錯誤 / 禁用，在右側屬性面板切換預覽。 - 預覽模式隱藏工具欄與左右側欄，只顯示當前畫板，組件真實響應懸停、按下、點擊，開關、複選框、標籤頁、下拉可交互；
Esc或右上角「退出預覽」返回編輯器。 - 原型交互：給任意元素配置「點擊 → 跳轉頁面 / 返回 / 打開爲彈層」，預覽裏可以走通帶返回棧的流程，
Esc逐層退出。
導出¶
工具欄「導出」提供三種產物，全部在瀏覽器內生成，不上傳數據：
| 格式 | 內容 |
|---|---|
| PNG（1× / 2×） | 當前頁光柵圖，模型渲染 → SVG foreignObject → canvas |
| HTML 原型 | 單文件，內嵌全部頁面與運行時，雙擊即可打開 |
| React + Tailwind | 單文件 Prototype.jsx，每頁一個組件，帶 useState 頁面路由 |
導出走獨立的「乾淨」渲染器 src/client/export/render.js，編輯器輔助線、圖層標籤、選中框不會進入產物。
設計稿庫與保存狀態¶
- 一個會話對多份設計稿（1 對 N），左側「設計稿」只列當前會話的稿子，可新建、重命名、複製、刪除、導出 JSON；換會話不丟稿，也不看別的會話的稿子。
- 工具欄實時顯示
已保存 / 保存中… / 僅本地 / 同步失敗 / 有衝突；遇到 409 不再靜默覆蓋，頂部出現衝突條，可「保留我的改動」或「使用遠端版本」。
安裝與啓用¶
目前只通過 GitHub 分發，未發佈 npm；package.json 保留 private: true 是有意爲之，dist/ 不入庫，由 scripts/build.mjs 在安裝時生成。
# Desktop
dsh plugin --profile desktop add github:KYCOMING/dsh-product-design
# Web
dsh plugin --profile web add github:KYCOMING/dsh-product-design
沒有 dsh 命令時，打開「插件 → 添加插件」，輸入 github:KYCOMING/dsh-product-design。包根 package.json 的頂層 install 字段以機器可讀方式聲明瞭同一條規範安裝命令，供插件市場在 L3「安裝規範」檢查中解析。
啓用後確認 dsh-product-design 已開啓，再重啓 DSH——Host 半不熱加載。重啓後打開一個已有消息的會話，頂部標籤欄會出現「產品設計」，點擊進入編輯；也可在畫布內點「全屏」進入獨立畫布。
卸載：
dsh plugin --profile desktop remove dsh-product-design
典型用法¶
安裝完成後，實際使用圍繞三條路徑。
1、直接提需求。/design <需求> 把需求作爲普通用戶消息交給 AI，由 AI 調用畫布工具生成或修改設計。它的實現是 Host 半通過 ctx.commands.register 註冊命令，handler 把 rawInput 包裝成普通用戶消息並經 agent.followup() 提交，因此 AI 走完整工具鏈，而不是命令本身直接改文檔。斜槓菜單中的 /design 行會顯示中文本地化標題「設計」，保留 design 別名。
2、看 AI 改完的結果。AI 調用 product_design_apply 後，聊天回合末尾會出現當前頁面的產品縮略卡片，可一鍵「打開畫布」，不必先手動切到畫布。
3、走一遍真實交互再交付。在預覽模式裏點按鈕跳轉頁面、返回、打開彈層，確認流程能走通；需要交付時從工具欄導出 PNG 給評審，導出單文件 HTML 原型給非技術同事，或導出 React + Tailwind 組件給前端接。
權限、數據與注意¶
裝上之後，插件是在當前 DSH 進程的權限內運行，安裝前應先檢查源碼與許可證。它聲明的行爲如下。
- 在 Host 進程內註冊同源 HTTP 路由
/dsh-product-design/api，提供文檔讀寫與 SSE 變更推送。 - 設計稿寫入
<DSH_HOME>/storages/dsh-product-design/docs/<docId>.json，會話記錄當前打開的稿子（sessions/<sessionId>/active.json）；瀏覽器端另用localStorage（doc:v3:<sessionId>）做緩存和離線兜底。 - 註冊兩個 agent 工具
product_design_get_document、product_design_apply，外加一段系統提示和/design命令。 - 不發起外部網絡請求，不收集遙測。
需要注意的幾點：一是它只聲明支持 >= 0.2.0-rc.1 <0.3.0-0，升級 DSH 前先覈對版本；二是源碼改動要改 src/ 再跑 pnpm run build，dist/client.js、dist/index.js 頭帶 AUTO-GENERATED 橫幅，不要手改；三是星標爲 0、維護者只有 KYCOMING 一人，依賴深度使用前建議通讀 src/ 與 LICENSE。
結尾¶
這個插件的價值不在於替代 Figma，而在於把需求溝通、AI 生成和畫布迭代收斂進同一個會話：表達需求、看縮略卡片、進畫布確認、導出產物。目錄頁：https://www.skillhub.cn/plugins/KYCOMING/dsh-product-design ；源碼與完整 README：https://github.com/KYCOMING/dsh-product-design 。
