| name | figma-design-review |
| description | Use this skill whenever UX modernization optionally needs Figma-based design review, human approval, Figma MCP, Figma frames/prototypes, design comments, design tokens/components, Code Connect, or “approve the design before implementation.” It provides opt-in design evidence for web-action-testing and strict-code-review; it is not required when Figma is not used. |
Figma Design Review
Figma is an optional human design-review path. ux-modernization defines the
target flow; this skill turns that flow into a Figma frame/prototype or links to an
existing one, captures human review, and provides design evidence when the project
chooses to use Figma.
When to use
- After
ux-modernization produces a design direction, wireframe, or prototype.
- Before UX code mode starts when the change opts into Figma review or claims a
Figma baseline.
- Whenever the user mentions Figma, design review, prototype approval, design tokens,
components, Code Connect, Figma MCP, comments, or sign-off.
Preconditions
requirements-grilling has passed.ux-modernization has a target flow or dashboard design to review.- If Figma MCP is available, prefer it. If not, use Figma URLs, screenshots, exports,
or manually recorded review evidence.
Figma MCP / tooling rule
If Figma MCP tools are available, use them to:
- create or update native Figma frames/prototypes;
- extract design context, variables, components, layout, and Code Connect hints;
- capture live UI into Figma when comparing implementation and design;
- retrieve comments or selected frame context when available.
If Figma MCP is not available, proceed with manual Figma links and human approval
evidence. Always record the tooling availability in the output document.
Run the helper if useful:
.agents/skills/figma-design-review/scripts/check-figma-tooling.sh
Method
- Create or link the Figma artifact. Use the
ux-modernization after-flow to
create/link the relevant Figma file, page, frame, component set, or prototype.
- Map design to requirements. Every reviewed frame must map to requirement IDs,
acceptance criteria, and target user tasks.
- Request human review. Ask stakeholders/design owners to review the Figma
prototype. Capture comments, requested changes, and approval.
- Loop on changes. If comments are open or approval is denied, return to
ux-modernization and update the flow/design. Repeat until approved.
- Freeze the approved design context. Record Figma URL, frame IDs, approved
interaction states, relevant tokens/components, approval owner, and approval time.
- Hand off to implementation. For changes that opt into Figma, only after
approval can UX code mode proceed.
test-authoring and implementation must use
this approved design context.
Gate rule
Figma does not block UX code mode when it is not used. If a change opts into Figma
review, keep the change in design/review mode while figma_design is requested or
changes_requested. Move to UX code mode only after figma_design: approved is
recorded in plan.md, with a Figma URL/frame ID and human approval evidence.
Output template and helper scripts
- Korean template: OUTPUT_TEMPLATE.md
- Figma reference: FIGMA_REFERENCE.md
- Report scaffold:
scripts/create-figma-design-review.sh <repo-root> <target-name>
- Tooling check:
scripts/check-figma-tooling.sh
