F

figma

figma

github.com/tech-leads-club设计与 UI7.1k217 次安装今天更新

关于 figma

面向将 Figma 设计转化为现有项目实现的开发者技能。它规定先获取设计上下文和截图，再处理资源、实现界面并进行视觉验证。

主要功能

01获取结构化设计上下文
02查看节点截图
03按需检查元数据
04复用项目样式与组件
05验证视觉一致性

适用场景

01实现链接所指的 Figma 画面
02将生成的 React 和 Tailwind 适配项目规范
03对照 Figma 截图检查完成的界面

MCP 相关

它依赖 Figma MCP 服务获取设计上下文、元数据、截图和资源。通过 MCP 客户端提供指向准确 Figma 节点或变体的链接。

安装

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

$npx skills add https://github.com/tech-leads-club/agent-skills --skill figma

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

包含的文件

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

LICENSE.txt

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

登录后评论