What's new
/design-score — Quantitative design quality scoring
A new command that produces a 0–100 score card across four dimensions:
| Dimension | Max | What it measures |
|---|---|---|
| Accessibility | 25pts | WCAG 2.1 AA contrast, focus states, touch targets, labels, color-only |
| Usability | 25pts | Nielsen's 10 heuristics (each 0–3, normalized) |
| Visual Quality | 25pts | Spacing, typography, color, whitespace, CTA prominence |
| Token Compliance | 25pts | CSS var / token adherence vs. hardcoded values |
Output format:
╔══════════════════════════════════════════════════════════╗
║ Design Score ║
╚══════════════════════════════════════════════════════════╝
Overall: 72/100 C
Accessibility: 17/25 ██████████████░░░░░░ 68%
Usability: 19/25 ███████████████░░░░░ 76%
Visual Quality: 21/25 █████████████████░░░ 84%
Token Compliance: 15/25 ████████████░░░░░░░░ 60%
Grade: C — Meaningful improvements needed
Grades: A (90–100 production ready) · B (80–89 minor polish) · C (70–79 meaningful fixes) · D (60–69 do not ship) · F (<60 redesign needed)
Inputs: URL (Playwright), local file, --screenshot <path>, Figma node ID. Reads .naksha/project.json for brand token context.
design-critic agent upgraded
The existing 3-pass critique now includes:
- Pass 4: Token Compliance — scans hardcoded color/type/spacing values vs. token system (5 sub-criteria × 5pts each)
- Scoring Calculation step — derives all 4 dimension scores before writing output
- Design Score Summary block at the top of every critique report
The scoring model is identical to /design-score — a critique and a score run on the same design will produce directly comparable numbers.
Evals: 161 total (IDs 157–160 added)
Commands: 60 total
CI: 8/8 validate-structure checks pass