用 ai 写前端代码如何去保证和原型图的一致性和还原性？

回复 群友 7309： 先要分清你要的“一致”是像素级一致，还是设计意图一致。这两种目标对应的做法完全不同：像素级一致基本是伪需求；设计意图一致是能工程化的。 一、先定基准。原型图本身经常不完整，交互态、空态、加载态、溢出都没有。只按静态图写出的 UI，在真实数据下必然会走形。所以第一步是把图转成明确的规格：尺寸单位、间距序列、色彩 token、字号层级、断点。如果 Figma 有设计 token，就导出成 JSON 当唯一真相，代码里只引用 token，不写裸值。这一件事就能消掉大部分“看着不像”。 二、别让 AI 从截图猜。截图的损失比想象中大：抗锯齿、压缩噪声、1px 边框在缩放后消失，模型只能靠猜测补齐。可行的做法有两种： 一是用 Figma 的 MCP 或 API 拿到节点树，包括 layout、autolayout、padding、字号、颜色，直接生成结构化描述给模型，比丢一张图强得多； 二是如果只能给图，就同时给一份你已经核对过的结构化规格，作为硬性约束，模型只负责把它翻译成组件代码。 三、锁定布局机制，不要依赖视觉调整。还原度差的常见原因是布局判断错误，而不是样式值写错。因此要在提示里明确要求：用 flex/grid 布局，不要用绝对定位；间距走 gap 和 padding，不要靠 margin 补偿；尺寸用相对单位和断点，不要固定数值。样式统一走一条 CSS 路径，不要在 inline、module、tailwind 之间混用；否则 AI 会随手混搭，你改起来失控。 四、组件拆分要提前定。如果你让它整页生成，它就会写出一大坨；你要改一处的对齐，结果牵连全局。比较有效的方法是先让它产出组件树和 props 规格，你审一遍，再逐个组件生成。组件边界对了，还原问题就降级成局部问题。 五、建立可验证的回归机制，这是最关键的一步。人眼看不像太主观，必须有量化手段： 截图对比：用 Playwright 在固定视口、固定数据、固定字体下截图，和设计稿导出图做像素差或结构 diff。Playwright 自带 toHaveScreenshot，阈值可调，跑 CI 时能直接报出哪块变了； 视觉 diff 只看差集，不看整体分数，因为大图上的整体百分比会把真问题盖掉； 数据要固定，用 mock 填充极值，包括长文本、空数组、超长标题、中文英文混排。中文尤其要测，行高和字重很容易偏。 字体和图标必须显式引入并固定版本，否则本机看起来对，别人机器上就会崩。 六、交互态要有清单。hover、focus、active、disabled、loading、error、empty、overflow 这些状态设计图常常不给，但它们是“还原度”被吐槽的主要来源。让 AI 先列状态矩阵，再补代码，比让它自己脑补强。 七、验收流程倒过来。不要等写完再看像不像，而要先用图生成一份规格 diff 清单，再按清单写代码，最后用截图回归确认收敛。每次迭代只修 diff 里的具体条目，避免“整体再调调”这种含糊指令，那会让模型反复重写。 一句话：把原型图转成 token 和结构化规格，把布局约束写成硬性规则，把验收变成截图回归测试。做到这三点，AI 写前端的还原度就能从“看运气”变成“可收敛”。