figma
连接AI编码代理与Figma的MCP服务器，实现设计与开发的快速集成。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma。 它的用途是：连接AI编码代理与Figma的MCP服务器，实现设计与开发的快速集成。 完整的 Skill 内容见：https://321skill.com/skills/figma/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请根据Figma文件[文件ID]中的登录页设计，生成对应的React组件代码。’，它会通过MCP服务器获取该文件的设计数据，包括按钮样式、布局间距和颜色变量，然后生成结构清晰、样式匹配的JSX和CSS代码。
介绍
这个Skill解决了AI编码代理与Figma设计稿之间缺乏直接连接的问题。传统开发中，开发者需要手动在代码中复现设计细节，效率低下且易出错。通过此MCP服务器，AI代理可以直接读取Figma文件，获取设计规范、组件信息和布局数据，从而自动生成或调整对应的前端代码。
使用方式是通过Python启动一个MCP（Model Context Protocol）服务器，该服务器充当AI代理（如Claude Desktop中的AI）与Figma API之间的桥梁。配置好Figma个人访问令牌和文件ID后，AI代理就能通过标准MCP协议查询设计数据，并将其作为编码上下文。
它非常适合需要频繁将Figma设计转化为代码的前端开发者、全栈开发者以及智能体开发者。当设计稿频繁更新，或需要确保代码与设计高度一致时，这个工具能显著提升工作效率。
建议在使用前确保已拥有Figma文件的访问权限，并妥善保管个人访问令牌。由于依赖网络请求，在Figma API不稳定或设计文件过大时，响应速度可能受影响。初次使用建议从简单的设计文件开始测试。
核心特点
这是专门为MCP协议设计的Figma连接器，使AI编码代理能原生、结构化地读取设计数据，而非简单的截图或手动导出。它通过标准MCP接口，让AI在编码工作流中直接调用设计规范，实现了设计数据到开发上下文的自动化管道。
注意事项
不适合需要离线工作或处理大量、复杂设计系统文件的场景，且高度依赖Figma API的稳定性和访问权限。
常见问题
如何获取Figma个人访问令牌？
在Figma官网账户设置中，找到Personal access tokens部分生成即可。
这个工具支持哪些AI代理？
支持任何兼容MCP协议的客户端，如Claude Desktop、Cursor等。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma/raw/index.md 读取 figma 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma/raw/index.md（查看排版版本）