$ ~/blog/use-mcp-figma-to-react
🎓 教程
用 MCP 把 Figma 设计稿一键转 React 组件
by 小K·2026-06-20·5 min 读
为什么用 MCP 连 Figma
设计稿到代码的断层，一直是前端最耗时的环节之一。手动量间距、抠颜色、对齐字号——这些机械活儿，正适合交给 AI。
Figma MCP 把设计稿的图层结构、样式 token、自动布局规则，以机器可读的方式喂给 Claude，让它"看得懂"设计，而不只是"看一张图"。
三步跑通
- 安装 Figma MCP 连接器，填入你的 Figma access token
- 在对话里粘贴目标 frame 的链接
- 让 Claude 输出对应的 React + Tailwind 组件
# 复制安装提示词，让 AI 自动完成配置
npx -y @figma/mcp-server
实战技巧
- 先对齐设计 token：把 Figma 的颜色 / 间距变量同步给 AI，产出的代码才会复用你的设计系统，而不是写死魔法数字。
- 分 frame 转换：一次只转一个组件，比整页转换更稳、更易 review。
- 配合代码审查 Skill：转换完用「代码审查助手」过一遍，可访问性与语义化标签往往是 AI 容易遗漏的地方。
设计到代码不必再逐像素手搓。把重复劳动交给 AI，把判断力留给自己。