Quality Standards Reference
This skill defines the quality gates, scoring criteria, and acceptance standards that all designs must meet.
Quality Gates (95% MINIMUM)
All gates must pass for design completion:
| Gate | Threshold | Weight | Mandatory |
|---|---|---|---|
| Minimum Iterations | >= 5 | - | Yes |
| Maximum Iterations | <= 20 | - | Yes |
| Overall Score | >= 9.5/10 (95%) | - | Yes |
| WCAG AA Compliance | 100% | - | Yes |
| Vibe-Code Probability | < 1% | - | Yes |
| Critical Issues | 0 | - | Yes |
| Spatial Score | >= 9.0/10 | 25% | Yes |
| Color Score | >= 9.0/10 | 25% | Yes |
| Typography Score | >= 9.0/10 | 25% | Yes |
| Originality Score | >= 9.5/10 | 25% | Yes |
Scoring Rubrics
Spatial Design (0-10)
| Score | Description |
|---|---|
| 9-10 | Perfect grid adherence, masterful spacing relationships, balanced composition |
| 7-8 | Consistent grid usage, good spacing, minor alignment issues |
| 5-6 | Some grid violations, inconsistent spacing, noticeable balance issues |
| 3-4 | Frequent off-grid values, poor spacing relationships, unbalanced |
| 1-2 | No grid system, chaotic spacing, severely unbalanced |
Key Checkpoints:
- • All spacing values on 8pt grid (or 4pt for micro)
- • Consistent spacing between similar elements
- • Logical spacing hierarchy (related closer, unrelated farther)
- • Proper alignment to grid columns
- • Balanced visual weight distribution
- • Effective use of whitespace
Color Design (0-10)
| Score | Description |
|---|---|
| 9-10 | WCAG AAA, harmonious palette, strong emotional alignment, unique |
| 7-8 | WCAG AA, cohesive colors, appropriate mood, some customization |
| 5-6 | Minor contrast issues, acceptable harmony, generic choices |
| 3-4 | WCAG failures, clashing colors, wrong emotional tone |
| 1-2 | Multiple accessibility failures, no coherent palette |
Key Checkpoints:
- • All text/background combinations meet WCAG AA (4.5:1)
- • UI components meet 3:1 contrast
- • Color palette is harmonious (defined relationship)
- • Colors evoke intended emotional response
- • Colors are appropriate for sector
- • Palette is not generic/default framework colors
Typography (0-10)
| Score | Description |
|---|---|
| 9-10 | Perfect hierarchy, excellent readability, intentional pairing, flawless implementation |
| 7-8 | Clear hierarchy, good readability, appropriate fonts, minor issues |
| 5-6 | Adequate hierarchy, acceptable readability, basic font choices |
| 3-4 | Unclear hierarchy, readability issues, poor font choices |
| 1-2 | No hierarchy, unreadable, inappropriate fonts |
Key Checkpoints:
- • Clear visual hierarchy (size, weight, color)
- • Font pairing is intentional and complementary
- • Line length 50-75 characters
- • Line height appropriate (1.4-1.6 for body)
- • Minimum 16px for body text
- • Consistent usage across similar elements
- • Proper CSS implementation (rem, variables)
Originality (0-10)
| Score | Description |
|---|---|
| 9-10 | Highly unique, no generic patterns, strong brand personality |
| 7-8 | Mostly original, minimal generic patterns, some personality |
| 5-6 | Some customization, recognizable generic patterns |
| 3-4 | Mostly generic, obvious AI patterns, no personality |
| 1-2 | Pure vibe-code, all defaults, completely generic |
Key Checkpoints:
- • No generic gradients (purple-blue, etc.)
- • Layout patterns customized from stock
- • Framework defaults modified
- • Decorative elements are purposeful
- • Real content (not placeholder)
- • Distinct brand personality present
WCAG 2.1 Checklist
Level A (Must Pass)
| Criterion | Description | Check |
|---|---|---|
| 1.1.1 | Non-text content has alt text | Images, icons |
| 1.3.1 | Info and relationships in markup | Semantic HTML |
| 1.3.2 | Meaningful sequence | DOM order matches visual |
| 1.4.1 | Color not sole indicator | Don't rely on color alone |
| 2.1.1 | Keyboard accessible | All functionality via keyboard |
| 2.1.2 | No keyboard trap | Can tab away from all elements |
| 2.4.1 | Bypass blocks | Skip links present |
| 2.4.2 | Page titled | Descriptive title |
| 2.4.4 | Link purpose clear | From link text or context |
| 3.1.1 | Language of page | lang attribute on html |
| 4.1.1 | Valid markup | No parsing errors |
| 4.1.2 | Name, role, value | ARIA where needed |
Level AA (Should Pass)
| Criterion | Description | Check |
|---|---|---|
| 1.4.3 | Contrast minimum | 4.5:1 normal, 3:1 large |
| 1.4.4 | Resize text | Works at 200% zoom |
| 1.4.5 | Images of text | Avoid, use real text |
| 2.4.6 | Headings descriptive | Clear, meaningful |
| 2.4.7 | Focus visible | Clear focus indicators |
| 3.2.3 | Consistent navigation | Same order throughout |
| 3.2.4 | Consistent identification | Same function = same name |
Level AAA (Recommended)
| Criterion | Description | Check |
|---|---|---|
| 1.4.6 | Enhanced contrast | 7:1 normal, 4.5:1 large |
| 1.4.8 | Visual presentation | Line length, spacing |
| 2.4.9 | Link purpose alone | Clear from link text only |
Issue Classification
Critical (Blocks Deployment)
- •WCAG Level A failures
- •Color contrast below 3:1
- •Broken core functionality
- •Unreadable text
- •Keyboard traps
- •Missing skip links
High Priority (Fix Before Launch)
- •WCAG Level AA failures
- •Color contrast 3:1-4.5:1 (below AA)
- •Significant layout issues
- •Poor visual hierarchy
- •Major spacing inconsistencies
- •No focus indicators
Medium Priority (Fix Soon)
- •Minor spacing issues
- •Suboptimal color choices
- •Typography tweaks
- •Enhancement opportunities
- •WCAG AAA suggestions
Low Priority (Nice to Have)
- •Micro-interaction polish
- •Animation refinements
- •Advanced accessibility features
- •Performance optimizations
Iteration Strategy
Explore Phase (Iterations 1-5)
- •Try bold, different approaches
- •Don't optimize prematurely
- •Focus on overall direction
- •MUST complete all 5 iterations even if gates pass early
- •Use early passing to polish and exceed thresholds
Exploit Phase (Iterations 6-12)
- •Refine the best approach
- •Fix specific issues identified
- •Optimize for quality gates
- •Polish and perfect
Pivot Phase (Iterations 13-20)
- •If stuck, try completely different direction
- •Re-run research with new direction
- •Reset assumptions
- •Challenge previous decisions
- •Consider alternative approaches
Score Calculation
code
Overall Score = (Spatial × 0.25) + (Color × 0.25) +
(Typography × 0.25) + (Originality × 0.25)
Pass Criteria:
- Minimum iterations >= 5
- Overall >= 9.5 (95%)
- All dimensions >= 9.0
- Originality >= 9.5
- Vibe-code probability < 1%
- Critical issues = 0
- WCAG AA = 100%
Failure Patterns
Score Plateau
Detection: No improvement for 2+ iterations Action: Switch to Pivot strategy, try different approach
Recurring Issues
Detection: Same issues appear after "fixing" Action: Address root cause, not symptoms
Regression
Detection: Scores decreasing Action: Revert to previous best, analyze what broke
Dimension Imbalance
Detection: One dimension consistently low Action: Focused iteration on weak dimension