/frontend-design-review

16 April 2026#reference#skill#design-system#frontend

/frontend-design-review

Audits any frontend artifact against a codified design system. Scores five dimensions, produces graded findings with code fixes, and generates a designer handoff brief.

Type: Standalone command (integrates with /landing-page pipeline) Trigger: "design review", "check this design", "design audit", "design check", "is this on-brand", "check the colors", "check the tokens", "design QA", "frontend review", "UI review", "style check", "brand check", "greyscale test", "color audit", "typography check"

Scoring

Dimension	Weight
Color System	30%
Typography	25%
Spatial Composition	20%
Motion & Interaction	15%
Component Patterns	10%

Each dimension: 1–5 score. Weighted total → verdict:

Score	Verdict
4.5–5.0	Approved
3.5–4.4	Approved with notes
2.5–3.4	Revise
1.0–2.4	Redesign

Output

frontend-design-review/
├── review.md          # Graded audit with scores and findings
├── checklist.md       # Binary pass/fail per item
├── redlines.md        # Before/after code fixes
└── handoff-brief.md   # One-page designer summary

Modes

Mode	Trigger	Output
Full review	"design review"	All 4 documents
Quick check	"just check the colors"	Single dimension, inline
Comparison	Provide 2 versions	Delta table, side-by-side scores

Skill Structure

frontend-design-review/
├── SKILL.md
└── references/
    └── design-system.md    # The authoritative design spec

The reference spec codifies: 11 token positions, 3 reference palettes (warm/cool/dark), no-pure-neutrals rule, temperature-matched shadows, font stack pattern, spatial constants, motion patterns.

Integration

/landing-page pipeline — Review Point A (after design brief, Phase 4) and Review Point B (after page build, Phase 6)
/doc-suite-generator — can audit frontend artifacts in project output
Any standalone component built with the frontend-design public skill

Use Cases

09. Design systems that survive AI generation — the full article on why this exists and how it works

Download the full toolkit → · Back to library →

𝕏 Post