每次拿到Figma的设计稿第一反应不是感叹设计有多精致而是先估一下这个得写多久。手写CSS、对间距、调字体、切图、做响应式一套下来少则半天多则两天中间还要反复跟设计确认这个16px是padding还是gap这个颜色有没有转换成变量——所以我一直在折腾怎么把设计稿还原这件事变得更快。这段时间在VS Code里配合Code Buddy做了一套实操流程发现效率提升比我预期大得多这篇就是我来详细拆解这套工作流。先说结论这套流程本质上是让AI替你完成从设计稿语义到代码语义的翻译而你借助Figma的标注能力和VS Code的插件生态来做校验兜底。它不是一键生成也不是完全不用动手而是把还原UI设计稿中最耗时的那部分——量尺寸、敲重复样式、拼结构——压缩掉。适合任何写过几套页面、不想再干重复活的开发者参考。1. 整体思路先把Figma和VS Code之间的翻译链路打通1.1 为什么单独用Figma导出代码不够用单独让AI盲写也不靠谱很多团队试过Figma的一键导出代码功能。导出出来的东西你我都懂一堆带inline-style的div、一堆绝对值px、类名全是随机字符串组件结构基本等于没设计稍微有点交互就得大改。这就是能跑但没法维护的代码只能用来做静态原型不能进生产。反过来直接把Figma链接丢给AI编程助手去看着写也不行。大部分AI工具拿不到设计稿的实际像素信息只能靠截图或描述猜测结果就是看起来像但细节全飞。间距差几个像素、圆角弧度不对、字体族不匹配这些问题AI自己发现不了。所以核心思路不是让某一方完全替代另一方而是让Figma提供数据和上下文让Code Buddy提供生成和生产能力在VS Code里完成汇合。具体来说Figma负责输出可读的设计数据尺寸、颜色、字体、间距、层叠关系这些通过标注和导出都能拿到。Code Buddy负责把设计数据转换为前端代码它能根据你给出的规则、组件描述、项目风格生成对应结构而且支持你反复修正。VS Code则是操作中介你用本地文件、插件面板、辅助工具把两边串起来AI生成结果立刻落在项目里。这样一来还原UI设计稿就不再是肉眼对照手写而是变成了一个半自动化的流程设计稿提取规范喂给AI生成结构人工校验修正。1.2 这套方案能省下哪些时间我实测过一套中等复杂度的后台界面四个页面的静态还原之前手写大概要两天用这套流程搭配Code Buddy辅助半天到一天能完成而且还原度能到90%以上。省时间的环节主要集中在量间距、量字号、对色值这类重复性劳动——AI直接生成你只需要抽查。重复的组件代码比如按钮、输入框、弹窗——先在项目里定好模板AI按模板生成。页面整体骨架——给AI一个结构描述它先搭出HTML/JSX层级你在这个基础上做组件拆分和样式细化。但要提醒一句这套流程省的是执行时间省不了思考时间。你仍然需要自己决定哪些部分该用组件抽象哪些样式应该进设计token交互逻辑怎么写。AI是帮你把脑中的设计翻译成代码而不是替你决定设计怎么映射到代码架构。2. 环境准备VS Code里的基础配置与Code Buddy插件安装2.1 推荐的项目结构在开始还原之前先把工程目录准备好。不要直接把AI生成的代码丢到某个零散文件里否则后面维护会非常痛苦。我习惯按下面的结构组织src/ assets/ images/ # 从Figma切出来的图片资源 styles/ tokens.css # 设计变量颜色、字号、间距 components/ ui/ # 通用组件Button、Input、Card... layout/ # 布局组件Header、Sidebar、Content pages/ Login/ Dashboard/ UserProfile/这个结构的好处是AI生成代码时你可以明确告诉它按钮写到components/ui/Button.tsx里页面骨架写到pages/Login/index.tsx它就能按模块生成减少后续搬文件的成本。2.2 在VS Code里安装和激活Code BuddyCode Buddy是一个AI编程辅助插件在VS Code扩展商店里搜索就能装。装完后最好把它配置成独立的Temp Working Directory让AI只在你允许的目录里读写文件避免它乱改其他代码。在扩展设置里我一般会做三件事绑定本地大模型或云端模型根据你自己的网络环境选择。如果面向的是内部项目建议开启隐私模式防止把设计稿信息传到云端。设置代码生成的语言偏好比如你项目用的是ReactTypeScript就在设置里写清楚默认生成React函数组件和TypeScript类型这样AI第一版输出的代码就接近你要的规范。开启自动接受/自动合并的开关我保留手动确认因为AI生成的代码需要审核但如果你已经建立了很完善的代码规范和模板可以打开自动应用建议来提升速度。提示不要小看这一步。Code Buddy生成代码的下限取决于你的项目里有没有可参考的代码风格。如果项目里已经有别的页面AI会自动模仿这些页面的结构这也是为什么我建议先搭好项目骨架再让AI生成。2.3 Figma侧的准备把设计稿变成AI能“读懂”的东西很多人忽略了这一步。Code Buddy本身不能直接读取Figma文件它需要你把设计稿的关键信息表达清楚。我推荐两种方式可以组合使用方式一用Figma的开发者模式提取标注在Figma中选中某个图层右侧「Inspect」面板新版本叫「Dev Mode」会显示该元素的CSS信息包括尺寸、颜色、字体、阴影、边框等等。你可以手动把关键信息记录到一个说明文件里再提供给AI。方式二导出一份设计说明文档这份文档不需要很复杂但一定要包含设计稿的几个核心维度。下面是一个我常用的模板# 登录页设计规格 - 整体尺寸1440x900 移动端 375x812 - 主色#3B82F6 - 辅助色#F59E0B - 字体族Inter、PingFang SC - 页面结构顶部Logo区高64px中间登录卡片宽400px圆角12px阴影0 4px 12px rgba(0,0,0,0.06)底部版权文字 - 表单字段用户名、密码、记住我勾选框、登录按钮主色高44px圆角8px - 交互状态hover时按钮亮度降低10%输入框获得焦点边框变主色把这份文档放到项目根目录比如design-spec.md。接下来你在和Code Buddy对话时直接把这份文档内容贴进去或者指定让它读取这个文件。AI有了这些“硬信息”生成出来的代码就远不止是“看起来像”而是能精确卡到像素级。3. 实操过程从Figma设计稿到页面代码的完整还原流程这一部分我会用一个虚构的登录页和一个内容卡片列表来演示直接给你看关键指令和结果。3.1 第一步在Figma里梳理设计稿提取可复用的设计决策不要直接把整个设计稿截图丢给Code Buddy。截图虽然直观但AI从一张位图里能提取到的信息非常有限尤其是字体大小、间距这些“数字”它会靠猜。正确做法是先把设计稿里的设计决策拆出来形成你给AI的输入上下文。我一般是按这四步走拆解层级在Figma的「Layers」面板里把设计稿按区块划分。比如登录页分为背景层、卡片容器、表单区域、页脚。这一步是为了给AI明确的“树状结构”让它生成的代码层级结构和你视觉上看到的DOM一致。记录关键尺寸用「Dev Mode」选中卡片容器记录它的width、padding、border-radius、box-shadow。不需要记录所有元素只记容器级别和关键组件级别的参数。建立命名映射如果设计稿里的图层命名比较乱我会在MindNode或文本里做一个简单的映射设计师叫btn_primary前端组件叫PrimaryButton。这样AI生成组件时能直接对应到你的项目组件库。收集资源文件把图标、背景图等导出为SVG或PNG放到项目的src/assets/images里。AI需要引用图片路径时它才知道怎么拼。做完这些你的还原上下文就齐了。下面是我会发给Code Buddy的一段指令读取 design-spec.md 和 src/pages/Login/ 目录下已有的基础样式。 现在需要在 src/pages/Login/index.tsx 里实现登录页的静态UI 1. 页面整体为全屏背景居中一个400px宽的卡片 2. 卡片内容包含 Logo、标题、两个输入框、一个按钮、一个记住我区域 3. 所有颜色、字号、间距严格使用 design-spec.md 中定义的变量不要写死 4. 生成Tailwind类名或者CSS Modules类名都可以但需保证可读性 5. 优先使用已有的 Button 组件和 Input 组件不要新建组件。3.2 第二步让Code Buddy生成页面结构和样式以我的实测体验Code Buddy看到这样的指令后会直接生成一个基本可用的登录页组件。我来展示一次典型输出// src/pages/Login/index.tsx import React, { useState } from react; import { Button, Input, Checkbox } from /components/ui; import { LoginCard, PageWrapper, FooterText } from ./Login.styles; export default function LoginPage() { const [username, setUsername] useState(); const [password, setPassword] useState(); const handleSubmit (e: React.FormEvent) { e.preventDefault(); // TODO: 接入登录API }; return ( PageWrapper LoginCard img src/assets/logo.svg altlogo classNamelogo / h1 classNametitle欢迎回来/h1 p classNamesubtitle请输入您的账号信息以继续/p form onSubmit{handleSubmit} Input typetext placeholder用户名 value{username} onChange{(e) setUsername(e.target.value)} / Input typepassword placeholder密码 value{password} onChange{(e) setPassword(e.target.value)} / div classNameoptions-row Checkbox label记住我 / a href/forgot忘记密码/a /div Button typeprimary htmlTypesubmit block 登 录 /Button /form /LoginCard FooterText© 2024 Example Corp/FooterText /PageWrapper ); }这段代码的问题在于它用了命名导出Login.styles但我还没有创建这个文件。没关系让Code Buddy继续同时生成 Login.styles.ts 的内容。使用CSS-in-JS主要样式包括 - PageWrappermin-height:100vhdisplay:flex居中背景色 #F3F4F6 - LoginCardwidth:400pxpadding:40pxborder-radius:12pxbox-shadow:0 4px 12px rgba(0,0,0,0.06) - titlefont-size:24pxfont-weight:600color:#111827 - options-rowdisplay:flexjustify-content:space-betweenalign-items:center。AI生成后你会发现它基本能严格按你给的参数来写。这里要记住一个技巧你给AI的指令越像设计评审会里的修改意见AI的输出越精确。用具体的px值、具体的方向词居中左侧对齐上下间距24px避免用模糊描述看起来舒适一点大气一点。3.3 第三步用Figma的CSS信息校准AI输出AI生成完初稿接下来是重头戏校准。我会在VS Code里开好浏览器预览然后把Figma窗口放在旁边逐区块核对。因为AI生成的样式很可能把所有间距、圆角都写成了一模一样的默认值需要人工去对照Figma的标注来调整。校准时我重点看这五个维度维度容易出错的地方校准方法间距父容器padding和子元素margin混用选中Figma里的父布局看gap/padding再对应代码里的CSS属性颜色主色用对了但文字颜色和边框色偏灰用Figma「Dev Mode」直接复制色值替换到代码里字体忘记设置font-family或行高看设计稿的文本面板里是否有指定行高补到CSS中圆角与阴影多个组件圆角统一但AI可能各自写不同的值在设计稿里建立统一的Radius token强制AI使用尺寸响应式断点与设计稿不一致确认设计稿的Frame宽度是多少在代码中按相同断点写媒体查询当你发现某处不对时不要急着手动改代码而是重新给Code Buddy发一条修正指令例如登录卡片和右侧装饰区之间的间距应该是48px你写成了32px。另外按钮的圆角应该是8px不是10px。请修正 Login.styles.ts 中对应的CSS。这样AI会修改对应文件而且你不需要自己定位具体行号。实测下来这种发现差异→描述差异→AI修正的循环比自己打开文件改值要快得多尤其是一份页面里有二三十处需要校准的时候。3.4 第四步图片资源与图标处理设计稿里的图经常是SVG图标或装饰元素。如果让AI自己去找图片路径它可能会编造一个不存在的路径所以我们要提前准备好资源。Figma导出资源时我建议图标全部导出为SVG且导出前看一下SVG内部的fill是否是currentColor这样才能跟随文字颜色变化。位图背景图、照片导出为2x或3x尺寸的PNG因为Figma默认导出是1x用在高清屏上会发虚。把导出文件放到项目的src/assets/images后文件名保持和Figma图层名一致或加前缀然后你告诉Code Buddy“图片路径统一为/assets/images/xxx.svg”。AI生成到图片引用时就不会瞎猜。比如我让AI实现一个带背景图的内容卡片指令可以这样写ContentCard组件需要包含 - 封面图使用 /assets/images/card-cover.png注意图片高度200pxobject-fit: cover - 标题、描述、底部标签区 - 整体卡片 hover 时有平移和阴影变化。3.5 第五步把静态UI推进到响应式适配大多数设计稿从Figma里导出时只有几个固定宽度的Frame比如桌面端1440px、平板768px、手机375px。还原UI设计稿不能只还原一个宽度代码里的媒体查询需要你根据设计稿的栅格变化来设定。我的做法是让Code Buddy先生成桌面端然后把Figma三种宽度下的组件差异点逐一告诉它。比如这个页面的响应式要求 - 桌面端1024px三列卡片布局间距24px - 平板768px-1024px两列卡片布局间距16px - 移动端768px单列卡片布局且卡片内的文字字号缩小为14px。 请补充MediaQuery到对应样式文件中。Code Buddy会按照这个规则生成Tailwind的响应式前缀或者补充CSS媒体查询。但你仍然需要打开浏览器DevTools模拟各个断点确认没有长度溢出、隐藏内容等问题。4. 常见问题与排查技巧实录4.1 AI生成的代码和Figma设计稿存在系统性偏差这是最常遇到的问题具体表现是AI总是把内边距写成16px按钮圆角写成4px字体重量写成400似乎有一套它惯用的默认设计。这类问题不是改一处两处就能解决因为整个页面上有几十处手动改效率极低。我的经验是在项目里引入设计Token变量然后让AI统一引用。以CSS变量为例在tokens.css里定义:root { --color-primary: #3B82F6; --color-text-main: #111827; --color-text-muted: #6B7280; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-base: 14px; --font-title: 20px; }然后在给AI的初始指令里加上一句所有间距必须使用 --space-* 变量圆角使用 --radius-* 变量颜色使用 --color-* 变量。不允许出现魔数直接写px数值除非特殊说明。这样AI输出时就不会乱写默认值它会主动去找变量。如果你的项目没有Token体系先花十分钟建好。这一步不仅是配合AI对整个项目的长期维护也有巨大价值。4.2 Code Buddy无法看到浏览器渲染结果AI编程助手没有肉眼它不知道页面实际长什么样。你让它看看这个页面哪个地方不对是没用的它只能修改代码但看不到渲染结果。所以你需要主动把页面上的视觉问题转成可描述的文本。我的做法是打开浏览器预览发现一处问题就截图然后用文字描述给AI错误示例这个页面看起来怪怪的正确示例右侧卡片的margin-bottom是40px导致和下面卡片间距比其他间距大应该统一为20px。同时标题的文字颜色比设计稿浅应该改为#111827。把视觉问题翻译成具体的CSS属性问题是这套工作流里很重要的能力。刚开始你会觉得描述麻烦但几次下来就习惯了而且你描述得越具体AI的修正就越快。4.3 组件命名和Figma图层名不一致导致混乱在Figma里设计师可能把图层叫Group 832、Rectangle 7但前端组件应该叫UserInfoCard。如果AI直接按照图层名生成代码你会得到一堆无意义命名。解决思路在给AI的上下文里给它一份「图层名→组件名」的映射表。比如# 图层映射 Group 832 - UserInfoCard Rectangle 7 - Avatar Text 56 - UserName Text 57 - UserEmail这样AI在生成组件时就会用你定义的语义化名称。同时你也可以用Code Buddy的批量重命名功能或者自己在Figma里先把图层改好再导出设计说明。4.4 设计稿里用了特殊字体但项目里没有引入很多设计稿会用自定义字体比如某种品牌字体。AI生成代码时只会写font-family: SomeFont但如果你项目里没加载这个字体浏览器就会回退到默认字体导致视觉效果差很多。处理方式有两种如果这个字体是免费可用的把字体文件放到项目的src/assets/fonts并在font-face里声明。同时告诉Code Buddy这个字体文件的位置让它生成对应的font-family引用。如果字体是付费的或不可用和设计师沟通换成系统字体栈比如Inter, -apple-system, PingFang SC, Microsoft YaHei, sans-serif。我建议把这类字体栈也做成设计Token放在全局变量里。4.5 页面能跑但图片资源全部404这是因为AI给你写了一个不存在的路径。常见的情况是它写了./assets/logo.svg但你的项目实际上在src/assets/logo.svg而资源经过Webpack或Vite处理后最终URL是/assets/logo.svg。排查这类问题我用一个笨但有效的方法问AI项目里现在有哪些图片文件让它列出实际存在的路径然后对比代码里的引用。Code Buddy能够读取项目目录结构所以它能告诉你正确的相对路径。如果你用的是Vite可以在vite.config.js里配置aliasimport path from path; export default defineConfig({ resolve: { alias: { : path.resolve(__dirname, src), }, }, });然后告诉AI用/assets/...的方式引用这样路径问题就能大幅减少。5. 一些让还原质量更高的工作习惯5.1 把设计评审写进给AI的交付说明团队里如果有设计评审文档那是最好的AI上下文。哪怕是很简短的描述也对AI生成有帮助。比如在设计说明里写这个页面的CVR很重要按钮要突出主按钮要明显强于次按钮AI在生成样式时就会加大主按钮的对比度而不是用默认样式。我把这套说明存在项目根目录里的DESIGN_GUIDE.md中每次新建页面都让Code Buddy先读一遍。它里面的内容大致是页面风格简洁、留白、圆角不要超过12px交互原则hover状态要在120ms内完成过渡可访问性正文对比度不低于4.5:1代码规范类名使用BEM风格组件用TypeScript当Code Buddy掌握了这些规则之后你会发现它生成的代码不再像平平无奇的通用模板而更贴近你自己团队的真实设计语言。5.2 在复杂页面上拆成多个小块让AI逐个生成不要试图让AI一口气生成整个企业后台界面。指令越长AI越容易遗漏你的关键要求。我的经验是按功能区块拆分每个区块单独生成最后再合起来。举例来说一个Dashboard页面可以拆成顶部导航栏左侧菜单统计数据卡片区域4个卡片销售趋势图表区域最近订单列表给AI的每一条指令里只专注一个区块并且带上这个区块在Figma里的详细尺寸和间距。生成完之后再让AI做一次集成收尾统一处理区块之间的间距和对齐。比如我已经在 components/dashboard/ 下生成了 StatCard、TrendChart、OrderTable 三个组件。 现在在 pages/Dashboard/index.tsx 中组装 - 页面宽度最大1440px居中 - StatCard区域和TrendChart区域垂直间距32px - TrendChart和OrderTable之间间距40px - 左侧留24px padding右侧留24px padding这样生成出来的页面结构清晰组件边界也干净后面维护起来成本低很多。5.3 用Code Buddy做像素级比对的辅助虽然AI本身没有视觉但你可以把Figma里某一区域的关键数值提取出来让AI对照检查。这是我近期最常用的一种方式这是设计稿中订单列表行的CSS标注 - 行高48px - 单元格左内边距16px - 文本颜色#374151 - 字体大小14px 这是当前OrderTable组件的样式 - 行高52px - 单元格左内边距12px - 文本颜色#4B5563 - 字体大小13px 请将当前组件修正为设计稿标注的值。虽然本质上还是我发现了差异让AI改但比起自己打开样式文件一个个找这种方式省去了定位文件和计算差异的时间。尤其当设计稿有十几个表格行时这种差异的描述AI修正会非常高效。5.4 别忘了给AI提供负面示例有时候我说不清想要什么样的风格但我确切知道不要什么。这时候负面示例比正面描述更有用。比如不要使用Flex内联样式不要用!important不要生成超过100行的单文件组件不要在样式里写死百分比宽度。把这些负面要求写成一份AI_RULES.md放在项目根目录每次启动新页面的对话之前让Code Buddy读一遍。它能明显提高AI输出的质量稳定性尤其适用于团队多人协作的场景。6. 结个尾这套流程能走多远我自己用了快一个月最大的体感变化是不怕设计稿变更了。以前设计师中途改了一个间距、换了一个主题色我可能要花半天去全局搜索替换现在直接在design-spec.md里改掉对应数值然后跟Code Buddy说根据新的设计规范更新所有页面中涉及该变量的地方它就能批量改完我再做视觉抽查就好。这个能力带来的价值在某些频繁改稿的项目里甚至超过了初次还原的效率提升。最后再分享一个小技巧不要只依赖AI生成大段的UI代码把它当做一个会写代码的同事来协作——你给它明确的意图、上下文和反馈它帮你把意图变成具体的、可维护的代码同时你不放弃最终审查权。这套Figma数据 VS Code环境 AI辅助 人工校验的组合是我目前用下来在UI还原这件事上性价比最高的实践方案。如果你正好被设计稿还原虐过不妨照着这个流程搭一套大概率你会愿意一直用下去。
每次拿到Figma的设计稿第一反应不是感叹设计有多精致而是先估一下这个得写多久。手写CSS、对间距、调字体、切图、做响应式一套下来少则半天多则两天中间还要反复跟设计确认这个16px是padding还是gap这个颜色有没有转换成变量——所以我一直在折腾怎么把设计稿还原这件事变得更快。这段时间在VS Code里配合Code Buddy做了一套实操流程发现效率提升比我预期大得多这篇就是我来详细拆解这套工作流。先说结论这套流程本质上是让AI替你完成从设计稿语义到代码语义的翻译而你借助Figma的标注能力和VS Code的插件生态来做校验兜底。它不是一键生成也不是完全不用动手而是把还原UI设计稿中最耗时的那部分——量尺寸、敲重复样式、拼结构——压缩掉。适合任何写过几套页面、不想再干重复活的开发者参考。1. 整体思路先把Figma和VS Code之间的翻译链路打通1.1 为什么单独用Figma导出代码不够用单独让AI盲写也不靠谱很多团队试过Figma的一键导出代码功能。导出出来的东西你我都懂一堆带inline-style的div、一堆绝对值px、类名全是随机字符串组件结构基本等于没设计稍微有点交互就得大改。这就是能跑但没法维护的代码只能用来做静态原型不能进生产。反过来直接把Figma链接丢给AI编程助手去看着写也不行。大部分AI工具拿不到设计稿的实际像素信息只能靠截图或描述猜测结果就是看起来像但细节全飞。间距差几个像素、圆角弧度不对、字体族不匹配这些问题AI自己发现不了。所以核心思路不是让某一方完全替代另一方而是让Figma提供数据和上下文让Code Buddy提供生成和生产能力在VS Code里完成汇合。具体来说Figma负责输出可读的设计数据尺寸、颜色、字体、间距、层叠关系这些通过标注和导出都能拿到。Code Buddy负责把设计数据转换为前端代码它能根据你给出的规则、组件描述、项目风格生成对应结构而且支持你反复修正。VS Code则是操作中介你用本地文件、插件面板、辅助工具把两边串起来AI生成结果立刻落在项目里。这样一来还原UI设计稿就不再是肉眼对照手写而是变成了一个半自动化的流程设计稿提取规范喂给AI生成结构人工校验修正。1.2 这套方案能省下哪些时间我实测过一套中等复杂度的后台界面四个页面的静态还原之前手写大概要两天用这套流程搭配Code Buddy辅助半天到一天能完成而且还原度能到90%以上。省时间的环节主要集中在量间距、量字号、对色值这类重复性劳动——AI直接生成你只需要抽查。重复的组件代码比如按钮、输入框、弹窗——先在项目里定好模板AI按模板生成。页面整体骨架——给AI一个结构描述它先搭出HTML/JSX层级你在这个基础上做组件拆分和样式细化。但要提醒一句这套流程省的是执行时间省不了思考时间。你仍然需要自己决定哪些部分该用组件抽象哪些样式应该进设计token交互逻辑怎么写。AI是帮你把脑中的设计翻译成代码而不是替你决定设计怎么映射到代码架构。2. 环境准备VS Code里的基础配置与Code Buddy插件安装2.1 推荐的项目结构在开始还原之前先把工程目录准备好。不要直接把AI生成的代码丢到某个零散文件里否则后面维护会非常痛苦。我习惯按下面的结构组织src/ assets/ images/ # 从Figma切出来的图片资源 styles/ tokens.css # 设计变量颜色、字号、间距 components/ ui/ # 通用组件Button、Input、Card... layout/ # 布局组件Header、Sidebar、Content pages/ Login/ Dashboard/ UserProfile/这个结构的好处是AI生成代码时你可以明确告诉它按钮写到components/ui/Button.tsx里页面骨架写到pages/Login/index.tsx它就能按模块生成减少后续搬文件的成本。2.2 在VS Code里安装和激活Code BuddyCode Buddy是一个AI编程辅助插件在VS Code扩展商店里搜索就能装。装完后最好把它配置成独立的Temp Working Directory让AI只在你允许的目录里读写文件避免它乱改其他代码。在扩展设置里我一般会做三件事绑定本地大模型或云端模型根据你自己的网络环境选择。如果面向的是内部项目建议开启隐私模式防止把设计稿信息传到云端。设置代码生成的语言偏好比如你项目用的是ReactTypeScript就在设置里写清楚默认生成React函数组件和TypeScript类型这样AI第一版输出的代码就接近你要的规范。开启自动接受/自动合并的开关我保留手动确认因为AI生成的代码需要审核但如果你已经建立了很完善的代码规范和模板可以打开自动应用建议来提升速度。提示不要小看这一步。Code Buddy生成代码的下限取决于你的项目里有没有可参考的代码风格。如果项目里已经有别的页面AI会自动模仿这些页面的结构这也是为什么我建议先搭好项目骨架再让AI生成。2.3 Figma侧的准备把设计稿变成AI能“读懂”的东西很多人忽略了这一步。Code Buddy本身不能直接读取Figma文件它需要你把设计稿的关键信息表达清楚。我推荐两种方式可以组合使用方式一用Figma的开发者模式提取标注在Figma中选中某个图层右侧「Inspect」面板新版本叫「Dev Mode」会显示该元素的CSS信息包括尺寸、颜色、字体、阴影、边框等等。你可以手动把关键信息记录到一个说明文件里再提供给AI。方式二导出一份设计说明文档这份文档不需要很复杂但一定要包含设计稿的几个核心维度。下面是一个我常用的模板# 登录页设计规格 - 整体尺寸1440x900 移动端 375x812 - 主色#3B82F6 - 辅助色#F59E0B - 字体族Inter、PingFang SC - 页面结构顶部Logo区高64px中间登录卡片宽400px圆角12px阴影0 4px 12px rgba(0,0,0,0.06)底部版权文字 - 表单字段用户名、密码、记住我勾选框、登录按钮主色高44px圆角8px - 交互状态hover时按钮亮度降低10%输入框获得焦点边框变主色把这份文档放到项目根目录比如design-spec.md。接下来你在和Code Buddy对话时直接把这份文档内容贴进去或者指定让它读取这个文件。AI有了这些“硬信息”生成出来的代码就远不止是“看起来像”而是能精确卡到像素级。3. 实操过程从Figma设计稿到页面代码的完整还原流程这一部分我会用一个虚构的登录页和一个内容卡片列表来演示直接给你看关键指令和结果。3.1 第一步在Figma里梳理设计稿提取可复用的设计决策不要直接把整个设计稿截图丢给Code Buddy。截图虽然直观但AI从一张位图里能提取到的信息非常有限尤其是字体大小、间距这些“数字”它会靠猜。正确做法是先把设计稿里的设计决策拆出来形成你给AI的输入上下文。我一般是按这四步走拆解层级在Figma的「Layers」面板里把设计稿按区块划分。比如登录页分为背景层、卡片容器、表单区域、页脚。这一步是为了给AI明确的“树状结构”让它生成的代码层级结构和你视觉上看到的DOM一致。记录关键尺寸用「Dev Mode」选中卡片容器记录它的width、padding、border-radius、box-shadow。不需要记录所有元素只记容器级别和关键组件级别的参数。建立命名映射如果设计稿里的图层命名比较乱我会在MindNode或文本里做一个简单的映射设计师叫btn_primary前端组件叫PrimaryButton。这样AI生成组件时能直接对应到你的项目组件库。收集资源文件把图标、背景图等导出为SVG或PNG放到项目的src/assets/images里。AI需要引用图片路径时它才知道怎么拼。做完这些你的还原上下文就齐了。下面是我会发给Code Buddy的一段指令读取 design-spec.md 和 src/pages/Login/ 目录下已有的基础样式。 现在需要在 src/pages/Login/index.tsx 里实现登录页的静态UI 1. 页面整体为全屏背景居中一个400px宽的卡片 2. 卡片内容包含 Logo、标题、两个输入框、一个按钮、一个记住我区域 3. 所有颜色、字号、间距严格使用 design-spec.md 中定义的变量不要写死 4. 生成Tailwind类名或者CSS Modules类名都可以但需保证可读性 5. 优先使用已有的 Button 组件和 Input 组件不要新建组件。3.2 第二步让Code Buddy生成页面结构和样式以我的实测体验Code Buddy看到这样的指令后会直接生成一个基本可用的登录页组件。我来展示一次典型输出// src/pages/Login/index.tsx import React, { useState } from react; import { Button, Input, Checkbox } from /components/ui; import { LoginCard, PageWrapper, FooterText } from ./Login.styles; export default function LoginPage() { const [username, setUsername] useState(); const [password, setPassword] useState(); const handleSubmit (e: React.FormEvent) { e.preventDefault(); // TODO: 接入登录API }; return ( PageWrapper LoginCard img src/assets/logo.svg altlogo classNamelogo / h1 classNametitle欢迎回来/h1 p classNamesubtitle请输入您的账号信息以继续/p form onSubmit{handleSubmit} Input typetext placeholder用户名 value{username} onChange{(e) setUsername(e.target.value)} / Input typepassword placeholder密码 value{password} onChange{(e) setPassword(e.target.value)} / div classNameoptions-row Checkbox label记住我 / a href/forgot忘记密码/a /div Button typeprimary htmlTypesubmit block 登 录 /Button /form /LoginCard FooterText© 2024 Example Corp/FooterText /PageWrapper ); }这段代码的问题在于它用了命名导出Login.styles但我还没有创建这个文件。没关系让Code Buddy继续同时生成 Login.styles.ts 的内容。使用CSS-in-JS主要样式包括 - PageWrappermin-height:100vhdisplay:flex居中背景色 #F3F4F6 - LoginCardwidth:400pxpadding:40pxborder-radius:12pxbox-shadow:0 4px 12px rgba(0,0,0,0.06) - titlefont-size:24pxfont-weight:600color:#111827 - options-rowdisplay:flexjustify-content:space-betweenalign-items:center。AI生成后你会发现它基本能严格按你给的参数来写。这里要记住一个技巧你给AI的指令越像设计评审会里的修改意见AI的输出越精确。用具体的px值、具体的方向词居中左侧对齐上下间距24px避免用模糊描述看起来舒适一点大气一点。3.3 第三步用Figma的CSS信息校准AI输出AI生成完初稿接下来是重头戏校准。我会在VS Code里开好浏览器预览然后把Figma窗口放在旁边逐区块核对。因为AI生成的样式很可能把所有间距、圆角都写成了一模一样的默认值需要人工去对照Figma的标注来调整。校准时我重点看这五个维度维度容易出错的地方校准方法间距父容器padding和子元素margin混用选中Figma里的父布局看gap/padding再对应代码里的CSS属性颜色主色用对了但文字颜色和边框色偏灰用Figma「Dev Mode」直接复制色值替换到代码里字体忘记设置font-family或行高看设计稿的文本面板里是否有指定行高补到CSS中圆角与阴影多个组件圆角统一但AI可能各自写不同的值在设计稿里建立统一的Radius token强制AI使用尺寸响应式断点与设计稿不一致确认设计稿的Frame宽度是多少在代码中按相同断点写媒体查询当你发现某处不对时不要急着手动改代码而是重新给Code Buddy发一条修正指令例如登录卡片和右侧装饰区之间的间距应该是48px你写成了32px。另外按钮的圆角应该是8px不是10px。请修正 Login.styles.ts 中对应的CSS。这样AI会修改对应文件而且你不需要自己定位具体行号。实测下来这种发现差异→描述差异→AI修正的循环比自己打开文件改值要快得多尤其是一份页面里有二三十处需要校准的时候。3.4 第四步图片资源与图标处理设计稿里的图经常是SVG图标或装饰元素。如果让AI自己去找图片路径它可能会编造一个不存在的路径所以我们要提前准备好资源。Figma导出资源时我建议图标全部导出为SVG且导出前看一下SVG内部的fill是否是currentColor这样才能跟随文字颜色变化。位图背景图、照片导出为2x或3x尺寸的PNG因为Figma默认导出是1x用在高清屏上会发虚。把导出文件放到项目的src/assets/images后文件名保持和Figma图层名一致或加前缀然后你告诉Code Buddy“图片路径统一为/assets/images/xxx.svg”。AI生成到图片引用时就不会瞎猜。比如我让AI实现一个带背景图的内容卡片指令可以这样写ContentCard组件需要包含 - 封面图使用 /assets/images/card-cover.png注意图片高度200pxobject-fit: cover - 标题、描述、底部标签区 - 整体卡片 hover 时有平移和阴影变化。3.5 第五步把静态UI推进到响应式适配大多数设计稿从Figma里导出时只有几个固定宽度的Frame比如桌面端1440px、平板768px、手机375px。还原UI设计稿不能只还原一个宽度代码里的媒体查询需要你根据设计稿的栅格变化来设定。我的做法是让Code Buddy先生成桌面端然后把Figma三种宽度下的组件差异点逐一告诉它。比如这个页面的响应式要求 - 桌面端1024px三列卡片布局间距24px - 平板768px-1024px两列卡片布局间距16px - 移动端768px单列卡片布局且卡片内的文字字号缩小为14px。 请补充MediaQuery到对应样式文件中。Code Buddy会按照这个规则生成Tailwind的响应式前缀或者补充CSS媒体查询。但你仍然需要打开浏览器DevTools模拟各个断点确认没有长度溢出、隐藏内容等问题。4. 常见问题与排查技巧实录4.1 AI生成的代码和Figma设计稿存在系统性偏差这是最常遇到的问题具体表现是AI总是把内边距写成16px按钮圆角写成4px字体重量写成400似乎有一套它惯用的默认设计。这类问题不是改一处两处就能解决因为整个页面上有几十处手动改效率极低。我的经验是在项目里引入设计Token变量然后让AI统一引用。以CSS变量为例在tokens.css里定义:root { --color-primary: #3B82F6; --color-text-main: #111827; --color-text-muted: #6B7280; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-base: 14px; --font-title: 20px; }然后在给AI的初始指令里加上一句所有间距必须使用 --space-* 变量圆角使用 --radius-* 变量颜色使用 --color-* 变量。不允许出现魔数直接写px数值除非特殊说明。这样AI输出时就不会乱写默认值它会主动去找变量。如果你的项目没有Token体系先花十分钟建好。这一步不仅是配合AI对整个项目的长期维护也有巨大价值。4.2 Code Buddy无法看到浏览器渲染结果AI编程助手没有肉眼它不知道页面实际长什么样。你让它看看这个页面哪个地方不对是没用的它只能修改代码但看不到渲染结果。所以你需要主动把页面上的视觉问题转成可描述的文本。我的做法是打开浏览器预览发现一处问题就截图然后用文字描述给AI错误示例这个页面看起来怪怪的正确示例右侧卡片的margin-bottom是40px导致和下面卡片间距比其他间距大应该统一为20px。同时标题的文字颜色比设计稿浅应该改为#111827。把视觉问题翻译成具体的CSS属性问题是这套工作流里很重要的能力。刚开始你会觉得描述麻烦但几次下来就习惯了而且你描述得越具体AI的修正就越快。4.3 组件命名和Figma图层名不一致导致混乱在Figma里设计师可能把图层叫Group 832、Rectangle 7但前端组件应该叫UserInfoCard。如果AI直接按照图层名生成代码你会得到一堆无意义命名。解决思路在给AI的上下文里给它一份「图层名→组件名」的映射表。比如# 图层映射 Group 832 - UserInfoCard Rectangle 7 - Avatar Text 56 - UserName Text 57 - UserEmail这样AI在生成组件时就会用你定义的语义化名称。同时你也可以用Code Buddy的批量重命名功能或者自己在Figma里先把图层改好再导出设计说明。4.4 设计稿里用了特殊字体但项目里没有引入很多设计稿会用自定义字体比如某种品牌字体。AI生成代码时只会写font-family: SomeFont但如果你项目里没加载这个字体浏览器就会回退到默认字体导致视觉效果差很多。处理方式有两种如果这个字体是免费可用的把字体文件放到项目的src/assets/fonts并在font-face里声明。同时告诉Code Buddy这个字体文件的位置让它生成对应的font-family引用。如果字体是付费的或不可用和设计师沟通换成系统字体栈比如Inter, -apple-system, PingFang SC, Microsoft YaHei, sans-serif。我建议把这类字体栈也做成设计Token放在全局变量里。4.5 页面能跑但图片资源全部404这是因为AI给你写了一个不存在的路径。常见的情况是它写了./assets/logo.svg但你的项目实际上在src/assets/logo.svg而资源经过Webpack或Vite处理后最终URL是/assets/logo.svg。排查这类问题我用一个笨但有效的方法问AI项目里现在有哪些图片文件让它列出实际存在的路径然后对比代码里的引用。Code Buddy能够读取项目目录结构所以它能告诉你正确的相对路径。如果你用的是Vite可以在vite.config.js里配置aliasimport path from path; export default defineConfig({ resolve: { alias: { : path.resolve(__dirname, src), }, }, });然后告诉AI用/assets/...的方式引用这样路径问题就能大幅减少。5. 一些让还原质量更高的工作习惯5.1 把设计评审写进给AI的交付说明团队里如果有设计评审文档那是最好的AI上下文。哪怕是很简短的描述也对AI生成有帮助。比如在设计说明里写这个页面的CVR很重要按钮要突出主按钮要明显强于次按钮AI在生成样式时就会加大主按钮的对比度而不是用默认样式。我把这套说明存在项目根目录里的DESIGN_GUIDE.md中每次新建页面都让Code Buddy先读一遍。它里面的内容大致是页面风格简洁、留白、圆角不要超过12px交互原则hover状态要在120ms内完成过渡可访问性正文对比度不低于4.5:1代码规范类名使用BEM风格组件用TypeScript当Code Buddy掌握了这些规则之后你会发现它生成的代码不再像平平无奇的通用模板而更贴近你自己团队的真实设计语言。5.2 在复杂页面上拆成多个小块让AI逐个生成不要试图让AI一口气生成整个企业后台界面。指令越长AI越容易遗漏你的关键要求。我的经验是按功能区块拆分每个区块单独生成最后再合起来。举例来说一个Dashboard页面可以拆成顶部导航栏左侧菜单统计数据卡片区域4个卡片销售趋势图表区域最近订单列表给AI的每一条指令里只专注一个区块并且带上这个区块在Figma里的详细尺寸和间距。生成完之后再让AI做一次集成收尾统一处理区块之间的间距和对齐。比如我已经在 components/dashboard/ 下生成了 StatCard、TrendChart、OrderTable 三个组件。 现在在 pages/Dashboard/index.tsx 中组装 - 页面宽度最大1440px居中 - StatCard区域和TrendChart区域垂直间距32px - TrendChart和OrderTable之间间距40px - 左侧留24px padding右侧留24px padding这样生成出来的页面结构清晰组件边界也干净后面维护起来成本低很多。5.3 用Code Buddy做像素级比对的辅助虽然AI本身没有视觉但你可以把Figma里某一区域的关键数值提取出来让AI对照检查。这是我近期最常用的一种方式这是设计稿中订单列表行的CSS标注 - 行高48px - 单元格左内边距16px - 文本颜色#374151 - 字体大小14px 这是当前OrderTable组件的样式 - 行高52px - 单元格左内边距12px - 文本颜色#4B5563 - 字体大小13px 请将当前组件修正为设计稿标注的值。虽然本质上还是我发现了差异让AI改但比起自己打开样式文件一个个找这种方式省去了定位文件和计算差异的时间。尤其当设计稿有十几个表格行时这种差异的描述AI修正会非常高效。5.4 别忘了给AI提供负面示例有时候我说不清想要什么样的风格但我确切知道不要什么。这时候负面示例比正面描述更有用。比如不要使用Flex内联样式不要用!important不要生成超过100行的单文件组件不要在样式里写死百分比宽度。把这些负面要求写成一份AI_RULES.md放在项目根目录每次启动新页面的对话之前让Code Buddy读一遍。它能明显提高AI输出的质量稳定性尤其适用于团队多人协作的场景。6. 结个尾这套流程能走多远我自己用了快一个月最大的体感变化是不怕设计稿变更了。以前设计师中途改了一个间距、换了一个主题色我可能要花半天去全局搜索替换现在直接在design-spec.md里改掉对应数值然后跟Code Buddy说根据新的设计规范更新所有页面中涉及该变量的地方它就能批量改完我再做视觉抽查就好。这个能力带来的价值在某些频繁改稿的项目里甚至超过了初次还原的效率提升。最后再分享一个小技巧不要只依赖AI生成大段的UI代码把它当做一个会写代码的同事来协作——你给它明确的意图、上下文和反馈它帮你把意图变成具体的、可维护的代码同时你不放弃最终审查权。这套Figma数据 VS Code环境 AI辅助 人工校验的组合是我目前用下来在UI还原这件事上性价比最高的实践方案。如果你正好被设计稿还原虐过不妨照着这个流程搭一套大概率你会愿意一直用下去。
