dsh-uisketch —— UI Sketch to AI 画板编辑器 × DSH

把 ui-sketch-to-ai（React + Konva 的 UI 草图画板编辑器）完整嵌入 DeepSeek Harness Web 界面：侧栏一键开关，全屏画板浮层，组件拖拽、属性编辑、JSON 导出 全部可用。构建产物已内置在包内，开箱即用，无需额外配置。

特性

• 🎨 完整编辑器：组件面板拖拽、Konva 画布、属性面板、项目名、画布尺寸、背景图上传
• 📋 导出 JSON → 剪贴板：布局结构 + 标注（背景图仅保留存在性标记，不携带 base64）
• 🖥️ 全屏浮层：iframe 同源加载，行为与 vite preview 完全一致
• 🐳 常驻开关：侧栏底部「UI 画板」按钮（窄轨道自动变图标），关闭按钮在浮层右上角

安装

方式 A：npm 发布后安装

dsh plugin --profile web add dsh-uisketch

方式 B：本地开发安装

在仓库根目录执行：

dsh plugin --profile web add link:<本仓库绝对路径>

安装完成后重启 dsh web，浏览器 F5 刷新，侧栏底部出现「UI 画板」按钮。

使用

1. 点击侧栏底部「UI 画板」（窄轨道时是 📐）打开全屏编辑器
2. 从左侧组件面板把组件拖到画布，用右侧属性面板调整
3. 点「导出 JSON → 剪贴板」得到布局描述（可直接喂给 AI）
4. 右上角「✕ 关闭」退出

配置

环境变量	作用
DSH_UISKETCH_DIST	指向本地重新构建的 ui-sketch-to-ai dist/ 目录；缺省使用包内内置产物

重新构建应用后想立即生效，设置 DSH_UISKETCH_DIST=/path/to/ui-sketch-to-ai/dist 并重启 dsh。

卸载

dsh plugin --profile web remove dsh-uisketch

开发

• lib/index.js：host 半区，webServer 路由托管构建产物
• lib/client.js：client 半区（dsh.client 双面包），侧栏开关 + 全屏浮层
• dist/：ui-sketch-to-ai 的构建产物（npm run build 后同步进来再发版）

License

MIT