Figma MCP Server
连接Figma与大模型的MCP中间件，实现设计到代码的自动转换
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Figma MCP Server。 它的用途是：连接Figma与大模型的MCP中间件，实现设计到代码的自动转换 完整的 Skill 内容见：https://321skill.com/skills/figma-mcp-server-demo-ai-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请分析Figma链接中‘按钮’组件的样式，并生成对应的Tailwind CSS代码。”，它会通过MCP服务器获取该组件的尺寸、颜色、圆角等设计数据，并为您生成可直接使用的CSS类名代码块。或者，您可以说：“将这个卡片设计转换成Vue 3的单文件组件”，AI会提取布局和样式信息，构建出Vue组件的模板、样式与脚本部分。
介绍
Figma MCP Server是一个创新的中间件，它通过Model Context Protocol（MCP）协议，将Figma设计平台与各类大语言模型（LLM）连接起来。它解决了设计师与开发者之间因设计稿交付而产生的沟通与实现鸿沟，能够自动将Figma中的设计元素、图层和样式转换为前端代码，极大提升了从设计到开发的效率。
使用时，您需要先部署该MCP服务器，并在支持MCP协议的AI助手（如Claude Desktop）中配置连接。之后，您就可以直接向AI助手提问，例如“请将Figma文件中的登录页组件转换为React代码”，AI助手会通过该服务器获取Figma设计数据，并生成相应的代码片段。整个过程无需手动切图或测量间距。
这个工具非常适合需要频繁将设计稿落地为代码的前端开发、全栈开发和UI设计师。对于产品经理而言，它也能快速验证设计的技术可行性。
使用建议：确保您拥有Figma文件的访问权限，并了解基本的MCP配置流程。由于转换质量可能受设计规范性和模型能力影响，建议初期用于生成基础框架代码，开发者再进行细节优化。注意保护设计文件中的敏感信息。
核心特点
它并非直接生成代码的独立工具，而是作为标准化的MCP协议服务器，让任何兼容MCP的AI助手（如Claude、Cursor）都能实时读取并处理Figma设计数据，实现了设计工具与AI生态的深度、标准化集成。
注意事项
不适合设计稿不规范或需要高度定制化、复杂交互逻辑的代码生成场景。
常见问题
需要Claude Team或企业版才能用吗？
不需要，只要AI助手支持配置MCP服务器即可，如Claude Desktop。
能生成Vue或小程序代码吗？
取决于模型和提示词配置，该工具提供Figma数据访问能力，生成何种代码由连接的AI模型决定。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-mcp-server-demo-ai-mcp/raw/index.md 读取 Figma MCP Server 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-mcp-server-demo-ai-mcp/raw/index.md（查看排版版本）