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

When to Use

Dimension 1: Style Guide Implementation (70%)

Variant Structure (25 pts)

Token System (25 pts)

Visual Consistency (20 pts)

Accessibility States (20 pts)

Code Quality (10 pts)

Dimension 2: LLM Metadata Accessibility (30%)

Component Description (20 pts)

Searchability (15 pts)

Development Metadata (25 pts)

Usage Guidelines (20 pts)

Technical Specs (20 pts)

Score Interpretation

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

| Criterion | Score | Weight | Contribution |
|-----------|-------|--------|--------------|
| Implementation | XX | 70% | XX.X |
| LLM Accessibility | XX | 30% | XX.X |
| **Total** | | | **XX.X/100** |

### 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