最近如果只挑一个 Codex 插件写，我会选 Figma。

先说清楚：我没有看到可靠的公开下载排行，所以不把它写成“全网第一”。但从官方插件仓库、Codex Marketplace、OpenAI 与 Figma 的公开集成来看，它确实是最近最值得试的 Codex 插件之一。

它真正有用的地方，不是让 AI 看一眼设计稿，然后自动生成完整项目。

Figma 插件最适合做的，不是让 Codex 一口气复刻整页，而是把一个具体设计块交给它读、改、验。

它解决什么问题

做网页、后台、App 页面时，设计稿到代码常卡在三件事上：

• 开发看图猜间距、颜色、圆角和状态。
• 项目里明明有组件，但 AI 不知道该复用哪个。
• 代码写出来了，没人再对着设计稿逐项检查。

Figma 插件的价值就在这里：把设计稿里的 frame、组件、布局信息带进 Codex，再让 Codex 去读本地项目、改组件、跑页面、截图验证。

这不是“AI 替你写页面”，而是把设计和代码之间反复确认的路走短一点。

适合谁先试

适合先试：

• 经常照着 Figma 做前端页面的人。
• 需要把设计系统落到代码里的团队。
• 经常被“间距不对、状态不对”打回的人。

先别急着装：

• 手里没有 Figma 文件权限，只是想看热闹。
• 项目里还没有稳定组件库，却想一口气生成整站。
• 设计稿涉及客户保密项目、未发布产品、内部业务数据。

真正安全的用法，是先拿一个低风险 frame 试通流程，再决定要不要把真实项目设计接进去。

安装前最该检查的不是功能

先看这 5 件事，比盲装更有用：

• Figma 账号有没有对应文件权限。
• Codex 当前版本能不能连接插件或 MCP。
• 本地项目能不能正常启动和截图。
• 项目里有没有组件库、样式规范、设计 token。
• 设计稿能不能被外部工具读取，尤其是客户项目。

如果你用 Codex 插件市场，优先从 Codex 里的插件入口搜索 Figma 并安装。Marketplace 页面也给了命令式安装入口：

npx codex-marketplace add openai/plugins/plugins/figma --plugin

如果你走 Figma MCP，Figma 官方文档里推荐远程 MCP Server；它也说明 Codex 属于支持的客户端之一。实际入口以你当前 Codex 版本和 Figma 账号权限为准。

第一次照这 5 步来

1. 先复制一个低风险设计稿，或者只选一个不会泄密的小 frame。

2. 在 Figma 里选中这个 frame，复制带 node 信息的链接。

3. 在 Codex 里打开对应代码项目，先确认项目能启动。

4. 把 Figma 链接丢给 Codex，但只让它实现一个组件或一个区块。

5. 让 Codex 启动页面、截图，再列出和设计稿不一致的地方。

可以直接这样问：

请读取这个 Figma frame：<粘贴链接>不要整页重写。请先做三件事：1. 提取布局、颜色、字号、间距和状态；2. 对照当前项目，列出可复用组件；3. 只实现这个区块，不改全局样式，不新建重复组件。完成后启动本地页面并截图验证，告诉我和设计稿还有哪些差异。

设计稿接进 Codex 后，最该盯住的不是“像不像”，而是组件边界、样式复用和后面好不好维护。

最容易翻车的一句话

帮我把这个 Figma 页面完整还原成代码。

这个问法看起来省事，结果往往更麻烦。Codex 可能为了追求视觉接近，临时写一堆新样式、新结构、新组件。更稳的问法是：

先不要写代码。请只分析这个 frame：- 哪些部分可以复用现有组件？- 哪些样式应该来自设计 token？- 哪些地方需要我确认交互状态？

我对它的判断

Figma 插件值得试，但不要把它当成“设计稿自动变应用”的按钮。它更像设计到代码的翻译助理：你给它一个明确 frame、一个真实项目、一个小目标，它就能减少看图猜代码的时间。

如果今天要试，只做一件事：拿一个按钮组、价格卡片、设置面板或登录框试一次。先跑通一个小组件，再谈整页。

相关标签：#Codex插件 #Figma #设计转代码 #MCP #AI实用教程 #前端开发