用途:这是设计流程的最终阶段(Phase 6:FINAL REVIEW),在 Phase 5 审计通过后执行,做视觉验证并输出报告。输入来自 Phase 5:已解决全部 Critical/Major 问题的组件、WCAG AA 验证通过、反 AI-slop 检查通过,并以 design-system.md 作为唯一事实来源。
主要能力与步骤:先用 python3 -m http.server 8899 本地起服务。随后对每个关键页面/组件用 mcp__fuse-browser__browser_screenshot 在 colorScheme: "light" 下截图,再用 colorScheme: "dark" 重拍同一批页面/组件(可同时处理 .dark 类和 prefers-color-scheme,无需手动切换)。针对每个页面,与 Phase 3 的灵感站点截图对比三项声明元素:色彩对比度与可读性、组件间距与对齐、动画与 hover 状态一致性。接着做跨视口检查,用同款截图工具传 viewports: ["mobile", "tablet", "desktop"] 一次完成响应式集合。若对比发现问题,用 mcp__gemini-design__modify_frontend 修复,最多 2 个修复循环。最后生成报告,包含明暗模式并排截图、已验证组件清单及 pass/fail 状态、Phase 5 审计遗留的 Minor 问题,以及本阶段所做修复的摘要。
输出:含 3 种视口下明暗截图的最终报告,所有组件完成视觉验证,缺口已修复(最多 2 循环),设计流程完成并交付 HTML/CSS。
限制:资料未提供收费、价格、适用平台及安装方式等信息。