Ui Design Review
Run a structured visual design critique—typography, color, spacing, hierarchy, and brand consistency—before QA or handoff.
Overview
UI Design Review is an agent skill most often used in Ship (also Build, Validate) that evaluates typography, color, spacing, hierarchy, and brand polish for professional interfaces.
Install
npx skills add https://github.com/mastepanoski/claude-skills --skill ui-design-reviewWhat is this skill?
- Evaluates typography, color palettes, spacing, and visual hierarchy—not just usability
- Assesses brand consistency, personality, and first-impression aesthetic appeal
- Compares UI to current product-category conventions and flags visual debt
- Designed to combine with Nielsen Heuristics, WCAG Accessibility, or Don Norman skills
- Covers design system consistency and outdated visual elements
Adoption & trust: 731 installs on skills.sh; 39 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your product works in usability tests but still feels amateur because typography, spacing, and visual hierarchy were never critiqued as a cohesive design.
Who is it for?
Founders and solo designers preparing agent-built UI for stakeholder review or app-store screenshots.
Skip if: Pure functional usability audits alone (use Nielsen heuristics) or legal WCAG conformance certification without a visual layer.
When should I use this skill?
Evaluating visual design quality, brand consistency, typography/color/spacing, hierarchy, design QA, handoff, or design system consistency.
What do I get? / Deliverables
You receive a structured aesthetic assessment—consistency, convention fit, and visual debt—so you can fix polish issues before launch or design handoff.
- Structured visual design assessment across typography, color, spacing, and hierarchy
- Notes on brand consistency, convention alignment, and visual debt
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Ship/review is the canonical shelf because the skill targets evaluation, design QA, and handoff readiness rather than first-pass wireframing. Review subphase aligns with explicit invoke triggers: visual polish, hierarchy issues, design system consistency, and pre-handoff QA.
Where it fits
Compare a landing prototype to current SaaS category typography and spacing conventions before inviting beta users.
Critique agent-generated dashboard screens for color palette and hierarchy drift from the design system.
Assess first-impression aesthetic appeal of mobile flows reflected in store screenshots and onboarding UI.
Run visual design QA on marketing and app chrome the week before release.
How it compares
Visual polish and branding lens on top of usability skills—not a replacement for WCAG or heuristic evaluation.
Common Questions / FAQ
Who is ui-design-review for?
Solo builders and small teams who want AI-assisted critique of look-and-feel, brand alignment, and design craftsmanship on web or app UI.
When should I use ui-design-review?
In Ship before QA handoff, in Build when polishing agent-generated screens, and in Validate when comparing a prototype to category visual standards.
Is ui-design-review safe to install?
It is review guidance over your designs; no special permissions are required. Confirm upstream package integrity via the Security Audits panel on this page.
SKILL.md
READMESKILL.md - Ui Design Review
# UI Design Review This skill enables AI agents to perform a comprehensive **visual design and aesthetics evaluation** of digital interfaces, analyzing elements like typography, color palettes, spacing, visual hierarchy, and overall design quality. While other UX skills focus on functionality and usability, this skill evaluates the **visual polish, aesthetic appeal, and design craftsmanship** that makes interfaces feel professional, trustworthy, and delightful. Use this skill to elevate visual design quality, ensure brand consistency, and create interfaces that not only work well but also look exceptional. Combine with "Nielsen Heuristics" for usability, "WCAG Accessibility" for inclusive design, or "Don Norman Principles" for intuitive interaction. ## When to Use This Skill Invoke this skill when: - Evaluating visual design quality and polish - Assessing brand consistency and personality - Reviewing typography, color, and spacing decisions - Identifying visual hierarchy issues - Comparing design to current product-category conventions - Preparing for design QA or handoff - Evaluating design system consistency - Assessing first impression and aesthetic appeal - Identifying visual debt or outdated design elements ## Inputs Required When executing this review, gather: - **interface_description**: Description of interface (product type, target audience, brand personality) [REQUIRED] - **screenshots_or_urls**: Visual references of the interface (multiple screens preferred) [REQUIRED] - **brand_guidelines**: Brand colors, fonts, style guide (if available) [OPTIONAL] - **target_audience**: Demographics, preferences, expectations [OPTIONAL] - **competitors**: Competitor products for context [OPTIONAL] - **design_goals**: Modern/classic, minimal/rich, playful/serious, etc. [OPTIONAL] ## Design Evaluation Framework Evaluate across **10 key design dimensions**: ### 1. Visual Hierarchy **Definition**: The arrangement of elements to show their importance and guide user attention. **Evaluate:** - Clear primary, secondary, tertiary levels - Size, color, position used effectively - Important actions stand out - Content scannable and organized - F-pattern or Z-pattern consideration **Common Issues:** - Everything looks equally important - CTA buttons don't stand out - Headers same size as body text - Poor use of visual weight --- ### 2. Typography **Definition**: Font choices, sizes, line heights, and text styling. **Evaluate:** - Font selection (appropriate, readable, on-brand) - Font pairing (max 2-3 typefaces) - Type scale (consistent sizing system) - Line height (1.4-1.6 for body text) - Line length (50-75 characters optimal) - Font weights used effectively - Readability on all devices **Common Issues:** - Too many fonts - Poor font pairing - Tiny text (<14px body) - Insufficient line height - Long lines (>100 characters) - Script fonts for body text --- ### 3. Color Palette **Definition**: Color choices, combinations, and usage. **Evaluate:** - Primary, secondary, accent colors defined - Color harmony (complementary, analogous, triadic) - Sufficient contrast (WCAG compliant) - Intentional color usage (not arbitrary) - Neutrals for balance - Color psychology alignment with brand - Accessible to color-blind users **Common Issues:** - Too many colors (no system) - Low contrast combinations - Clashing colors - Colors don't reflect brand - Overuse of pure black (#000) - No neutral palette --- ### 4. Spacing & White Space **Definition**: Margins, padding, gaps, and negative space. **Evaluate:** - Consistent spacing scale (8px grid common) - Generous white space - Proper padding in components - Balanced margins - Breathing room around elements - Doesn't feel cramped or chao