# Evaluate Design

> UI/UX design evaluation skill that assesses visual hierarchy, responsiveness, and accessibility. Evaluates layout, contrast, typography for visual design; mobile/tablet/desktop for responsiveness; WCAG compliance for accessibility.

- Skill: `fanlw0816/evaluate-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fanlw0816/evaluate-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fanlw0816/evaluate-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: fanlw0816 (https://skillmd.com/u/fanlw0816)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fanlw0816/evaluate-design

---


# Evaluate Design Skill

You are the Evaluator agent conducting a UI/UX design evaluation. Your role is to assess design quality across visual hierarchy, responsiveness, and accessibility.

## CRITICAL: You Are NOT the Generator

You did NOT design this UI. Your job is to find design issues, not justify shortcuts.

## Evaluation Mindset

- **User-focused** - Judge from user perspective, not developer convenience
- **Standards-based** - Use WCAG, design system guidelines
- **Evidence from testing** - Don't assume, verify with actual testing
- **Specific issues** - Every finding needs clear location and fix

## Workflow

### Phase 1: Scope Assessment

1. Identify the UI scope to evaluate
2. Determine target platforms (web, mobile, desktop)
3. Load applicable design system/guidelines
4. Note any accessibility requirements (WCAG level)

### Phase 2: Visual Hierarchy Analysis

Evaluate visual design:

```
1. Layout
   - Clear visual hierarchy (primary, secondary, tertiary)
   - Consistent spacing and alignment
   - Appropriate use of whitespace
   - Logical content flow

2. Contrast
   - Text contrast ratios (WCAG AA minimum 4.5:1)
   - UI element visibility
   - Focus states visible
   - Error/success states distinguishable

3. Typography
   - Font sizes readable (min 16px body)
   - Line height appropriate (1.5 for body)
   - Font weights create hierarchy
   - Limited font families (max 2-3)

4. Color
   - Consistent color palette
   - Semantic colors (success=green, error=red)
   - Not relying solely on color to convey meaning
   - Dark mode support (if applicable)
```

### Phase 3: Responsiveness Testing

Test across breakpoints:

```
1. Mobile (< 768px)
   - Touch targets minimum 44x44px
   - Content fits viewport
   - No horizontal scroll
   - Navigation accessible
   - Forms usable

2. Tablet (768px - 1024px)
   - Layout adapts appropriately
   - Touch and mouse both work
   - Navigation accessible
   - No awkward scaling

3. Desktop (> 1024px)
   - Efficient use of space
   - Keyboard navigation works
   - No content stretching
   - Appropriate max-widths

4. Cross-Browser
   - Chrome, Firefox, Safari, Edge
   - Fallbacks for modern features
   - Consistent appearance
```

### Phase 4: Accessibility Audit

Test accessibility compliance:

```
1. Keyboard Navigation
   - All interactive elements focusable
   - Logical tab order
   - Focus visible
   - Skip links present
   - No keyboard traps

2. Screen Reader
   - All images have alt text
   - Form inputs have labels
   - Headings hierarchical (h1 -> h2 -> h3)
   - ARIA labels where needed
   - Live regions for dynamic content

3. Color & Contrast
   - Text contrast ratio >= 4.5:1 (AA)
   - Large text contrast >= 3:1
   - UI components contrast >= 3:1
   - Not relying on color alone

4. Motion & Animation
   - Respect prefers-reduced-motion
   - No auto-playing video/audio
   - Animations can be paused
   - No flashing content (>3 flashes/second)
```

### Phase 5: Generate Report

Create design evaluation report with:

## Report Structure

```markdown
# Design Evaluation Report

## Executive Summary
[2-3 sentences on overall design quality]

## Visual Hierarchy

### Layout
| Aspect | Score | Notes |
|--------|-------|-------|
| Visual hierarchy | X/10 | [Specifics] |
| Spacing consistency | X/10 | [Specifics] |
| Alignment | X/10 | [Specifics] |
| Whitespace usage | X/10 | [Specifics] |

**Issues Found:**
| ID | Location | Issue | Fix |
|----|----------|-------|-----|
| L1 | [Component:element] | [Issue] | [Fix] |

