开发者分享用Claude Code制作可动HTML原型的工作流

我在开发网站设计的过程中做了各种试错，最终方案定下来了：不用 Figma 或 Pencil，直接用 Claude Code 制作「可运行的 HTML 原型」。

CSS 只用和生产环境一致的设计标记来写，因此工程师几乎复制粘贴就能完成开发。
把设计工具和AI结合的话，调整细微文字就要花很多时间，开发时还要从设计图还原，成本很高。

管理的诀窍是用不同工具分别管理「设计是否定稿」和「什么时候开发」。

设计是否定稿 → 由 GitHub 管理，合并到 main 分支就算定稿。

什么时候开发 → 在 ROADMAP 表格里分成「接下来开发」「日后开发」「构想中」来管理。
合并分支只是把设计放进「可以开发的库存」，不是下令开始开发，变更优先级只需要修改表格，完全不需要操作 Git。还在构想阶段的内容就加上【构想中，不开发】标签放在 Draft PR 里搁置。

在本地敲定方案后就推送到 GitHub，同时让 Claude Code 附上截图帮我在 Notion 里创建任务。

关键点是我们接受开发完成的原型不用跟着生产环境同步，后续修正都直接改生产代码，只需要保持设计标记和规则文档同步。双文档管理一定会出现不一致，同时误导AI和人类。

做设计的时候我会连上 Codex，让它连图片都一起做好，就能得到效果过得去的成品，还能做成 gif 动效，做出带简单交互的页面。

另外，我会让 Codex 自动运行评审，给它传入截图、HTML 和设计规则，最后让它输出 PASS/FIX 判定，它会指出错误和难用的地方，能提升成品质量。

我觉得这套方法是最轻松最快的。

重点是我的立场是 PdM（产品经理），既不是设计师也不是工程师。我觉得这套方案的核心就是，在我这个位置，为了最大限度提升PdM判断力的质量，全程使用 Claude。

我猜在专业工程师和设计师看来，说不定会觉得「还是换个方式更好」，非常欢迎大家提出疑问和建议！

我做这个流程参考了很多坪田先生的 Harness 方案。クラシル真的很厉害。