Figma 设计师和开发者的 AI 翻译官终于来了

设计师和开发者之间的”翻译”鸿沟，一直是产品迭代里最费时费力的环节。设计师在 Figma 里画好一套组件，开发者在 IDE 里对着截图”凭感觉”还原——颜色差一截、间距对不上、响应式全靠猜。这种手工人力翻译，正在被 AI 彻底改写。

OpenAI 官方出的这个 Figma MCP Skill，把 Figma 设计文件直接接入 AI 编程助手，让设计稿和代码之间的往返变成一句话的事。

它能做什么？

这个 Skill 基于 Figma 的 MCP（Model Context Protocol）服务器，封装了一套完整的设计到代码的工作流。装上之后，你的 AI 编程助手就能：

• 读懂 Figma 文件结构——变量、组件、布局规则、样式系统，直接提取出来，不需要截图或手动复制
• 生成生产级代码——给定一个 Figma frame 链接，输出 React + Tailwind 的结构化代码，还可以适配你自己项目的框架和组件库
• 提取设计资源——图标、图片、SVG，按需导出，AI 直接拿来用，不重复造轮子
• 双向同步（Beta）——不只是读，还可以把 AI 生成的内容写回 Figma canvas，保持设计系统与代码的一致性

实际体验是什么样的？

你在 Figma 里分享一个 frame 的链接，然后跟 AI 说：「帮我把这个做成页面。」AI 会自动：

1. 用 get_design_context 抓取这个 frame 的完整设计结构
2. 用 get_screenshot 获取视觉参考
3. 下载需要的资源文件
4. 对照你项目的设计系统规范，翻译成实际可用的代码

整个过程不需要你在设计工具和代码编辑器之间来回切换，也不需要手动标注色值、字号、间距——AI 替你完成”翻译”那部分苦力活。

为什么值得关注？

Figma 和 OpenAI 的这次合作，本质上是在解决一个根本问题：设计和代码之间的上下文丢失。传统流程里，设计稿离开 Figma 就变成静态图片，开发者只能靠目测还原。而这个 Skill 让 AI 真正理解设计文件的结构——变量是什么、组件间关系如何、间距规则怎样——然后生成语义一致、可维护的代码。

这对于做设计系统、追求设计还原度、或者需要快速迭代 MVP 的团队来说，效率提升是数量级的。

适用场景

• 设计师交付设计稿后，开发者直接用 AI 快速出代码原型
• 设计系统更新时，AI 自动对照新规范重新生成或调整代码
• 用 Figma Make 做的原型，直接转成可运行的 Web 应用代码
• 跨工具协作——VS Code、Cursor、Claude Code、Windsurf 都能接

现在还是 Beta 期间免费使用，后续写操作会改成按量收费。如果你已经在用 Figma + AI 编程助手，这个 Skill 值得第一时间装上。

GitHub 仓库（OpenAI Skills）

GitHub: https://github.com/openai/skills