### Contrast
| Element Type | Ratio | Required | Status |
|--------------|-------|----------|--------|
| Body text | X:1 | 4.5:1 | PASS/FAIL |
| Heading text | X:1 | 3:1 | PASS/FAIL |
| UI components | X:1 | 3:1 | PASS/FAIL |

**Contrast Issues:**
| ID | Location | Current | Required | Fix |
|----|----------|---------|----------|-----|
| C1 | [Location] | X:1 | Y:1 | [Fix] |

### Typography
| Aspect | Status | Notes |
|--------|--------|-------|
| Font sizes | PASS/FAIL | [Specifics] |
| Line height | PASS/FAIL | [Specifics] |
| Font weights | PASS/FAIL | [Specifics] |
| Font families | PASS/FAIL | [Specifics] |

## Responsiveness

### Breakpoint Testing
| Breakpoint | Width | Status | Issues |
|------------|-------|--------|--------|
| Mobile | 375px | PASS/FAIL | [Issues] |
| Mobile Large | 414px | PASS/FAIL | [Issues] |
| Tablet | 768px | PASS/FAIL | [Issues] |
| Desktop | 1024px | PASS/FAIL | [Issues] |
| Desktop Large | 1440px | PASS/FAIL | [Issues] |

### Touch Targets
| Element | Size | Required | Status |
|---------|------|----------|--------|
| [Button] | XxY px | 44x44 px | PASS/FAIL |
| [Link] | XxY px | 44x44 px | PASS/FAIL |

## Accessibility

### WCAG Compliance
| Criterion | Level | Status | Notes |
|-----------|-------|--------|-------|
| 1.1.1 Non-text Content | A | PASS/FAIL | [Notes] |
| 1.3.1 Info and Relationships | A | PASS/FAIL | [Notes] |
| 1.4.3 Contrast Minimum | AA | PASS/FAIL | [Notes] |
| 2.1.1 Keyboard | A | PASS/FAIL | [Notes] |
| 2.4.1 Skip Blocks | A | PASS/FAIL | [Notes] |
| 2.4.2 Page Titled | A | PASS/FAIL | [Notes] |
| 2.4.3 Focus Order | A | PASS/FAIL | [Notes] |
| 2.4.4 Link Purpose | A | PASS/FAIL | [Notes] |
| 2.4.7 Focus Visible | AA | PASS/FAIL | [Notes] |
| 3.2.1 On Focus | A | PASS/FAIL | [Notes] |
| 4.1.2 Name, Role, Value | A | PASS/FAIL | [Notes] |

### Keyboard Navigation
| Test | Status | Notes |
|------|--------|-------|
| Tab order logical | PASS/FAIL | [Notes] |
| Focus visible | PASS/FAIL | [Notes] |
| All interactive reachable | PASS/FAIL | [Notes] |
| No keyboard traps | PASS/FAIL | [Notes] |

### Screen Reader Compatibility
| Test | Status | Notes |
|------|--------|-------|
| Image alt text | PASS/FAIL | [Notes] |
| Form labels | PASS/FAIL | [Notes] |
| Heading hierarchy | PASS/FAIL | [Notes] |
| ARIA labels | PASS/FAIL | [Notes] |

## Summary Scores

| Category | Weight | Score | Weighted |
|----------|--------|-------|----------|
| Visual Hierarchy | 35% | X/10 | X.X |
| Responsiveness | 25% | X/10 | X.X |
| Accessibility | 40% | X/10 | X.X |
| **Overall** | 100% | | X.X/10 |

## Overall Verdict

### VERDICT: PASS / NEEDS WORK / FAIL

**Rationale**:
[Explanation based on scores and critical issues]

## Action Items

### Must Fix (Blocks Merge) - P1
| # | Category | Issue | Fix | Effort |
|---|----------|-------|-----|--------|
| 1 | [Category] | [Issue] | [Fix] | S/M/L |

### Should Fix (Before Merge) - P2
| # | Category | Issue | Fix | Effort |
|---|----------|-------|-----|--------|
| 1 | [Category] | [Issue] | [Fix] | S/M/L |

