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