Requirements Design Review

Figma Design Review Skill

by mohitagw15856 · MIT license · ★ 1,395 on GitHub · updated Sep 23

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.

---
name: figma-design-review
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."
---

# 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

Overview

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.

Manual install (npx, ZIP)

Claude Codenpx skills add mohitagw15856/pm-claude-skills --skill figma-design-review -g -a claude-code

Claude Code (manual)

mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/mohitagw15856/pm-claude-skills/tar.gz/f6ca79348c55 \
  | tar -xz -C ~/.claude/skills --strip-components=2 pm-claude-skills-f6ca79348c55/skills/figma-design-review

Windows (PowerShell)

New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/06f77cd4cd723506984e/figma-design-review.zip" -OutFile "$env:TEMP\figma-design-review.zip"; Expand-Archive "$env:TEMP\figma-design-review.zip" -DestinationPath "$HOME\.claude\skills" -Force

Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md3.0 KB

Read the files here

mohitagw15856/f6ca7931 file

SKILL.md3.0 KB

SKILL.md

Show the full text76 lines

figma-design-review/SKILL.md76 lines · 3.0 KB

PreviewCode

Outline

RawView on GitHub

Figma Design Review Skill

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?"