figma-openai-plugins

1. 基本信息

项目	内容
名称	figma-openai-plugins
项目自述名称	`figma`（`.codex-plugin/plugin.json` 内 `name` 字段原值；该文件 `author.name` 为 “Figma”，即插件由 Figma 官方编写，经 OpenAI 插件市场发布）
作者/维护者	Figma 官方团队编写（plugin.json 声明 author=Figma），托管发布于 OpenAI 官方仓库 `openai/plugins`
来源链接	https://github.com/openai/plugins/tree/main/plugins/figma
许可证	`LicenseRef-Figma-Developer-Terms`（plugin.json 与 LICENSE.txt 明确声明；非标准开源协议，使用需遵守 Figma Developer Terms，已抓取核实原文）
GitHub Stars/Forks	所属合集仓库（openai/plugins）4,578 / 663（GitHub API 实测 2026-07-15；仓库为 190+ 插件合集，星数不直接归属本插件，独立佐证见第 2 章）
最新版本	plugin.json 声明 2.0.13；该子目录提交历史 API 实测最近一次提交 2026-07-09（“Figma plugin skills v2.2.76”）；近 100 条提交中该路径命中 28 条，在该合集仓库的插件中提交活跃度居前
安装方式	Codex App/CLI/VS Code 扩展内 `/plugins` 搜索并安装 “Figma”，或在 Connected Apps 中启用 Figma 连接器

2. 功能介绍与亮点

figma-openai-plugins 是 Figma 官方为 OpenAI Codex 编写的设计↔代码互转插件包，捆绑 12 个独立 SKILL.md 技能：

figma-design-to-code：通过 get_design_context MCP 工具读取 Figma 节点，输出 React+Tailwind 参考代码，明确要求 Agent 把返回结果当“参考”而非可直接粘贴的最终代码，并优先复用项目已有组件、Design Token
figma-code-connect：为已发布组件生成无解析器（parserless）的 Code Connect 映射模板
figma-generate-design / figma-create-new-file / figma-generate-library：反向（代码→设计）工作流，创建或更新 Figma 文件、屏幕与设计系统库
figma-swiftui、figma-use-figjam、figma-use-slides、figma-implement-motion 等覆盖 SwiftUI、FigJam、Slides、动效等细分场景

亮点：Figma 与 OpenAI 于 2026 年 3 月联合宣布该合作（双方官方博客均已发文，非第三方逆向工程）；提交历史显示持续快速迭代。

3. 适用场景

固定分类：前端与设计。适合用 Codex 做前端开发、需要把 Figma 设计稿高保真落地为代码的初中级开发者；尤其适合团队已有组件库/Design Token、希望 Agent 遵循既有约定而非另起一套的场景；也适合需要给已发布组件生成 Code Connect 映射、或反向从代码生成/更新 Figma 设计文件的用户。

4. 跨 Agent 兼容性

Codex：✅ 原生支持——.codex-plugin/plugin.json 为标准 Codex 插件清单，托管于 OpenAI 官方插件仓库（已抓取核实）
Claude Code：⚠️ 需适配——SKILL.md 目录结构与 Claude Skill 约定接近，但核心工具 get_design_context 绑定 Codex 专属 Connected App（.app.json connector），需用户自行配置等效 Figma MCP 连接方案后方可复用
OpenClaw：❓ 未验证——公开材料未提及
Hermes Agent：❓ 未验证——公开材料未提及

5. 推荐理由

“把 Figma 设计稿变成能跑的代码”是前端开发里最消耗时间、也最容易走样的一步。这个插件由 Figma 官方亲自编写并接入 Codex 官方插件市场，用 get_design_context 把节点结构、截图、Design Token、Code Connect 映射一次性喂给 Agent，同时在 SKILL.md 里明确要求“复用项目已有组件、别照抄参考代码”——这对初中级用户尤其重要，能避免生成一堆和项目风格不搭的孤立组件。12 个子技能还覆盖了 Code Connect 模板生成、反向建 Figma 文件、SwiftUI/FigJam/Slides 等长尾场景，覆盖面在同类插件里少见。

6. 评分

