用途：对 UI 截图做结构化审查，识别设计系统违规并给出可直接落地的修复建议。强调“给截图才分析”，无截图则提示用户补充。
主要能力：分三层分析。地图层看布局区域、元素位置与间距，输出列布局、页眉高度、内容最大宽度、页面内边距、主 CTA 位置与可见性、375px 移动端表现。系统层核对颜色、字体、间距与组件是否符合设计系统，逐项标注匹配或 MISMATCH，并列出组件与模式问题。蓝图层评估布局架构、组件复用、响应式与可访问性，标记小于 44px 的触控目标和超过视口的横向滚动风险。最后给出设计令牌合规评分、三项最重要问题及修复、表现良好项与下一步建议。
使用方式：提供 UI 截图后运行三层分析，再进入设计系统对比与修复建议。若 ./docs/DESIGN_SYSTEM.md 不存在，输出“未找到设计系统文件——已跳过对比，可运行 vibe-coding-document 生成文档”。修复前需查看 TECH_STACK.md 确定 CSS 方案与模板语言：Tailwind + React/Next.js 给 className 修复；Tailwind + Vue/Svelte 给 class 修复；Tailwind + Django/Jinja 给 class 修复；纯 CSS/SCSS 给 CSS 属性修复。注意不要为 Vue、Svelte 或 Django 模板写 JSX 的 className 语法。
适用场景：前端界面走查、设计系统一致性检查、移动端适配与可访问性初筛。
限制：仅基于截图与提供的设计系统文件判断，颜色等为目测估计（“looks like”），并非精确取色；设计系统文件缺失时无法完成令牌对比；收费、价格、平台与具体效果等资料暂未提供。