把 Figma 设计稿搬进 IDE：一篇看得懂的 Dev Mode MCP Server 全指南

如果你曾对着 Figma 文件手动敲像素，或者反复问设计师“这个按钮的圆角是多少”，这篇文章能帮你把 80 % 的重复劳动交给 AI。
本文基于 Figma 官方文档与真实项目经验，手把手带你把 Dev Mode MCP Server 跑起来，并附上一份可复制的示例仓库。

1. Dev Mode MCP Server 是什么？

一句话解释：
Dev Mode MCP Server 是 Figma 官方推出的本地服务器，把设计文件转成结构化数据，让 AI 在 IDE 里直接读取并生成代码。

传统做法	用 MCP Server 后
手动量尺寸、抄色值	AI 一键拿到变量
截图给 AI 猜布局	AI 同时拿到截图 + 精确代码
代码与设计脱节	通过 Code Connect 自动复用组件

2. 谁适合用？需要准备什么？

角色	收益
前端工程师	减少 50 % 以上样式手写
独立开发者	设计稿秒变 MVP
设计系统维护者	变量、组件一键同步

前置条件

已安装 Figma 桌面版（必须，网页版不行）
代码编辑器支持 MCP：VS Code、Cursor、Windsurf、Claude Code
网络通畅（本地 127.0.0.1，无需翻墙）

3. 三步完成本地部署

Step 1：在 Figma 里打开开关

打开任意 .fig 文件。
左上角 Figma 菜单 → Preferences → Enable Dev Mode MCP Server。
屏幕底部出现绿色提示条，即表示服务器已启动，地址固定为
```
http://127.0.0.1:3845/mcp
```

Step 2：把服务器“挂”到编辑器

下面以 VS Code 为例，其余编辑器步骤一致。

⌘/Ctrl + Shift + P → 搜索 MCP:Add Server。
选 HTTP，粘贴上面的地址。
Server ID 填 Figma Dev Mode MCP，回车。

编辑器会在 mcp.json 里生成：

{
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

打开聊天面板（⌥⌘B 或 ⌃⌘I），切换到 Agent 模式，输入 #get_code 验证。
若返回工具列表说明连接成功；若空白，重启 Figma 与编辑器。

Step 3：验证

在 Figma 里随意选中一个 Frame，回到编辑器输入：

Generate React code for my selection

如果 AI 返回了 Tailwind 类名，环境就 OK 了。

4. 用 AI 生成第一行代码：两种输入方式

方式	适用场景	操作
Selection-based（选中即生成）	迭代单个组件	1. 在 Figma 里点选 Frame 2. 在编辑器里直接提问
Link-based（粘贴链接）	分享整页设计	1. Figma → Share → Copy link to frame 2. 在提示词里贴链接

注意：链接方式 AI 不会真的打开网页，只会提取 node-id，所以不用担心权限问题。

5. 五个核心工具详细拆解

工具	一句话作用	常用提示词示例
`get_code`	生成 React + Tailwind 代码骨架	“用 Vue 改写我的选择”
`get_variable_defs`	提取颜色、间距、字体变量	“列出本页所有 token 名称和值”
`get_image`	截图保留布局像素	默认关闭，需手动在 Preferences 打开
`get_code_connect_map`	把 Figma 节点映射到真实组件	“告诉我这个卡片对应哪个文件”
`create_design_system_rules`	输出一份规则文件，供 AI 下次遵循	保存到 `rules/` 目录即可

6. 真实项目复盘：从设计到可运行页面的全过程

下面以开源仓库 vibe-coding-web 为例，展示一条完整链路。

6.1 项目结构

vibe-coding-web/
├─ src/               # 生成的 React 代码
├─ .prompt/           # 提示词模板与历史
└─ docs/images/       # 设计稿与真机截图对比

6.2 生成流程

设计师交付：3 张移动端页面（欢迎、登录、仪表盘）。
打开 Dev Mode MCP Server，按上面三步部署。

运行指令

执行 @.prompt/prompt.md 中的“生成页面”任务

AI 做的事
- 调用 get_image 拿到视觉稿
- 调用 get_code 拿到 Tailwind 代码
- 调用 get_variable_defs 同步颜色、间距
- 把代码写入 src/pages/
人工审查
- npm start 本地预览
- 用 Cursor 的 Tab 补全微调间距
- 最终效果见下图：

设计稿	生成页面

肉眼可见，布局 1:1 还原，颜色与圆角偏差 < 2 px。

7. 常见问题 FAQ

Q1：生成的代码全是 `absolute`，正常吗？

A：Figma 默认导出如此。可在提示词里加：

请用 flex 或 grid 重写布局，避免 absolute。

Q2：AI 不认识我的组件库怎么办？

A：先在项目根目录运行

# 让 AI 扫描本地组件
npx figma-cli connect

再启用 get_code_connect_map，AI 就能按实际路径引用 <Button /> 而不是手搓按钮。

Q3：响应式断点如何处理？

A：在 Figma 里用 Auto-layout 把 Frame 拉宽，确认自适应无误后再生成。否则 AI 会按固定尺寸输出。

Q4：提示词太长会被截断？

A：把通用规则拆成 rules/design-system.md，让 AI 只读一次即可。详见仓库 .prompt/ 示例。

8. 下一步：让 AI 学会你的设计系统

任务	工具	示例命令
同步 token	`get_variable_defs`	“把颜色变量写入 tailwind.config.js”
同步组件映射	`get_code_connect_map`	“更新 Button 的映射到 src/ui/Button.tsx”
生成 service 层	自定义 prompt	“根据登录页字段生成 POST /login 调用代码”

一旦跑通，你可以把整套流程写成一条 CI 脚本：
设计稿合并 → AI 自动生成代码 → 人工 review → 自动部署。

结语

Dev Mode MCP Server 目前还处于开放测试，功能会迭代，但核心思路已经跑通：
让设计稿成为 AI 的“第一性原理”，减少人类在像素与代码之间的往返。

如果你准备好了，打开 Figma → Preferences → Enable Dev Mode MCP Server，今天就试试把下一个页面交给 AI 吧。

如何用AI将Figma设计稿秒变代码？三步部署Dev Mode MCP Server实战指南