
Product Design Critique
FreeGet structured feedback on your UI designs.
Free · Opens the source repo
What Product Design Critique does
The Product Design Critique skill provides a systematic approach to evaluating user interface designs, focusing on actionable feedback rather than subjective opinions. This skill is particularly useful for designers and engineers seeking to refine their screens, flows, or components before launch. By utilizing a structured critique process, users can identify key areas for improvement, ensuring that their designs align with user needs and expectations.
The critique process is organized into specific categories, including user job clarity, visual hierarchy, affordance, error states, accessibility, and consistency. Each category is assessed with clear criteria, allowing the reviewer to provide targeted recommendations. This approach not only highlights what needs to change but also prioritizes these changes based on their impact on user experience. The output is a prioritized list of issues and suggested fixes, making it easy for designers to act on the feedback.
This skill is ideal for scenarios where a designer or engineer is seeking feedback on a design artifact, whether it’s a mockup, a live UI, or a feature nearing launch. It serves as a final check to ensure that the design meets user expectations and is functional before it goes live. Additionally, it can be beneficial when investigating user drop-off points, providing insights that can guide further research and instrumentation.
However, it is important to note that this skill is not intended for redesign projects or for use in very early stages of design where no concrete artifacts exist. It requires a clear understanding of the user context and the specific job the user is trying to accomplish. Without this context, the critique may lack relevance and devolve into personal taste rather than constructive feedback.
When to use it
Use this skill when you need focused feedback on a design screen, flow, or component before launch.
When not to use it
Avoid using this skill for redesign projects or in situations where there are no concrete design artifacts available.
What you can build with it
Final UX Review Before Launch
Use this skill to get a last-minute critique on your design before it goes live, ensuring all critical issues are addressed.
Identifying User Drop-Off Points
Employ this skill to analyze flows suspected of causing user drop-off, providing insights for further research.
Feedback on Design Mockups
Utilize this skill when seeking structured feedback on design mockups from peers or stakeholders.
How to install Product Design Critique
View source1. Install with the skills CLI
npx skills add paperclipai/paperclip/design-critique --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by paperclipaiProduct Design Critique
A structured critique pass for a screen, flow, or component. The output is a prioritized list of changes a designer or engineer can act on — not adjectives. Critique is not redesign; recommend, do not rebuild.
When to use
- A designer or engineer asks for feedback on a screen, mock, or live UI.
- A feature is shipping and someone wants a final UX read.
- A flow is suspected of causing user drop-off and you want a pre-research read before instrumentation.
When not to use
- The user wants a redesign. That is a design project, not a critique.
- The work is so early that no concrete artifact exists. Sketch with them instead of critiquing air.
- You have no context on the user job. Ask for it first; design critique without user context devolves into taste.
Pre-critique context
Before opening a screen, get:
- Who is the user. Specific role and competence, not "users".
- What job they are doing on this screen. One sentence.
- What success looks like. What the user can do after this screen that they could not before.
- Where this screen sits in the larger flow. What precedes and follows.
If any of these is missing, ask. Critique without these is opinion.
The pass (in order)
-
Clarity of the user job.
- Within 3 seconds of opening, is it obvious what this screen is for?
- Does the primary action match the user's actual job, or a designer's preferred path?
-
Visual hierarchy.
- The most important thing on the screen should be the most prominent (size, weight, position, color).
- Secondary actions should look secondary. Tertiary should be findable but not loud.
- Headings should chunk content into the right groups for the task.
-
Affordance and signifiers.
- Clickable things look clickable.
- Disabled things look disabled and explain why on hover/focus.
- Drag, scroll, or swipe interactions are discoverable, not hidden.
-
States.
- Empty state (no data) is designed, not a blank rectangle.
- Loading state communicates progress, not just spins.
- Error states say what went wrong and what to do next, in the user's words.
- Success state confirms without celebrating banal actions.
-
Inputs and forms.
- Labels visible, not just placeholders.
- Validation runs at the right time (on blur, not on every keystroke unless the user is in a known-format field).
- Required fields marked.
- Field order matches the user's mental order, not the database order.
-
Accessibility.
- Sufficient color contrast (WCAG AA at minimum; AAA where reasonable).
- Focus order is logical for keyboard navigation.
- Interactive elements are reachable without a mouse.
- Critical information is not color-only (icons, text, position back it up).
- Touch targets at least 44×44 px on mobile.
-
Consistency.
- Tokens, components, and patterns match the rest of the product.
- "Borrowed" patterns from other products are intentional, not accidental drift.
-
Copy.
- Buttons are verbs that name the outcome ("Save changes" beats "Submit").
- Microcopy explains, does not decorate.
- Tone matches the product voice.
-
Edge cases.
- Long content (long names, many items, RTL languages).
- Tiny content (one item, zero items).
- Slow network and offline behavior.
- Permissions denied.
Output format
Group findings by severity, then by category. Each finding is one issue and one suggested fix.
## Design critique: <screen name>
### Must-fix (blocks ship)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.
### Should-fix (before broader rollout)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.
### Nice-to-fix (when there's room)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.
### Strengths to keep
- <one-line thing the design got right>
Always include the "strengths to keep" section. It is not flattery — it is signal to the designer about what not to change in the next round.
Anti-patterns
- "I would do it differently" without saying what or why. That is preference, not critique.
- Long critiques that bury must-fix items under nice-to-haves.
- Suggesting net-new features under the guise of a critique.
- Ignoring user context and grading on taste.
- Treating a critique as approval. State approval explicitly if asked; otherwise critique is feedback, not sign-off.
Frequently asked questions about Product Design Critique
Similar skills
Legacy Circuit Mockups
Visualize and create retro circuit diagrams easily.
Brainstorming Ideas Into Designs
Transform ideas into structured designs through dialogue.
Ecommerce Image Workflow
Generate product-focused images from reference photos.
Aperture Oscillation
Surface design tensions by oscillating scope levels.
Mobile App Image Generation
Create premium mobile app screen concepts effortlessly.
Open Design Default
Seamlessly route user prompts for design tasks.
