Audit your current site's design quality against award-winning standards and generate an improvement roadmap. Use when user asks to 'audit my design', 'review my UI', 'how does my design compare', 'design score', 'what's wrong with my design', 'improve my design', 'design feedback', 'design critique', 'rate my design', or wants to know where their UI falls short. Also trigger when user says 'my site looks outdated', 'why does my site look bad', 'how can I improve the design'. Korean triggers: '디자인 감사', '디자인 평가', '디자인 점수', '내 디자인 어때', '디자인 리뷰', '디자인 개선', '어디가 별로야', '디자인 피드백', 'UI 점검', '디자인 진단', '리디자인 해야할까'.
Analyze your current project's design against award-winning standards. Produces a structured audit report with scores, specific weaknesses, and a prioritized improvement roadmap ordered by impact.
This skill is valuable because it doesn't just say "redesign everything" — it tells you exactly what to fix first for maximum visual improvement, backed by patterns from daily award-winning sites.
Determine what to audit. The user might provide:
For project code, scan in this order:
DESIGN.md if it exists — read current design tokensglobals.css, tailwind.config.*, theme.*, CSS variablessrc/app/page.*, src/pages/index.*, pages/index.*src/components/ — sample 3-5 representative componentssrc/app/layout.*, wrapper componentsFor URLs, fetch the site and extract:
The audit compares against award-winning design patterns. Load context from:
.todays-design/cache/YYYY-MM-DD.md) — if available, use as primary benchmarkIf no today's design cache exists, offer to run /todays-design first for a fresher benchmark. But the audit can proceed without it using the built-in criteria.
Evaluate each dimension on a 1-10 scale. Be honest — generous scores aren't helpful.
Award-winning patterns to check against:
Score 1-3: Random colors, poor contrast, no system Score 4-6: Basic palette exists but inconsistent, some contrast issues Score 7-8: Clean palette, good contrast, minor inconsistencies Score 9-10: Award-level — disciplined palette, perfect contrast, every color has clear purpose
Score 1-3: Default fonts, no hierarchy, walls of same-size text Score 4-6: Decent fonts but inconsistent sizing, hierarchy unclear Score 7-8: Good font pairing, clear hierarchy, minor readability issues Score 9-10: Award-level — expressive typography, perfect hierarchy, considered line lengths
Score 1-3: No grid, random spacing, breaks on mobile Score 4-6: Basic grid but inconsistent spacing, passable responsive Score 7-8: Clean grid, systematic spacing, good responsive Score 9-10: Award-level — intentional whitespace rhythm, flawless responsiveness
Score 1-3: Inconsistent components, no hover states, no transitions Score 4-6: Some consistency, basic hover states, minimal transitions Score 7-8: Consistent component library, good interactions Score 9-10: Award-level — polished components, delightful micro-interactions
Score 1-3: Generic template look, no personality Score 4-6: Some character but inconsistent, partially dated Score 7-8: Clear identity, mostly modern, coherent mood Score 9-10: Award-level — immediately recognizable, every pixel intentional
Score 1-3: Div soup, no keyboard support, missing alt text Score 4-6: Some semantic HTML, partial keyboard support Score 7-8: Good semantics, keyboard works, minor gaps Score 9-10: Exemplary — full WCAG AA, perfect keyboard flow
Present the report in this format:
# Design Audit Report
## Overall Score: {X}/10
{One-sentence summary of the design's current state}
## Scores by Dimension
| Dimension | Score | Status |
|-----------|-------|--------|
| Color & Contrast | {X}/10 | {weak/average/strong/excellent} |
| Typography | {X}/10 | {weak/average/strong/excellent} |
| Layout & Spacing | {X}/10 | {weak/average/strong/excellent} |
| Components & Interactions | {X}/10 | {weak/average/strong/excellent} |
| Visual Identity | {X}/10 | {weak/average/strong/excellent} |
| Accessibility | {X}/10 | {weak/average/strong/excellent} |
## Top 3 Strengths
1. {What the design does well — be specific}
2. {Another strength}
3. {Another strength}
## Top 3 Weaknesses
1. {Most impactful issue — be specific about WHERE and WHAT}
2. {Second issue}
3. {Third issue}
## Compared to Today's Award Winner
{If today's design cache is available: "Today's winner ({site name}) scores high on {X} and {Y}. Your biggest gap is in {Z}, where they {specific technique} while your site {specific shortcoming}."}
This is the key deliverable — a prioritized list of specific improvements, ordered by impact/effort ratio (highest impact, lowest effort first).
## Improvement Roadmap
### Quick Wins (< 1 hour each, high visual impact)
1. **{Specific fix}** — {what to change, where, why it matters}
- Current: {what it looks like now}
- Target: {what it should look like}
- Impact: {which score dimension this improves}
2. **{Another quick fix}**
...
### Medium Effort (1-4 hours, significant improvement)
3. **{Improvement}** — {details}
...
### Major Upgrades (4+ hours, transformative)
5. **{Big change}** — {details}
...
## Suggested Next Steps
- Run `/design-system` to update DESIGN.md with the recommended changes
- Run `/design-apply` to regenerate components with improved tokens
- Run `/todays-design` for fresh inspiration on {weakest dimension}