Skip to main content
不想手动完成这些设置？将本页链接粘贴到 Devin 会话中，让它帮你完成所有配置。
1

连接 Figma MCP

在 Devin 能读取你的设计之前，请使用一个可以访问目标文件的账户连接 Figma MCP。
  1. 在 Devin 中，打开 Customize > MCPs，选择 Browse marketplace，找到 Figma。
  2. 按照安装提示操作，然后在 Customize > MCPs 中打开其连接设置。
  3. 为个人账户选择 Personal 访问方式，或选择 Organization 访问方式，以便在你的组织内共享同一个连接。
  4. 选择 Connect，并通过 Figma 的 OAuth flow 授权访问。
对于 Organization 访问方式，请使用一个可以访问团队设计文件的专用 Figma 账户。使用 Personal 访问方式时，每位成员各自连接自己的账户。
连接完成后，Devin 可以读取所连接账户有权访问的已链接 Figma 文件——直接从设计中提取组件层级、颜色、间距、字体排版和布局约束。
2

分享设计链接并向 Devin 输入提示

在你的提示词中粘贴一个 Figma 文件的 URL，并说明你想要实现什么。要具体说明要构建哪些 frame，以及要使用代码库中的哪些部分。高质量 Figma 提示词的关键要素：
  • 链接到具体的 Figma 文件 (而不仅是项目)
  • 指明文件中精确的 frame 或页面——大型文件可能有几十个页面
  • 提及你现有的组件库和 CSS 框架
  • 说明设计 token 的存放位置 (例如 tailwind.config.ts、src/tokens/)
  • 指定新组件的目标文件路径
如果你发现自己在多个会话中重复相同的上下文 (例如，“所有新页面都放在 src/app/”或“我们使用 Radix UI primitives”) ，可以把这些反馈给 Devin，它会自动建议将其保存为 Knowledge，这样你下次就不必重复说明了。
3

Devin 会提取、构建并验证

Devin 通过 MCP 读取 Figma 文件，将设计属性映射到你的代码库，实现这些组件，并在浏览器中对结果进行可视化检查。
  1. 读取 Figma 文件 — 从指定的 frame 中获取组件树、设计 token (例如颜色 #6366F1、间距 24px) 、排版 (Inter, 18px/28px, 500 weight) ，以及自动布局属性
  2. 将 token 映射到你的系统 — 将 Figma 颜色匹配到你最接近的 Tailwind token (例如 #6366F1 → indigo-500) ，并使用你的间距刻度体系，而不是对像素值进行硬编码
  3. 构建组件 — 创建遵循你现有模式的 React 组件，在设计匹配的地方复用 <Card> 和 <Button> 等共享组件
  4. 在浏览器中检查 — 启动你的开发服务器，导航到 localhost:3000/pricing，并在多个视口下将结果与 Figma 设计进行可视化对比
  5. 捕获截图和屏幕录制 — Devin 在桌面、平板和移动端断点处截取整页截图，并录制滚动浏览页面和与悬停状态交互的屏幕录制。它会直接在会话中共享这些内容，方便你对结果进行可视化验证——无需自己拉取分支并运行。
  6. 在各处共享可视化结果 — Devin 将截图和录屏附加到 PR 中，这样评审者无需检出代码即可查看视觉效果。如果你已连接 Slack，Devin 还可以将这些内容发到某个频道，方便你的设计团队在不离开 Slack 的情况下进行评审。
  7. 发起 PR — 提交实现内容，并附上视觉证明和代码变更
4

通过 Devin Review 审查拉取请求（PR）

一旦 Devin 创建 PR，使用 Devin Review 来审查具体实现。Devin Review 可以发现视觉差异、缺失的响应式断点，以及不符合你设计系统的组件。如果有任何需要调整的地方——比如间距不对、缺少 hover 状态、颜色不匹配——直接在 PR 上留下评论，Devin 会进行修复。无需开启新的会话或编写单独的指令。