文章

Cursor + Figma：UI 设计稿一键转代码的高效工作流

Posted 22 days ago Updated 22 days ago
By Eric
31~39 min read

见字如面，与大家分享实践中的经验与思考。

为什么选择Figma设计稿来生成代码？Claude 3系列模型不是已经支持多模态，可以通过截图来生成代码么？

但使用Figma设计稿来生成代码有以下几个显著优势：

  1. 设计交互与标注: Figma设计稿包含完整的设计规范、组件结构和交互信息，比简单截图提供更丰富的上下文

  2. 精确还原: 通过API直接获取设计元素的确切尺寸、颜色、字体和布局信息，实现更精准的代码转换

  3. 协作流程整合: 设计师和开发者可以围绕同一Figma文件协作，减少沟通成本

  4. 批量处理能力: 可以一次性处理多个屏幕或组件，提高开发效率

  5. 资源优化: 直接访问设计原始资源，如图标、图片等，确保资源质量

前期准备

  • Figma：APP 版

  • Cursor：0.47.9 或更高版本

  • MacOS/Windows/Linux

准备 Figma Api Key

在网页/App版本Figma 中通过点击：用户头像 -> Settings -> Security -> Personal access tokens，在如下页面中创建 Figma 的 api key。

image-20250322下午35937001

image-20250326下午21739266

生成 Token 之后，记得拷贝到粘贴板，提供 Cursor MCP Server 的配置使用。

Cursor 中配置 Figma MCP 服务

新建文件.cursor/mcp.json，填入如下配置信息，其中--figma-api-key通过上一步获取到的，拷贝进来即可。

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_FIGMA_API_KEY_HERE",
        "--stdio"
      ]
    }
  }
}
​

image-20250326上午115655541

成功后：

image-20250326上午115618218

mcp工具源码参考：https://github.com/GLips/Figma-Context-MCP

实操步骤

01 Figma 中获取设计稿链接

我使用的本人社区共享的Pilates应用设计稿，这个设计稿是由 Cursor 生成的，生成步骤参考文章：Cusor 使用对话直接生成 Figma UI 设计稿。

本地没有 figma 设计稿的可以直接使用，Figma链接地址：https://www.figma.com/community/file/1485225685820771951

image-20250326下午120238867

02 Cursor 实现代码

示例提示词：

使用 HTML5 + Tailwind CSS实现 figma UI 设计稿：https://www.figma.com/design/OlXlQokYwC0mCPO2WHxWB4/Pilates-App-Design-(Community)?node-id=1-19&t=PeTjezcU2efZUW4G-4，将生成的全部页面都放到一个 html 中展示。

注意：其中的 figma 链接需要替换成你自己的。

生成过程：

image-20250326下午123205816

效果展示：

image-20250326下午122851444

可以看到通过浏览器打开的效果图，基本上是 100% 复刻了 Figma 设计稿。

03 定制化提示词示例

以下是几种常见场景的提示词模板：

场景一：生成React组件

基于Figma设计稿：[Figma链接]，使用React和Tailwind CSS实现一个响应式的导航栏组件。请确保实现悬停效果和移动端适配。

场景二：实现特定功能页面

参考Figma设计稿：[Figma链接]，使用Vue.js实现用户个人资料页面，包含头像上传、信息编辑和保存功能。请考虑表单验证和提交状态处理。

场景三：多页面应用

根据Figma设计稿：[Figma链接]，使用Next.js和styled-components构建一个包含登录、注册、首页和详情页的电商应用原型。

进阶技巧

优化生成代码质量的提示

  1. 明确技术栈：在提示中指定具体的框架版本和首选库

  2. 分解复杂页面：对于复杂UI，先生成页面骨架，再逐步完善各个组件

  3. 提供额外上下文：如品牌风格指南、交互逻辑或API规范

  4. 指定代码规范：明确提出代码风格、命名约定或项目结构需求

可以参考文章：Cursor AI 提示词编写技巧总结

集成到现有项目工作流

如果你有一个已经存在的项目，可以使用以下策略集成Figma-Cursor工作流：

  1. 组件库映射：告诉AI将Figma组件映射到你项目中已有的组件库

  2. 增量开发：一次处理一个页面或组件，逐步集成到现有代码库

  3. 代码风格匹配：提示AI分析你的现有代码，以保持一致的编码风格

  4. 版本控制整合：为每个Figma设计转换创建单独的分支，便于代码审查

示例提示：

分析我项目中的src/components目录，然后基于Figma设计稿[链接]实现一个新的ProductCard组件，保持与现有组件库风格一致，并使用项目中已定义的颜色变量和间距规范。

常见问题与解决方案

1. 生成的代码与设计稿不匹配

可能原因：Figma节点结构复杂或嵌套层级过深 解决方法：在提示中指定关注特定节点ID或使用组件名称来引导AI

2. 资源引用问题

可能原因：图像或图标无法正确导出 解决方法：使用Cursor的Figma MCP插件自动下载所需资源，或提示AI生成占位资源

3. 响应式设计不完善

可能原因：Figma设计稿只提供了单一分辨率视图 解决方法：在提示中明确要求添加响应式设计规则，或提供多尺寸设计稿的链接

最后

通过Cursor与Figma的结合，设计稿到代码的转换效率得到了质的飞跃。这种工作流不仅加速了前端开发过程，还提高了设计还原的准确性，减少了设计师和开发者之间的沟通成本。

随着AI技术的进步，这种工作流将变得更加智能和高效，未来可能会彻底改变前端开发的传统模式。

Cursor 系列精选阅读

探索我的更多Cursor专题文章，按学习路径排序，助您全面掌握这款AI编辑器：

入门篇

进阶篇

设计与开发实战

欢迎关注我的公众号“Eric技术圈”，原创技术文章第一时间推送。

​

​

AIGC
Cursor Figma
License:  CC BY 4.0