名称: “figma-implement-design” 描述: “使用Figma MCP工作流（设计上下文、截图、资产和项目约定翻译）将Figma节点转化为生产就绪代码，实现1:1视觉保真度。当用户提供Figma URL或节点ID，或要求实现必须匹配Figma规格的设计或组件时触发。需要有效的Figma MCP服务器连接。” 作者: openai

实现设计

概述

该技能提供了一个结构化工作流，用于将Figma设计转化为生产就绪代码，确保像素级精度。它保证与Figma MCP服务器的一致集成、设计令牌的正确使用以及与设计的1:1视觉匹配。

前提条件

Figma MCP服务器必须已连接并可访问
用户必须提供Figma URL，格式为：https://figma.com/design/:fileKey/:fileName?node-id=1-2
- :fileKey 是文件键
- 1-2 是节点ID（要实现的特定组件或框架）
或者，当使用 figma-desktop MCP时：用户可以直接在Figma桌面应用中选择节点（无需URL）
项目应已建立设计系统或组件库（推荐）

所需工作流

按顺序遵循这些步骤。不要跳过步骤。

步骤0：设置Figma MCP（如果尚未配置）

如果任何MCP调用因Figma MCP未连接而失败，请暂停并设置：

添加Figma MCP：
- codex mcp add figma --url https://mcp.figma.com/mcp
启用远程MCP客户端：
- 在 config.toml 中设置 [features].rmcp_client = true 或运行 codex --enable rmcp_client
使用OAuth登录：
- codex mcp login figma

成功登录后，用户需要重启codex。您应该完成回答并告知他们，以便再次尝试时可以继续步骤1。

步骤1：获取节点ID

选项A：从Figma URL解析

当用户提供Figma URL时，提取文件键和节点ID作为参数传递给MCP工具。

URL格式： https://figma.com/design/:fileKey/:fileName?node-id=1-2

提取：

文件键： :fileKey（/design/后的段）
节点ID： 1-2（node-id查询参数的值）

注意： 当使用本地桌面MCP（figma-desktop）时，fileKey不作为参数传递给工具调用。服务器自动使用当前打开的文件，因此仅需要 nodeId。

示例：

URL：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
文件键：kL9xQn2VwM8pYrTb4ZcHjF
节点ID：42-15

选项B：使用Figma桌面应用中的当前选择（仅限figma-desktop MCP）

当使用 figma-desktop MCP且用户未提供URL时，工具自动使用Figma桌面应用中打开文件的当前选中节点。

注意： 基于选择的提示仅适用于 figma-desktop MCP服务器。远程服务器需要链接到框架或图层来提取上下文。用户必须打开Figma桌面应用并选中一个节点。

步骤2：获取设计上下文

运行 get_design_context，使用提取的文件键和节点ID。

get_design_context(fileKey=":fileKey", nodeId="1-2")

这提供了结构化数据，包括：

布局属性（自动布局、约束、尺寸）
排版规格
颜色值和设计令牌
组件结构和变体
间距和填充值

如果响应过大或被截断：

运行 get_metadata(fileKey=":fileKey", nodeId="1-2") 以获取高层节点映射
从元数据中识别所需的特定子节点
使用 get_design_context(fileKey=":fileKey", nodeId=":childNodeId") 获取各个子节点

步骤3：捕获视觉参考

运行 get_screenshot，使用相同的文件键和节点ID作为视觉参考。

get_screenshot(fileKey=":fileKey", nodeId="1-2")

此截图作为视觉验证的真相来源。在整个实现过程中保持可访问。

步骤4：下载所需资产

下载Figma MCP服务器返回的任何资产（图像、图标、SVG）。

重要： 遵循这些资产规则：

如果Figma MCP服务器返回图像的 localhost 源，直接使用该源
不要导入或添加新的图标包 - 所有资产应来自Figma负载
如果提供了 localhost 源，不要使用或创建占位符
资产通过Figma MCP服务器的内置资产端点提供服务

步骤5：转换为项目约定

将Figma输出转换为项目的框架、样式和约定。

关键原则：

将Figma MCP输出（通常是React + Tailwind）视为设计和行为的表示，而不是最终代码风格
用项目首选的工具或设计系统令牌替换Tailwind实用类
重用现有组件（按钮、输入框、排版、图标包装器），而不是重复功能
一致使用项目的颜色系统、排版比例和间距令牌
尊重现有的路由、状态管理和数据获取模式

步骤6：实现1:1视觉匹配

努力实现与Figma设计的像素级视觉匹配。

指南：

