前言¶
做 UI 方案時，DSH 智能體缺少一個可視化載體：用文字描述界面，難以評審間距、層級和佈局；配上外部設計工具，又會和對話鏈路割裂。dsh-canvas 把設計畫布放進 DeepSeek Harness 的右側邊欄，畫完選區可直接送進 chat composer，讓智能體按開放的 JSON 文檔格式生成或修改設計。
它由 GitHub 用戶 aiShuiJiaoDeXioShou 維護，倉庫地址見文末。目錄站 skillhub.cn 是獨立的社區目錄站點，與 DeepSeek / 幻方無官方從屬關係。下面是這個插件的核實情況。
這是什麼¶
dsh-canvas，界面中叫 Drafi，是面向 DeepSeek Harness 的客戶端側插件。README 把它描述爲 “an AI-native design canvas inside DeepSeek Harness”：在右側邊欄畫 UI 稿，一鍵把當前選區送進 chat composer，再由智能體通過開放的 JSON 文檔格式完成設計生成或修改。
包名是 @local/dsh-canvas，package.json 中版本號爲 0.2.0、private: true，homepage 指向 GitHub README。公開的 package.json 與 GitHub API 顯示許可證爲 MIT，倉庫語言爲 TypeScript，默認分支 main：
github.com/aiShuiJiaoDeXioShou/dsh-canvas # 0 star，1 fork（截至 2026-11-07）
插件面向 web 客戶端注入，配置節裏聲明瞭 platform: "web"、immediately: true，並注入 @deepseek-ai/dsh-client-ui-sidebar-right 與 @deepseek-ai/dsh-client-ui-conversation 兩個客戶端包：
{
"dsh": {
"bundle": { "patch": "./cordis.patch.yml" },
"client": {
"platform": "web",
"immediately": true,
"inject": [
"@deepseek-ai/dsh-client-ui-sidebar-right",
"@deepseek-ai/dsh-client-ui-conversation"
]
}
}
}
入口位置按 README：右側邊欄引導卡片「Drafi」→ Drafi 標籤頁。作者強調 composer 工具欄沒有 Drafi 按鈕，右側邊欄是唯一入口；插入選區後仍在 composer 上方出現定位 chip。
畫布與編輯能力¶
README 列出的編輯能力接近 Figma 常用集：
- 無限畫布，支持平移、縮放、frame、矩形、橢圓、直線、文字、圖片填充；多選、移動、縮放旋轉、圖層、屬性、智能吸附、對齊、編組、複製粘貼、z 軸順序、撤銷重做。
- 頂層 Frame 的名稱像 Figma 標籤一樣顯示在 frame 上方且始終可見，點擊標籤即選中該 frame。
- 左側圖標欄頂部有摺疊按鈕，收起圖層/組件面板（記住上次打開的標籤）；工具行最右側有摺疊按鈕收起 inspector。圖標欄按鈕行爲不變。
- 右鍵畫布彈出上下文菜單，包含複製、剪切、粘貼、複製副本、刪除、插入選區到 composer、編組/取消編組、z 軸順序、鎖定/解鎖、顯示/隱藏、創建組件、適應視圖、全選。
- 圖層樹默認收起，右鍵圖層可改名、定位、複製、粘貼、刪除、編組、z 軸順序、鎖定/隱藏、組件操作；行內動作圖標加大，懸停或選中時出現。
- 自動佈局 frame，支持水平/垂直方向、間距、內邊距、對齊、子項固定/包含/填充三種尺寸模式、嵌套佈局、文本自動高度。
- 組件與變體：從選區創建組件、插入實例、覆蓋文字/填充/可見性、切換變體或組件、編輯主組件、分離實例。
- 本地樣式庫，管理填充、文字、效果樣式，支持實時傳播與分離。
- 漸變與圖像填充、投影/內陰影、圖層模糊、背景模糊。
- 可上傳自己的字體（woff2/woff/ttf/otf），通過
@font-face註冊，文字工具使用並嵌入導出文件。 - 非破壞式圖片裁剪。
- 單用戶線程評論，可釘在某個節點或頁面位置，智能體通過
canvas_comment讀取和回覆。 - SVG 與 PNG 導出，可選選區、frame 或整頁，保存在
canvas/exports/，可選擇性插入 composer。 - 檢查器中可摺疊的「代碼」區塊顯示所選圖層解析後的 CSS（佈局、填充/漸變、圓角、描邊、陰影、排版），支持一鍵複製；這是 CSS 交付，和本地樣式複用是兩套機制。
快捷鍵沿用 Figma 風格，README 給出了完整清單，截取幾項常見操作：
V/F/R/O/L/T/H/C/I — 移動/frame/矩形/橢圓/直線/文字/手型/評論/圖片
Space 拖拽 — 平移 鼠標滾輪 — 縮放
1 / 2 — 適應視圖 / 適應選區
Shift+1/Shift+2/Shift+0 — 適應視圖 / 適應選區 / 100%
Cmd/Ctrl+C/X/V/D — 複製/剪切/粘貼/複製副本
Cmd/Ctrl+G / Shift+Cmd+G — 編組/取消編組
Shift+A — 爲選中 frame/group 添加自動佈局
方向鍵層級調整、Alt 懸停測量間距等也有對應快捷鍵，細節見 README。
設計系統與 iOS 模板¶
插件內置一套默認設計系統：一般 UI 用 Material Design 3 tokens，iOS 用 Apple HIG 的度量與色彩。README 說明，用戶未指定系統時智能體遵循這套默認值，細節文檔在 canvas/DESIGN.md。同一節還給了一組大廠系統備忘：Material Design 3、Apple HIG、Fluent 2、Carbon、Spectrum、Lightning、Polaris、Primer、Atlassian、Base Web，以及中文產品常用的 Ant Design / Arco / Semi / TDesign。
模板方面，左側欄「模板」面板提供內置 iOS 移動頁面模板：Settings、Form、List、Detail 四種頁面，外加標準狀態欄（深色/淺色圖標）、導航欄和標籤欄。設備尺寸默認 iPhone 16，393×852；可選 iPhone 15，390×844。模板可通過面板或 canvas_template 工具插入：
canvas_template action="foundation"
# 返回 device（iPhone 16 默認 / iPhone 15 legacy）、
# Neutral/Minimal/Soft/Compact 預設與解析後的 tokens
canvas_template { action: "list" | "insert", template: "ios-screen" }
canvas_template { action: "styles", system: "material3" | "ios" }
# 把系統加載爲本地樣式庫，填充/文字/效果樣式出現在 Styles 面板，
# 可應用於圖層；加載不會自動改寫已有圖層
iOS 模板採用 Apple HIG 藍，編輯器界面則用 DeepSeek 藍 #4D6BFE 作爲強調色。
與智能體協作的 Agent 工具¶
這是插件的核心思路：畫布對用戶是編輯器，對智能體是一組確定性工具。README 聲明的 Agent 工具共七個：
canvas_read— 讀取畫布，用戶當前選區是輸出的一部分。canvas_write/canvas_edit— 寫入或修改文檔。canvas_comment— 讀寫評論。canvas_template— 插入模板、返回 tokens、加載樣式系統。canvas_audit— 確定性設計審計，檢查截圖邊界、對比度、觸控目標、裁切、缺失引用、空 frame，並顯式列出跳過的檢查項。canvas_image— 圖片能力入口，probe/generate/import三個動作對應三級生成鏈路：GPT 模型調原生圖像生成；否則調用帶image_generation的本地 Codex CLI；否則由用戶導入圖片。
選區進 composer 的機制也按這個思路設計。插入後 composer 裏是一段 markdown 鏈接：
[畫布選區：Title](dsh-canvas://main?node=title)
發給智能體後，聊天會把這段文本替換成可點擊的畫布 chip，點擊即打開或聚焦畫布標籤頁、加載該文檔、選中該節點並縮放到該位置；chip 上方還會出現「在畫布中定位：Title」這樣的緊湊定位條。README 強調節點詳情不再複製進草稿，智能體用 canvas_read 自行讀取。文檔格式標識符保留爲 dsh.canvas@1。
運行時還帶一個 canvas-ui-design skill，README 註明它改編自作者的 BD Flutter Dev UI 設計 skill 套件（來源與改編說明見倉庫內 skills/canvas-ui-design/SOURCE.md），用於驅動直接生成頁面/組件、參考稿重建、重構、設計評審與交付。
技術實現方面，源碼按 src/{shared,host,client} 組織，構建產物是 client/client.js 與 dist/host/main.js。智能體的寫入通過 SSE 在一秒內出現在已打開的畫布中，附帶輪詢降級。另有 path 矢量節點，支持 SVG path d、viewBox、fill/stroke、純色/漸變填充與 SVG 導出，工具欄可導入基本 SVG path；不支持鋼筆和錨點編輯。v1 是單頁文檔，格式裏預留了頁面列表以保持前向兼容，但頁面管理和頁面背景在 UI 中隱藏。
安裝與啓用¶
按「安裝命令必須來自資料原文」的要求說明：README 尾部（安裝/安裝路徑章節）在 GitHub、jsDelivr、鏡像等渠道抓取時均被截斷，skillhub.cn 目錄頁沒有返回正文，因此本文不給出任何拼接出來的命令。README 只明確提到 installation paths 保留技術標識符，package name 是 @local/dsh-canvas。
建議的做法是先讀倉庫源碼與 README 完整內容，確認安裝方式與當前 dsh 版本的兼容性後再安裝。README 給出的入口方式只有一處：
右側邊欄引導卡片「Drafi」 → Drafi 標籤頁
適用場景與注意¶
適合這幾類人：在 DSH 裏做 UI 原型、需要可視化評審而不是看純文本的智能體開發者；用內置 iOS 模板快速產出移動端低保真稿的人；想把設計交付物（SVG/PNG/CSS）留在對話流裏作爲中間產物的人。
注意事項：
- 插件以當前 dsh 進程權限運行。安裝前應先通讀源碼；許可證爲 MIT，但仍建議自行覈對倉庫最新許可與第三方依賴聲明。
- 倉庫剛創建（2026-11-05），當前 0 star、1 fork，生態驗證有限，功能以 README 聲明爲準。
- 圖像生成依賴宿主環境：GPT 模型走原生圖像生成，其他情況需要本地 Codex CLI 且開啓
image_generation，否則只能導入圖片。 - 矢量能力有限：沒有鋼筆和錨點編輯，矢量只支持基礎 SVG path。
- 語義標註精度取決於智能體對
canvas_read的讀取效果，canvas_audit只能做規則化的確定性檢查。
結尾¶
dsh-canvas 把「畫布 + AI UI 設計 + 確定性審計 + 圖像生成」壓進 DSH 的右側邊欄，選區到 composer 的鏈路設計得比較乾淨，適合需要在對話裏保留可視化產物的團隊。目錄頁：https://www.skillhub.cn/plugins/aiShuiJiaoDeXioShou/dsh-canvas ；源碼：https://github.com/aiShuiJiaoDeXioShou/dsh-canvas 。
