figma-implement-design 的交付物是代码仓库里的界面。给它一个具体 Frame 或组件链接，它先读设计上下文与截图，再寻找项目已有组件和设计变量，最后在浏览器中对照验证。只给整份文件而不指定节点，通常会增加范围判断和上下文读取工作。
安装与准备
本文介绍 openai/skills 保留的独立 Skill 版本。该仓库已弃用，当前官方示例转至 openai/plugins；这里的步骤对应本页链接的旧仓库版本，不代表最新插件。
在 Codex 对话框输入下面这一行；它不是终端命令。安装后若找不到该 Skill，重启 Codex 再试。
$skill-installer figma-implement-design
- 可运行的目标前端项目
- 已授权且可用的 Figma MCP 连接
- 有权限读取的具体 Frame 或组件链接，最好包含 node-id
当前 Figma 文档提供 Codex 插件入口，也支持终端手动配置：codex mcp add figma --url https://mcp.figma.com/mcp，然后完成授权。插件与本文独立 Skill 是不同的分发形态；已连接可用工具时，不必重复添加。 [4]
第一次怎么用
复制目标 Frame 链接后，在项目中这样输入：
$figma-implement-design
用这个 Figma Frame 实现项目中的设置页：[粘贴带 node-id 的链接]。先读取设计上下文和截图，再检查现有按钮、表单与颜色变量，优先复用。目标路由 /settings，包含移动端布局和焦点状态。完成后运行页面并与设计对照，列出必须偏离设计的地方及原因。
接下来怎样推进
-
定位到一个明确节点。 从链接提取文件与 node-id。只有桌面 MCP 才能直接使用当前选择；远程连接应提供链接。
-
读设计再接项目。 取得上下文与截图，按区域读取复杂页面，并确认图片、图标和字体。把设计变量映射到项目组件与样式约定。
-
边实现边对照。 检查间距、字号、颜色、状态和窄屏行为。出现设计系统与稿件冲突时说明取舍，再验证实际浏览器结果。
把设计链接变成可执行任务
选一个具体 Frame，而不是整个设计文件。远程 Figma MCP 需要包含 node-id 的设计链接；桌面 MCP 才能读取当前选中节点。把目标页面路径、已有组件库、希望保留的交互和需要对照的屏幕宽度一起交代。比如：“实现这个设置面板节点，复用项目现有表单控件；只改 app/settings，完成后分别检查桌面和 390px 宽度，列出与设计仍有差异的地方。”
设计上下文与截图各解决一半问题：上下文给出层级、尺寸、颜色和资源，截图让人发现实际排版与视觉关系。如果节点太大，先按页头、内容区、表单和底部操作拆开读取。实现前确认图标、字体与图片在项目里有没有对应资源；不要因为读不到资源就悄悄换成貌似相近的图。
检查实现是否真的对应节点
先运行项目并打开目标路由，再用同一宽度比较实现与设计。依次核对结构、间距、字体、颜色、边框、交互状态和窄屏换行；任何视觉差异都应能指向一个节点或样式决定。最后检查键盘焦点、表单错误和空状态，因为静态设计截图通常覆盖不了这些状态。若设计稿与项目组件规范冲突，把差异列出来，再选择沿用组件或单独扩展；不要把“像截图”当成唯一验收条件。
交付后先检查什么
交付应包含代码改动、可访问的页面、验证情况和明确偏差。先看布局和资源是否齐全，再检查键盘焦点、错误态和窄屏内容；静态截图一致并不证明表单行为和无障碍要求都已完成。
按区块比对设计与实现
一个多页面销售站的实践提醒：不要把整个 Figma 文件一次性交给 Agent。按页面区块实现，每完成一块就在浏览器中截同宽度的图，与对应 Frame 比较，再把具体差异写进下一轮任务。这样更容易发现间距、层级和资源遗漏；做完一个区块再推进下一个。
常见卡点
设计上下文太大。 先读取节点目录，再分区域取子节点，避免凭截断结果补布局。
图片或图标加载失败。 核对 MCP 返回的资源位置和当前环境的可访问性，不能默默换成不相干的占位图。
想直接编辑 Figma 画布。 这个 Skill 面向代码实现；修改画布属于不同工作流，应明确更换任务。