design-consistency-auditor

设计一致性审计器

开始审计前，先根据文档了解项目的前端结构。

确保：

• 通过语义令牌统一使用调色板
• 间距遵循项目的尺度
• 各屏幕上的组件保持视觉协调
• 应用设计系统，而非重复实现
• 不累积设计债务

适用场景

• 审计各应用之间设计令牌的一致性
• 检查调色板的使用情况，找出硬编码的十六进制值
• 检查 UI/UX 模式是否在不同屏幕间存在偏差
• 发现重复实现设计系统组件的一次性类
• 根据既定设计标准审查新功能

无障碍合规性需单独检查——使用 accessibility 检查 WCAG、ARIA、键盘访问和对比度。

快速参考

颜色规则

应该： 使用 shadcn 语义令牌（bg-background、bg-card、bg-primary、text-muted-foreground、border-border） 不要： 硬编码十六进制颜色（#000000）或任意值（bg-[#123456]）

组件模式

从项目的设计系统或现有代码库中了解组件类的约定。常见的检查模式包括：

• 卡片：shadcn 的 Card 或项目自有的卡片组件
• 应用外壳 / 布局：项目专用的外壳包装类
• 模态框 / 对话框：项目的对话框组件模式
• 输入框：项目的表单输入类或组件
• 按钮：项目的按钮变体（主要、次要、幽灵）

审计前先从代码库中找出实际的类名——不要假设具体的命名约定。

间距

应该： 使用 Tailwind 尺度（p-4、m-6、gap-4） 不要： 使用任意值（p-[17px]）

无障碍

• 使用语义化 HTML（<button>、<nav>、<main>）
• 为交互元素添加 ARIA 标签
• 文本对比度为 4.5:1，UI 对比度为 3:1
• 焦点状态：focus:outline-none focus:ring-2 focus:ring-primary

响应式设计

• 采用移动优先策略，使用 sm:、md:、lg:、xl: 修饰符
• 响应式排版：text-3xl sm:text-4xl

审计阶段

1. 调色板 - 扫描硬编码颜色，验证主题令牌
2. 组件模式 - 检查卡片、按钮和表单是否使用主题类
3. 间距与布局 - 验证间距尺度是否一致
4. 排版 - 检查标题层级和文本样式
5. 无障碍 - 运行自动化检查，测试键盘操作

避免 AI 式粗劣设计

审查是否存在泛泛的“AI 生成”美学：

• 通用字体（到处都是 Inter、Roboto）
• 白底紫色渐变
• 缺乏个性的刻板布局
• 保守乏味的配色

力求设计鲜明、有品牌特色且富有个性。

---

如需详细清单、示例、报告模板和审计命令，请参阅： references/full-guide.md

相关内容

• audit — 当未指定单一维度时，对无障碍、性能、主题、响应式设计和反模式进行 0–4 分的综合检查。
• accessibility — WCAG 2.1 AA 合规性、ARIA、键盘访问和屏幕阅读器验证。