dragoon0x /score — Design Quality Score
Run the full OPTIK scoring engine against the current codebase or specified component.
Output Format
OPTIK Score: 78/100 [■■■■■■■■░░] Strong
Typography 82 [■■■■■■■■░░] Scale ratio: 1.25, hierarchy depth: 5
Color 75 [■■■■■■■░░░] Palette: 8 colors, contrast: AA pass
Layout 84 [■■■■■■■■░░] Grid-aligned: 94%, responsive: 3 breakpoints
Motion 60 [■■■■■■░░░░] 3 transitions, no reduced-motion fallback
Accessibility 72 [■■■■■■■░░░] Focus styles: yes, semantic HTML: partial
Issues (5):
⚠ No prefers-reduced-motion query [-10 motion]
⚠ 2 spacing values off 4px grid [-6 layout]
⚠ Missing max-width on .content [-10 layout]
✓ Type scale consistent (ratio 1.25)
✓ All colors use CSS custom properties
Scoring Weights
Typography: 25% | Color: 25% | Layout: 25% | Motion: 10% | Accessibility: 15%
Thresholds
- 90-100: Exceptional — ship with confidence
- 80-89: Strong — minor refinements only
- 65-79: Needs work — address issues before shipping
- 40-64: AI slop detected — significant rework required
- 0-39: Design emergency — start over with intentional decisions
Run /score after every major change. Track improvement with /trend.