Claude Code工作流长帖约 4 分钟

用HTML稿替代Figma

Ship HTML mocks not Figma

要点

  1. 用 Claude Code 出可运行 HTML 原型,CSS 只用生产设计令牌,工程师可直接拷。
  2. 设计是否定稿用 GitHub 合并判断,何时开工另用路线图表,不要混成一次 Git 操作。
  3. 已落地的原型不再追生产代码,只同步令牌和规则,避免双份文档互相骗人和模型。
  4. 把截图、HTML 和规则交给 Codex 做通过或修复评审,构想阶段用草稿 PR 标明不实现。

原帖开头

サイトのデザインの開発、いろいろな試行錯誤をしてたんですが、結局は FigmaやPencilの代わりに、Claude Codeで「動くHTMLモック」を作ってしまう、というので落ち着きました。 CSSは本番と同じデザイントークンだけで書くので、エンジニアはほぼコピペで実装できる。デザインツールとAIをかけ合わせると、細かい文字の変更とかに時間がかかるし、実装時にも画像から起こさないといけなかったりしてコストが高いんですよね。 んで、管理のコツは「デザインが確定したか」と「いつ実装するか」を別の道具で管理すること。 確定したか → GitHubが管