05 · Figma 与截图转代码

速览

产出	可交付的前端代码
用时	30 分钟到几小时，看复杂度
输入	Figma 导出、截图，或者一个网页
难点	说清楚你要哪一层——像素还是结构

先想清楚你要什么

「把这个设计稿变成代码」有三种完全不同的意思：

你要的	说法	交付形态
一个能看的还原	「像素级还原这张图」	一个静态 HTML，用来验证视觉
一个能接着开发的骨架	「按这个结构生成组件，用我们的 token」	组件代码，能接进现有项目
一个能用的原型	「做成能点的原型，状态要全」	带交互的原型

不说清楚，你大概率拿到第一种，然后发现没法用。

提示词

要像素级还原

这是一张界面截图。请做一个尽可能接近的 HTML 还原。

要求：
1. 布局、间距、字号尽量对齐原图。
2. 颜色用取色得到的实际值。
3. 图片用占位块，标注原图里那个位置是什么内容。
4. 单文件，不引入框架。

不确定的地方标出来，不要凭感觉填。

要能接着开发的组件

这是我们的 Figma 导出 / 界面截图。

请生成可以接进现有项目的组件代码。

技术栈：[React / Vue / 原生，说清楚]
样式方案：[Tailwind / CSS Modules / styled-components]
设计 token：[粘贴你们的 token，或者指向 design-systems/your-brand/DESIGN.md]

要求：
1. 用 token，不要写死颜色和间距的字面值。
2. 按结构拆成合理的组件，每个组件职责单一。
3. props 的命名跟我们现有的约定一致：[举两个例子]
4. 状态要全：空、加载、错误、禁用。
5. 可访问性：语义化标签、键盘可达、必要的 aria。
6. 不要引入新依赖，如果确实需要先问我。

先做组件结构和一个组件的完整实现，我确认之后再做其余的。

最后那句很重要。一次生成十个组件，你要通读十个才能发现约定不对。先看一个，成本低得多。

从一个网页开始

把 [URL] 这个页面的结构和视觉抽出来，重建成 [你的技术栈] 的实现。

只要结构和视觉，不要复制他们的文案。
文案位置用占位符，标注每一处该放什么类型的内容。

为什么这么写

「用 token，不要写死字面值」是能不能接进项目的分水岭。 生成的代码里如果全是 #3B82F6 和 padding: 14px，那它就是一次性的，改主题的时候要全部重来。

「props 命名跟现有约定一致，举两个例子」 比「遵循我们的代码规范」有用一百倍。给两个真实的例子，它能推断出规律。

「不要引入新依赖，需要的话先问」 防止它顺手装一个日期库、一个图标库、一个动画库。

验收清单

• [ ] 没有写死的颜色和间距字面值
• [ ] 组件拆分合理，不是一个巨型组件
• [ ] props 命名符合现有约定
• [ ] 状态覆盖完整
• [ ] 语义化标签用对了（不是一堆 div）
• [ ] 键盘能操作
• [ ] 没有偷偷引入新依赖
• [ ] 在项目里真的能跑起来

最后一条要真的试，别只看代码。

变体

只要视觉规范，不要代码

不用生成代码。从这张图里抽出实现规范：
- 每个元素的尺寸、间距、颜色、字号
- 层级结构
- 响应式断点下应该怎么变

输出成一份工程能直接照着写的文档。

有些团队的前端更愿意自己写，给他们规范比给他们代码更受欢迎。

批量转一组页面

这是同一个产品的 5 张界面截图。

第一步：先分析这 5 张图里重复出现的组件，列出组件清单和每个组件
的变体。不要开始写代码。

第二步（我确认清单之后）：实现这些基础组件。

第三步：用这些组件拼出 5 个页面。

分三步做，得到的是一套组件而不是五份互不相干的代码。

常见问题

还原度不够。

先确认你要的是哪一层。如果确实要像素级，把原图和结果并排，指出具体哪里不对（「卡片间距应该是 24 不是 16」），比说「不够像」有效。

生成的代码风格跟项目不一样。

给它看一个现有的组件文件当参照：「按这个文件的风格写，包括命名、注释密度、导出方式」。

Figma 导出里信息太多，它抓不住重点。

明确说要哪一层：「只看 Frame 层级和 Auto Layout 结构，忽略具体的图层命名」。

做出来能跑但性能差。

生成代码默认不考虑性能。有要求就直接说：「列表要虚拟滚动，图片要懒加载，避免不必要的重渲染」。

相关

• 案例 04 · 抽品牌系统 — 先有 token 再转代码
• 进阶 · 导出与交付 — 怎么交给工程