design-consistency-auditor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Consistency Auditor

设计一致性审核器

Purpose

目的

Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.

Ensures:

Color palettes are used consistently
UI/UX patterns follow best practices
Components maintain visual harmony
Accessibility standards are met
Design system is properly applied
No design debt accumulates

审核并维护前端应用中的设计一致性。在审核前，从文档中了解项目的前端结构。

确保：

调色板使用一致
UI/UX模式遵循最佳实践
组件保持视觉协调性
符合无障碍标准
设计系统得到正确应用
不累积设计债务

When to Use

使用场景

Auditing design consistency across apps
Reviewing color palette usage
Checking UI/UX patterns
Validating component styling
Ensuring accessibility compliance
Identifying design inconsistencies
Reviewing new features for design standards

跨应用审核设计一致性
检查调色板使用情况
审核UI/UI模式
验证组件样式
确保无障碍合规性
识别设计不一致之处
审核新功能是否符合设计标准

Quick Reference

快速参考

Color Rules

颜色规则

DO: Use semantic tokens (

bg-primary

text-base-content

bg-base-100

) DON'T: Hardcode hex colors (

#000000

) or arbitrary values (

bg-[#123456]

)

建议： 使用语义化令牌（

bg-primary

text-base-content

bg-base-100

） 禁止： 硬编码十六进制颜色（

#000000

）或任意值（

bg-[#123456]

）

Component Patterns

组件模式

Cards:
```
.gf-card
```
App shells:
```
.gf-app
```
Modals:
```
.glass-modal
```
Inputs:
```
.glass-input
```
,
```
.form-focus
```
Buttons:
```
btn btn-primary
```
,
```
.btn-secondary
```
,
```
btn-ghost
```

卡片：
```
.gf-card
```
应用外壳：
```
.gf-app
```
模态框：
```
.glass-modal
```
输入框：
```
.glass-input
```
,
```
.form-focus
```
按钮：
```
btn btn-primary
```
,
```
.btn-secondary
```
,
```
btn-ghost
```

Spacing

间距

DO: Use Tailwind scale (

p-4

m-6

gap-4

) DON'T: Use arbitrary values (

p-[17px]

)

建议： 使用Tailwind间距体系（

p-4

m-6

gap-4

） 禁止： 使用任意值（

p-[17px]

）

Accessibility

无障碍

Semantic HTML (
```
<button>
```
,
```
<nav>
```
,
```
<main>
```
)
ARIA labels on interactive elements
4.5:1 contrast for text, 3:1 for UI

Focus states:

focus:outline-none focus:ring-2 focus:ring-primary

语义化HTML（
```
<button>
```
,
```
<nav>
```
,
```
<main>
```
）
交互元素添加ARIA标签
文本对比度达到4.5:1，UI元素对比度达到3:1

焦点状态：

focus:outline-none focus:ring-2 focus:ring-primary

Responsive

响应式设计

Mobile-first with
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
modifiers
Responsive typography:
```
text-3xl sm:text-4xl
```

采用移动优先原则，使用
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
修饰符
响应式排版：
```
text-3xl sm:text-4xl
```

Audit Phases

审核阶段

Color Palette - Scan for hardcoded colors, verify theme tokens
Component Patterns - Check cards, buttons, forms use theme classes
Spacing & Layout - Verify consistent spacing scale
Typography - Check heading hierarchy and text styles
Accessibility - Run automated checks, keyboard testing

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

AI Slop Prevention

避免AI通用化设计

Audit for generic "AI-generated" aesthetics:

Generic fonts (Inter, Roboto everywhere)
Purple gradients on white
Predictable layouts without character
Safe, boring color choices

Push for distinctive, branded designs with personality.

For detailed checklists, examples, reporting templates, and audit commands, see:

references/full-guide.md

审核是否存在通用的“AI生成”风格：

通用字体（处处使用Inter、Roboto）
白色背景搭配紫色渐变
缺乏特色的可预测布局
保守、乏味的颜色选择

倡导具有辨识度、符合品牌调性且富有个性的设计。

如需详细检查清单、示例、报告模板和审核命令，请查看：

references/full-guide.md