跳转到主要内容
在上线前发现设计偏差。此自动化会在每个包含 UI 变更的 PR (拉取请求) 上运行：它会截取更新后组件的截图，通过 Figma MCP 拉取对应的 Figma 画框，并在 PR 上发布内联审查，对间距、颜色、字体排版和布局差异进行具体标注。

使用此模板

在 Devin 中打开 PR 上的 Figma 设计审查，并使用默认配置创建此自动化。你可以在保存前按需自定义。
想看可实际操作的完整演示？请参阅 分步教程，了解如何使用 PR 上的 Figma 设计审查。

​
这项自动化能做什么

设计评审是前端工程中最难自动化的环节之一。Figma MCP 让 Devin 能通过编程方式访问权威设计稿——令牌、组件规格、画框尺寸等——从而将渲染出的组件与设计师实际规定的内容进行比对，并针对差异给出精确反馈。

​
工作方式

触发器: GitHub 事件 — pull.request
  • 事件: github:pull_request
    • 条件:
      • action eq opened
      • repository.full_name eq your-org/your-repo
Devin 会执行的操作: 基于完整的事件上下文启动会话，执行下面的提示，并在失败时 (可选) 通知你。

​
前提条件

  • 集成:
  • MCP 服务器:
    • Figma MCP — 用于将 Devin 连接到 Figma

​
示例提示

此模板自带以下提示。点击 使用模板 后，你可以编辑它，也可以保持原样。

​
进行设置

  1. 在 Devin 中打开 Automations → Templates。
  2. 点击 PR 上的 Figma 设计审查。系统会打开创建页面，并预先填好此模板。
  3. 连接所有必需的集成，如果你还没有安装 MCP 服务器，也请先安装。
  4. 替换触发条件中的所有占位符值 (例如，将 your-org/your-repo 替换为你的实际 repo) 。
  5. 查看提示，并根据你团队的语言、规范和护栏进行调整。
  6. 点击 创建自动化。
大多数自动化模板都包含建议的 ACU 和调用限制，以便在 rollout 初期控制成本。在你对自动化的行为有足够信心之前，请保持这些设置不变；之后再根据你的工作负载提高它们。

​
何时使用此模板

  • 高度依赖设计系统，且非常重视视觉还原度的团队
  • 拥有大量贡献者、设计感觉参差不齐的大型前端代码库
  • 减少设计评审的瓶颈 (无需等待设计师审核每个拉取请求 (PR) )
  • 确保整个产品的视觉一致性

​
自定义建议

  • 将范围限定为特定代码仓库、目录或文件模式
  • 配置设计令牌的容差 (像素级精确 vs. “足够接近”)
  • 为每个 PR 模板添加必填的 Figma 文件 ID
  • 与设计系统的 lint 规则配合使用，在出现较大偏差时阻止合并

​
另请参阅