设计一致性审查

要解决的具体问题

当 AI 生成的 UI 文件出现「看起来不对劲」却难以定位的问题时，常见诱因并非组件本身丑陋，而是各部分之间缺乏统一规则：

• 混合圆角：卡片使用尖锐直角，按钮却是全圆角胶囊形
• 多种强调色：同屏出现 2-3 种鲜艳强调色，没有主次之分
• emoji 作为图标：用 🚗🧺⭐ 标记列表、导航或状态，引入大量不可控色相
• 纯黑文本：使用 #000 代替更克制的 #2A2A2A
• 缺失状态：数据面板缺少 empty / loading / error 状态
• 机械文案：按钮写着「Submit」，报错提示「Invalid input」

这些细节叠加后，界面会呈现出典型的「AI 生成感」——组件本身可能合格，但整体缺乏一致性。

技能如何工作

核心能力

该技能基于 StyleSeed 的 74 条设计规则，对 React / Tailwind / HTML 界面进行七维度结构化评分（满分 100）：

• 一致性（20 分）：检查圆角、阴影语言、图标族、控件高度是否统一
• 色彩纪律（16 分）：禁止纯黑文本、硬编码十六进制、滥用状态色
• 层级与排版（16 分）：验证数字与单位比例、字重对比、行高合理性
• 布局与间距（12 分）：检查 8px 栅格、卡片化布局、分组间距逻辑
• 状态完整性（12 分）：确保数据面板有空/加载/错误状态及明确下一步操作
• UX 文案（12 分）：按钮需说明具体动作，错误提示需承担责任而非指责用户
• 动效与打磨（12 分）：动效需统一风格、尊重 prefers-reduced-motion

关键步骤

1. 读取文件，按七个维度从满分开始扣分，每条扣分都需引用具体行号
2. 生成 0-100 分的总分，并按 A（90+）/ B（80-89）/ C（70-79）/ D（60-69）/ F（<60）评级
3. 输出按分数收益排序的修复列表（而非按严重程度），优先解决能最快提分的问题
4. 只测量和建议，不自动编辑：应用修复需用户主动要求

适用边界与注意点

• 只读模式：该技能不会修改或删除任何文件，除非用户明确要求
• 质量门禁：建议在生成 UI 后立即运行，修复列表并重新评分，直到分数 ≥ 80 再交付给用户
• 针对性使用：仅在任务明确匹配其上游来源（StyleSeed）和本地项目上下文时使用
• 验证依赖：修复列表中的应用需用户自行验证命令、代码、依赖和外部服务行为
• 非替代方案：示例不能替代环境特定的测试、安全审查或破坏性操作的用户批准