MCP 实战:从 Figma 设计稿生成前端代码
背景与目标
设计师交付稿与前端实现之间往往存在转换成本。通过模型上下文协议(MCP),我们可以构建自动化桥接,将 Figma 设计稿直接转换为可运行的前端代码。本方案重点在于利用 MCP Server 连接设计源与开发环境,实现样式、布局及组件结构的智能还原。
环境准备
确保本地已安装 Node.js 环境(建议 v20+)及 npm。项目初始化需引入专用的 MCP 服务包。
npm init -y
npm install -D @figma-ai-bridge/mcp-server
配置与接入
1. 获取 Figma 权限
需在 Figma 开发者平台创建应用并生成 Access Token。确保该令牌拥有读取指定设计文件的权限。
2. 定义配置文件
在项目根目录创建 figma-mcp-config.json,填入必要的连接参数:
{
"figma": {
"accessToken": "你的 Figma 访问令牌",
"fileId": "设计稿文件 ID",
"pageId": "页面 ID(可选)"
},
"output": {
"format": "react",
"framework": "vite",
"outputDir": "./src/components"
},
"options": {
"generateTypes":

