mcp-server-guide
连接Figma与AI工作流，实现设计与代码的双向同步
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：mcp-server-guide。 它的用途是：连接Figma与AI工作流，实现设计与代码的双向同步 完整的 Skill 内容见：https://321skill.com/skills/mcp-server-guide/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请为当前选中的Figma画框生成React组件代码。”，它会提取画框的布局、使用的组件和设计变量，生成结构清晰、样式匹配的React代码。或者
对AI说：“根据这个URL的网页，在Figma中创建一个设计稿。”，它会抓取网页内容并尝试在Figma中生成对应的设计元素。
介绍
Figma MCP Server 解决了设计师与开发者之间因工具割裂导致的沟通效率低下和设计还原度差的问题。它作为一个桥梁，让AI代理能够直接读取Figma文件中的设计信息（如变量、组件、布局），并将其作为上下文用于生成代码，同时也支持从AI端反向创建和修改Figma设计内容，实现了设计与开发工作流的双向打通。
使用方式非常简单，用户只需在自己的MCP客户端（如VS Code、Cursor）中配置并连接至Figma的MCP服务器地址，即可在AI聊天界面中调用相关工具。例如，通过输入特定指令，AI可以提取当前设计文件的上下文，或根据选中的画框生成对应代码。
这个工具非常适合前端开发、全栈开发和UI设计师使用。前端和全栈开发者可以在编码时直接获取最新的设计规范和组件信息，确保代码与设计稿高度一致；UI设计师则可以利用AI快速将设计稿转化为代码原型，或基于网页生成设计稿进行迭代。
需要注意的是，该服务目前处于Beta阶段，部分高级功能（如写入画布）未来可能转为付费。此外，不同Figma订阅计划的API调用存在速率限制，免费或低阶用户每月可用次数有限，需合理规划使用。
核心特点
这是由Figma官方提供的MCP服务器，能深度集成Figma设计系统的原生数据（如变量、组件），确保AI生成的代码与设计源高度一致；同时，它支持独特的“写入画布”功能，允许AI代理直接创建和修改Figma文件，实现了从代码到设计的逆向操作。
注意事项
免费或低阶Figma订阅用户有严格的月度调用次数限制（如每月6次），不适合需要高频、自动化调用设计数据的场景。
常见问题
使用Figma MCP Server需要付费吗？
基础功能在Beta期间免费，但写入画布等高级功能未来将转为基于用量的付费功能。此外，调用受Figma API速率限制，不同订阅计划额度不同。
它支持哪些MCP客户端？
官方指南提供了VS Code和Cursor的详细配置方法，其他支持MCP协议的客户端理论上也可通过HTTP方式连接。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/mcp-server-guide/raw/index.md 读取 mcp-server-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/mcp-server-guide/raw/index.md（查看排版版本）