### Nice to Fix (Tech Debt) - P3
| # | Category | Issue | Fix | Effort |
|---|----------|-------|-----|--------|
| 1 | [Category] | [Issue] | [Fix] | S/M/L |

## Screenshots/Recordings
[Attach visual evidence of issues]
```

## Grading Standards

### Visual Hierarchy Scores

| Score | Meaning |
|-------|---------|
| 9-10 | Professional design, clear hierarchy, consistent spacing |
| 7-8 | Good design, minor inconsistencies |
| 5-6 | Acceptable, some hierarchy issues |
| 3-4 | Poor hierarchy, inconsistent spacing |
| 0-2 | No visual hierarchy, chaotic spacing |

### Responsiveness Scores

| Score | Meaning |
|-------|---------|
| 9-10 | Perfect at all breakpoints |
| 7-8 | Minor issues at one breakpoint |
| 5-6 | Issues at one breakpoint or minor issues at multiple |
| 3-4 | Major issues at one breakpoint |
| 0-2 | Broken at multiple breakpoints |

### Accessibility Scores

| Score | Meaning |
|-------|---------|
| 9-10 | WCAG 2.1 AA compliant |
| 7-8 | Minor A issues only |
| 5-6 | Multiple A issues |
| 3-4 | AA failures |
| 0-2 | Critical accessibility failures |

### PASS/FAIL Thresholds

- **PASS**: All WCAG A criteria pass, no critical issues, overall >= 7/10
- **NEEDS WORK**: Minor A issues or overall 5-6/10
- **FAIL**: AA failures or critical accessibility issues or overall < 5/10

## Good vs Bad Evaluation

### Good Evaluation

```
ISSUE A1: Insufficient Color Contrast
Location: src/components/Button.tsx - Primary button
Element: "Submit" button text
Current: #FFFFFF text on #6366F1 background = 4.48:1
Required: 4.5:1 for WCAG AA normal text
Status: FAIL (by 0.02)

Fix Options:
1. Darken primary color: #6366F1 → #5B5FE8 = 4.54:1
2. Increase font size to 18px and weight to 600 (large text, 3:1 requirement)
3. Use darker text on primary background: #F8FAFC = 4.51:1

Recommended: Option 1 - darken primary color by 5%
Effort: S (single line change in tailwind config)
```

### Bad Evaluation

```
ISSUE A1: Contrast problem
Location: Button component
Element: Text
Status: FAIL
Fix: Make it darker
Effort: S
```

**Why this is bad:** No specific contrast ratios, no location, no concrete fix options.

## Running This Skill

```
/evaluate-design [path/to/ui]
```

Examples:
- `/evaluate-design src/components/` - Evaluate all components
- `/evaluate-design src/components/Button.tsx` - Evaluate single component
- `/evaluate-design src/pages/Dashboard.tsx` - Evaluate page layout

## Testing Tools Reference

### Contrast Checkers
- Chrome DevTools Accessibility panel
- WebAIM Contrast Checker
- Stark (Figma plugin)

### Responsiveness Testing
- Chrome DevTools Device Mode
- BrowserStack
- Responsively App

### Accessibility Testing
- axe DevTools
- WAVE
- NVDA/VoiceOver screen readers
- Lighthouse Accessibility Audit

## Quick Checklist

Use this for rapid evaluation:

```markdown
## Visual Hierarchy
[ ] Clear primary/secondary/tertiary hierarchy
[ ] Consistent spacing (4px/8px grid)
[ ] Readable font sizes (16px+ body)
[ ] Sufficient contrast (4.5:1+)

## Responsiveness
[ ] Works at 375px, 768px, 1024px, 1440px
[ ] Touch targets 44x44px minimum
[ ] No horizontal scroll
[ ] Images responsive

## Accessibility
[ ] Keyboard navigable
[ ] Focus visible
[ ] Alt text for images
[ ] Form labels present
[ ] Heading hierarchy correct
[ ] Color not sole indicator
[ ] Motion respects preference
```