Evaluate 命令

    预计阅读时间: 9 分钟

    Evaluate 类命令用于评估现有设计的质量和一致性。Impeccable 提供两种评估方式：audit 进行量化技术检查，critique 进行定性设计审查。

    Tip

    建议先运行 critique（定性分析）了解整体方向，再运行 audit（量化检查）定位具体问题。

    audit

    五维度技术质量审计，按 P0-P3 严重级别输出发现。

    用法

    /impeccable audit <target>

    <target> 可以是页面名称、组件名或路径。不指定 target 时审计当前上下文中的设计。

    审计维度

    Audit 从五个维度评估设计质量：

    维度说明检查项
    Accessibility可访问性WCAG 合规、语义化标签、键盘导航、屏幕阅读器支持
    Performance性能图片优化、关键 CSS、布局偏移、资源加载策略
    Theming主题一致性设计令牌使用、颜色系统、间距系统、字体层级
    Responsive响应式断点适配、弹性布局、触控目标尺寸、内容流式布局
    Anti-patterns反模式内联样式、魔法数字、重复代码、缺失错误状态

    评分系统

    每个维度独立评分 0-4：

    分数等级含义
    4Excellent无明显问题，遵循最佳实践
    3Good少量可优化点，不影响使用
    2Fair存在明显问题，需要改进
    1Poor多个严重问题，需要重点关注
    0Critical存在阻断性问题，必须修复

    严重级别

    发现的问题按严重程度标记为 P0-P3：

    级别含义处理优先级
    P0阻断性问题，影响核心功能或可访问性立即修复
    P1重要问题，影响用户体验或一致性计划修复
    P2一般问题，可优化但非阻断后续改进
    P3建议性改进，锦上添花择机优化

    输出格式

    ## Audit Report: landing-page

### Dimension Scores

| Dimension     | Score |   Grade   |
| :------------ | :---: | :-------: |
| Accessibility |   3   |   Good    |
| Performance   |   2   |   Fair    |
| Theming       |   4   | Excellent |
| Responsive    |   3   |   Good    |
| Anti-patterns |   1   |   Poor    |

**Overall: 2.6 / 4.0**

### Findings (7 total)

#### P0 (1)

- **[Anti-patterns]** Magic numbers in spacing: `padding: 23px 15px 8px 27px`
  - File: `src/components/hero.tsx:42`
  - Fix: Use design tokens from spacing scale

#### P1 (2)

- **[Accessibility]** Missing `alt` text on decorative image
  - File: `src/components/hero.tsx:18`
  - Fix: Add `alt=""` for decorative or meaningful `alt` for content images

- **[Performance]** Unoptimized hero image (2.4MB PNG)
  - File: `src/public/hero.png`
  - Fix: Convert to WebP, set `loading="lazy"`

#### P2 (3)

- **[Responsive]** Touch target below 44px minimum
  - File: `src/components/nav.tsx:31`
  - Fix: Increase tap area with padding or min-size

- **[Theming]** Inconsistent border-radius values: `4px`, `6px`, `8px`, `12px`
  - File: `src/components/card.tsx:15`
  - Fix: Use unified radius token

- **[Anti-patterns]** Inline style overrides external CSS
  - File: `src/components/button.tsx:28`
  - Fix: Move to CSS module or styled component

#### P3 (1)