优先考虑Figma保真度以精确匹配设计
避免硬编码值 - 在可用时使用Figma的设计令牌
当设计系统令牌与Figma规格冲突时，优先使用设计系统令牌，但最小化调整间距或尺寸以匹配视觉效果
遵循WCAG可访问性要求
根据需要添加组件文档

步骤7：与Figma验证

在标记完成之前，根据Figma截图验证最终UI。

验证清单：

[ ] 布局匹配（间距、对齐、尺寸）
[ ] 排版匹配（字体、大小、粗细、行高）
[ ] 颜色精确匹配
[ ] 交互状态按设计工作（悬停、活动、禁用）
[ ] 响应行为遵循Figma约束
[ ] 资产正确渲染
[ ] 满足可访问性标准

实现规则

组件组织

将UI组件放在项目的指定设计系统目录中
遵循项目的组件命名约定
除非真正需要动态值，否则避免内联样式

设计系统集成

尽可能始终使用项目设计系统中的组件
将Figma设计令牌映射到项目设计令牌
当存在匹配组件时，扩展它而不是创建新组件
记录添加到设计系统的任何新组件

代码质量

避免硬编码值 - 提取到常量或设计令牌
保持组件可组合和可重用
为组件属性添加TypeScript类型
包含导出组件的JSDoc注释

示例

示例1：实现按钮组件

用户说：“实现这个Figma按钮组件：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15”

操作：

解析URL以提取fileKey=kL9xQn2VwM8pYrTb4ZcHjF 和 nodeId=42-15
运行 get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
运行 get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") 作为视觉参考
从资产端点下载任何按钮图标
检查项目是否有现有按钮组件
如果有，用新变体扩展它；如果没有，使用项目约定创建新组件
将Figma颜色映射到项目设计令牌（例如，primary-500、primary-hover）
根据截图验证填充、边框半径、排版

结果： 匹配Figma设计的按钮组件，集成到项目设计系统中。

示例2：构建仪表板布局

用户说：“构建这个仪表板：https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5”

操作：

解析URL以提取fileKey=pR8mNv5KqXzGwY2JtCfL4D 和 nodeId=10-5
运行 get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") 以理解页面结构
从元数据中识别主要部分（页眉、侧边栏、内容区域、卡片）及其子节点ID
为每个主要部分运行 get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")
运行 get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") 用于完整页面
下载所有资产（徽标、图标、图表）
使用项目的布局原语构建布局
尽可能使用现有组件实现每个部分
根据Figma约束验证响应行为

结果： 匹配Figma设计的完整仪表板，具有响应式布局。

最佳实践

始终从上下文开始

切勿基于假设实现。始终先获取 get_design_context 和 get_screenshot。

增量验证

在实现过程中频繁验证，而不仅仅是最后。这能及早发现问题。

记录偏差

如果必须偏离Figma设计（例如，出于可访问性或技术约束），请在代码注释中记录原因。

重用而非重建

在创建新组件之前始终检查现有组件。代码库的一致性比精确的Figma复制更重要。

设计系统优先

当有疑问时，优先选择项目的设计系统模式，而不是字面的Figma翻译。

常见问题与解决方案

问题：Figma输出被截断

原因： 设计太复杂或嵌套层太多，无法在单个响应中返回。 解决方案： 使用 get_metadata 获取节点结构，然后使用 get_design_context 单独获取特定节点。

问题：实现后设计与不匹配

原因： 实现代码与原始Figma设计之间的视觉差异。 解决方案： 与步骤3中的截图进行并排比较。检查设计上下文数据中的间距、颜色和排版值。

问题：资产未加载

原因： Figma MCP服务器的资产端点不可访问或URL被修改。 解决方案： 验证Figma MCP服务器的资产端点是否可访问。服务器通过 localhost URL提供资产。直接使用这些，无需修改。

问题：设计令牌值与Figma不同

原因： 项目的设计系统令牌与Figma设计中指定的值不同。 解决方案： 当项目令牌与Figma值不同时，为了一致性优先使用项目令牌，但调整间距或尺寸以保持视觉保真度。

理解设计实现

Figma实现工作流建立了一个可靠的过程，用于将设计转化为代码：

对于设计师： 有信心实现将匹配他们的设计，具有像素级精度。 对于开发者： 一种结构化方法，消除猜测并减少来回修订。 对于团队： 一致、高质量的实现，保持设计系统完整性。

通过遵循此工作流，您确保每个Figma设计都以相同的关怀和关注细节级别实现。

Figma设计实现技能Skill "figma-implement-design"