F

figma

figma

github.com/openai设计与 UI28.4k5.8k 次安装18 周前更新

关于 figma

这项技能通过 Figma MCP 服务获取设计上下文和截图，为基于 Figma 的实现提供流程指引。它面向将 Figma 画面转换为现有项目代码并按设计验证结果的开发者。

主要功能

01获取所选节点的结构化上下文
02读取截图与元数据
03从服务端点下载资源
04按项目设计令牌调整实现
05对照 Figma 验证界面

适用场景

01在现有项目中实现链接指向的 Figma 画面
02通过元数据处理过大的设计上下文响应
03将完成的界面与 Figma 参考稿对照

MCP 相关

通过 Figma MCP 服务获取设计上下文、元数据、截图和资源。流程要求在实现前先获取上下文和截图。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/openai/skills --skill figma

安装后在 Claude Code 中输入/figma确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt

agents/

openai.yaml

assets/

figma-small.svg

icon.svg

references/

figma-mcp-config.md

figma-tools-and-prompts.md

详细介绍

Figma MCP

使用 Figma MCP 服务进行 Figma 驱动的实现。有关设置和调试详情（环境变量、配置、验证），请参阅 references/figma-mcp-config.md。

Figma MCP 集成规则

这些规则定义了如何将 Figma 输入转换为此项目的代码，必须遵循这些规则来完成每项 Figma 驱动的更改。

必需流程（不得跳过）

首先运行 get_design_context，获取确切节点的结构化表示。
如果响应过大或被截断，运行 get_metadata 获取高层节点图，然后仅针对所需节点重新运行 get_design_context。
运行 get_screenshot，获取正在实现的节点变体的视觉参考。
只有在同时获取 get_design_context 和 get_screenshot 之后，才能下载所需资源并开始实现。
将输出（通常为 React + Tailwind）转换为符合本项目约定、样式和框架的实现。尽可能复用项目的颜色令牌、组件和字体排版。
完成前，针对 Figma 验证外观和行为是否 1:1 一致。

实现规则

将 Figma MCP 输出（React + Tailwind）视为设计和行为的表示，而非最终代码风格。
在适用时，用项目首选的实用类或设计系统令牌替换 Tailwind 实用类。
复用现有组件（例如按钮、输入框、字体排版、图标封装），而不是重复实现其功能。
始终使用项目的颜色系统、字体排版比例和间距令牌。
遵循代码库中已有的路由、状态管理和数据获取模式。
力求与 Figma 设计在视觉上 1:1 一致。如有冲突，优先使用设计系统令牌，并尽量小幅调整间距或尺寸以匹配视觉效果。
根据 Figma 截图验证最终 UI 的外观和行为。

资源处理

Figma MCP 服务提供可用于获取图像和 SVG 资源的资源端点。
重要：如果 Figma MCP 服务为图像或 SVG 返回 localhost 来源，请直接使用该图像或 SVG 来源。
重要：不要导入或添加新的图标包，所有资源都应包含在 Figma 负载中。
重要：如果提供了 localhost 来源，不要使用或创建占位内容。

基于链接的提示

该服务基于链接：复制 Figma 画板/图层链接，并在请求实现帮助时将该 URL 提供给 MCP 客户端。
客户端无法浏览该 URL，但会从链接中提取节点 ID；务必确保链接指向所需的确切节点/变体。

参考资料

references/figma-mcp-config.md — 设置、验证、故障排查和基于链接的使用提醒。
references/figma-tools-and-prompts.md — 工具目录，以及用于选择框架/组件和获取元数据的提示词模式。

评论

支持 Markdown

登录后评论