スキル一覧に戻る
ilandahan

figma-design-review

by ilandahan

AID - AI Development process - Complete methodology for AI-assisted full-stack software development. E2E process from raw ideas to deploy.

7🍴 1📅 2026年1月22日
GitHubで見るManusで実行

SKILL.md


name: figma-design-review description: AI-powered design review for Figma components with weighted dual-scoring system. Evaluates Style Guide Implementation (70%) and LLM Metadata Accessibility (30%). For export, hands off to atomic-design skill.

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

DimensionWeightFocus
Style Guide Implementation70%Code quality, consistency, accessibility
LLM Metadata Accessibility30%Documentation for AI code generation

When to Use

TriggerAction
Designer selects componentFull design review
"Review this component"Scored report
"What's missing?"Gap analysis
"Is this ready for export?"Export readiness check
Score < 80Improvement roadmap

Dimension 1: Style Guide Implementation (70%)

Variant Structure (25 pts)

CriterionPoints
Complete variant matrix10
Consistent naming (Size=X, State=Y)5
TypeScript interface defined5
Logical organization5

Token System (25 pts)

CriterionPoints
CSS Variables for colors10
CSS Variables for typography5
CSS Variables for spacing5
Semantic token naming5

Visual Consistency (20 pts)

CriterionPoints
Consistent font-weight5
Consistent border-radius5
Consistent padding/spacing5
No layout artifacts5

Accessibility States (20 pts)

CriterionPoints
Focus state present8
Disabled state6
Hover state4
Touch target >= 44px2

Code Quality (10 pts)

CriterionPoints
No duplication5
Clean conditionals3
Proper defaults2

Dimension 2: LLM Metadata Accessibility (30%)

Component Description (20 pts)

CriterionPoints
Primary description10
Use case specified5
Business context5

Searchability (15 pts)

CriterionPoints
Tags present8
Tags comprehensive7

Development Metadata (25 pts)

CriterionPoints
testId5
ariaLabel5
analytics5
category5
level5

Usage Guidelines (20 pts)

CriterionPoints
Do's list7
Don'ts list7
Notes6

Technical Specs (20 pts)

CriterionPoints
Design tokens documented8
Specs (minWidth, etc.)6
A11y requirements6

Score Interpretation

ScoreGradeExport Status
90-100ExcellentReady
80-89GoodReady with notes
70-79AcceptableFix critical first
60-69Needs WorkNot ready
< 60PoorMajor 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

| 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

FilePurpose
references/audit-summary-format.mdOutput format
references/scoring-rubric.mdScoring criteria
references/common-issues.mdFrequent problems
../atomic-design/SKILL.mdExport skill

スコア

総合スコア

70/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

+10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です