Gravity Global Figma MCP
连接Figma与Cursor，实现设计稿到代码的自动转换
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Gravity Global Figma MCP。 它的用途是：连接Figma与Cursor，实现设计稿到代码的自动转换 完整的 Skill 内容见：https://321skill.com/skills/gravity-global-figma-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“根据Figma文件‘登录页’中的按钮组件，生成一个React按钮组件代码。”，它会解析Figma设计令牌，生成包含正确样式和属性的JSX代码。或者
对AI说：“把Figma画板‘用户卡片’的布局转换成CSS Grid代码。”，它会提取画板的尺寸、间距和排列信息，输出对应的CSS代码。
介绍
Gravity Global Figma MCP 解决了设计师与前端开发者之间因设计稿交付与代码实现不同步而产生的效率瓶颈。它通过MCP协议，在Cursor IDE中建立与Figma设计文件的实时连接，将设计系统中的组件、样式和布局信息直接转换为可用的前端代码框架，如React组件或CSS样式。
使用时，开发者只需在Cursor中配置好该Skill，并授权其访问指定的Figma文件或团队库。之后，在编写代码时，可以直接引用Figma中的设计元素，或通过指令将选定的设计图层快速生成为代码片段，无需在工具间反复切换和手动对照。
该Skill非常适合需要紧密协作的前端开发、UI设计师以及全栈开发角色。对于追求开发效率、希望减少设计还原误差的团队或个人项目而言，它是一个强大的提效工具。
建议在使用前确保Figma设计稿的组件命名和图层结构清晰规范，这能显著提升代码生成的准确性和可用性。初次使用时，请仔细阅读其配置文档，正确设置访问令牌和文件权限。
核心特点
与同类工具相比，它深度集成于Cursor IDE内部，通过MCP协议实现，无需依赖外部构建流程或独立的转换平台，转换过程更贴近开发者的编码环境，响应更直接。
注意事项
不适合设计稿不规范或高度依赖动态、复杂交互逻辑的页面直接生成完整可运行代码的场景。
常见问题
这个Skill能生成什么类型的代码？
主要生成React组件代码和对应的CSS样式，具体取决于Figma设计稿的结构和配置。
需要Figma的专业版吗？
不一定，但需要拥有对目标设计文件的查看或编辑权限以获取设计令牌等信息。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/gravity-global-figma-mcp/raw/index.md 读取 Gravity Global Figma MCP 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/gravity-global-figma-mcp/raw/index.md（查看排版版本）