用AI写前端如何保证与原型图还原度
把原型图转成设计token与结构化规格、把布局机制写成硬性约束、把验收变成截图回归测试，还原度才能从看运气变成可收敛。
要点
- 先分清像素级一致几乎是伪需求，设计意图一致才可工程化；先把图转成单位、间距、色彩token、字号层级、断点的明确规格。
- 不要让模型从截图猜：优先用Figma的MCP或API取节点树给结构化描述，只给图时同时给一份核对过的结构化规格作硬约束。
- 锁定布局机制：用flex/grid不用绝对定位，间距走gap和padding，样式统一一条CSS路径，不要混用inline、module与tailwind。
- 先产出组件树和props规格并审一遍再逐组件生成，组件边界对了还原问题就降级成局部问题。
- 用Playwright在固定视口、字体和mock数据下截图做回归，只看差集不看整体分数，并覆盖中文、长文本、空数组等极值。
- 把hover、focus、loading、error、empty、overflow等状态先列成清单，迭代时只修规格diff里的具体条目。