Figma 设计稿转代码？我🍉静静地看cursor表演🚀~极详细【使用cursor + figma-develope

jimeng-2025-06-12-3990-少女头部，画面丰富，漫画，赛朋博克.jpeg

作为前端开发人员，相信大家一定都想过，要是能快速的绘制设计稿就好了，要是有什么工具能一键转代码就好了，今天，为了不再当切图仔，给大家分享一个figma设计稿转前端代码的mcp!

总体用下来，就是，真香！ 哈哈！来，废话不多说，先让我们来看下整体实现流程！

接下来，就让我们正式开始操作🚀~

一、Figma 准备工作

1. 获取 Figma Access Token

（1）进入 Settings → Security → Generate new token

（2）生成 Key 时需开启 Read 权限（否则 MCP 读取会报错）

⚠️ 典型报错：
Error fetching file: Cannot read properties of undefined (reading 'children')

（3）生成的 Key 仅显示一次，请立即保存

2. 准备设计稿链接

选中目标页面（Group 或 Frame）
通过 Copy/Paste as → Copy link to selection 获取链接

获取的设计稿链接-示例： www.figma.com/design/7vac…

▶️ 常见问题：

Q：没有 "Copy link to selection" 选项？
A：先组合元素（Group Selection）再操作
Q：没有现成设计稿？
A：

从模板库选择模板 → Open in Figma
复制页面到自己的工作区
获取链接

⚠️ Open in Figma 加载可能较慢，请耐心等待

二、配置 Figma Developer MCP

1. 安装流程

访问 Figma-Context-MCP GitHub 复制配置模板，将 YOUR-KEY 替换为你的 Token：

Windows

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

MacOS / Linux


{
    "mcpServers": {
    "Framelink Figma MCP": {
            "command": "npx",
            "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
        }
    }
}

✅ 安装成功标志：MCP 状态灯变绿

▶️ 故障排查：

出现 0 enabled tools 红标？
🔧 解决方案：

检查 Node 版本 ≥18
清除 NPX 缓存：

npx clear-npx-cache

三、cursor提示词+生成结果

1、不同前端项目提示词

（1）生成HTML+Tailwind 提示词

你是一个大厂资深前端研发工程师，根据我提供的Figma UI设计稿：
@https://www.figma.com/design/7vacr5ZSzAnRNrGYgFWMRG/Untitled?node-id=4-72&t=g4zFQFEWQtvZVxDD-4

要求：
1. 使用 HTML + Tailwind CSS 实现
2. 演示方案：
- 每个界面独立存为 HTML 文件（如 home.html/profile.html 等）
- index.html 通过 iframe 平铺展示所有页面（ifame所在div尺寸 375x812 尺寸）

（2）生成Taro 项目页面提示词

你是一个大厂资深前端研发工程师，根据我提供的Figma UI设计稿，生成前端页面
1、Figma UI设计稿：@https://www.figma.com/design/7vacr5ZSzAnRNrGYgFWMRG/Untitled?node-id=4-72&t=g4zFQFEWQtvZVxDD-4
2、生成前端代码
- 前端语言使用当前项目所用框架taro
- 按页面构建代码放入pages中，无对应页面则创建
- 图片放入当前项目/src/assets/images文件夹下
- 图片文件按页面存放，没有对应页面的图片文件夹则创建再存放
- 样式严格按照提供的设计稿1:1绘制
- 数据可先采用假数据
- 一切开发规范参照当前项目

3、按页面创建，创建完一个页面等我确认后继续

（3）生成UniApp 项目页面提示词

你是一个大厂资深前端研发工程师，根据我提供的Figma UI设计稿，生成前端页面
1、Figma UI设计稿：@https://www.figma.com/design/7vacr5ZSzAnRNrGYgFWMRG/Untitled?node-id=4-72&t=g4zFQFEWQtvZVxDD-4
2、生成前端代码
- 前端语言使用当前项目所用框架uniapp
- 按页面构建代码放入pages中，无对应页面则创建,index 页面使用设计稿中的welcom页面代替
- 图片放入当前项目/src/static/images文件夹下
- 图片文件按页面存放，没有对应页面的图片文件夹则创建再存放
- 样式严格按照提供的设计稿1:1绘制
- 数据可先采用假数据
- 一切开发规范参照当前项目
3、按页面创建，创建完一个页面等我确认后继续

2、生成的页面

纯html页面

taro、uniapp项目页面

3. 生成的代码

Taro 代码结构
UniApp 代码结构

✅ 特点：

代码规整度高
完整注释
语义化命名

四、mcp工作流程

在 Cursor Chat 输入提示词（建议使用 Claude-3.7/4-Sonnet）
调用 figma-developer-mcp：
调用get_figma_data =》调用download_figma_images

graph LR
A[获取设计稿元数据] --> B[下载图片资源]
B --> C[生成代码]

元数据示例

cursor响应截图

五、使用感受

✅ 优点

高还原度（需少量二次开发）
代码规范性强
自动生成完整注释
符合语义化命名规范

⚠️ 缺点

设计稿质量依赖：

非常规设计易导致还原错误
（示例：未使用 Fill 填充的背景色读取失败）

项目适配：

需提前声明设计尺寸（如 750 vs 375 差异）
(在taro项目中使用时，由于取到的设计稿尺寸是375x812，而项目中的尺寸设计尺寸是750，所以导致渲染的页面整体缩小了一半)
故而，在使用的时候应先让cursor充分了解当前项目
针对以上问题，修改项目配置或设计稿尺寸，此处修改项目配置

图片下载异常：

经常出现图片下载失败（多次尝试下载即可）

使用技巧：

分批生成设计稿：一次选择多个设计稿可能会生成报错，建议分批生成
明确项目编码规范：否则会对cusor生成的bug反复调试，即使让cursor修改，仍然需要时间

🎯 总结

效率提升显著：熟练使用后可快速产出静态页面
越用越智能：随着使用频次增加，AI 会逐步适应项目习惯

 Use more, code more, joy galore! 🚀

以上，就是今天分享的全部内容了，如有错误，欢迎指正~

Figma 设计稿转代码？我🍉静静地看cursor表演🚀~