skills.rest
nand1234
nand1234COMMUNITY
Explore all skills by this author →
GitHub

review-design

Analyze Figma files and PNGs to generate detailed design specs.

Updated Mar 6, 2026
Search Tags:#figma#visual-analysis#design-review#frontend-design#component-tokens#ui-spec
One-click install
npx skills add https://github.com/nand1234/Agentic-workflow-builder --skill review-design-nand1234
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-design
Source: https://github.com/nand1234/Agentic-workflow-builder/tree/main/ai-dev-worflow/.claude/skills/review-design
Command: npx skills add https://github.com/nand1234/Agentic-workflow-builder --skill review-design-nand1234

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyses Figma URLs and/or PNG screenshots and produces a detailed design spec for implementation. Use when a feature has designs attached, when asked to review a design, or before implementing any UI changes.

Core Features & Use Cases

  • Figma-driven design analysis: Extract component structure, tokens, and interaction patterns from Figma files to inform implementation.
  • Visual validation with PNGs: Assess visual states from provided screenshots to validate UI consistency.
  • Use Case: Given a feature slug and design sources, generate a comprehensive spec that guides frontend engineers and designers in alignment.

Quick Start

Analyze the provided design sources to generate a complete design specification for the feature.

Frequently Asked Questions about review-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate UI specs from Figma designs for frontend implementation?▼

To generate UI specs from Figma designs, analyze Figma URLs or PNG screenshots to extract component structure, interaction states, and tokens, then save the detailed output to docs/design/$FEATURE.md.

Can I review a UI design using only a PNG screenshot?▼

Yes, you can review a UI design using PNG screenshots to assess visual states and validate UI consistency, extracting component structure and interaction patterns for the design spec.

What is the best way to extract design tokens and component structure from a Figma file?▼

The best way to extract design tokens and component structure is to provide the Figma file URL for analysis, which identifies the component hierarchy and tokens to produce a comprehensive implementation spec.

How do I handle design ambiguities when creating a frontend UI spec?▼

When creating a frontend UI spec, validate all inputs and explicitly list any design questions or ambiguities to resolve, ensuring accurate frontend implementation and alignment between designers and engineers.

Does the design review process support both Figma files and PNG screenshots?▼

Yes, the design review process supports both Figma files and PNG screenshots, using Figma files when available for structural analysis and PNGs for visual validation of interaction states.

Related Skills

Explore More Design & Creative Skills→
pawan0631pawan0631

figma

Translate Figma designs into React and Tailwind UI code.

Community
Intermediate
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
Hey-ViswaHey-Viswa

nvidia-design-skill

Integrates the Braille alphabet into the digital world.

Community
Advanced
sergicalsergical
1

visual-tester

Interact with browser elements and capture screenshots via Chrome CDP.

Community
Intermediate