guchang/draw2code

README 摘要

Draw2Code · 画码 中文 English 面向 DeepSeek Harness（DSH） 的人机协作原型插件：先通过结构化提问把产品需求想清楚，再让 Agent 和用户在同一张 Excalidraw 画板上共同修改低保真原型，最后基于已经确认的画板生成并验收前端页面。 Draw2Code 是一个独立插件，只读写当前 DSH 工作区中的 draw2code/ 和 draw2code-pages/ ，不会附带任何演示项目。 为什么需要 Draw2Code Vibe Coding 很容易从一句模糊需求直接跳到代码，结果往往是页面范围没想清楚、用户手工删除的内容被 Agent 恢复，或者 Agent 声称已经画完但用户看不到结果。Draw2Code 把协作过程拆成三个边界明确的阶段： 1. Create：澄清产品 - 当用户提出一个新产品想法时， draw2code create 用可点击选项逐步澄清目标端、核心用户、核心目标、主流程、首版模块和核心页面。 - 已经明确的信息不会重复询问；视觉品牌、颜色和正式前端实现留到生成阶段。 - 用户确认最终 brief 之前不会创建画板。 2. Update：共同画原型 - draw2code update 把语义化低保真页面写入 Excalidraw，用户可以直接拖动、删除、改字或添加便签。 - Agent 更新前读取当前画板；冲突、用户删除、手工修改和版本基线都有保护。 - 更新经过落盘回读验证后，DSH 会自动打开画码并切换到目标画板。 3. Generate：生成并验收前端 - draw2code generate 读取最新画板，让用户选择页面范围和整体视觉方向。 - 原型不完整时先回画板修复；不会在 HTML 中偷偷补出未经确认的产品功能。 - 页面生成后必须打开真实预览并走通核心流程，只有验收完成才会报告完成。 主要能力 - DSH 右侧 dsh-better-sidebar 中的完整 Excalidraw 画布； - 多画板创建、切换、删除、历史版本和导出； - Agent 工具： draw2code list 、 draw2code read 、 draw2code create 、 draw2code update 、 draw2code generate ； - 用户手工编辑与 Agent 更新之间的三方合并和冲突确认； - 成功更新后自动展开画码、激活目标画板，同一事件不会反复抢焦点； - 原型质量门禁：文字高度、frame 边界、底部导航、绑定文字、mock 数据和页面可读性； - 内置 153 个产品原型素材，安装后无需单独下载素材库； - Create 和 Generate 都支持可恢复的结构化流程，会话中断后不会重新询问已完成选择； - 画板、项目 brief、生成设置和前端产物都保…

分类