guchang/draw2code

Name: guchang/draw2code
Author: guchang

Plugin插件 Native原生 ⭐ 4 Apache-2.0 Dev Workflow开发与代码工作流 Data & Analysis数据与分析

面向 DSH、Codex 与其他 MCP Agent 的人机协作原型工具：先通过结构化提问把产品需求想清楚，再让 Agent 和用户在同一张 Excalidraw 画板上共同修改低保真原型，最后基于已经确认的画板生成并验收前端页面。

catalog descriptioncatalog 简介 / catalog description：Human-AI collaborative prototyping for DeepSeek Harness.

Project Overview项目介绍

Edited by Zhiwei Agent (zhiwei)由知微Agent(zhiwei)编辑

Draw2Code is a human-AI collaborative prototyping tool that works across multiple agent platforms including DSH and Codex, and can also integrate with other MCP-compatible agents. To install it on DSH, you first need to install the dsh-better-sidebar dependency via the DSH CLI, then install Draw2Code from the GitHub repository, then restart your dsh web process to activate the plugin. If you are installing Draw2Code for the first time on a new DSH web profile, you may need to add an allowBuilds entry for node-pty to your pnpm-workspace.yaml to complete the initial runtime build. After installation, you can access the Draw2Code canvas from the DSH better sidebar, and start a new prototyping workflow directly from your agent conversation.

The tool splits the prototyping workflow into four clear stages: requirement clarification, prototype opening and demonstration, collaborative prototype updates, and final front-end generation and acceptance. Each stage has quality gates to prevent the AI from jumping straight from a vague requirement to writing code, which avoids common issues like unclear scope, unintended overwrites of user edits, and missing acceptance criteria. Users can open the canvas at any time directly via a local URL, make manual edits to the prototype, and then hand it back to the AI for further processing. All work is saved locally in the user’s registered workspace, and never uploaded to external services.

Draw2Code requires Node.js 22 or newer to run, and ships pre-built assets so regular users do not need to build it from source. The tool comes with 153 built-in prototyping assets, so no additional asset library downloads are required after installation. It is released under the open-source Apache-2.0 license, with built-in third-party Excalidraw assets licensed under the upstream MIT license. Users can adjust size limits for elements and canvas data via environment variables if they need to work with very large prototypes. All user data is stored locally on the user’s machine, with strict security boundaries to prevent unauthorized access to files outside the registered workspace.

Draw2Code（画码）是一款面向多 Agent 平台的人机协作原型开发工具，支持 DSH、Codex 等主流 MCP Agent 平台，核心能力是帮助用户和 AI 分阶段梳理产品需求，共创可编辑的低保真原型，最终基于确认后的原型生成并验收符合原型约定的前端页面。工具内置 153 个产品原型素材，安装后无需额外下载素材库，自带完整 Excalidraw 画布编辑能力。

工具将完整协作流程拆分为需求澄清、原型打开展示、原型共同更新、前端生成验收四个明确阶段，每个阶段都设置了清晰的质量门禁，避免 AI 直接从模糊需求跳到写代码，解决了需求范围不清、修改冲突等常见问题。用户可直接在本地访问画板，手工调整原型后再交由 AI 继续处理，有效保障人机协作效率。

本工具需要 Node.js 22 或更高版本，在 DSH 中安装需要先安装 dsh-better-sidebar 依赖，支持独立工作区数据存储，所有原型简报、画板内容和生成产物都保存在用户本地工作区，不会上传到任何外部服务。本工具采用 Apache-2.0 开源协议，内置第三方素材遵循上游 MIT 协议。

View on GitHub在 GitHub 查看

Send to your DSH发给你的 DSH 安装

请帮我安装这个 DSH 插件。安装前先完成【兼容性检查 + 安全性检查】，检查通过再动手。

插件：draw2code（guchang/draw2code）
仓库：https://github.com/guchang/draw2code
本站详情页：https://www.yhbd.top/plugins/guchang-draw2code/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证 Apache-2.0 · ⭐ 4 · 最近提交 2026-09-07 · 主语言 HTML

按下面顺序执行，每步先把结论告诉我，再进入下一步：

