从Figma到代码与动画：AI Skills如何重塑前端协作新范式

做前端这几年我最怕听到的一句话就是“照着 Figma 还原一下就行”。听起来一句话干起来却是一场漫长的翻译设计师在 Figma 里拖好的间距、字号、圆角、自动布局到开发者手里要么变成一版“差不多就行”的还原要么变成一版为了像素级对齐反复改 CSS 的熬夜现场。直到我最近把整套工作流切换到 AI Skills 路线用“陌讯Skills”把 Figma 转 Code、再转 Remotion 动画这件事做成了一键流程协作方式才真正变了味儿。这篇文章想把这条新范式讲透Figma 转 Code 不再靠肉眼读图层而是让 AI 直接通过 MCP 读取设计稿的 JSON 结构再按一套沉淀好的 Skills 规则产出 React 代码更进阶的是同一份设计稿还能继续驱动 Remotion生成高质量的动画组件。适合正在做前端开发、设计系统工程化、或者对 AI 辅助编码感兴趣的开发者、设计师、以及团队技术负责人参考。1. 为什么要做这件事Figma 转代码的协作痛点与新范式1.1 传统协作链路里那些“翻译损耗”先聊一个每个团队都逃不过的场景。设计师交付的 Figma 文件里图层树可能已经超过 50 层外层是自动布局 Frame里面套着文本节点、图片节点、Svg 图标、各种变体组件。开发者打开 Dev Mode 看着右侧的属性面板逐项复制颜色值、字号、间距再手动换算成 CSS。这个过程的损耗点非常明确信息损耗Figma 里的 Auto Layout 对应的是 CSS Flexbox 或 Grid但属性名完全不同开发者需要心算 gap、padding、justify-content 之间的映射关系。语言损耗设计稿里是“鼠标悬浮变阴影更深”代码里是box-shadow: 0 4px 12px rgba(0,0,0,0.12)这种从视觉语言到代码语言的转译本质靠个人经验很难标准化。时间损耗一次中大型页面的还原开发耗时通常按天算而且往往要来回走查 2-3 轮才能对齐设计验收。协作损耗设计师改了间距前端没同步到前端改了布局设计验收打回。这种来回拉扯既伤感情也伤交付节奏。我之前试过截图导出、切图标注、甚至手工维护一份样式对照表效果都不理想。核心原因在于工具只解决了“拿到设计稿信息”的问题没有解决“把设计稿信息翻译成工程代码”的问题。翻译这件事过去只能靠人现在可以交给 AI 了。1.2 Skills 到底是什么为什么它能改变协作方式如果你用过 Claude Code、Cursor 这类 AI 编码工具可能已经接触过 MCP也就是 Model Context Protocol它解决的是“AI 如何连接外部数据源”的问题。比如让 AI 请求 Figma API、读取本地文件、操作数据库都是靠 MCP Server 完成。但连接只是第一步。AI 能读到 Figma 的原始 JSON不代表它知道“怎么输出一套符合工程规范的 React 组件”。这时候就需要 Skills 出场。Skills 本质上是一套可复用的“技能包”一个包含 SKILL.md 说明文档和若干规则脚本的目录它告诉 AI在这个场景下你应该按照什么步骤、什么命名规范、什么文件结构来处理问题。做个类比MCP 相当于给 AI 配了一双能看见 Figma 图层的眼睛而 Skills 相当于给 AI 装上一套资深前端的手写脑图。光有眼睛AI 看到密密麻麻的图层只知道“这是一个按钮”有了 SkillsAI 就知道“这是一个主按钮primary 状态需要抽成 Button 组件颜色走设计令牌圆角用 4px文字加粗同时导出一个 hover 时的阴影变化”。陌讯Skills 就是围绕“Figma 到前端代码”这个高频场景定制的一套技能包里面把读取设计稿、解析结构、生成代码、导出动画这几件事的规则一并封装好了。这也是为什么标题里强调“协作新范式”设计、开发、动效不再是三拨人接力传话而是从设计稿这一份“元数据”出发由 AI 在同一套规则下完成代码化和动效化。2. 环境准备与核心工具选型2.1 三条链路怎么搭Claude Code、Cursor、命令行要把这套流程跑起来先得把 AI 编码工具和 Figma 连起来。目前我实测比较顺畅的有三种方式Claude CodeAnthropic 官方 CLI 工具支持 MCP 配置和 Skills 目录是目前最适合做代码生成的终端环境。安装直接用 npm 全局安装anthropic-ai/claude-code装完在项目目录启动即可。Cursor集成 IDE同样支持 MCP 配置。如果你更习惯在可视化编辑器里操作 AICursor 的 Rules 机制也可以承担一部分 Skills 的功能但自定义能力不如 Claude Code 的 Skills 目录灵活。命令行直接调用如果你只是想临时测试 Figma 内容读取也可以直接用npx启动 Figma MCP Server再用任意支持 MCP 的客户端连接。我的建议是如果目标是“沉淀团队规范、重复使用同一套技能”优先选 Claude Code如果目标是“快速看一版还原效果”用 Cursor 更顺手。两者核心配置思路一致本文后续以 Claude Code 为例展开。2.2 Figma 侧配置Personal Access Token 与 MCP 连接首先去 Figma 账户设置里的 Security 页面生成一个 Personal Access Token。注意权限只需勾选 Files:read 即可因为生成代码只需要读设计稿不需要写。把 Token 当成密码管理不要写进代码仓库我个人的习惯是放进环境变量里。然后启动 Figma MCP Server。社区里常用的方案是figma-developer-mcp一条命令就能把 Figma 的读取能力暴露给 AI 助手npx figma-developer-mcp --figma-api-key你的token如果你想把它注册到 Claude Code 里用内置命令维护 MCP 服务列表即可。注册完成后AI 就能通过 MCP 拿到指定 Figma 文件的节点树、样式属性和导出资源信息。这里有一个值得注意的点MCP 返回的是 Figma 的原始节点 JSON信息量很大但也很杂乱。如果你直接让 AI “根据这个 JSON 写代码”它往往会因为信息过载而输出一堆无效二进制或重复逻辑。所以真正决定产出质量的是下一步让 AI 按 Skills 的规则去解析这堆 JSON。2.3 安装陌讯Skills 并在工具里注册陌讯Skills 的安装方式和社区里其他 Skills 包的流程基本一致。你可以在项目根目录下建立 Skills 目录把技能包放进去也可以使用 AI 工具自带的管理命令来安装。一个标准的 Skills 目录结构长这样.claude/ skills/ figma-to-code/ SKILL.md rules/ design-token.md component-structure.md remotion-animation.mdSKILL.md 是这个技能包的“说明书”开头有一段 YAML 格式的元信息包括技能名称、使用场景描述、触发关键词正文则写明具体的操作步骤和输出规范。比如 figma-to-code 这个技能正文里会定义读取文件后先提取哪些信息、样式属性如何映射到 CSS、组件文件按什么命名规则输出、设计令牌放在哪个目录。AI 读到这份说明书后才会在文件夹内寻找设计稿并生成代码。按照这套思路你也可以把自己团队的经验沉淀成专属 Skills 包比如你们希望按钮统一用圆形、卡片间距固定 16px、首屏重要信息不超过三屏这些都能写进规则里。3. 实操从 Figma 设计稿到 React/Tailwind 代码3.1 让 AI 按“设计意图”而非“截图像素”去还原这里我要强调一个核心观点真正好的 Figma 转 Code不是让 AI 按截图一比一“画”出页面而是让 AI 理解设计意图之后用工程化的方式把页面“写”出来。我见过不少初用 AI 还原设计稿的人第一步就把 Figma 里的图片节点导出成 PNG然后让 AI “按这张图写布局”。这样做的结果往往是一个 HTML 结构里塞满绝对定位的 div看起来很像但一改需求就崩毫无可维护性。正确做法是让 AI 通过 MCP 拿到文件节点的 JSON然后按节点层级分析视觉结构哪个 Frame 是页面容器、哪个 Frame 是导航栏、哪些文本节点是标题、哪些是正文。同时把样式属性里的填充颜色、圆角、间距、字体大小等信息提取出来。这样一来AI 看到的不再是一张图而是一棵带有语义的组件树。举个很实际的例子。设计稿里有一个自动布局的按钮Figma JSON 里记录着paddingLeft: 16, paddingRight: 16, paddingTop: 8, paddingBottom: 8, cornerRadius: 4, backgroundColor: #1e6fff。好的 Skills 匹配到这些字段后会将其映射到 Tailwind 类上而不是输出style{{ paddingLeft: 16 }}这种一次性样式。3.2 关键参数坐标换算、响应式断点、设计令牌Figma 和前端代码之间的单位差异是最容易出现低级错误的地方。Figma 设计稿通常基于 375x812 这类移动端画板或 1440x900 的桌面画板而代码里涉及 rem、vw 等单位。我在 Skills 规则里常用的换算逻辑是像素到 rem默认根字号为 16px因此rem px / 16。Figma 里的fontSize: 16对应text-basefontSize: 24对应text-2xl。像素到视口单位如果设计稿里元素宽度占比是 100%代码里可以写成w-full如果是 50%可以写成w-1/2但更稳妥的方式是让 AI 基于栅格系统计算百分比。自动布局到弹性布局Figma 的 Auto Layout 有三要素layoutMode水平/垂直、itemSpacing、padding映射到 CSS 就是display: flex、gap、padding。间距统一抽成间距令牌比如 4px、8px、16px 分别对应--space-1、--space-2、--space-4。响应式断点Figma 里设计变体时通常一个桌面版带一个移动版。Skills 会让 AI 先识别设计稿的断点结构再在代码里生成对应媒体查询而不是把桌面版硬塞进手机宽度。这些换算是可以在 SKILL.md 里提前声明好的。你甚至可以直接写一句规则“所有颜色从 design-token.css 中引用如果设计稿里有变量名则优先使用变量名不要硬编码十六进制色值。”AI 执行起来会比想象中听话前提是规则要足够具体。还有一点很容易踩坑Figma 里的字体命名和 CSS 中的 font-family 并不完全一致。设计稿中标注的字体可能叫“思源黑体-Regular”但前端项目里可能只装了 “Noto Sans SC”。我在 Skills 里加了一条规则生成代码时统一映射到项目的字体栈避免直接搬运 Figma 名字。3.3 一键生成后的收尾检查清单AI 生成完代码不代表可以直接交付。我把每次生成后的人工检查项固定成一张清单团队里每个人都按这个走查效率提升明显结构检查页面是否拆成了合理的组件层级还是全堆在一个文件里样式检查颜色、圆角、间距是否引用了设计令牌有没有散落的魔法数值响应式检查缩小浏览器窗口布局是否按断点正常折叠交互检查hover、active、focus 状态是否补齐按钮 loading 态有没有处理可访问性检查img 有没有 alt按钮是不是真正的button文本对比度是否符合标准我习惯让 AI 生成完代码后紧接着发一个指令“逐项对照检查清单列出你当前实现中未满足的条目如果都不满足请说明原因。”这一轮自我检查能筛掉相当一部分低级问题。4. 进阶玩法用同一套设计稿生成 Remotion 动画4.1 Remotion 为什么适合做动效落地Remotion 是一个用 React 写视频的框架它的核心思路是视频中的每一帧都是一个纯 React 组件在特定时间点的渲染结果。因为底层是 React你在前端项目里熟悉的组件化、状态管理、打包工具都能直接迁移到视频生产里。对设计师和开发者的协作来说Remotion 有三个天然优势。第一动效不再是设计师出不了手、开发做不了的中间地带而是可以用代码参数化控制的工程产物第二Remotion 在一帧一帧输出视频的同时还能直接输出交互式网页组件同一套动效既能用于宣传视频也能嵌入产品页面第三它天然适合 AI 生成因为动画本质上是“数据 时间函数”而时间函数的计算恰恰是 AI 擅长的。回到我们这套工作流陌讯Skills 读取 Figma 设计稿后不仅能生成静态页面代码还能继续分析图层之间的层级关系设计稿里有明确的入场顺序、强调元素、按钮 hover 效果这些信息足以驱动一个 Remotion 动画组件。4.2 从静态图层推导动画序列的 Skill 逻辑Figma 本身不存动画时间线数据所以 AI 要生成 Remotion 动画靠的是对图层结构和设计标注的推理。我在技能包里定义的规则是先读取 Figma 节点的 z-order 和位置关系越靠下的 Frame 视为背景层越靠上的视为前景层再读取图层名称里的关键词比如enter、slide-up、fade-in、loop、delay-500这些词会直接影响 Remotion 的入场函数参数。如果设计稿里有交互原型注释AI 还可以进一步提取触发方式。比如设计稿是一个产品功能宣传页从上到下依次是导航栏、Hero 标题、副标题、产品截图、CTA 按钮。Skills 会推断出一个合理的动效时间轴第 0-10 帧背景渐变淡入。第 10-25 帧Hero 标题从下方 30px 滑入透明度从 0 到 1。第 25-35 帧副标题延迟出现。第 35-50 帧产品截图小幅缩放入场。第 50-60 帧CTA 按钮弹出并带上一个轻微回弹。这段推导不需要人工参与AI 根据图层在画板上的纵向排布就能自主生成序列。你只需要最后在 Remotion 里预览一遍微调时间点即可。4.3 一个可复现的 Remotion 动画生成例子写一段最朴素的 Remotion 组件你就能直观感受这套工作流的产出长什么样。比如要渲染一个带淡入和滑动的标题import React from react; import { useCurrentFrame, interpolate } from remotion; export const Title: React.FC{ text: string } ({ text }) { const frame useCurrentFrame(); const opacity interpolate(frame, [0, 20], [0, 1], { extrapolateRight: clamp, }); const translateY interpolate(frame, [0, 20], [30, 0], { extrapolateRight: clamp, }); return ( div style{{ opacity, transform: translateY(${translateY}px), fontSize: 48, fontWeight: 700, }} {text} /div ); };useCurrentFrame返回当前帧数interpolate负责把帧范围映射到属性范围。AI 生成这类代码时只需要设计稿里有一个标注fade-in-slide-up的文本节点它就能自动选择这组参数。如果想让动画更高级比如进度条、滚动联动、粒子入场都可以在 SKILL.md 里补充对应的 Remotion 模板片段AI 会自动匹配。我试过一次比较复杂的场景把 Figma 里的图表面板转成动画数据可视化组件AI 根据多个矩形图层的高度比例直接生成了柱状图增长动画效果很出片。5. 避坑实录与效果复盘5.1 我踩过的那些坑先说一个最让我头大的坑Figma Token 权限不足导致 401。起初我生成 Token 时只勾了默认权限结果 MCP 能连接、能列出文件但一读取节点就报401 unauthorized。后来重新生成 Token明确勾选 Files:read 才解决。如果你遇到类似报错第一反应别慌去看 Token 权限。第二个坑是中文环境下的字体缺失。Figma 设计稿里用的中文字体如果本地开发环境没装同名字体生成出来的页面或 Remotion 渲染视频里中文会变成方框。我的处理方式是把设计稿里用到的字体文件下载到项目 assets 目录并在全局样式里用font-face声明一份回退字体栈优先本地字体没有就 fallback 到系统级中文字体。第三个坑是组件拆分粒度。Skill 如果设计得不够好AI 要么把所有内容塞进一个巨大的Page.tsx要么把一个按钮拆成 5 个文件。我通过修改 SKILL.md 里的规则解决了这个问题明确规定“单文件代码行数不超过 150 行超过则按页面区块拆分子组件”几次迭代之后输出已经非常接近人工水平。第四个坑和 Windows 环境有关。Remotion 渲染时偶尔会在并发较高的情况下触发内存访问冲突报错类似process exited with code 3221225477 / 0xc0000005。这多半是并发渲染线程占用内存过高可以把渲染并发数调低或者更新 Node 版本。还有一个安全习惯要强调永远不要把 AI 工具生成的一整段“看起来像代码”的命令直接粘贴到浏览器 DevTools 控制台里执行尤其当这段代码里包含你的访问令牌、密钥之类的信息。很多东西看起来合法但埋着坑。5.2 常见报错速查表我把这段时间遇到的典型报错整理成了一张速查表方便你直接对号入座报错信息可能原因解决方式401 Unauthorized / api_key_requiredFigma Token 权限不足或已过期重新生成 Token至少勾选 Files:read找不到 SKILL.md 定义Skills 目录未正确注册检查目录放到 AI 工具的 Skills 识别路径下中文字体渲染空白/方框本地未安装对应字体下载字体到资源目录配置 font-face 和回退栈Remotion 渲染内存访问冲突并发过高或 Node 版本过旧降低并发数升级 Node禁用 GPU 加速重试AI 输出超大单文件Skills 里缺少拆分规则在 SKILL.md 中声明单文件行数和组件拆分策略样式大量硬编码色值规则里没有强制使用设计令牌在 Skills 里写入颜色必须从令牌文件引用的规则5.3 这套工作流实际帮我省了多少时间说实话刚开始我只是抱着“玩一玩”的心态搭这套环境但几周下来的效率提升超出预期。以前从 Figma 设计稿到一版可用的 React 页面我一个人写大概需要 2 到 3 天包括布局、样式、交互状态、响应式适配现在 AI 生成一版初稿通常只需要 5 到 10 分钟我再用半小时到一个小时做代码审查和补充整体交付速度提升约 60% 到 70%。动效这块的提升更明显。以前做一个产品宣传视频我得先在 Figma 里逐帧画图层再用 AE 或代码慢慢调动画几个小时起步现在直接用同一份设计稿驱动 RemotionAI 按图层关系生成时间轴我只需要微调参数十几分钟就能导出一版初步样片。当然品牌级的高质量动画仍然需要专业动效设计师精修但“先快速跑一个可用版本”这个阶段已经完全被这套工作流接管了。我个人在实际操作中的体会是这套工作流不是要替代设计师或前端工程师而是把从设计到代码之间那段最枯燥、最容易被反复打回的低级翻译环节自动化了。它让设计师能把精力放在视觉表达上让开发者能把精力放在架构和工程质量上各归各位。如果你也想在团队里推行这套流程我的建议是从一个小模块开始试水比如一个按钮组件或一个卡片组件先跑通 Figma 到 Code 的最小链路再逐步扩展到完整页面。等技能包里的规则打磨得足够稳定后再引入 Remotion 动画你会发现协作突然就变得顺畅了。最后再分享一个小技巧每一次让 AI 生成代码之前把它当同事一样“交代清楚背景”在指令里写明项目用 React 还是 Vue、有没有 Tailwind、设计令牌文件在哪。Skill 是固定规则但每一轮的对话上下文才是决定这次生成质量的临门一脚。