维度	分数	说明
受欢迎程度	9.0	Figma + OpenAI 双一线机构联合出品（2026-03 官方合作公告，双方博客均已发文）；不采用合集仓库 4,578 星归属单个插件，改以 OpenAI/Figma 官方博客、developers.openai.com 官方用例页、独立开发者实测文章等独立信源交叉验证
可用性	8.0	Connected Apps 一键启用；README + 12 份 SKILL.md 文档详尽、含清晰工作流优先级说明；近一周内（2026-07-09）仍在更新；免费使用但依赖用户已有 Figma 账号，标记为 Beta 功能
安全性	8.0	见下方安全检查清单
综合	8.3	三项均值，超过 7.0 达标线，安全性远超一票否决线

安全检查清单：

Shell/权限范围：仅含一个 post_write_figma_parity_check.sh 草稿钩子脚本，逐行核实内容为纯 echo 提示文本，无实际系统操作
联网外发：仅通过官方 Connected App 连接 Figma 自身服务，目标透明且为完成设计读取所必需
API Key/凭据：无裸 API Key，走 Codex 平台统一管理的 OAuth Connector（.app.json 声明 connector id）
可疑指令/注入迹象：完整抓取 README 与 figma-design-to-code SKILL.md 全文核实，未发现要求执行流程外操作的可疑指令
作者/组织信誉：Figma（plugin.json 声明作者）+ OpenAI（仓库维护方），均为一线机构
License：LicenseRef-Figma-Developer-Terms，plugin.json 与 LICENSE.txt 均明确声明；非标准开源协议，属专有条款
维护时间：该子目录最近提交 2026-07-09（运行前 6 天内），活跃

7. 跟同类 Skills 相比的优势

openai/plugins 合集仓库内的 notion、slack、stripe、linear 等均为通用 SaaS 连接器，与“设计转代码”并非同类，故以生态外的知名竞品作对比：

产品	定位	核心差异
figma-openai-plugins（本推荐）	Agent 原生的 Figma↔代码双向工作流，12 个细分 SKILL.md 技能	Figma 官方出品，深度嵌入 Codex 会话内，强调复用项目现有组件规范，而非独立导出产物
Builder.io Visual Copilot	独立 SaaS 平台 + CLI，分析既有代码库模式生成匹配代码	非 Agent Skill 形态，是独立产品；号称已处理超 1000 万次设计转换
Locofy（Lightning/Classic）	基于“大型设计模型”的一键/半自动转换	输出结构最接近 Figma 图层命名，面向“无需开发者即可上线”，同样非 Agent 内嵌
Anima	侧重为设计稿补充“静态文件本身无法表达”的交互行为	2026 年 2 月获 IBM 投资强化企业定位，代码质量非其首要卖点
frontend-design-anthropics-skills	Claude Code 通用前端审美/实现规范技能	面向“从零写 UI”的通用美学规范，不绑定任何设计工具的双向数据源

8. 用户评价

Richard Conway，Medium 独立开发者实测文章《From Prompt to Prototype》（2026-03-08，已抓取核实）：“You can get from blank page to something that looks like a product in a remarkably short time”；同时指出“the last 20% is where the real work is, and also where the styling breaks, the assets vanish”——肯定其原型阶段提速明显，但生成代码离生产可用仍有差距

该插件目前公开可见的一手具名评价仅此一条；其余相关文章多为不可公开访问或转述性质的内容。

9. 其他补充

openai/plugins 仓库同时收录 190+ 个插件（notion、slack、stripe、linear、github 等），figma 是其中文档与技能数量最丰富的插件之一。安装与连接统一走 Codex 平台的 Connected Apps 体系，无需用户单独申请 Figma API Key。

10. 安装使用方式

Codex CLI/App/VS Code 扩展内执行 /plugins，搜索 “Figma” 并安装
首次使用触发某个 figma-* 技能时，Codex 会引导完成 Figma 账号的 Connected App 授权
触发方式：提供 Figma 设计 URL（需含 node-id）并说明意图，如 “implement this Figma design”、“turn this Figma into code”、“create Code Connect templates for my components”
安装/授权后无需重启，按提示提供设计链接即可直接使用

11. 注意事项

官方标注为 Beta 功能，Figma 可能随时调整、暂停或下线，不构成稳定承诺
SKILL.md 明确要求把生成代码当“参考”而非最终产物，需人工检查资源引用、字体、样式层级等细节（见第 8 章用户评价）
许可证为专有的 Figma Developer Terms，非标准开源协议，商用前建议自行确认条款
使用前提是设计文件需通过 Figma 官方连接器授权访问；仅验证 Codex 生态原生支持，OpenClaw、Hermes Agent 未见官方支持声明