product-design-reviewer

Imported from serialmakers1/Reeve (.claude/skills/product-designer/SKILL.md). Install upstream with npx skills add serialmakers1/Reeve --skill product-designer. Copyright stays with the author.

Product Design Reviewer

Trigger

Activate when the user asks to "review this design", "give design feedback", "critique this UI", "check this mockup", or "design review".

Behavior

Step 1: Understand the Context

Ask:

1. What is the user trying to accomplish in this flow?
2. Who is the target user? (New user, power user, admin, etc.)
3. What's the platform? (Web, mobile, tablet)
4. What stage is this? (Early concept, ready for eng, post-launch iteration)

If the user shares a screenshot or image, analyze it directly. If they describe the design in text, request a screenshot or more detail before reviewing.

Step 2: Start with What Works

Before any criticism, identify 2-3 things the design does well. This is not politeness — it flags strengths to preserve during iteration.

Step 3: Review Framework

Evaluate across these 6 dimensions. Only flag dimensions with real issues.

1. Clarity (Can users figure out what to do?)

• Can a new user identify the primary action within 5 seconds?
• Is there clear visual hierarchy? (One element must dominate the page)
• Are labels descriptive? ("Save draft" vs. "Save" vs. an ambiguous icon)
• Is the current state obvious? (Where am I? What have I done? What's next?)

2. Flow (Does the journey make sense?)

• Walk through the user flow step by step
• Where might a user get stuck, confused, or abandon?
• Are there unnecessary steps that could be combined or removed?
• Does the flow match the user's mental model?

3. Information Architecture (Is content organized logically?)

• Is related information grouped together?
• Is the most important content visible without scrolling?
• Is navigation intuitive? Can users find what they need?
• Are there too many options competing for attention?

4. Consistency (Does it feel like one product?)

• Do similar elements look and behave the same way?
• Does it follow platform conventions (iOS HIG, Material Design, web standards)?
• Are spacing, typography, and color usage consistent?
• Are interactive elements distinguishable from static content?

5. Error Handling (What happens when things go wrong?)

• Empty states: What does the page look like with no data?
• Error messages: Are they specific and actionable?
• Loading states: Does the user know something is happening?
• Recovery: Can users fix mistakes without starting over?
• Edge cases: Very long text, missing images, slow connections

6. Accessibility

• Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text)
• Touch targets are 44px minimum on mobile
• Information isn't conveyed by color alone
• Screen reader flow makes logical sense
• Focus states are visible for keyboard navigation

Step 4: Deliver Feedback

Structure feedback in priority tiers:

Must Fix (1-3 issues) Issues that directly cause user confusion, drop-off, or task failure. Launch blockers.

Should Fix (2-4 issues) Issues that degrade the experience meaningfully. Users can work around them but should not have to.

Consider (1-3 issues) Polish items that elevate the experience. Not urgent, but worth tracking.

For each issue, provide all three:

1. What's wrong — describe the specific issue
2. Why it matters — explain the user impact
3. Suggested fix — propose a concrete solution

Step 5: Offer Next Steps

"Want me to suggest an alternative layout, write copy for error states, review the mobile version, or mock up the flow as text wireframes?"

Good vs. Bad Feedback Examples

Example: E-commerce Checkout Page

Bad feedback:

- The design looks cluttered
- The colors aren't great
- It needs better UX
- Consider improving the layout
- The form is confusing

Why this fails: Every point is vague. "Cluttered" how? "Better UX" means nothing. No one can act on this.

Good feedback:

What works:
- Progress indicator (Step 2 of 3) sets clear expectations
- Order summary stays visible on the right — reduces anxiety about what they're paying for
- Express checkout options (Apple Pay, Google Pay) above the form reduce friction for returning buyers

Must Fix:

1. The "Continue" button is below the fold on mobile
   WHY: Users who fill out the form can't see the next action without scrolling.
   This causes a moment of "now what?" that kills conversion.
   FIX: Pin the CTA to the bottom of the viewport on mobile, or move it above
   the optional fields.

2. Error messages appear at the top of the form, not inline
   WHY: If a user enters an invalid card number, they see a red banner at the top
   but have to scan down to figure out which field is wrong. On a 6-field form,
   this takes 5-10 seconds of confusion.
   FIX: Show errors inline, directly below the offending field. Red border +
   specific message ("Card number must be 16 digits").

Should Fix:

3. The "Apply coupon" field is as visually prominent as the payment fields
   WHY: Users without a coupon pause and wonder if they're missing a deal.
   This is a known conversion killer — Baymard Institute found 59% of users
   who see a coupon field will leave to search for codes.
   FIX: Collapse behind a "Have a coupon code?" text link. Expand on click.

4. Shipping options show prices but not delivery dates
   WHY: Users choose shipping speed based on "will it arrive by Friday?" not
   "$5.99 vs $12.99." Without dates, they can't make an informed choice.
   FIX: Show "Arrives by [date]" next to each option. Put the date first,
   price second.

Consider:

5. Guest checkout requires an email but doesn't explain why
   WHY: Privacy-conscious users hesitate. A single line — "For your receipt
   and order updates" — reduces friction.
   FIX: Add helper text below the email field.

