design-review

name

design-review

description

Review and critique existing designs, websites, or frontend code against design principles. Checks for common anti-patterns like generic fonts, poor contrast, inconsistent spacing, and lack of visual hierarchy. Use when the user asks to "review my design", "what's wrong with this layout", "critique my website", "how can I improve the design", "audit the UI", "check my frontend", "make it look more professional", or "why does this look off". Produces actionable feedback with specific fix suggestions referencing other skills.

Design Review

Review and critique existing designs or frontend implementations against design principles. Produces actionable feedback, not just observations.

When to Use

• User asks to review, critique, or audit a design or frontend
• User says "something looks off" but can't articulate what
• User wants to improve an existing design's visual quality
• User asks "how can I make this look more professional?"
• Before shipping a frontend — as a final design quality check

When NOT to Use

• User wants a WCAG accessibility audit → use design-system (has contrast ratio calculations)
• User wants a code quality review → not a design concern
• User wants to create a new design from scratch → use styleguide skill first

Review Process

Step 1: Understand the Context

Before critiquing, establish:

• What is this? — landing page, dashboard, blog, app screen
• Who is it for? — the target audience
• What's the intent? — convert, inform, engage, sell
• Is there a styleguide? — if yes, review against it; if no, note this as issue #1

Step 2: Evaluate Against the Checklist

Score each category 1-10 and note specific issues: