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

探索UI设计到代码转换的高效工作流，实现设计稿一键转代码，这事儿放在前两年听起来还有点科幻，但现在已经成了实打实可以落地的工作方式。今天就来拆解一下，怎么把 Figma 和 Cursor 这两样工具组合起来，打通从设计到前端的“最后一公里”。

为什么是 Figma 设计稿，而不是截图？

你可能会问，现在像 Claude 3 这样的模型不是已经能看图生成代码了吗，为什么还要绕一道 Figma？答案其实很简单：截图是“看个大概”，而 Figma 设计稿是“给出全部”。

具体来说，有几大优势决定了它的不可替代性：

• 设计交互与标注
  ：Figma 文件里藏着完整的设计规范、组件结构和交互逻辑，这比一张静态的截图所提供的上下文信息丰富得多，AI 能“读懂”的细节也更多。

• 精确还原
  ：通过 API，AI 可以直接拿到元素的精确尺寸、颜色、字体和布局信息。这就好比给代码生成装上了“毫米级”的测量工具，精准度完全不是截图能比的。

• 协作流程整合
  ：设计师和开发者围着同一个 Figma 文件转，大家在统一的源头上工作，沟通成本自然就降下来了。

• 批量处理能力
  ：一次性能把多个页面或组件丢过去，效率提升立竿见影。

• 资源优化
  ：图标、图片这些原始资源可以直接调用，质量和路径都清晰可控。

前期准备：搭好桥，才好过河

动手之前，先把工具和环境备齐。你需要准备以下三样东西：

• Figma
  ：桌面 App 版本。

• Cursor
  ：0.47.9 或更高版本。

• MacOS / Windows / Linux
  ：都支持。

准备 Figma API Key

这个 Key 是 Cursor 和 Figma 对话的“通行证”。在 Figma 的网页版或 App 里，点击你的头像 →

→ → ，在这里创建一个新的 token。

Token 生成后，记得立刻复制下来，下一步配置 Cursor 时要用。

Cursor 中配置 Figma MCP 服务

在你的项目根目录下，新建一个文件 .cursor/mcp.json，把下面的配置信息填进去。注意把 YOUR_FIGMA_API_KEY_HERE 替换成你刚才复制的那个 Key。

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

配置正确的话，你会看到类似下面这样的成功提示：

实操步骤：把设计变成代码

准备就绪，我们直接上手。

01 从 Figma 中获取设计稿链接

这次实战，我用的是一个开源的 Pilates 应用设计稿。直接在 Figma 社区打开你想要的稿子，把浏览器地址栏里的链接复制下来备用。

如果你本地没有现成的设计稿，可以直接用这个社区共享的 Pilates 应用设计稿来练手。

02 交给 Cursor，一键生成

打开 Cursor，输入下面的提示词。这里的 Figma 链接记得替换成你自己的那份。

使用 HTML5 + Tailwind CSS 实现 figma UI 设计稿：[你的Figma链接]，将生成的全部页面都放到一个 html 中展示。

生成过程大致是这样的：

来看看最终效果：

从浏览器里打开生成的 HTML 文件，你会看到，出来的页面基本上做到了

，这还原度相当可以了。

03 定制化提示词，让结果更称心

日常开发中，需求各不相同。这里提供几种常见场景的提示词模板，可以直接拿来用：

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

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

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

进阶技巧：让 AI 更懂你的项目

优化生成代码质量的提示

想让生成的代码质量更高、更贴近团队规范，可以在提示里加点“料”：

• 明确技术栈
  ：在提示中指定具体的框架版本和首选库，比如 “React 18 + TypeScript”。

• 分解复杂页面
  ：对于复杂的 UI，先让它生成页面骨架，再一步步完善各个组件，效果会好很多。

• 提供额外上下文
  ：比如品牌风格指南、交互逻辑或 API 规范，这些背景信息能让 AI 生成更符合业务需求的代码。

• 指定代码规范
  ：明确提出代码风格、命名约定或项目结构需求，比如“使用默认导出的函数组件”。

集成到现有项目工作流

如果你已经有一个跑着的项目，别担心，这个工作流一样能融入进来：

• 组件库映射
  ：告诉 AI 把 Figma 组件映射到你项目中已有的组件库。

• 增量开发
  ：一次只处理一个页面或组件，逐步集成到现有代码库里，稳扎稳打。

• 代码风格匹配
  ：提示 AI 先分析你现有的代码，然后生成风格一致的代码片段。

• 版本控制整合
  ：为每个 Figma 设计转换创建单独的分支，方便代码审查和回滚。

示例提示：

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

常见问题与解决方案

这条路走下来，难免会碰到几个“坑”，这里提前给你打个预防针。

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

：Figma 节点结构太复杂，或者嵌套层级太深。

：在提示中指定要关注的特定节点 ID，或者直接用组件名称来引导 AI，效果会好很多。

2. 资源引用问题

：图像或图标无法正确导出。

：可以借助 Cursor 的 Figma MCP 插件自动下载所需资源，或者在提示词里让 AI 先生成占位资源。

3. 响应式设计不完善

：Figma 设计稿只提供了一个分辨率下的视图。

：在提示词中明确要求添加响应式设计规则，或者直接提供多个尺寸的设计稿链接。

最后

把 Cursor 和 Figma 这么一结合，设计稿到代码的转换效率确实有了质变。这套工作流不仅让前端开发和切图速度上来了，更重要的是，它让设计的还原度变得极高，设计师和开发之间那些因为“还原不到位”而产生的摩擦也少了许多。

可以预见的是，随着 AI 能力的持续进化，这种工作流会变得越来越智能、越来越顺手。它可能不会完全取代前端开发，但一定会彻底改变我们做前端的方式。