SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场figma-design-sync

figma-design-sync

设计与创作

查看项目

更新于 10-16 04:16

技能介绍

用途

figma-design-sync 是一个设计到代码的同步技能，用于检测并修复网页实现与其 Figma 设计稿之间的视觉差异。它适合在需要将前端实现迭代对齐到 Figma 规格时使用。

主要能力

该技能围绕以下环节展开：

  • 设计捕获：使用 Figma MCP 访问指定的 Figma URL 与节点/组件，提取颜色、字体、间距、布局、阴影、边框等设计规格，并截图载入。
  • 实现捕获：使用 agent-browser CLI 打开指定网页/组件 URL，截取当前实现的高质量截图。
  • 系统化对比：对 Figma 设计与实现截图进行细致视觉对比，分析布局与定位（对齐、间距、外边距、内边距）、字体（字族、字号、字重、行高、字距）、颜色（背景、文字、边框、阴影）、视觉层级与组件结构、响应式行为与断点、可见的交互状态（hover、focus、active）、阴影/边框/装饰元素、图标尺寸与定位样式、最大宽高。
  • 差异记录：对每处差异记录受影响的元素或组件、实现中的当前状态、Figma 中的期望状态、差异严重程度（critical、moderate、minor）以及带精确数值的修复建议。
  • 精确实现：修改 CSS/Tailwind 类、组件属性或配置、布局结构；遵循 AGENTS.md 中的项目编码规范；使用移动优先的响应式模式；保留深色模式支持。
  • 验证与确认：修改后明确说明“Yes, I did it.”并总结修复内容，同时检查组件在整体设计中的契合度、背景与宽度是否与其他元素一致。

使用方式

实现捕获使用以下命令：

agent-browser open [url]
agent-browser snapshot -i
agent-browser screenshot implementation.png

组件宽度理念

  • 组件应始终为全宽（w-full），且不包含 max-width 约束。
  • 组件不应在外层 section 级别设置内边距（section 元素上不加 px-*）。
  • 所有宽度约束与水平内边距应由父级 HTML/ERB 文件中的包装 div 处理。

响应式包装模式

在父级 HTML/ERB 文件中包装组件时使用：

<div class="w-full max-w-screen-xl mx-auto px-5 md:px-8 lg:px-[30px]">
  <%= render SomeComponent.new(...) %>
</div>

该模式提供：w-full（所有屏幕全宽）、max-w-screen-xl（最大宽度约束 1280px，使用 Tailwind 默认断点值）、mx-auto（内容居中）、px-5 md:px-8 lg:px-[30px]（响应式水平内边距）。

优先使用 Tailwind 默认值

当 Figma 设计足够接近时，使用 Tailwind 默认间距刻度：

  • 用 gap-10（40px）替代 gap-[40px]
  • 移动端用 text-3xl、较大屏幕用 md:text-[45px] 替代 text-[45px]
  • 用 text-lg（18px）或 md:text-[20px] 替代 text-[20px]
  • 用 w-14 h-14 替代 w-[56px] h-[56px]

仅在以下情况使用 [45px] 这类任意值：精确像素值对匹配设计至关重要；没有足够接近（2-4px 以内）的 Tailwind 默认值。

常用 Tailwind 值：间距 gap-2（8px）、gap-4（16px）、gap-6（24px）、gap-8（32px）、gap-10（40px）；文字 text-sm（14px）、text-base（16px）、text-lg（18px）、text-xl（20px）、text-2xl（24px）、text-3xl（30px）；宽高 w-10（40px）、w-14（56px）、w-16（64px）。

响应式布局模式

  • 使用 flex-col lg:flex-row 在移动端堆叠、大屏横向排列。
  • 使用 gap-10 lg:gap-[100px] 实现响应式间距。
  • 使用 w-full lg:w-auto lg:flex-1 使区块响应式。
  • 除非绝对必要，不使用 flex-shrink-0。
  • 从组件中移除 overflow-hidden，必要时在包装层处理溢出。

良好组件结构示例

<!-- 在父级 HTML/ERB 文件中 -->
<div class="w-full max-w-screen-xl mx-auto px-5 md:px-8 lg:px-[30px]">
  <%= render SomeComponent.new(...) %>
</div>

<!-- 在组件模板中 -->
<section class="w-full py-5">
  <div class="flex flex-col lg:flex-row gap-10 lg:gap-[100px] items-start lg:items-center w-full">
    <!-- 组件内容 -->
  </div>
</section>

应避免的常见反模式

组件中不要这样做：

<!-- 错误：组件自带 max-width 和内边距 -->
<section class="max-w-screen-xl mx-auto px-5 md:px-8">
  <!-- 组件内容 -->
</section>

应改为：

<!-- 正确：组件全宽，由包装层处理约束 -->
<section class="w-full">
  <!-- 组件内容 -->
</section>

不要在 Tailwind 默认值接近时使用任意值：

<!-- 错误：不必要地使用任意值 -->
<div class="gap-[40px] text-[20px] w-[56px] h-[56px]">

应优先使用 Tailwind 默认值：

<!-- 正确：使用 Tailwind 默认值 -->
<div class="gap-10 text-lg md:text-[20px] w-14 h-14">

质量标准

  • 精确：使用 Figma 中的精确值（如“16px”而非“约 15-17px”），但在足够接近时优先使用 Tailwind 默认值。
  • 完整：处理所有差异，无论多小。
  • 代码质量：遵循 AGENTS.md 中项目特定的前端约定。
  • 沟通：具体说明改了什么以及为什么。
  • 可迭代：让修复可被再次运行以验证。
  • 响应式优先：始终实现移动优先的响应式设计与适当断点。

边界情况处理

  • 缺少 Figma URL：向用户索取 Figma URL 与节点 ID。
  • 缺少网页 URL：索取用于对比的本地或已部署 URL。
  • MCP 访问问题：清楚报告与 Figma 或 Playwright MCP 的连接问题。
  • 差异含义不明：当某处差异可能是有意为之，记录并请求澄清。
  • 破坏性变更：若修复需要大量重构，记录问题并提出最安全的方案。
  • 多次迭代：每次运行后，根据剩余差异建议是否需要再次迭代。

成功标准

满足以下条件即成功：Figma 与实现之间的所有视觉差异均被识别；所有差异均以精确、可维护的代码修复；实现遵循项目编码规范；明确以“Yes, I did it.”确认完成；可反复运行直至完全对齐。