spec-figma-design-sync ​

You are an expert design-to-code synchronization specialist with deep expertise in visual design systems, web development, CSS/Tailwind styling, and automated quality assurance.

ASCII 调度图 ​

text
design review / polish specialist phase
  |
  v
selector: task stage + risk domain + evidence gap
  |
  v
spec-figma-design-sync
  |
  v
structured findings / research notes / specialist advice
  |
  v
orchestrator synthesis + user-visible decision

基本信息 ​

字段内容
Agentspec-figma-design-sync
类型UI / Design
归属 skillspec-work
复用次数1 个 skill
Sourceskills/spec-work/references/agents/figma-design-sync.md

什么时候会被调用 ​

  • UI、Figma 对齐、视觉实现、交互状态或响应式体验需要专项审查或迭代。
  • 通常由上层 workflow 选择调用；它不是用户直接执行的 spec-* workflow 入口。
  • 当任务证据不足、风险域明确或需要独立专家视角时，才应该引入该 agent。

Source 角色摘要 ​

You are an expert design-to-code synchronization specialist with deep expertise in visual design systems, web development, CSS/Tailwind styling, and automated quality assurance. Your mission is to ensure pixel-perfect alignment between Figma designs and their web implementations through systematic comparison, detailed analysis, and precise code adjustments.

Source 章节 ​

  • Your Core Responsibilities
  • Responsive Design Patterns and Best Practices
  • Quality Standards
  • Handling Edge Cases
  • Success Criteria
  • Authority 与 Return Contract

输入 ​

  • 设计稿、截图、页面 URL、实现源码、用户流和视觉验收标准。
  • 上层 workflow 应提供明确 scope、相关文件或文档、当前假设和需要回答的问题。
  • 如果依赖 graph、MCP、浏览器或外部资料，需要同时说明 provider readiness 与 degraded 状态。

输出 ​

  • 视觉差异、交互问题、截图证据、修复建议或迭代结果。
  • 输出应返回给 orchestrator 汇总，而不是绕过主 workflow 直接改变最终结论。
  • 对 findings、风险和建议应标注证据边界，避免把推测写成确定事实。

使用边界 ​

  • 不能只凭文字判断视觉质量；可运行页面应结合截图或浏览器证据。
  • Agent 是专业判断角色，不是 tool，也不是固定状态机。
  • 如果当前问题可以由 deterministic script、测试或 provider status 直接确认，应优先使用确定性证据。

与 workflow 的关系 ​

  • Skills 定义入口、步骤和产物；agents 提供局部专家判断。
  • 当前 agent 的 runtime copy 由 spec-first init 在目标项目中选择宿主后从 source 生成。
  • 不要手改 .claude/agents 或 .codex/agents 作为 source；需要修复 runtime drift 时重新运行 init。

源码校准 ​

  • 本页由 website/scripts/generate-agent-detail-pages.js 从 skills/spec-work/references/agents/figma-design-sync.md 生成。
  • 上游 agent 现为 skill-local prompt 资产（skills/<skill>/references/agents/*.md），无 frontmatter；名称取自文件名，description 由生成器从 prompt 首段启发式提取。
  • 分组是官网生成器的用户手册视角，用于解释调度场景；精确角色指令仍以 source agent 文件为准。

阅读下一步 ​