Figma Design Review Skill

Review and score Figma component designs using weighted dual-scoring.

Two-Skill Architecture

figma-design-review (PHASE 1) -> atomic-design (PHASE 2 - Export) Score components (70/30) Classify level (A/M/O) Identify issues Generate files Recommend fixes Extract tokens Determine export readiness

Score >= 70? -> Hand off to atomic-design

Scoring Philosophy

Dimension Weight Focus

Style Guide Implementation 70% Code quality, consistency, accessibility

LLM Metadata Accessibility 30% Documentation for AI code generation

When to Use

Trigger Action

Designer selects component Full design review

"Review this component" Scored report

"What's missing?" Gap analysis

"Is this ready for export?" Export readiness check

Score < 80 Improvement roadmap

Dimension 1: Style Guide Implementation (70%)

Variant Structure (25 pts)

Criterion Points

Complete variant matrix 10

Consistent naming (Size=X, State=Y) 5

TypeScript interface defined 5

Logical organization 5

Token System (25 pts)

Criterion Points

CSS Variables for colors 10

CSS Variables for typography 5

CSS Variables for spacing 5

Semantic token naming 5

Visual Consistency (20 pts)

Criterion Points

Consistent font-weight 5

Consistent border-radius 5

Consistent padding/spacing 5

No layout artifacts 5

Accessibility States (20 pts)

Criterion Points

Focus state present 8

Disabled state 6

Hover state 4

Touch target >= 44px 2

Code Quality (10 pts)

Criterion Points

No duplication 5

Clean conditionals 3

Proper defaults 2

Dimension 2: LLM Metadata Accessibility (30%)

Component Description (20 pts)

Criterion Points

Primary description 10

Use case specified 5

Business context 5

Searchability (15 pts)

Criterion Points

Tags present 8

Tags comprehensive 7

Development Metadata (25 pts)

Criterion Points

testId 5

ariaLabel 5

analytics 5

category 5

level 5

Usage Guidelines (20 pts)

Criterion Points

Do's list 7

Don'ts list 7

Notes 6

Technical Specs (20 pts)

Criterion Points

Design tokens documented 8

Specs (minWidth, etc.) 6

A11y requirements 6

Score Interpretation

Score Grade Export Status

90-100 Excellent Ready

80-89 Good Ready with notes

70-79 Acceptable Fix critical first

60-69 Needs Work Not ready

< 60 Poor Major rework

Report Output Format

Component Evaluation: [Name]

Style Guide Implementation: [XX]/100

Strengths:

• [Positive finding]

Weaknesses:

• [Issue] -> Fix: [Solution]

LLM Metadata: [XX]/100

Includes:

• [Present metadata]

Missing:

• [Missing metadata]

Final Weighted Score

Recommendations:

1. [Recommendation] - [explanation]

Review Framework

Step 1: Extract Data

• Name/structure from Figma

• Code from get_design_context

• Screenshot from get_screenshot

• Metadata from description

Step 2: Evaluate Implementation (70%)

• Variant count: expected vs actual

• Token usage check

• Visual consistency

• Accessibility states

• Code quality

Step 3: Evaluate LLM Accessibility (30%)

• Description present?

• Tags comprehensive?

• Dev metadata complete?

• Usage guidelines?

• Technical specs?

Step 4: Calculate

implementation_score = variant + token + visual + a11y + code llm_score = desc + search + dev + usage + specs weighted = (implementation * 0.7) + (llm * 0.3)

Step 5: Generate Report

• Strengths (max 6)

• Weaknesses (max 5, each with fix)

• Recommendations by priority

• Export readiness

Key Rules

• Every weakness MUST include a fix

• Every issue MUST name specific field

• Strengths capped at 6

• Weaknesses capped at 5

• Recommendations ordered by priority

• English only

References

File Purpose

references/audit-summary-format.md Output format

references/scoring-rubric.md Scoring criteria

references/common-issues.md Frequent problems

../atomic-design/SKILL.md Export skill