设计稿转前端代码能不能交给 AI，取决于你喂给它的是「一张图」还是「一套约束」。只给截图，模型只能猜色值和间距，还原度通常在 60% 上下；补上设计系统的 token 、组件库和可运行预览，同一个模型能稳定做到 85% 以上——这不是模型能力的差距，是输入信息量的差距。
为什么设计稿转代码这一环最容易翻车
AI 编程在后端逻辑、脚本、重构上表现稳定，是因为这些任务的验收标准是「能不能跑通」。前端还原不同，它的验收标准是「像不像」，而「像」这件事在纯文本里是丢失的：
- 视觉信息在截图里，不在代码里。模型看不到你渲染后的页面，它就不知道 16px 的间距实际看起来是松还是紧。
- 设计意图无法从像素反推。一个 24px 的圆角，可能是设计系统里的
--radius-md，也可能是随手写的魔数——模型没有依据区分。 - 缺少回归基准。改了一处样式，另外三处跟着错位，没有截图对比就只能靠人眼兜。
所以真正的瓶颈不是「模型不擅长写 CSS 」，而是闭环断在「写完就发，从不回看」。
三条技术路线，按你的起点选
| 路线 | 起点 | 关键动作 | 还原度预期 |
|---|---|---|---|
| 截图直出 | 只有一张 PNG / Figma 截图 | 让模型先抽取色板与字体配对，再出代码 | 60%–70% |
| 设计系统集成 | 已有组件库 / token | 把 token 表与组件清单写进项目规则文件 | 80%–90% |
| 设计稿先行 | 需求还没定型 | 先让 AI 出多版可点击稿，定稿后再写代码 | 85%+（且返工最少） |
Cursor 官方文档把「设计转代码」明确列为浏览器工具的标准用法：分析设计稿、提取颜色与字体样式、生成响应式布局代码，并且强调要「把当前 UI 与设计截图对比，调整间距、颜色和排版」。 Anthropic 的 Cookbook 则给了另一个角度——如果不加引导，模型会收敛到「紫渐变 + 白底 + 三个圆角卡片」的通用审美，需要显式指定字体、配色、动效和背景四个维度才能打破默认值。
先让 AI 输出「色板（4–6 个命名色值）+ 字体配对 + 一句话布局概念 + 一个记忆点元素」，再让它写第一行代码。这一步多花 20 秒，能省掉后面三轮返工。
五步工作流：从截图到可维护代码
- 锁定设计约束。把色值、间距刻度、字号层级、圆角与阴影整理成一张 token 表，存进项目规则文件（如
.cursor/rules/design-system.mdc或CLAUDE.md），让模型每次都读到。 - 让模型先描述再动手。要求它在写代码前先输出色板、字体配对和布局结构。如果它给出的还是紫渐变加圆角卡片，说明你的需求描述不够具体，需要补充目标人群与调性。
- 生成骨架，不生成细节。第一轮只要求布局骨架和响应式断点，不要一次写完所有装饰效果。骨架对了，细节是增量；骨架错了，细节全废。
- 渲染后截图回喂。在浏览器里跑起来，截图，把图贴回对话，指着具体区域说「这一块间距太挤」。图片在这里比文字描述有效得多。
- 固化为规则。这次调对的间距、组件用法，追加回规则文件，下次同类页面直接复用。
需求描述怎么写才不翻车
同样是做一个后台数据表格，两种写法的结果差距极大：
# 差：信息量不足
帮我写一个用户管理表格
# 好：目标 + 布局 + 内容 + 受众
写一个后台用户管理表格。用户是运营同学，需要快速筛人和批量操作。
顶部一行筛选（角色、状态、注册时间），下面是表格，支持多选和批量禁用。
使用项目里已有的 --color-surface / --space-2 / --space-4 token，不要新建按钮组件。
窄屏时筛选区折叠成抽屉，表格横向滚动。要点是把用什么（现有 token 与组件）和不要什么（不要新建按钮、不要紫色渐变）一起说清楚。模型的默认倾向是「自己造一个」，你必须显式禁止。
验收清单：发布前过一遍
- 三个断点（窄屏 / 平板 / 桌面）各截一张图，无横向溢出。
- 所有颜色来自 token，全局搜索硬编码色值应为零命中。
- 焦点态、悬停态、禁用态、空数据态、加载态都存在。
- 键盘可完整操作，关键操作有 ARIA 标签。
- 没有引入新的字体与外部 CDN 资源。
还原度达不到 85% 时的三个排查方向
一、 token 表是否真的被读到了——检查规则文件是否在模型上下文里，而不是躺在仓库根目录没生效。二、组件库是否可用——如果没有现成组件，模型每次都要重新发明按钮，一致性必然崩。三、是否给了参考图——纯文字描述的前端需求，还原度天花板就在 70% 左右，补一张参考站点的截图通常立竿见影。
和其他 AI 编程环节怎么配合
设计稿转代码不是孤立动作。它依赖项目规则文件提供约束，也依赖上下文管理避免把整个组件库塞进对话——这两块可以分别参考 CLAUDE.md 与 AGENTS.md 项目记忆文件怎么写 和 Cursor @ 引用的上下文控制实战。另外，AI 生成的前端代码同样会幻觉出不存在的 API 与属性，验收阶段建议套用 AI 编程幻觉的四类高频场景与验证清单。
没有设计稿，只有一句需求，能让 AI 直接出页面吗？
可以，但要接受它是「草稿」而不是「还原」。正确做法是先让它生成 2–3 个设计方向，你选一个，再进入代码阶段。跳过选稿直接写码，返工次数通常翻倍。
Figma 文件一定要接插件吗？
不是必须。截图同样能用，只是会丢掉图层命名、组件名和变量值这些结构化信息。有插件时优先用插件；没有插件时，手动把色值和字号抄成一张表贴进对话，效果差别不大。
AI 写出来的 CSS 总是堆在一起，怎么保证可维护？
在规则文件里写死分层约定（布局 / 组件 / 工具类各写在哪），并要求所有间距、颜色走 CSS 变量。第一轮不遵守就在截图回喂时直接指出，两三轮之后模型会稳定在约定内。
还原度到底能不能量化？
能。把设计稿和渲染结果都缩放到同一宽度，做像素差比对，或者更实用一点：抽 10 个关键元素（主标题字号、按钮高度、卡片间距、主色值等）列成清单逐项核对，命中 8 项以上就算合格。
评论 (0)