戳上方蓝字�?牛皮糖不吹牛*”关注我

大家好，我是牛皮糖！今天给大家推荐一�?让设计师和程序员狂喜�?AI 协作工具——Figma-Context-MCP*！它能将 Figma 设计稿的布局、样式信息实时同步给 AI 编程工具（如 Cursor），�?AI 像资深前端一样精准生成代码，从此告别“设计稿与代码不一致”的烦恼�?

**Figma-Context-MCP 的核心亮�?*

•�?🎨 多框架支�?：无缝对�?React、Vue、Svelte 等主流框架，AI 生成的代码可直接融入项目�?
•�?🔍 智能上下文提�?：自动解�?Figma 文件，提取关键布局信息（尺寸、间距、层级关系），过滤冗余数据，�?AI 专注核心逻辑�?
•�?�?极简配置*：通过标准�?MCP 协议�?Cursor 等工具集成，5 分钟完成环境搭建�?
•�?🔒 本地化处�?：设计数据仅在本地流转，无需上传云端，保护商业隐私�?
•�?🔄 动态协�?：设计稿更新后，AI 生成的代码自动同步调整，支持增量开发�?

谁需要这款工具？

•�?开发�?：用自然语言描述需求（如“按 Figma 稿实现登录页”），AI 自动生成结构清晰的代码�?
•�?设计�?：设计稿修改后，无需手动标注，AI 直接识别变更并更新代码�?
•�?产品经理*：快速验证设计可行性，缩短需求落地周期�?

**极速上�?*

方式一：轻量级CLI启动（推荐大多数用户）`# 1. 全局安装MCP核心模块
npm install -g figma-developer-mcp

2. 配置Cursor的settings.json

{
  “mcpServers”: {
  “Figma-MCP”: {
  “command”: “cmd”,
  “args”: [“/c”, “npx”, “-y”, “figma-developer-mcp”, “–figma-api-key=YOUR-KEY”, “–stdio”]
}
}
}

3. 启动服务

npx figma-developer-mcp –figma-api-key=YOUR_KEY
}`### 注意事项

•�?网络要求*：需保证 Figma 文件可访问，建议本地部署代理加速境外资源�?
•�?首次使用*：需授权 Cursor 访问本地 MCP 服务端口�?
•�?动态调�?：若 AI 生成结果偏差较大，可通过 调整设计优先级 等指令重新约束输出�?

**开源与生�?*

Figma-Context-MCP 基于 AGPL-3.0 协议开源，开发者可定制以下功能�?

•�?扩展设计工具*：支�?Sketch、Adobe XD 等平台（需修改解析逻辑）�?
•�?接入更多 AI 客户�?：兼�?Claude、GPT-Engineer 等工具（参�?MCP 协议文档）�?
•�?企业级部�?：结合内部设计规范库，生成符合公司标准的代码模板�?

项目地址�?
👉 https://github.com/GLips/Figma-Context-MCP

·················END·················

DeepSeek V3可用�?5种精美知识卡片提示词

DeepSeek + 可灵制作视频

DeepSeek 快速实现Word 文档排版

DeepSeek + coze 做飞书知识库

GitHub 8.5k Star Cherry Studio：多语言模型接入神器，DeepSeek 本地知识库也能轻松搞定！

每日更新，期待与你一起成�?

欢迎围观AIP成长的副业知识星�?

GitHub 开源项�?| AI 设计转代码神器MCP ，一键对�?Cursor�?