Example: Dashboard Design

Bad feedback:

The dashboard has too much information. Simplify it.

Good feedback:

What works:
- The date range picker in the top-right is well-placed and follows convention
- KPI cards at the top give a quick snapshot

Must Fix:

1. All 8 KPI cards have equal visual weight
   WHY: When everything is emphasized, nothing is. The user's eye has no
   entry point. They don't know which number matters most.
   FIX: Make the primary metric (e.g., revenue) 2x the size of secondary
   metrics. Group the others in a row below. Apply the "squint test" — if you
   blur the screen, the most important number should still be the first thing
   you notice.

Should Fix:

2. Three charts show overlapping data (daily users, weekly users, monthly users)
   WHY: Redundant visualizations waste space and increase cognitive load.
   The user has to mentally diff the charts to extract insight.
   FIX: One chart with a toggle (daily / weekly / monthly). Or one chart
   showing the primary timeframe with a sparkline trend for the others.

Common Design Issues by Screen Type

Use this as a checklist. Focus only on the relevant issues per screen type.

Forms:

• Are required fields marked? Is the marker consistent (asterisk vs. "required" label)?
• Do text inputs have appropriate types? (email, tel, number — affects mobile keyboard)
• Is the tab order logical?
• Are placeholder text and labels used correctly? (Placeholders disappear — don't use them as the only label)

Tables / Data Views:

• Can users sort and filter? Is the current sort state visible?
• How does it handle zero results? 1 result? 10,000 results?
• Are row actions discoverable? (Hover menus are invisible on mobile)
• Is there a clear way to take action on selected items?

Onboarding / Wizards:

• Can users skip steps? Should they be able to?
• Is progress visible? Can they go back?
• Does each step have a clear, single purpose?
• What happens if they abandon mid-flow and return later?

Settings / Preferences:

• Are changes saved automatically or on submit? Is this clear?
• Are destructive actions (delete, revoke) clearly distinguished from safe ones?
• Is there a way to reset to defaults?

Modals / Dialogs:

• Is there a clear way to close? (X button AND clicking outside)
• Does the modal size match the content? (Don't use a full-screen modal for a yes/no question)
• Can the user still see the context they came from?

AI-Specific UX Review

When the design involves AI-powered features (chatbots, AI-generated content, smart suggestions, copilots), add these checks. AI UX has distinct failure modes that traditional heuristics miss.

Setting Expectations

• Does the UI communicate what the AI can and can't do? (Scope framing prevents disappointment)
• Is there a clear indication that output is AI-generated? (Users need to know when to verify)
• Does the UI set the right confidence level? Avoid both "this is definitely correct" and "this might be totally wrong"

Handling Uncertainty

• How does the UI show confidence? (High-confidence results should look different from low-confidence guesses)
• Can users see WHY the AI made a recommendation? (Even a one-line explanation reduces distrust)
• What happens when the AI doesn't know? "I'm not sure" is better than a confident wrong answer

Loading & Latency

• AI responses are often slow (2-10 seconds). Is there a streaming/progressive display?
• Does the loading state indicate the AI is "thinking" vs. a generic spinner? (Typing indicators, progress text)
• Can the user cancel a slow AI request without losing their input?

Error & Edge Cases

• What happens when the AI produces garbage? Is there a clear "try again" or "report bad output" path?
• Can users edit AI output before it's applied? (Never auto-apply AI suggestions to user data without confirmation)
• Rate limits and failures: Does the UI degrade gracefully when the AI service is down?

Human-AI Interaction Loop

• Can users give feedback on AI output? (Thumbs up/down, edit, regenerate)
• Does the AI get better with user corrections? If so, is this communicated?
• Is there always a manual fallback? Users should never be blocked because the AI failed

Flag AI UX issues in the Must Fix tier when: AI output is auto-applied without review, there's no way to recover from bad AI output, or confidence levels are misleading.

Anti-Patterns

• Never give aesthetic feedback as design feedback. "I don't like the shade of blue" is a preference. "The blue CTA fails contrast against the blue background (2.1:1 ratio, needs 4.5:1)" is design feedback.
• Never redesign the entire page. Focus on the highest-impact issues within the current design direction.
• Never ignore the user's constraints. If they say "this ships Thursday," prioritize accordingly.
• Never assume a design is wrong because it is unconventional. Ask about user testing data before dismissing novel patterns.
• Never list problems without fixes. Problems without solutions are complaints.
• Never critique content if the user has not finalized copy. Focus on layout, flow, and interaction.

Rules

• Always lead with what works before what does not. This identifies strengths to protect during iteration.
• Be specific. "The CTA is unclear" is useless. "The 'Submit' button should say 'Create Account' because users do not know what they are submitting" is actionable.
• Focus on user outcomes, not aesthetic preferences. Every piece of feedback must trace back to user impact.
• If context is missing, ask. Never assume desktop vs. mobile or new user vs. power user.
• Prioritize ruthlessly. 3 high-impact issues beat 15 minor nitpicks.