Figma Design Review Skill
Runs a structured PM design review against product requirements.
From the mohitagw15856/pm-claude-skills README — shows the whole collection, not only this skill. · view on GitHub
How to use it
Claude Code
- Run the line below. It pulls the whole folder into
~/.claude/skills/figma-design-review. - Describe your job in plain words. Claude Code follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit mohitagw15856/pm-claude-skills/skills/figma-design-review#main ~/.claude/skills/figma-design-reviewFor one project only, change the path to .claude/skills/figma-design-review.
Claude (web or desktop app)
- On this page open ⋯ → Download .md.
- Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
- Pick the file and Save. Claude shows the name and description and runs a security scan.
- Check the skill is switched on.
- Start a new chat and describe your job in plain words. The AI follows the skill from there.
ChatGPT or another app
- ChatGPT: make a Project and paste it into Instructions.
- Neither? Paste it at the top of a new chat — it works for that chat.
Not working?
- Check which app you pasted it into — the steps above name the right one.
- Some skills need the paid tier of Claude or ChatGPT.
Paste into Claude, ChatGPT or Cursor.
Source of Figma Design Review Skill
Show the full text76 lines
| name | description |
|---|---|
| figma-design-review | Runs a structured PM design review against product requirements. Use when asked to review a Figma design, check a design against requirements, or assess whether a design meets the product spec. Produces a requirements coverage check, UX concerns, open questions, and an explicit approval status — approved, approved with conditions, or not approved. |
Figma Design Review Skill
Runs a structured PM design review — checking that a design meets product requirements, covers all user flows, and is ready for engineering. This is a requirements-and-outcomes review, not an aesthetic critique.
Required Inputs
- Design description or screen summary
- Original requirements (PRD snippet, ticket, or acceptance criteria)
- User flow being designed
- Review stage (concept / mid-fidelity / pre-handoff final)
Output Structure
1. Review Header
Feature, review stage, reviewed by, date. Overall status: Approved / Approved with changes / Needs revision
2. Requirements Coverage Check
| Requirement | Covered? | Notes |
|---|---|---|
| [Requirement from PRD] | Yes/No/Partial | [Specific observation] |
Missing coverage summary: [Requirements not addressed — must resolve before approval]
3. User Flow Completeness
| Flow step | Designed? | Issues |
|---|---|---|
| [Step] | Yes/No/Partial | [Issue] |
| Error state | Yes/No | |
| Empty state | Yes/No | |
| Loading state | Yes/No |
4. PM Concerns
[Concern] — Blocking / Should fix / Nice to fix
- What: [Specific observation]
- Why it matters: [Business or user impact — not aesthetic preference]
- Suggested resolution: [What PM wants to see]
5. Open Questions
| Question | Owner | Needed by |
|---|---|---|
| [Question] | Designer/Eng/PM | [Date] |
6. Approval Decision
Approved / Approved with changes (list) / Needs revision (focus area + next review date)
Quality Checks
- Every requirement assessed
- All flow states checked (error, empty, loading)
- Concerns are outcome-focused not aesthetic
- Open questions have owners
- Approval status is explicit
Anti-Patterns
- Do not review a design without a list of requirements to check against — always ask for the PRD, design brief, or acceptance criteria first
- Do not give a vague approval status — the decision must be explicitly "approved", "approved with conditions", or "not approved"
- Do not conflate requirements gaps with UX concerns — track them separately so engineers and designers can act independently
- Do not raise concerns without suggesting what information is needed to resolve them
- Do not skip open questions — unresolved assumptions at review time become bugs after engineering handoff
Example Trigger Phrases
- "Review this Figma design against the requirements"
- "Do a PM design review for [feature]"
- "Check if this design meets the product spec"
- "Is this design ready to hand off to engineering?"
- "What is missing from this design before we can build it?"
| 1 | |
| 2 | name figma-design-review |
| 3 | description "Runs a structured PM design review against product requirements. Use when asked to review a Figma design, check a design against requirements, or assess whether a design meets the product spec. Produces a requirements coverage check, UX concerns, open questions, and an explicit approval status — approved, approved with conditions, or not approved." |
| 4 | |
| 5 | |
| 6 | # Figma Design Review Skill |
| 7 | |
| 8 | Runs a structured PM design review — checking that a design meets product requirements, covers all user flows, and is ready for engineering. This is a requirements-and-outcomes review, not an aesthetic critique. |
| 9 | |
| 10 | ## Required Inputs |
| 11 | |
| 12 | **Design description or screen summary** |
| 13 | **Original requirements** (PRD snippet, ticket, or acceptance criteria) |
| 14 | **User flow being designed** |
| 15 | **Review stage** (concept / mid-fidelity / pre-handoff final) |
| 16 | |
| 17 | ## Output Structure |
| 18 | |
| 19 | ### 1. Review Header |
| 20 | Feature, review stage, reviewed by, date. |
| 21 | **Overall status:** Approved / Approved with changes / Needs revision |
| 22 | |
| 23 | ### 2. Requirements Coverage Check |
| 24 | |
| 25 | | Requirement | Covered? | Notes | |
| 26 | |---|---|---| |
| 27 | | [Requirement from PRD] | Yes/No/Partial | [Specific observation] | |
| 28 | |
| 29 | Missing coverage summary: [Requirements not addressed — must resolve before approval] |
| 30 | |
| 31 | ### 3. User Flow Completeness |
| 32 | |
| 33 | | Flow step | Designed? | Issues | |
| 34 | |---|---|---| |
| 35 | | [Step] | Yes/No/Partial | [Issue] | |
| 36 | | Error state | Yes/No | | |
| 37 | | Empty state | Yes/No | | |
| 38 | | Loading state | Yes/No | | |
| 39 | |
| 40 | ### 4. PM Concerns |
| 41 | |
| 42 | **[Concern] — Blocking / Should fix / Nice to fix** |
| 43 | What: [Specific observation] |
| 44 | Why it matters: [Business or user impact — not aesthetic preference] |
| 45 | Suggested resolution: [What PM wants to see] |
| 46 | |
| 47 | ### 5. Open Questions |
| 48 | |
| 49 | | Question | Owner | Needed by | |
| 50 | |---|---|---| |
| 51 | | [Question] | Designer/Eng/PM | [Date] | |
| 52 | |
| 53 | ### 6. Approval Decision |
| 54 | Approved / Approved with changes (list) / Needs revision (focus area + next review date) |
| 55 | |
| 56 | ## Quality Checks |
| 57 | [ ] Every requirement assessed |
| 58 | [ ] All flow states checked (error, empty, loading) |
| 59 | [ ] Concerns are outcome-focused not aesthetic |
| 60 | [ ] Open questions have owners |
| 61 | [ ] Approval status is explicit |
| 62 | |
| 63 | ## Anti-Patterns |
| 64 | |
| 65 | [ ] Do not review a design without a list of requirements to check against — always ask for the PRD, design brief, or acceptance criteria first |
| 66 | [ ] Do not give a vague approval status — the decision must be explicitly "approved", "approved with conditions", or "not approved" |
| 67 | [ ] Do not conflate requirements gaps with UX concerns — track them separately so engineers and designers can act independently |
| 68 | [ ] Do not raise concerns without suggesting what information is needed to resolve them |
| 69 | [ ] Do not skip open questions — unresolved assumptions at review time become bugs after engineering handoff |
| 70 | |
| 71 | ## Example Trigger Phrases |
| 72 | "Review this Figma design against the requirements" |
| 73 | "Do a PM design review for [feature]" |
| 74 | "Check if this design meets the product spec" |
| 75 | "Is this design ready to hand off to engineering?" |
| 76 | "What is missing from this design before we can build it?" |
Discussion
Brainstorming Ideas Into DesignsYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.Brutal Design Review Of Your ProductDescribe your product or app and how customers use it; get back a blunt verdict with an exact list of what to cut and what to fix first.Steve jobs design reviewReview designs, products, and features with Steve Jobs'' standards: ruthless simplicity, focus, and end-to-end excellence. Use when the user mentions "Steve Jobs review", "design review", "product review", "what would Steve do", "insanely great", "this feels too complicated", "too many features", "product taste", "saying no", or "is this good enough to ship". Also trigger when critiquing a UI, feature, or roadmap for focus and simplicity, cutting scope to the essential, or pressure-testing the whole experience from first run to daily use. Covers the simplicity audit, the no list, design-is-how-it-works, end-to-end ownership, demo culture, and a Jobs-style review protocol with binary verdicts. For visual design fundamentals, see refactoring-ui. For usability audits, see ux-heuristics. For detail polish, see microinteractions.Figma Design Critique — PM Perspective SkillRuns a PM-perspective design critique focused on product outcomes and user goals, not aesthetics. Use when asked for a PM design critique, a product review of a Figma design, or feedback from a product perspective without needing to be a designer. Produces structured outcome-based feedback tied to user goals, business metrics, and requirement coverage.
Browse more free Claude skills or everything in Design.