1. 设计转代码的老大难到底难在哪做前端的人基本都经历过这种场景设计稿在 Figma 里美得不行标注、切图、规范全都齐整但到了开发手里还原出来的页面总觉得差口气。间距差了 2px、圆角不统一、颜色偏了那么一点点设计提个 issue开发改一版来回几个回合一个按钮能磨一下午。我团队里接过的项目越多越觉得这个问题的根源不是谁不认真而是设计师和开发者之间天然有一道信息损耗的墙。设计师交付的是一张可视化画布开发者要的是结构化的代码逻辑两边用的语言就不一样。以前我们靠 Zeplin、PxCook 这类标注工具做翻译后来又用 Anima、Figma Dev Mode 做半自动生成但生成的代码质量参差不齐样式命名乱、组件拆分不合理拿回来照样得大改。直到最近我们把 Claude Code 和 Figma MCP 串起来配合一套叫“陌讯Skills”的技能包才算真正把这条链路跑顺了。现在团队里设计师在 Figma 改一版开发这边让 AI 拉取设计稿直接生成可用的 React/TypeScript 代码甚至能顺手把静态设计转成 Remotion 动画。这篇文章就把我们这套流程完整拆开讲从 Skills 机制的原理、Figma Token 的获取到具体转换实操和踩坑记录全都写清楚。这套方案适合谁用如果你是前端开发者天天被设计还原度折磨如果你是独立开发者一个人得同时干设计和开发的活或者你是想提升交付效率的小团队这篇文章值得从头到尾看一遍。哪怕你只是刚接触 Claude Code 和 AI 编程的新手跟着步骤走也能搭起来。2. Skills 机制的底层逻辑以及它为什么适合做设计转换2.1 Skills 不是提示词是一套可复用的“岗位说明书”我在最早接触 Claude Code 的时候习惯把所有要求一股脑写进 prompt 里比如“帮我写一个 React 组件样式按照 Ant Design 规范注意响应式布局”。但实际用下来就会发现这种临时拼凑的提示词效果很不稳定。今天 AI 记住了规范明天换个会话又忘了而且设计稿的读取、组件映射、代码生成这一整套流程根本没法用几段话描述清楚。Skills 解决的就是这个问题。它本质上把“某个领域的一套完整工作流”打包成一个结构化的技能包里面包含角色定义、读写文件的规则、工具调用的方式、输出格式的约定等等。装进 Claude Code 之后AI 就相当于多了一份岗位说明书知道遇到 Figma 设计稿时该走哪几步代码生成时该遵循什么规范。我用一个生活化的类比来解释普通 prompt 像是你临时叫一个实习生干活得每件事都交代清楚Skill 则像是一个干了三年的老员工你只需要说“按老规矩来”他自己就知道先做什么、后做什么、做到什么标准。这个差距在复杂任务上特别明显。2.2 为什么 Figma 转 Code 特别适合交给 Skills 处理Figma 转代码这件事看起来很直接实际上链路很长。设计稿里有图层结构、样式属性、自动布局、组件实例还有各种约束和变体。AI 要真正“读懂”这些光靠截图是不够的截图只是像素AI 看不出哪个 Text 是标题、哪个 Frame 是弹窗、哪个 Auto Layout 决定了间距。Figma MCP 解决了这个读取问题。通过 MCP 协议Claude Code 可以直接调用 Figma 的 API拿到设计稿的结构化数据——图层树、节点属性、样式 token、导出资源。这些数据和 Figma 文件里看到的是同源的比截图精准太多了。但拿到数据还不够还得知道怎么把 Figma 的模型映射到前端代码。Figma 里的 Frame 对应 React 的什么组件Auto Layout 对应 CSS 的 Flex 还是 Grid颜色变量怎么对应主题 token组件命名怎么规范化这些正好是 Skills 擅长定义的规则。把映射规则写进 Skill 里AI 就能稳定地产出一套风格统一、结构合理的代码而不是每次随机发挥。2.3 陌讯Skills的组成Figma 读取、代码生成、动效工作流我们用的这套“陌讯Skills”实际上是一个技能包组合核心包含三块能力设计稿读取与解析通过 Figma MCP 自动拉取画布节点将图层结构、样式、文本内容转换成 AI 可理解的 JSON 描述。前端代码生成根据解析结果按约定生成 React TypeScript 组件样式优先使用 Tailwind 或 CSS Modules注释和命名按团队规范输出。Remotion 动效工作流把已生成或手工编写的 React 组件转换为 Remotion 可用的动画场景支持时间轴关键帧、入场退场动画、参数驱动的动态效果。这三块能力分别解决了“读得懂”“写得出”“动起来”三个问题。实际用起来设计师在 Figma 里画完界面开发直接让 AI 读稿生成静态页面确认视觉后再让 AI 针对关键模块生成 Remotion 动画素材整个过程不需要从零写几万行代码。3. 实操第一步环境、模型与 Figma 接入配置3.1 装好 Claude Code本地开发环境的正确打开方式先说明一下我当前的运行环境我用的是 Windows VSCode 的组合Claude Code 通过 VSCode 终端运行配合 Git 管理生成的代码。这套组合的好处是轻量、直观而且 VSCode 的生态足够成熟Claude Code 报错、输出文件都能直接在编辑器里查看。安装 Claude Code 之前建议先把 Node.js 环境检查一遍。我遇到过不少新手在装工具时卡住查到最后发现是 Node 版本太老。Claude Code 对 Node 版本有要求我个人的经验是至少 18 以上20 LTS 更稳。确认之后就一句命令的事npm install -g anthropic-ai/claude-code装完在终端输入claude能正常进入交互界面就说明成功了。如果你用的是 VSCode可以在终端面板里直接启动配合code命令快速打开当前项目目录。这个细节很多人会忽略Claude Code 的工作目录决定了它能读写哪些文件建议把项目根目录设置好再启动后面生成的组件文件能直接落到正确位置。3.2 获取 Figma MCP Token让 AI 合法读取你的设计稿这是整个流程里最关键的一步。没有 TokenClaude Code 无法访问 Figma 文件后面的“读设计稿”就是空谈。Figma MCP Token 并不是 Figma 的登录密码而是你为某个应用或集成生成的专用访问令牌。获取路径在 Figma 的账号设置里打开 Figma进入个人设置Profile Settings找到 Security 或 Personal Access Token 相关的选项点生成填一个名称说明用途复制保存。要注意这个 Token 只在生成时显示一次关闭页面后就看不到了需要妥善保存。拿到 Token 之后还要把它配置到本地环境里。我是在终端通过环境变量注入的方式处理的setx FIGMA_ACCESS_TOKEN 你的token setx FIGMA_MCP_ENABLED 1配置完需要重启终端或者 VSCode让环境变量生效。验证是否配置成功可以启动 Claude Code 后直接问它“能不能读取 Figma 文件”如果回显正常或者没有报鉴权错误就说明链路通了。还有一点容易踩坑Figma 文件本身也要开启允许通过 API 访问的权限。如果你在读取时报 403 或找不到文件先确认一下 Figma 文件是不是 Team 或 Project 级别的权限设置把外部访问挡住了。3.3 两个影响体验的细节字体安装与汉化先说字体。Figma 转 Code 时AI 拿到的字体信息是字体名称、字重、字号这些元数据但最终在浏览器里渲染靠的还是本地或项目里加载的字体。如果设计稿用了某种特殊字体而开发环境没装生成的页面就会字体回退观感差一大截。我们的做法是在项目初始化时就把设计稿里涉及的字体整理成一份清单常见的中文字体如思源黑体、苹方、HarmonyOS Sans英文数字字体如 Inter、Roboto Mono统统在本地装好同时通过font-face或字蛛这类工具把字体打包进项目保证线上线下一套效果。Sketch 转稿年代遗留下来的字体替换问题在 AI 流程里依然值得重视。再说汉化。这里说的汉化有两个层面一是 Figma 客户端的界面汉化方便不太熟悉英文界面的设计师二是 Claude Code 交互时的语言设定。我们团队的实际习惯是Figma 保持英文因为菜单命令和搜索靠英文更准确Claude Code 则通过配置文件把输出语言设为中文这样生成代码时的注释和说明更符合国内团队的阅读习惯。操作上没什么特别的改动配置或装一个语言包的事但这个小决定能让新成员上手快很多。4. 陌讯Skills实操从 Figma 设计稿到 React 代码4.1 安装 Skill把转换规则注入 AI环境就绪后下一步就是把陌讯Skills装进 Claude Code。这里先解释一下 Skills 在 Claude Code 里的安装逻辑它一般以目录或包的形式存在里面包含SKILL.md以及配套的脚本、模板文件。SKILL.md是核心描述了该技能适用的场景、执行步骤和输出格式。安装我走的是最直接的方式从仓库克隆或者把 Skill 目录复制到 Claude Code 的 skills 目录下然后在启动时声明启用即可。如果你用 VSCode直接在项目根目录建一个.claude/skills目录把 Skill 丢进去Claude Code 会自动发现。装上之后怎么确认生效你可以输入一条探测性指令比如“列出当前可用的 skills”如果回显里包含陌讯Skills的相关条目就说明注册成功了。这一步虽然简单但别跳过我见过有人装完直接开工结果 AI 压根没识别到技能白白浪费了几轮对话。4.2 核心转换流程从读取设计稿到输出组件Skill 生效后的转换流程大致是这样的开发者提供 Figma 文件链接和页面名称AI 通过 MCP 读取图层结构解析出页面布局、组件层级、样式属性然后按照 Skill 里预设的模板生成 React TypeScript 代码最后自动落到项目目录。我拿一个真实场景举例。设计师画了一个移动端登录页包含 Logo、输入框、登录按钮、第三方登录区域。传统手工开发我先要看设计稿量间距再写 HTML 结构、CSS 样式、处理交互逻辑少说也要一两个小时。用 Skill 流程我给 AI 一条指令使用陌讯Skills读取这个Figma文件的登录页设计稿生成移动端React组件样式用Tailwind按钮需要支持loading状态。AI 读取设计稿后会输出一个组件文件结构大致是外层容器、表单区域、按钮组件、分割线、第三方图标入口。颜色和间距直接从设计稿的 token 提取不会出现肉眼估出来的色差。整体看下来代码是可用的但作为有经验的开发者我还是要检查三件事一是组件拆分是否合理二是状态管理的边界三是实际渲染效果是否和设计稿一致。这里多说一句AI 生成代码不是银弹它的价值是把你从 80% 的机械劳动里解放出来剩下 20% 的业务逻辑和细节调优还是得人来看。但光是把“量稿写样式”这个环节省掉效率提升就很明显了。4.3 还原度控制为什么生成的样式偶尔会“偏”用这套流程跑了一段时间我发现还原度问题的根源经常不在 AI而在设计稿本身。Figma 里某些元素如果没用规范样式而是手动调整了位置和颜色那么导出的结构化数据里就会包含大量魔法值生成的代码自然带着这些不合理的值。比如设计师在 Figma 里手动把一个内边距调成了 17px或者在颜色面板里随手选了一个 #F5F5F4这些值拿过来直接生成代码虽然渲染效果一样但从代码规范角度看非常糟糕。我们的解决方法是在 Skill 的规则里加入数值归一化逻辑——内边距超过一定范围就就近取 Tailwind 的标准值颜色命中设计系统的 token 就自动替换为 token 引用。这样生成出来的代码既还原视觉又符合工程规范。另外自动布局和约束是 Figma 转 Code 还原度的关键。设计稿里的 Auto Layout 字段AI 可以直接映射为 Flexbox 的display: flex、gap、justify-content等属性。如果设计师在 Figma 里没用自动布局而是一堆手动定位的元素转换后的代码就可能是绝对定位满天飞移动端一适配就出问题。所以我会建议团队内部约定涉及交付开发的页面尽量用 Auto Layout 搭结构这一个动作对转换质量的影响比任何工具升级都大。5. 进阶场景把 Figma 组件变成 Remotion 动画5.1 Remotion 到底能做什么Remotion 可能有些前端朋友还不太熟。简单说它是一个用 React 写视频的框架你写的每个组件都对应视频里的一帧画面配合时间轴和关键帧可以用代码精准控制动画的每一帧。相比传统 After Effects 做视频Remotion 的交付物就是代码天然适合版本管理、参数化复用和自动化生成。放到设计转动画这个场景里有两层意义。第一设计稿本来就是 React 组件HTML/CSS 能渲染出来的效果Remotion 都能捕捉成视频第二面向不同尺寸、不同文案的场景只要改参数就能批量出片这在营销素材、产品演示、片头动画这些需求上特别有价值。5.2 把 Figma 设计组件改造成可动效组件用陌讯Skills的动效工作流从 Figma 到 Remotion 的路子是这样的先用前面的流程把设计稿生成 React 组件再让 AI 对关键元素做动效改造。比如登录页的 Logo在静态设计里只是一个居中图片我让 AI 给它加一个入场动画从透明到不透明、从轻微缩放到原尺寸时长 800ms缓动函数用 easeOut输入框加一个延迟 300ms 的渐显让视觉上游一层一层进来。Remotion 实现这些动效用的是useCurrentFrame和interpolate这是它的核心 API。前者返回当前帧号后者把帧号映射到属性值。一个最简单的淡入效果const frame useCurrentFrame(); const opacity interpolate(frame, [0, 30], [0, 1], { extrapolateRight: clamp, }); return Img src{logo} style{{ opacity }} /;这段代码的意思是前 30 帧里透明度从 0 线性增加到 130 帧之后保持 1。换算成时间就是 1 秒的淡入30 帧每秒。我让 AI 生成这些动效代码时会重点检查缓动函数和时长设定是否符合设计团队给出的动效规范毕竟动画做得到不到位很多时候就是几个参数的差距。5.3 一个完整的动效落地案例把前面的登录页做成一个 5 秒的 Remotion 场景实际效果是这样的第 0 到 0.8 秒Logo 淡入同时轻微上移从 y 轴 20px 回到 0。第 0.8 到 1.5 秒标题文字逐字浮现用 stagger 延迟实现错落感。第 1.5 到 2.5 秒表单区域整体滑入背景有一个微妙的渐变位移。第 2.5 到 5 秒画面稳定按钮上出现呼吸光效引导视线到底部操作区。这段视频最终的输出产物是一套 React 组件加一个composition.ts配置文件。配置里定义了画面尺寸、帧率、时长运行npx remotion render就能导出成 MP4。整个过程设计师只提供了一版静态稿AI 负责转组件和动效搭建开发做最后的动效细节调优前后夹起来不到一天。6. 常见问题与排查技巧实录6.1 API 密钥报错401 unauthorized 与 api_key_required这大概是我们遇到最多的报错。启动 Claude Code 或调用 Figma MCP 时终端出现unexpected status 401 unauthorized或{code:api_key_required}本质原因就一个API 密钥没配置对或者没传进去。排查步骤按顺序来。第一步确认环境变量是否真的设置了在终端敲echo %FIGMA_ACCESS_TOKEN%有输出说明变量存在没有就是没设置成功。第二步确认 Token 是不是过期了Figma 的 Personal Access Token 可以设置有效期长时间不更新就会失效重新生成一个再替换。第三步检查有没有在代码或配置文件里覆盖了 Token有时候你设置了环境变量但项目里某处代码又动态设置了一个空字符串把环境变量顶掉了。这里有一个我们内部的经验Token 失效排查起来最难的不是找不到原因而是跨端环境不一致。有的人在终端设置了 Token 能跑但 VSCode 里启动 Claude Code 时报错因为 VSCode 的终端继承的环境变量可能不完整。碰上这种情况直接在系统设置里添加用户级环境变量然后彻底重启 VSCode基本都能解决。6.2 区域不可用的报错怎么处理有些团队在配置过程中会遇到unsupported_country_region_territory这类报错一般是服务对当前网络出口或账户区域有访问限制。这个报错和代码逻辑无关属于环境和合规层面的限制。处理思路是先确认是哪个环节报的错。如果是 Claude 服务本身不可用那要看账户的注册区域和当前网络环境是否匹配有时换个服务提供方或者调整网络出口就能解决。如果是 Figma API 的访问限制重点检查区域设置。在排查这类问题时我的原则是不要在配置层面打擦边球该走正规渠道走正规渠道该换工具换工具。技术上绕来绕去最后坑的还是自己。6.3 进程崩溃内存访问冲突 0xc0000005Windows 上跑 Node 相关工具偶尔会碰上process exited with code 3221225477 / 0xc0000005翻译过来就是内存访问冲突进程直接崩了。这种情况在读取大文件、处理复杂设计稿时更容易出现因为 Claude Code 要加载的上下文太大超出了 Node 的默认内存限制。解法不复杂。第一增大 Node 内存上限在启动命令前加环境变量setx NODE_OPTIONS --max-old-space-size8192第二拆分设计稿。如果一个 Figma 页面元素太多一次读入数据量可能几百 MBAI 处理不过来。让 AI 按 Frame 或 Section 分批读取而不是整个页面一把梭。第三确认系统本身资源充足关掉不必要的后台应用尤其是浏览器多开标签页这种内存大户。6.4 Figma 文件读不到、图层信息缺失这类问题表现各异文件链接能访问但 AI 说找不到节点或者图层读取了但关键样式信息为空。我排查的经验是首先确认 MCP 连接是否健康输入mcp查看当前会话的 MCP 服务状态连接是 active 还是 failed。其次确认 Figma API 权限是否覆盖了所需资源有的文件需要特定权限才能通过 API 读取。最后确认文件格式和页面名称是否准确Figma 的多页面文件AI 读取时需要你指定具体的页面名或 Frame 名光丢一个文件链接它可能默认读的是第一个页面或最近打开的那个页面。6.5 常见问题速查表现象可能原因解决办法401 鉴权失败Token 未配置或过期重新生成 Token确认环境变量403 拒绝访问文件权限不足检查 Figma 文件分享和 API 权限unsupported region区域限制检查账户与网络环境合规性进程崩溃 0xc0000005Node 内存不足增大 NODE_OPTIONS拆分任务读不到节点页面名/Frame 名不准确提供准确的页面结构和名称样式信息为空元素不是规范样式检查是否用了标准 Figma 样式属性生成的代码效果偏设计稿含魔法值在 Skill 中配置数值归一化规则7. 这套工作流在团队里怎么落地7.1 先确定边界什么场景用 AI什么场景还得人来用陌讯Skills跑了一段时间之后我对 AI 转代码的边界有了更清醒的判断。适合交给 AI 的场景是页面数量多、重复性高、视觉效果优先的界面比如后台管理系统的列表页、营销活动的落地页、移动端的功能页面。这类页面逻辑简单工作量主要花在还原设计稿上AI 能批量生产人工只要做抽查和修正。不太适合的场景是强交互、强状态管理的复杂页面比如包含复杂表单校验、拖拽排序、多人协作编辑的功能模块。AI 生成的代码往往在数据流和交互细节上不够周密与其让它生成再大改不如把设计稿作为参考从零写更高效。另外涉及品牌核心视觉的系统级组件比如设计系统的 Button、Card 这类基础组件也建议人工精修因为它们的规范性直接影响到所有业务页面。7.2 建立设计师与开发者的公共语言这套工作流真正提升效率的前提是设计师和开发者达成了某种共识设计稿不仅仅是“画出来的图”更是一份会被机器读取的数据源。所以设计稿的规范程度直接决定了 AI 生成代码的质量。我们在团队里推行了几条约定所有页面必须用 Auto Layout颜色和字体统一走 Design Token组件命名用英文且语义化关键流程页面不做过度装饰性的图层堆叠。这些约定不是给设计师添麻烦而是让设计稿从“视觉表达”升级为“结构化数据”设计师维护规范开发者享受效率两边其实是双赢。7.3 版本管理与代码审查AI 生成的代码进入项目仓库之后必须纳入版本管理和代码审查流程。这一点我们踩过坑。早期 AI 生成的代码风格不太稳定一会用 Tailwind一会用 CSS Modules一会定义函数组件一会又用 class 组件审查起来非常吃力。后来我们把风格规范写进 Skill 的规则里情况好了很多但代码审查依然不能省。我的建议是给 AI 生成的代码打上标记比如文件头注释注明生成方式和时间这样在 code review 时能快速识别哪些文件是 AI 生成的哪些是人工写的审查的侧重点可以区分。AI 生成的要重点看结构和逻辑人工写的重点看业务正确性。这样做了一段时间之后我们会把 AI 生成代码中反复出现的模式沉淀回 Skill 里让技能包越来越贴近团队的实际工程风格形成正向循环。8. 最后分享一个提升效率的小技巧这套流程跑顺之后我个人的习惯是给陌讯Skills里加了一个“批处理”工作流。以前一个页面一个页面地让 AI 转换费时也费配额。现在我会在 Figma 文件里把同批次要交付的页面放进同一个 Frame 容器然后一条指令让 AI 批量读取、批量生成、批量输出。好处不只是快更重要的是所有页面的代码风格一致因为它们在同一个转换上下文里完成AI 会自然沿用相同的组件命名和样式方案。我在实际使用中还有一个体会不要过度依赖 AI 生成的第一版代码它只是起点不是终点。真正好用的方式是让 AI 生成初版人来做精修和业务逻辑嵌入再把精修后的模式反哺回 Skill。这样用上两三周技能包会越来越聪明团队效率的提升也会越来越明显。这套流程我们已经跑了几个月目前每周能省出大半天的手工切稿和重复开发时间省下来的时间用来打磨业务细节和动效反而是团队产出质量提升最明显的部分。