前言¶

在 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