New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Product Designer

by aakashg in aakashg/pm-claude-skills

A skill your agent uses when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues.

MITAuto-check passedFrontend & Design

Install Product Designer

skills CLI
$ npx skills add aakashg/pm-claude-skills --skill product-designer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install aakashg/pm-claude-skills product-designer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/aakashg/pm-claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/product-designer .claude/skills/product-designer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
product-designer
GitHub stars
112
Token cost
~2.4k tokens
SKILL.md length
1,018 words
Files
3 (incl. references)
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues.

  • Works in 4 steps: Read first → Understand the context → Name what works → …
  • The user asks to review a design
  • SKILL.md covers Step 0 — Read first, Constraints, Existence check and Step 1 — Understand the context, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Product Designer is an agent skill from aakashg/pm-claude-skills. Use when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues. Do NOT use for visual brand or aesthetic preference debates, or for reviewing copy before layout is settled.

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/ai-ux-review.md` and `references/screen-checklists.md`).

It sits in Frontend & Design, covering Design review and critique, UX design and Accessibility. The repository describes itself as: 5 Claude Code skills for product managers. Drop them in your .claude/skills/ folder and go. The licence is MIT.

When your agent uses it

  • The user asks to review a design
  • Give design feedback
  • Check a screen for usability and accessibility issues
  • Aesthetic preference debates

Example prompts

  • “/product-designer”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Read first
  2. Understand the context
  3. Name what works
  4. Review the 6 dimensions

What it can do on your machine

Read from SKILL.md and the folder at commit 64deebf. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Product Designer loads about 2.4k tokens when it runs, and up to ~3.8k if it reads all its reference files. Until then it costs about 68 tokens; SKILL.md has 1,018 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from aakashg/pm-claude-skills at commit 64deebf, republished under its MIT licence (© aakashg). 1,018 words, ~2,384 tokens.

Download SKILL.mdSave it as .claude/skills/product-designer/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
product-designer
description
Use when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues. Do NOT use for visual brand or aesthetic preference debates, or for reviewing copy before layout is settled.

Product Design Reviewer

Review a design across 6 dimensions and return prioritized, actionable feedback.

Step 0 — Read first

SourcePathWhat to extract
The designscreenshot, image, or Figma link the user sharesThe actual screen — never review from a text description alone
Project contextCLAUDE.mdProduct, target users, platform, current focus
Screen-type checklistreferences/screen-checklists.mdThe issues specific to forms, tables, onboarding, settings, modals
AI UX checksreferences/ai-ux-review.mdExtra checks when the design includes AI features
Prior feedbackany doc the user namesWhat was already flagged — do not re-flag resolved issues

If the user describes the design in words only, request a screenshot before reviewing. Reviewing a described design means inventing one.

Constraints

Mandatory.

  • Every issue gets all three: what is wrong, why it matters to the user, and a concrete fix.
  • Never give aesthetic preference as feedback. "I don't like this blue" is a preference. "This CTA is 2.1:1 against the background, WCAG AA needs 4.5:1" is feedback.
  • Never list a problem without a fix. Problems without solutions are complaints.
  • Never redesign the whole page. Work within the current design direction.
  • Never flag more than 3 Must Fix items. Prioritize ruthlessly — 3 high-impact issues beat 15 nitpicks.
  • Never assume platform or user type. If unstated, ask.
  • Never critique copy if the copy is not final. Review layout, flow, and interaction.
  • Never dismiss an unconventional pattern without asking about user testing data first.
  • Lead with what works, always, before any criticism.

Existence check

Before reviewing, verify:

  1. The artifact — a screenshot, image, or link you can actually see.
  2. The user goal — what the person is trying to accomplish in this flow.
  3. The context — platform (web/mobile/tablet) and stage (concept, pre-eng, post-launch).

If two of three are missing, do not review. Ask for exactly those. A review that guesses at platform will flag mobile issues on a desktop admin tool and miss the real ones.

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?
  3. What is the platform?
  4. What stage is this — early concept, ready for eng, post-launch iteration?

Step 2 — Name what works

Identify 2–3 things the design does well before any criticism. This is not politeness. It flags the strengths that must survive the next iteration.

Step 3 — Review the 6 dimensions

Only report dimensions with real issues. Read references/screen-checklists.md for the checks specific to this screen type.

  1. Clarity — can a new user find the primary action in 5 seconds? Is there one dominant element? Are labels descriptive? Is current state obvious?
  2. Flow — walk the journey step by step. Where do users stall, get confused, or abandon? What steps can be combined or cut?
  3. Information architecture — is related content grouped? Is the most important content above the fold? Are too many options competing?
  4. Consistency — do similar elements look and behave alike? Does it follow platform conventions (iOS HIG, Material, web standards)? Are interactive elements distinguishable from static ones?
  5. Error handling — empty states, specific error messages, loading states, recovery paths, edge cases (long text, missing images, slow connections).
  6. Accessibility — WCAG AA contrast (4.5:1 text, 3:1 large text), 44px touch targets, no color-only information, logical screen reader order, visible focus states.

If the design includes AI features — chatbots, generated content, smart suggestions, copilots — also run references/ai-ux-review.md. AI UX has failure modes traditional heuristics miss entirely.

Output template

Exact sections, exact order.

## What works
- [Strength 1 — and what it protects against]
- [Strength 2]
- [Strength 3]

## Must Fix (max 3)
1. [Issue in one line]
   WHY: [user impact — who, how often, what it costs]
   FIX: [concrete change, specific enough to hand to a designer]

## Should Fix (2-4)
[same three-part structure]

## Consider (1-3)
[same three-part structure]

## Not reviewed
[Anything you could not assess and why — e.g. "empty states, no screenshot provided"]

Tier definitions: Must Fix = causes confusion, drop-off, or task failure. Launch blockers. Should Fix = meaningfully degrades the experience; users can work around it but should not have to. Consider = polish worth tracking.

Escalate an AI UX issue to Must Fix when AI output is auto-applied without review, there is no recovery from bad output, or confidence signals are misleading.

Show full SKILL.md (380 more words)Show less

Example

Design: E-commerce checkout page, mobile web, pre-eng.

## What works
- Progress indicator ("Step 2 of 3") sets clear expectations
- Order summary stays visible on the right, reducing payment anxiety
- Express checkout (Apple Pay, Google Pay) above the form cuts friction for returning buyers

## Must Fix

1. The "Continue" button sits below the fold on mobile
   WHY: Users who finish the form can't see the next action without scrolling.
   That "now what?" moment is where checkout conversion dies.
   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: On an invalid card number the user sees a red banner at the top, then
   has to scan six fields to find which one is wrong. That's 5-10 seconds of
   confusion at the highest-intent moment in the flow.
   FIX: Inline errors directly below the offending field. Red border plus a
   specific message ("Card number must be 16 digits").

## Should Fix

3. "Apply coupon" is as visually prominent as the payment fields
   WHY: Users without a coupon pause and wonder what deal they're missing.
   Baymard Institute found 59% of users who see a coupon field leave the flow
   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 pick shipping on "will it arrive by Friday?", not "$5.99 vs
   $12.99." Without dates they can't make the choice they're actually making.
   FIX: Show "Arrives by [date]" for each option, date first, price second.

## Consider

5. Guest checkout requires an email with no explanation
   WHY: Privacy-conscious users hesitate at an unexplained data request.
   FIX: Helper text below the field — "For your receipt and order updates."

## Not reviewed
- Empty cart and payment-failure states — no screenshots provided
- Desktop layout — mobile screenshot only

The same review done badly: "The design looks cluttered. The colors aren't great. It needs better UX. Consider improving the layout. The form is confusing." Every point is unactionable. "Cluttered" how? "Better UX" means nothing. No one can build from it.

Shortcuts Claude takes

What Claude might thinkWhy it's wrong
"I can review from their description"You would be reviewing an imagined screen. Ask for the screenshot.
"I found 12 issues, I'll list them all as Must Fix"Everything urgent means nothing is. Cap Must Fix at 3.
"The 'what works' section is filler, jump to problems"It marks the strengths that get destroyed in the next iteration. Never skip it.
"This pattern is unusual, so it's wrong"Ask about user testing data first. Unconventional is not the same as broken.
"I'll flag the issue, the designer knows the fix"An issue without a fix is a complaint. Every item gets a FIX line.
"Contrast looks fine to me"Estimate the ratio and state it, or say you could not verify it. Do not guess silently.
"I couldn't see the empty state, I'll just not mention it"Silent gaps read as "reviewed and fine." List them under Not reviewed.

Exit checklist

Not complete until every box is checked. Any [bracket] placeholder left in the output is an automatic unchecked box.

  • Existence check passed, or the missing inputs were requested
  • 2–3 strengths named before any criticism
  • Must Fix has 3 items or fewer
  • Every issue has WHY (user impact) and FIX (concrete change)
  • No aesthetic preference is presented as a finding
  • Accessibility was assessed, or explicitly listed under Not reviewed
  • Screen-type checklist for this screen type was applied
  • AI UX checks applied if the design includes AI features
  • Anything unassessable is listed under Not reviewed
  • Feedback stays within the current design direction — no full redesign
  • No placeholders remain

Next

  • If the flow itself is the problem rather than the screen → offer to map the flow as text wireframes before any pixel changes.
  • If error and empty states are missing → offer to write the copy for them.
  • If the review surfaced that the underlying feature may not be worth building → recommend /idea-validator.
  • If the design is ready and needs a spec → recommend /prd-writer.

© aakashg, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/product-designer of aakashg/pm-claude-skills.

  • SKILL.md
  • references/ai-ux-review.md
  • references/screen-checklists.md

Open the folder on GitHubat commit 64deebf

Compare with similar skills

Product Designer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Product Designer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Product Designer this skillaakashg/pm-claude-skills112—~2.4kAutomated safety check: PassMIT
Design Critiquegetcrew44/crew44356—~691Automated safety check: PassMIT
UX Spec ReviewDonchitos/Claude-Code-Game-Studios26k—~3.7kAutomated safety check: PassMIT
Design ReviewTheDecipherist/claude-code-mastery-project-starter-kit338—~712Automated safety check: PassMIT
UI Reviewespennilsen/pi122—~1.4kAutomated safety check: PassMIT
Design AuditAThevon/genjutsu440—~1.6kAutomated safety check: PassCustom licence

Similar skills

  • Design Critique

    getcrew44/crew44

    Walks an agent through five review passes on a screen, flow or mockup, then returns ranked findings with a severity and a suggested fix for each one.

    356 GitHub stars~691 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • UX Spec Review

    Donchitos/Claude-Code-Game-Studios

    Validates a UX spec, HUD design or interaction pattern library for accessibility, design-doc alignment and implementation readiness, ending in one of four verdicts.

    26k GitHub stars~3.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Design Review

    TheDecipherist/claude-code-mastery-project-starter-kit

    Critique UI and UX for usability, accessibility, and distinctiveness with cited, evidence-based findings.

    338 GitHub stars~712 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • UI Review

    espennilsen/pi

    Review UI designs and implementations for accessibility, consistency, usability, and visual quality.

    122 GitHub stars~1.4k tokensUpdated 19 days ago
    Frontend & DesignAuto-check passed

  • Design Audit

    AThevon/genjutsu

    Design audit checklist - motion gaps, accessibility, color consistency, responsive, performance.

    440 GitHub stars~1.6k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Design Review

    Owl-Listener/designpowers

    A skill your agent uses when the user wants to evaluate something that ALREADY EXISTS rather than build something new — "review this", "audit this screen", "what's wrong with this page", "is this…

    251 GitHub stars~1.7k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

More from aakashg/pm-claude-skills

  • Idea Validator

    aakashg/pm-claude-skills

    A skill your agent uses when the user asks to validate a product idea, stress-test an idea, evaluate whether an idea is good, or decide whether to build something.

    112 GitHub stars~2.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Linkedin Post Writer

    aakashg/pm-claude-skills

    A skill your agent uses when the user asks to write, draft, or rewrite a LinkedIn post, turn notes or an article into a LinkedIn post, or fix a hook that is not landing.

    112 GitHub stars~1.8k tokensUpdated 2 mo ago
    Auto-check passed

  • Prompt Engineer

    aakashg/pm-claude-skills

    A skill your agent uses when the user asks to improve, optimize, rewrite, debug, or shorten a prompt, or asks why a prompt is producing bad output.

    112 GitHub stars~2.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Status Update Writer

    aakashg/pm-claude-skills

    A skill your agent uses when the user asks to write a status update, weekly or monthly update, stakeholder update, project update, standup, status report, or QBR.

    112 GitHub stars~2.5k tokensUpdated 2 mo ago
    Auto-check passed

Categories

Questions about Product Designer

What does Product Designer do?

A skill your agent uses when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues. Product Designer is an agent skill from aakashg/pm-claude-skills. Use when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues.

When should I use Product Designer?

Product Designer fits situations like: the user asks to review a design; give design feedback; check a screen for usability and accessibility issues; aesthetic preference debates.

How do I install Product Designer in Claude Code?

Run `npx skills add aakashg/pm-claude-skills --skill product-designer -a claude-code`. Or copy the skill folder (skills/product-designer in aakashg/pm-claude-skills) into .claude/skills/product-designer in your project. Claude Code loads it when a task matches its description.

How do I install Product Designer in Codex?

Run `npx skills add aakashg/pm-claude-skills --skill product-designer -a codex`. Or copy the skill folder (skills/product-designer in aakashg/pm-claude-skills) into .agents/skills/product-designer in your project. Codex loads it when a task matches its description.

Can I use Product Designer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aakashg/pm-claude-skills --skill product-designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/product-designer, .gemini/skills/product-designer, .github/skills/product-designer and .opencode/skills/product-designer in your project.

What does Product Designer need to run?

SKILL.md names no scripts, command-line tools or credentials: Product Designer is instructions for the agent only.

Does Product Designer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Product Designer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Product Designer use?

Product Designer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Product Designer use?

About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.

What are the alternatives to Product Designer?

Skills that share tags, products or a category with Product Designer: Design Critique (getcrew44/crew44, 356 stars), UX Spec Review (Donchitos/Claude-Code-Game-Studios, 26k stars), Design Review (TheDecipherist/claude-code-mastery-project-starter-kit, 338 stars) and UI Review (espennilsen/pi, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Product Designer?

aakashg (a GitHub user) maintains it in aakashg/pm-claude-skills, which has 112 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on August 8, 2026.

Source: aakashg/pm-claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.