前言¶

在 DeepSeek Harness（DSH）裏做界面或視覺方案時，常見做法是用文字描述佈局、讓智能體改代碼或改 JSON。描述一多就容易和「當前畫面上長什麼樣」對不上；反過來，若只有靜態示意圖，智能體又缺少可校驗、可增量修改的結構化文檔。

dsh-design-canvas 是面向 DSH Web UI 的客戶端插件：右側邊欄提供畫板式圖層編輯，支持類似 CSS flex 的自動佈局框，並能把針對某個圖層的批註直接變成帶上下文的對話修訂請求，再由 Host 側工具讀寫同一份板文件。下面介紹它是什麼、能做什麼，以及如何從源碼目錄安裝並用起來。

這是什麼¶

維護者 AndreTheAccelerator（npm 包名 @andretaccelerator/dsh-design-canvas，版本 1.0.0，許可證 MIT）在 GitHub 開源了該插件倉庫；社區目錄歸類爲客戶端插件。

一句話定位：與聊天配對的 design canvas——畫板分層、可拖拽改稿，批註會發成結構化修訂消息，智能體通過 design_read / design_apply 改文檔，畫布輪詢合併新版本。

單倉即插件包：package.json 聲明 Harness bundle 與瀏覽器側 dsh.client；Host 在 index.js 與 host/，瀏覽器側爲純 JavaScript 單文件 client.js，無構建步驟、無 npm 依賴。

環境與依賴¶

使用前請確認：

• 已安裝帶 Web UI（含右側邊欄 client 包）的 DeepSeek Harness；README 寫明在 DSH 0.2.2-rc.1 上開發與驗證。
• Host 與測試需要 Node.js 20+。

核心功能¶

右側畫布與打開方式¶

畫布出現在右側邊欄同一標籤頁，可用三種方式進入（行爲等價）：

1. 頁面加載後每個瀏覽器標籤自動打開一次（sessionStorage 防抖，避免每次都要找入口）。
2. 輸入區工具行左側 24×24 設計按鈕。
3. 展開右側邊欄，選擇 Design canvas 引導卡片。

導航與快捷鍵¶

平移可用中鍵拖拽、空格+拖拽或拖空白背景；縮放爲 Ctrl/Cmd+滾輪或觸控板捏合（約 10%–400%），滾輪與 Shift+滾輪分別縱向/橫向滾動。選中圖層後可拖拽與八向手柄縮放；在自動佈局子項上拖拽用於重排而非自由定位。方向鍵微移 1px，Shift+方向鍵 10px（自動佈局子項禁用）。複製、撤銷/重做（最近 50 次編輯，不含批註）、刪除等與常見設計工具類似；按 c 或工具欄 Comment 可對選中圖層寫行內批註。

圖層、畫板與自動佈局¶

圖層落在畫板上（可縱向堆疊多個畫板），可嵌套在 frame 容器內；數組順序即 z 序。類型包括 rect、ellipse、text、image、frame。

frame 在 layout: null 時爲絕對定位子項；帶 layout 對象時行爲類似 CSS flexbox：direction、gap、padding、align、justify、wrap、clip 等。子圖層可設 grow、alignSelf。嵌套深度上限 5，每幀最多 200 子項，id 全局唯一。左側面板展示樹形結構，可拖行到 frame 上改父級，或在檢查器用 Move into。

樣式與圖片¶

填充與畫板背景支持 CSS 顏色或漸變；支持 shadow、radius、邊框、透明度等。文本層另有字號、字重、字體、對齊、行高等。檢查器每次改動作爲一條 op 提交，Host 校驗並在界面內返回逐條錯誤。

圖片層使用 http(s) 或 data: URL；可從工具欄、檢查器選文件、拖放或剪貼板粘貼。不超過 1.5 MiB 的 png/jpeg/webp/gif/svg 會內聯爲 data URL，並按畫板寬度約 40% 上限縮放放置。

行內批註 → 對話修訂¶

選中元素後寫批註併發送，畫布會：

1. 在板上記錄批註（comment.add，元素上編號 pin，線程面板可 Resolve/Reopen/Delete）；
2. 向當前會話發送真實聊天消息：含 「Design canvas revision request — apply it now」 塊，攜帶板路徑/版本、畫板尺寸、目標圖層 id/類型/幾何/屬性、批註 id 與正文，以及四步操作說明（儘量跳過 design_read、最小 ops、design_apply、resolve 批註、一句話回覆）。

智能體處理期間畫布輪詢版本並顯示「AI revising」狀態。

智能體工具與板文件¶

Host 提供：

• design_read：板路徑、版本，全文或摘要（include:"summary"），可選 artboardId，以及畫布 UI 最近上報。
• design_apply：artboard.*、layer.*、comment.* 等視覺操作；atomic: true 時單條失敗可導致整批失敗，否則 errors 逐條返回。

板文件默認可爲會話工作區根目錄的 design-board.json（可配置），由 Host store 獨佔維護，爲單一事實來源；系統提示要求模型不要手改該文件。

安裝與啓用¶

該插件以本地 bundle 方式裝入 Harness 配置，README 給出的流程如下（需先取得倉庫目錄，例如下載並解壓，勿假定存在統一的 dsh plugin add github:... 商店命令）。

在 Harness 會話中讓智能體安裝指定目錄的 bundle，或自行調用 plugin_manager：

action: "install_bundle"
target: <本插件目錄的絕對路徑>

安裝後爲鏈接式啓用。若瀏覽器側未出現，可重啓 include:design-canvas 插件行（或重啓 Harness 應用）並刷新頁面。

卸載：

action: "remove_bundle"
target: "@andretaccelerator/dsh-design-canvas"

典型用法¶

1. 按上文完成 bundle 安裝，從 composer 設計按鈕或右側 Design canvas 卡片打開畫布。
2. 在畫板上添加矩形、文本、frame 等，在 frame 檢查器裏開啓自動佈局並調整 direction、gap、justify，觀察子項排布。
3. 選中待改圖層，按 c 寫批註（例如「主按鈕改爲更亮的藍色並加大圓角」），發送後等待會話中的修訂請求塊；智能體應通過 design_apply 提交最小 ops 並 resolve 批註。
4. 需要對照結構時，可在對話中讓智能體調用 design_read（需要摘要時用 include:"summary"）。

倉庫內 examples/starter-board.json 爲生成式 starter，可按 README 說明粘貼到工作區作起點；內部設計見 CONTRACT.md。

適用場景與注意¶

適合：在 DSH Web UI 裏與智能體協作做低保真界面、組件排布示意、帶批註的迭代改稿；希望「所見」與 design-board.json 同步、由工具原子寫入而非手改 JSON 的團隊或個人。

注意：

• 插件在當前 DSH 進程權限下運行；安裝前請自行審閱源碼與 MIT 許可證，確認路徑與網絡策略（例如圖片 URL、data URL）符合你的環境。
• 開發與驗證版本爲 DSH 0.2.2-rc.1，其他版本行爲需自行驗證。
• 社區目錄（SkillHub）爲獨立生態站點，與 DeepSeek / 幻方無官方從屬關係；星標與收錄信息以各站點展示爲準（目錄線索爲 0 star）。

結尾¶

dsh-design-canvas 把右側可視化編輯、結構化板文件與聊天修訂請求串成一條閉環：人直接拖拽改稿，批註則把選中圖層上下文交給智能體工具鏈。若要查看收錄信息與簡介，可打開社區目錄頁；源碼、快捷鍵表與倉庫佈局說明見 GitHub README。

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