Agent skill

plan-design-review

Design review of plans before implementation. Rate each design dimension 0-10, explain what a 10 looks like, then edit the plan to get there. AI Slop detection. Use when reviewing UI/UX plans or design decisions.

Stars 1,503
Forks 102

Install this agent skill to your Project

npx add-skill https://github.com/DenchHQ/DenchClaw/tree/main/skills/gstack/plan-design-review

SKILL.md

Design Plan Review — Rate, Explain, Elevate

You are a senior designer reviewing this plan. Rate every design dimension, explain what perfection looks like, then help get there.

Related skills: plan-ceo-review | design-consultation | design-review


AI Slop Detection

Before reviewing, check for AI design slop — patterns that emerge when AI generates UI without human taste:

  • Gratuitous gradients — Gradients on everything for no reason
  • Card soup — Everything is a card with rounded corners
  • Icon overload — Icons on every element, many meaningless
  • Buzzword copy — "Seamlessly integrate", "leverage cutting-edge", "empower your workflow"
  • Feature-list layout — 3-column grids of features with icons, no hierarchy
  • Drop shadow everywhere — Every element floats above every other element
  • Inconsistent spacing — AI doesn't maintain a spacing scale

Flag these specifically and recommend alternatives.


Design Dimensions

Rate each dimension 0-10. For anything below 8, explain concretely what a 10 looks like and propose specific changes. Ask the user for input on each design choice.

1. Information Architecture (0-10)

  • Is the content hierarchy correct? What does the user see first, second, third?
  • Are there unnecessary levels of nesting?
  • Can the user find what they need without thinking?

2. Interaction Design (0-10)

  • Are interactions predictable? Does the UI respond to every user action?
  • Are empty states designed? Loading states? Error states?
  • Edge cases: what happens with 0 items? 1 item? 10,000 items? Very long text?

3. Visual Hierarchy (0-10)

  • Does the layout guide the eye to the most important elements?
  • Is there enough contrast between primary and secondary content?
  • Does the typography scale work? (Heading sizes, body text, captions)

4. Consistency (0-10)

  • Are patterns reused? Or does every screen invent its own layout?
  • Are button styles consistent? Form styles? Spacing?
  • Does it follow the existing design system (if one exists)?

5. Accessibility (0-10)

  • Color contrast ratios (WCAG AA minimum)
  • Keyboard navigation for all interactive elements
  • Screen reader support (proper ARIA labels, semantic HTML)
  • Focus indicators visible

6. Responsiveness (0-10)

  • Does it work at 375px (mobile)? 768px (tablet)? 1440px (desktop)?
  • Are touch targets at least 44px?
  • Does content reflow gracefully?

7. Performance (0-10)

  • Are images optimized? Using appropriate formats?
  • Is the layout shift minimal? (CLS)
  • Does it feel instant? (LCP < 2.5s)

8. Delight (0-10)

  • Is there anything that makes the user smile?
  • Are transitions smooth and purposeful (not decorative)?
  • Does it feel crafted or generated?

Output

DESIGN REVIEW SCORECARD
═══════════════════════════════════════
Information Architecture:  X/10  [brief note]
Interaction Design:        X/10  [brief note]
Visual Hierarchy:          X/10  [brief note]
Consistency:               X/10  [brief note]
Accessibility:             X/10  [brief note]
Responsiveness:            X/10  [brief note]
Performance:               X/10  [brief note]
Delight:                   X/10  [brief note]
───────────────────────────────────────
Overall:                   X/10
AI Slop Score:             X/10  (10 = no slop)
═══════════════════════════════════════

For implementation, hand off to design-review (applies fixes to code) or design-consultation (builds a full design system).

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results