Skip to main content

从 Figma 到像素级还原代码

连接 Figma MCP，让 Devin 提取设计 token、构建设计组件，并将结果与你的设计稿进行像素级视觉比对。
AuthorCognition
Category功能开发
FeaturesMCP
1

连接 Figma MCP

在 Devin 能读取你的设计之前，它需要通过 Figma MCP 获取对你 Figma 文件的访问权限。连接完成后，MCP 将供你组织内所有人使用——任何团队成员都可以在自己的 Devin 会话中链接 Figma 文件。
  1. 在 Figma 中，点击你的 profile icon > Settings > Security
  2. 在 Personal access tokens 下，点击 Generate new token
  3. 至少为其在 File content 和 Dev resources 上授予 read 权限
  4. 复制该 token
  5. 在 Devin 中，前往 Settings > MCP Marketplace，找到 Figma 并点击 Enable
  6. 在提示时粘贴你的 token
考虑为 Devin 创建一个专用的 Figma 账号（例如：devin@yourcompany.com），并赋予其对设计文件的查看权限。这样可以避免将 MCP 绑定到个人账号上，并在团队规模扩大时让访问权限管理更加方便。
连接完成后，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 — 提交实现内容，并附上视觉证明和代码变更
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
4

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

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