- **[Performance]** Unused CSS class `hidden-old`
  - File: `src/styles/layout.css:142`
  - Fix: Remove dead code

    使用建议

    • P0 发现优先处理 — 阻断性问题可能影响核心功能或合规性
    • 关注低分维度 — 得分 2 以下的维度通常是投入产出比最高的改进方向
    • 按模块拆分审计 — 大型项目建议按模块分别审计，避免一次输出过多

    注意事项

    :::warning

    • Audit 是技术层面的质量检查，不涉及审美判断。设计审美问题请使用 critique
    • 优先修复 P0 问题，再处理 P1 及以下
    • 同一个 target 可以多次审计，对比改进效果 :::

    critique

    设计批判性分析，结合 LLM 设计审查和自动化检测器，输出综合设计评估。

    用法

    /impeccable critique <target>

    <target> 可以是页面名称、组件名或路径。critique 会对当前设计进行定性审查。

    双重评估机制

    Critique 结合两种评估方式：

    机制说明
    LLM Design Review基于设计原则的主观审查，评估视觉层次、构图、色彩运用等
    Automated Detector模式匹配检测，识别已知的 AI slop、反模式、常见错误

    AI Slop 检测

    Critique 内置 AI 生成内容的识别能力，检测以下常见问题：

    检测项说明
    Generic gradients无意义的渐变背景
    Card soup过度嵌套的卡片结构
    Placeholder text占位文本未替换
    Cookie-cutter layout千篇一律的模板化布局
    Over-saturated colors过度饱和的色彩搭配
    Meaningless icons无实际意义的装饰性图标

    启发式评分

    基于设计启发式规则进行评分：

    启发式检查项
    Visual hierarchy信息优先级是否清晰传达
    Gestalt principles邻近性、相似性、连续性
    Color harmony色彩搭配是否协调
    Typography scale字体层级是否合理
    White space留白是否适当
    Alignment元素对齐是否一致

    输出格式

    ## Critique Report: landing-page

### AI Slop Verdict

**Confidence: 85% — AI-generated pattern detected**

Likely generated by: Generic landing page template
Key indicators: Gradient hero, card grid below, CTA section at bottom

### Heuristic Scores

| Heuristic          | Score | Notes                              |
| :----------------- | :---: | :--------------------------------- |
| Visual hierarchy   | 6/10  | Hero text competes with background |
| Gestalt principles | 7/10  | Good grouping, weak continuity     |
| Color harmony      | 5/10  | Too many competing accent colors   |
| Typography scale   | 8/10  | Consistent scale, good contrast    |
| White space        | 4/10  | Insufficient breathing room        |
| Alignment          | 7/10  | Mostly aligned, some drift         |

**Average: 6.2/10**

### Priority Issues (Top 3)

1. **White space** — Cards packed too tightly, no breathing room
   - Impact: Reduces readability, feels cluttered
   - Suggestion: Add `gap: 2rem` or increase padding

2. **Color harmony** — Three different accent colors with no clear system
   - Impact: Visual noise, no clear action hierarchy
   - Suggestion: Choose one accent, use neutrals for secondary elements

3. **Visual hierarchy** — Hero CTA blends into background gradient
   - Impact: Primary action loses prominence
   - Suggestion: Use solid button with high contrast against background

### Questions for Review

- Is this design intended for a technical or general audience?
- Should the hero section prioritize brand messaging or conversion?
- Are the card items meant to be equally weighted or hierarchical?

    使用建议

    • Critique 先于 Audit — 先通过 critique 了解设计方向问题，再用 audit 定位技术细节
    • 关注 AI Slop 判断 — 如果检测到 AI 生成痕迹，优先解决模板化问题
    • 回答 Review Questions — 输出末尾的问题有助于 Claude 更好地理解设计意图
    • 对比迭代 — 修改后再次 critique，对比启发式分数变化

    注意事项

    :::warning

    • Critique 是定性分析，不替代代码层面的技术审计（那是 audit 的工作）
    • 不要在未完成的中间状态运行 critique，否则会收到大量"未完成"警告
    • 重视末尾的 Questions — 这些是基于审查发现的澄清问题，回答后可获得更精准的建议 :::

    Audit vs Critique

    特性auditcritique
    分析类型量化技术检查定性设计审查
    输出维度分数 + P0-P3 发现启发式分数 + 优先问题
    适用场景技术质量、可访问性、性能设计审美、视觉层次、AI slop
    建议顺序先 critique，后 audit—
    关注重点代码和实现视觉和体验