前言¶
做 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 。
