单屏 Claude 写得很好:5 屏开始漂 —— 我做了一套 Figma+PRD 到 React 的 Harness

TL;DR

我让 Claude / Codex 看 Figma + 一段 PRD，要它写出 5-10 屏可跑的 React 页面。单屏输出很好，多屏开始漂，而且漂的模式相当一致。我花了大概 3 个月做了一套 Harness：14 道 gate × 自动 retry × handoff JSON，把多屏漂移压住。10 个 demo / 54 屏 / 4 个完全不同业务域，build 通过率 100%。

代码：https://github.com/JiuwenDragon/harness-mini（MIT）

---

先说一个反直觉的开场

Twitter 上所有「Figma + AI 一键生成」demo，都是单屏。这不是骗人——Claude 看图能力是真好。我自己反复试过：Figma 截图 + 一段 PRD 给 Claude，30 秒就能给一个 70-80 分的页面。

这件事在 5 屏以上就崩了。我量化了 4 个具体的漂移模式。

漂移模式 1：文案不一致

屏 1	屏 2	屏 3
用户名：张三	用户名：李四	用户名：测试用户

LLM 在跨次生成时不会带「世界状态」，每屏都重新发挥。

漂移模式 2：跨页路由死链

// transfer 屏生成的：
() => router.push("/banking/home")}>  // ← /banking
// home 屏实际路径：
app/bank/home/page.tsx  // ← /bank

单屏 review 看不出来，串起来就是死链。

漂移模式 3：共享 state 漂移

zustand store 设了 5 个 key（user / balance / lastTx / recent / selected）。LLM 写到第 4 屏忘了 2-3 个 key，自己又新发明 2 个名字。同一个业务概念，3 套变量。

漂移模式 4：「说完成了」的幻觉

亲身例子：Codex 告诉我「10 个页面全部生成完毕，可以预览」。一跑 npm run build：3 屏 build 红，2 屏是空 div，1 屏 import 路径错。这条最痛——没有外部 check，「说完成了」不等于真完成了。

---

Harness 怎么治这 4 类漂移

整体数据流是：Figma + PRD → intake（拆 fixture）→ contract（冻结）→ generate（codex / claude / gemini 任一）→ 14 道 gate（语义 / PRD / spec / UI 卫生 / build / 跨页）→ visual review（人审）→ web-preview（可点可跳）。

每道 gate 只检查一件事。原因是 Constraint Decay 论文（arXiv 2605.06445）：一次性塞 10+ 个约束，LLM 性能掉 30 个百分点。

Retry 不是「让 LLM 再试一次」——是把 gate 的结构化错误报告喂回去，Reflexion 风格（arXiv 2303.11366）。

Handoff：每个阶段产出 status JSON 状态包，下次接手的人或 LLM session 直接吃 JSON，不用读对话历史。

为什么是 14 道 gate，而不是一个大 prompt

• Constraint Decay（arXiv 2605.06445）：一次性约束多了直接掉点
• • Lost in the Middle（arXiv 2307.03172）：LLM 对长 context 中间几乎失明，关键约束塞中间等于没塞所以拆 14 道，每道不超过 3 个约束。

泛化证据——4 domain ablation

Domain	主色	屏数	Build 通过
Banking（金融）	深红	10	10/10
Fitness（健身）	橙	3	3/3
Travel（旅行）	蓝	3	3/3
Shoes（鞋类电商）	黑	3	3/3

同一套 14 gate，Codex / Claude / Gemini 三个 provider 通过 contract 切换。不需要为每个业务域调 prompt。

为什么没直接用 Builder.io / Locofy / v0 / Figma Make

工具	长处	我用不上的原因
Builder.io Visual Copilot	2M+ 训练数据 + Mitosis IR	SaaS，无 PRD 维度，无审计
Locofy LDM	Large Design Model 设计先验	SaaS，要求严格 Auto Layout
Figma Make	EPAM 测评 fidelity 最高	无公开 API，只能浏览器人工用
v0（Vercel）	shadcn/Next.js 集成好	Figma link 会降级成截图（官方文档承认）

这些都很适合「单个开发者写漂亮 demo」。但我要的是多屏一致性 + PRD 闭环 + 审计日志 + 本地部署 + provider 切换，这是企业场景的真实诉求。

如果重来，我会做不一样的 3 件事

1. 不要跟 Claude 抢单屏。Claude 看图已经 80 分，Harness 应该围绕它做不好的事（跨页一致 + 「说完成了」）来设计。
2. 1. 更早做确定性 IR。我做过一次（类 Builder.io 的 Mitosis 思路），第一个渲染 bug 就放弃了——是错误决策。Builder.io 整套架构就是围绕 IR 转的。
3. 1. 视觉 diff 自动化。我现在 visual review 还是人审。Design2Code 论文（arXiv 2403.03163）给了 CLIP-score / CW-SSIM / TreeBLEU 几个可微分指标，应该早接进来。

      开源链接

https://github.com/JiuwenDragon/harness-mini

• 14 道 gate 是独立的 Python script，在 scripts 目录下
• • 10 个 demo fixture 全部 codex/claude/gemini trace
• • HE 演化日志：每次改动 → 根因 → 修复 → 预测，87 条
• • 文档：设计理由 / 成熟度图 / 工作流MIT 协议（LICENSE 文件还没加，欢迎 PR）。

引用论文

• Constraint Decay（arXiv 2605.06445）
• • Lost in the Middle（arXiv 2307.03172）
• • Design2Code（arXiv 2403.03163）
• • Reflexion（arXiv 2303.11366）
• • Handoff Debt（arXiv 2606.02875）

---

评论区欢迎讨论。最有帮助的反馈是：你在 >5 屏场景下遇到过其它的漂移模式吗？