Figma 设计稿转代码
设计
GLips/Figma-Context-MCP15,544 星标
Graham Lipsman
cursorclaudewindsurfgeneric
FreeOpen SourceAPI
关于此服务器
向编码智能体提供 Figma 设计稿布局数据的 MCP 服务器。让 Cursor 等工具一次性还原设计稿，比贴截图的实现精度高得多。
安装方式
npx -y figma-developer-mcp --figma-api-key=<key> --stdio常见问题
Figma Context MCP 怎么提升设计稿还原度？
它不给 AI 截图，而是读取 Figma API 返回的布局、颜色、字体等设计元数据，压缩简化后交给模型。相比看图写码，AI 拿到的是精确数值，一次性还原设计稿的准确率显著更高。
怎么在 Cursor 里配置 Figma Context MCP？
在 Figma 账号设置里生成个人访问令牌，然后在 Cursor 的 MCP 配置加入 npx -y figma-developer-mcp --figma-api-key=<key> --stdio。使用时把 Figma 文件或选区链接粘给 AI 即可。
使用 Figma Context MCP 需要 Figma 付费版吗？
不需要。服务器免费开源（MIT），Figma 免费版账号即可生成 API 令牌读取自己的文件；只要你对目标文件有查看权限，AI 就能读取其设计数据。