用 Claude 还原设计稿 UI：还原度、Token 成本与实操流程

用 AI 照着设计图写页面已经不算新鲜事，但实际做下来的人会发现，不同模型、不同输入方式之间的差距大得离谱：同一个页面，有人能一次性还原到九成以上，有人改到第五轮还是"看着像但就是不对"。

最近一轮讨论里出现了两个声音。一边是惊喜：用较新的 Claude 模型读设计图生成 UI，一致度能到 95% 左右，而此前用 GPT 系列还原 Android 页面效果很差，上一代 Opus 大概只到 70~80%。另一边是心疼：高倍订阅跑一个重构任务，周额度就用掉了两成。还原度和成本，是这类工作流绕不开的两端。

影响还原度的三个变量

输入是纯截图，还是带结构的设计数据

这是最容易被忽略、却影响最大的一环。Figma、蓝湖这类工具除了截图，还能拿到图层树、每个节点的宽高、圆角、颜色、阴影、字号字重、内外边距、约束关系。纯截图时模型只能靠视觉估算，间距差 2~4px、字号错一档、圆角少 2px，单看都不明显，累积起来就是"整体气质不对"。

如果手上有结构化数据，尽量喂给模型；只有截图时，也建议把关键间距、字号手写成一份简单的标注文本一起给它，比让它自己猜划算得多。

模型本身的视觉理解与代码组织能力

差异确实存在，但要谨慎对待"95% 对 70%"这类数字：它是单页面、单次任务、肉眼比对得出的结论，样本量很小。同一个模型换一张图、换一种组件风格，表现可能就掉下来。稳妥的做法是拿两三个典型页面——一个列表页、一个表单页、一个带自定义绘制或复杂层叠的页面——用同一份输入跑一遍，再决定主力模型。模型迭代很快，具体能力和可用范围请以官方最新说明和你自己的测试为准。

任务粒度与上下文长度

整页一次性丢进去，模型要同时兼顾布局、组件拆分、样式、素材、响应式，很容易顾此失彼。真正稳定的做法是拆：先定骨架，再填样式，最后逐块修。

一套可复用的还原流程

第 1 步：素材先落地

图标、插画、字体、图片资源不要指望模型"画"出来。先从设计工具导出 SVG 和切图，放进项目目录，再让模型引用。这一步省掉，后面一定会返工。

第 2 步：整理输入

把当前区块的截图、尺寸标注、涉及的组件说明放在一起。不要给整份设计稿，只给正在做的那一块。

第 3 步：先要结构，不要样式

第一轮只让模型输出组件树和 DOM 骨架，明确要求"先不要写样式"。结构确认后再进行第二轮，能大幅减少"样式写完发现层级错了要全部重来"的情况。

第 4 步：分块填充样式

按区块逐个还原。每块的提示词可以固定成模板：

参考图：xxx-block.png
目标文件：src/components/XxxBlock.tsx
要求：
1. 只修改这个文件，不要动其他文件
2. 尺寸、间距、字号以标注为准，缺少标注时按 8px 栅格取整
3. 图标使用 assets/icons/ 下已有文件，不要内联手写 SVG
4. 完成后列出你不确定的 3 个细节，不要自行发挥

最后一条特别有用——让模型主动暴露不确定项，比它默默猜一个值再让你去找要好。

第 5 步：截图比对，逐轮收敛

跑起来截图，和设计图并排看，或者做像素级比对。逐块检查清单：

• 容器宽高与内外边距是否命中标注
• 字号、行高、字重、字间距
• 圆角、描边、阴影的方向与模糊半径
• 图标尺寸与基线对齐
• 长文案、空数据、超长标题三种状态的换行表现
• 暗色模式与不同屏幕宽度下的断点

第 6 步：把规则固化下来

项目里放一份约定文件（比如 AGENTS.md 或团队规范文档），写清楚目录结构、样式方案、栅格规则、命名习惯。模型每次读一遍就能少问一堆问题，也少烧一堆 token。

Token 为什么烧得快，怎么省

这类任务的开销集中在三处：整页截图和设计数据反复进上下文、多轮迭代重复读写同一个文件、重构类任务需要读大量存量代码。可行的控制手段：

• 缩小上下文：一次只给当前区块的图和它对应的那一两个文件
• 只回传改动：用编辑器的 diff 或局部替换，而不是每轮重写整个文件
• 先规划后执行：让模型先输出改动计划，确认后再动手，避免它跑偏后大范围回滚
• 分段落盘：长任务拆成几个阶段，每阶段结束提交一次，中断了也不用从头再来
• 选对推理档位：复杂页面用高推理档位，改个间距就别开高档位。各工具的档位参数命名不同，按官方文档来调

关于额度，还有一点值得提醒：多人拼车、买卖或共享账号通常违反服务条款，存在封号、会话与代码泄露的风险，出了问题也没法申诉。需要更强算力时，走官方订阅升级或按量计费的 API 是更稳妥的选择。

几个需要自己验证的问题

矢量图能不能还原？ 模型能生成 SVG，但复杂图标和插画容易走形。建议从设计工具直接导出，让模型只负责引用和排版，不要让它"重画"。

不同设计工具差别大吗？ 差别不小。Figma 的 Dev Mode、各家标注插件、蓝湖导出的信息粒度都不同，同一个模型在不同数据源上的表现可能差一截，需要实测。

手工流水线还有必要吗？ 有。有人自己写脚本，先把页面素材和结构信息抓下来、锁定像素、再逐个组件还原，能稳定到九成左右，代价是"跟抽卡一样"，细节稳定性看运气。脚本化流程的优势是可复现、成本可控；直接让模型读图的优势是启动快、适合非标页面。两者不冲突，长期项目更适合前者打底、后者补细节。

任务要连续跑很久怎么办？ 整站重构、多轮截图比对这类任务，最怕本地机器休眠、断网、风扇降频导致会话中断。如果本地设备吃力，可以考虑把这类长任务放到一台长期在线的机器上跑，例如按月租用的新加坡独享远程 Mac，整机在机房、远程连接使用、网络环境稳定，适合长时间挂着跑 Claude Code 这类工具。本地够用就没必要折腾。

小结

• 还原度的第一决定因素是输入质量，结构化设计数据 > 截图加标注 > 纯截图
• 别迷信单次对比得出的百分比，用两三个典型页面自己测
• 先定骨架再填样式，按区块推进，每轮让模型列出不确定项
• 素材从设计工具导出，不要指望模型重画图标
• token 靠缩小上下文、局部改动、分段落盘来省，别靠共享账号
• 模型版本和额度政策变化快，实际操作前以官方最新说明为准