【1 兼容性检查】
① 我这边：DSH 版本、Node 版本、操作系统、当前 profile（web / desktop）。
② 读它的 README、package.json、插件 manifest，列出它要求的 DSH 版本 / Node 版本 / 操作系统 / 外部依赖 / 需要另外先装的运行时。
③ 逐条比对，结论只写「满足 / 不满足 / 未知」三种；不满足的给出可行替代方案。
④ 检查是否和我已装的插件冲突：命令名重复、skill / tool 重名、端口占用、重复注册的 MCP server。

【2 安全性检查】
① 仓库可信度：和上面「本站登记」是否一致；star / fork 数、创建时间、最近提交，是否归档或长期停更。
② 安装脚本：逐行看 package.json 的 preinstall / install / postinstall，以及 install.sh、setup.ps1 之类脚本。出现 curl|bash、下载后直接执行、混淆代码、访问与插件功能无关的域名，立刻停下来告诉我，不要继续装。
③ 依赖：列出新增依赖，标出无人维护、或与知名包拼写近似的可疑包（typosquatting）。
④ 权限与副作用：它会读写哪些目录、访问哪些域名、需要哪些 DSH 权限（filesystem / network / shell / clipboard 等），以及怎么卸载和回滚。
⑤ 如果它要求 sudo / 管理员权限，或权限明显超出功能所需，先停下来问我。

【3 安装】
上面两步没有「不满足」和「高危项」时才执行；用官方推荐方式安装，不要自行提权。

【4 汇报】
用表格输出：检查项 / 结论 / 依据 / 是否需要我决策。拿不准的一律写「未知」并说明要我怎么确认——不要猜，也不要替我决定。

Send this message to DSH in your current session: it verifies compatibility and security first (answering met / not met / unknown item by item) and only installs once everything checks out — it will stop and ask you if it finds a high-risk item. The box scrolls; the copy is the full prompt. CLI install commands may not be accurate across systems, so DSH is the safer route.把上面这条消息直接发给当前会话里的 DSH：它会先核对兼容性与安全性（逐条给「满足 / 不满足 / 未知」），确认没问题再安装，有高危项会停下来问你。框内可滚动，复制到的是完整提示词；安装命令不一定准确，发给 DSH 更稳。

Pre-install check安装前体检Compatibility · Security兼容性 · 安全性 1 warning1 项注意

Only 4 stars - very few users, little community feedback星标只有 4，几乎没人在用，遇到问题缺少社区反馈

DSH walks through these 9 checksDSH 会逐条核对这 9 项

Compatibility兼容性

DSH, Node, OS and profile requirementsDSH 版本 / Node 版本 / 操作系统 / profile 是否满足要求
External dependencies and runtimes (Electron / Python / Docker, ...)外部依赖与运行时（Electron / Python / Docker 等）是否齐备
Conflicts with installed plugins: command names, skill / tool names, ports, duplicate MCP registration与已装插件是否冲突：命令名、skill / tool 重名、端口占用、重复 MCP 注册

Security安全性

Repo matches the facts registered here; archived or abandoned?仓库是否与页面登记一致，是否归档或长期停更
Safety of preinstall / install / postinstall and install.sh / setup.ps1preinstall / install / postinstall 与 install.sh、setup.ps1 是否安全
curl|bash, download-then-execute, obfuscation, unrelated domains → stop immediatelycurl|bash、下载即执行、混淆代码、无关域名 → 立刻停止
Typosquatting or unmaintained packages among the new dependencies新增依赖里有没有 typosquatting 或无人维护的包
Requested permissions vs. what the feature actually needs申请了哪些权限、是否超出功能所需（filesystem / network / shell / clipboard）
Any sudo / admin requirement, plus uninstall and rollback是否要求 sudo / 管理员权限，以及卸载与回滚方式

Anything uncertain must be marked unknown with a note on how to confirm it. This site's signal screen is a static snapshot, not a security audit.拿不准的必须标「未知」并说明要我怎么确认。本站的信号筛查是静态快照，不能替代安全审计。

Or use CLI install (for developers)或使用命令行安装（适合开发者）

CLI Install命令行安装

dsh plugin --profile web add dsh-better-sidebar

把 guchang/draw2code 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

13.3 KB · 缓存于 2026-09-03 20:17:06 · 13.3 KB

Draw2Code · 画码

中文 | English

Draw2Code 使用一个共享 Core 和按需启动的本地 daemon。DSH 与 Codex 不互相依赖，但同时运行时会打开同一份工作区数据。

为什么需要 Draw2Code

