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.
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).
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dench-integrations
Connected app integration recipes for Dench Integrations (Gmail, Slack, GitHub, Notion, Google Calendar, Linear, Stripe, YouTube, and 500+ more)
gstack-workflow
Structured AI-assisted development workflow with specialist roles — Think, Plan, Build, Review, Test, Ship, Reflect. Adapted from garrytan/gstack (MIT).
plan-ceo-review
CEO/founder-mode plan review. Rethink the problem, find the 10-star product, challenge premises. Four modes: SCOPE EXPANSION, SELECTIVE EXPANSION, HOLD SCOPE, SCOPE REDUCTION. Use when reviewing strategy, questioning scope, or before engineering review.
investigate
Systematic root-cause debugging. Four phases: investigate, analyze, hypothesize, implement. Iron Law: no fixes without root cause investigation first. Use when debugging errors, unexpected behavior, or troubleshooting.
design-consultation
Build a complete design system from scratch. Research the landscape, propose safe choices AND creative risks, generate DESIGN.md. Use when creating a new design system or establishing design foundations for a project.
land-and-deploy
Merge the PR, wait for CI and deploy, verify production health. Takes over after ship. One command from "approved" to "verified in production."
Didn't find tool you were looking for?