用途：在网页实现与 Figma 设计稿之间做视觉比对，找出差异并修改代码，使实现与设计规范对齐。适合设计到代码的同步场景，可反复迭代运行直至一致。
主要能力：通过 Figma MCP 访问指定 Figma URL 和节点组件，提取颜色、字体、间距、布局、阴影、边框等设计规格并截图；通过 agent-browser CLI 打开网页 URL，抓取实现截图；系统比对布局定位、排版、颜色、层级结构、响应式断点、交互状态、阴影边框、图标尺寸与定位、最大宽高等。对每个差异记录受影响元素、当前状态、Figma 期望状态、严重程度与建议修复值，并据此修改 CSS/Tailwind 类、组件属性或布局结构。
使用方式：需提供 Figma URL 与节点/组件，以及本地或已部署的网页 URL。抓取实现截图使用以下命令： agent-browser open [url] agent-browser snapshot -i agent-browser screenshot implementation.png
改样式时遵循项目 CLAUDE.md 的编码规范，采用移动优先响应式写法（如 flex-col lg:flex-row），保留深色模式。组件应始终全宽（w-full），不带 max-width 约束，外层不留 px-*，宽度约束和水平内边距交给父级 HTML/ERB 的包装 div，例如： <div class="w-full max-w-screen-xl mx-auto px-5 md:px-8 lg:px-[30px]"> <%= render SomeComponent.new(...) %> </div> 当 Figma 规格与 Tailwind 默认值接近（2-4px 内）时优先用默认值，仅在像素值关键且无接近默认值时才用任意值。完成后应说明“Yes, I did it.”并总结修复内容，同时检查组件在整体设计中的衔接、背景与宽度是否一致。
限制：依赖 Figma MCP 与 agent-browser/Playwright 的可用性；缺少 Figma URL 或网页 URL 时需向用户索取；差异可能是有意为之，需确认；若修复涉及大改动应先文档化并提出最安全方案。资料未提供安装命令、定价、平台支持范围等具体信息。