Vibe Coding 很容易从一句模糊需求直接跳到代码，结果往往是页面范围没想清楚、用户手工删除的内容被 Agent 恢复，或者 Agent 声称已经画完但用户看不到结果。Draw2Code 把协作过程拆成四个边界明确的阶段：

Create：澄清产品
- 当用户提出一个新产品想法时，draw2code_create 先提取已经明确的事实，再由 Agent 围绕场景、差异化、核心闭环和关键风险提出产品专属问题。
- 每题先给产品判断，再提供有真实取舍的可点击选项；不会固定重复询问模块和页面，信息足够即停止，最多 10 题。可跳过单题、直接整理简报，也可在 ready 后只调整受影响的产品决策。
- 工具把结构化 PrototypeBrief 确定性渲染成包含逐页结构、真实 mock 数据、交互关系和验收方式的完整项目简报；最后用一张页面范围确认卡明确列出将绘制的页面，用户确认前不会创建画板。
- 视觉品牌、颜色和正式前端实现仍留到生成阶段。
Open & Demonstrate：用户画给 Agent 看
- 用户可以直接访问固定本机入口 http://127.0.0.1:64775/；画码会从本机已登记工作区恢复，无需先从 Codex 建立连接。用户说“打开画码，我自己画一下”时，由独立的 $draw2code-open 快速入口只调用一次 draw2code_open，不加载 Create、Update、Generate、代表页复核或质量门禁；工具内部的短期定向连接只用于把当前任务的 workspace/board 精确绑定到当前标签页，随后回到可收藏的干净根地址。
- 用户说“我画好了”后，Agent 先用 draw2code_read 读取并复述页面、组件和交互关系，再按用户指令继续修改或生成。
- URL 就绪、daemon 启动和画布真正可见是三个不同状态；只有侧边栏实际显示后才报告“已经打开”。
Update：共同画原型
- draw2code_update action=write 把语义化低保真页面写入 Excalidraw，用户可以直接拖动、删除、改字或添加便签；action=review 使用写入返回的 reviewToken 记录可见复核，不改画板 revision，也不发布新的 reveal。
- Agent 更新前先读取当前画板索引；draw2code_read 默认只返回页面、关系、分层容量和当前 review/pending 状态，不把整板元素塞进上下文。需要内容时再按 pageIds、elementIds、区域或近期 revision 增量读取。已有 3 页以上画板的独立小改动不会被旧的首次代表页门禁拦截。
- Create 会逐页给出核心任务、首屏信息、主操作和语义组件蓝图；3 个及以上页面返回结构化 drawingPlan，强制先生成代表页，复核通过后才生成其余页面。若 Agent 仍误提前提交其余页面，Update 会返回 pendingUpdateId 暂存该批 ops，复核后以 action=commit_pending 直接提交，避免整批 JSON 被丢弃和重新生成。
- 单次 ops 默认限制为 500 项或 512 KiB，超出时在布局检查前返回 reduce_batch_size；这与完整画板容量分开治理。画板不再设置正常业务容量：默认 32 MiB 仅进入 large 提示，256 MiB 只作为异常输入保险丝，且可配置提高；元素异常保护同步提高到 50,000。磁盘缩进、内联资源、元素数与 gzip checkpoint / delta 历史分别报告。真正触发保险丝时返回 archive_or_split_board，不会误导 Agent 反复缩小同一批次。
Generate：生成并验收前端
- draw2code_generate 开始前先用普通对话询问是否有参考风格图片；随后读取最新画板，让用户多选页面范围，并结合参考图或产品语义智能推荐整体视觉方向。
- 原型不完整时先回画板修复；不会在 HTML 中偷偷补出未经确认的产品功能。
- 原型定义产品事实，前端使用 Grid/Flex、内容流和响应式约束重新排版，不复制 Excalidraw 绝对坐标。
- 页面生成后必须逐页截图，检查控制台、DOM、布局和核心流程；工具会读取 workspace 内的截图/DOM 快照、核对 SHA-256 与视口尺寸，并直接比较未选页面块哈希，证据门禁通过后才会报告完成。

Showing the opening section of the README — the full document lives in the repository以上为 README 开头摘要，完整文档在仓库内 · View the full README on GitHub →在 GitHub 查看完整 README →

渲染基于仓库 guchang/draw2code 的 README.md。在 GitHub 查看原文 →