Back to Details

figma-design-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Design Review Skill

Figma 设计评审 Skill

Review and score Figma component designs using weighted dual-scoring.
采用加权双评分体系对Figma组件设计进行评审和打分。

Two-Skill Architecture

双Skill架构

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
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
得分≥70？→ 移交至atomic-design处理

Scoring Philosophy

评分理念

DimensionWeightFocus
Style Guide Implementation70%Code quality, consistency, accessibility
LLM Metadata Accessibility30%Documentation for AI code generation
维度权重关注点
风格指南落地70%代码质量、一致性、无障碍性
LLM元数据可访问性30%AI代码生成相关文档

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
触发条件对应操作
设计师选中组件完整设计评审
触发“评审此组件”指令生成带评分的报告
触发“缺少什么？”指令差距分析
触发“是否可导出？”指令导出就绪性检查
得分<80生成改进路线图

Dimension 1: Style Guide Implementation (70%)

维度1：风格指南落地（占比70%）

Variant Structure (25 pts)

变体结构（25分）

CriterionPoints
Complete variant matrix10
Consistent naming (Size=X, State=Y)5
TypeScript interface defined5
Logical organization5
评估标准分值
变体矩阵完整10
命名一致（如Size=X, State=Y）5
已定义TypeScript接口5
组织逻辑清晰5

Token System (25 pts)

Token体系（25分）

CriterionPoints
CSS Variables for colors10
CSS Variables for typography5
CSS Variables for spacing5
Semantic token naming5
评估标准分值
使用CSS Variables定义颜色10
使用CSS Variables定义排版5
使用CSS Variables定义间距5
Token命名语义化5

Visual Consistency (20 pts)

视觉一致性（20分）

CriterionPoints
Consistent font-weight5
Consistent border-radius5
Consistent padding/spacing5
No layout artifacts5
评估标准分值
字体粗细一致5
圆角大小一致5
内边距/间距一致5
无布局异常5

Accessibility States (20 pts)

无障碍状态（20分）

CriterionPoints
Focus state present8
Disabled state6
Hover state4
Touch target >= 44px2
评估标准分值
包含焦点状态8
包含禁用状态6
包含悬停状态4
触摸目标≥44px2

Code Quality (10 pts)

代码质量（10分）

CriterionPoints
No duplication5
Clean conditionals3
Proper defaults2
评估标准分值
无代码重复5
条件判断简洁3
配置合理默认值2

Dimension 2: LLM Metadata Accessibility (30%)

维度2：LLM元数据可访问性（占比30%）

Component Description (20 pts)

组件描述（20分）

CriterionPoints
Primary description10
Use case specified5
Business context5
评估标准分值
包含核心描述10
明确使用场景5
说明业务背景5

Searchability (15 pts)

可搜索性（15分）

CriterionPoints
Tags present8
Tags comprehensive7
评估标准分值
包含标签8
标签覆盖全面7

Development Metadata (25 pts)

开发元数据（25分）

CriterionPoints
testId5
ariaLabel5
analytics5
category5
level5
评估标准分值
包含testId5
包含ariaLabel5
包含analytics配置5
包含分类信息5
包含级别信息5

Usage Guidelines (20 pts)

使用指南（20分）

CriterionPoints
Do's list7
Don'ts list7
Notes6
评估标准分值
包含“Do's”列表7
包含“Don'ts”列表7
包含注意事项6

Technical Specs (20 pts)

技术规格（20分）

CriterionPoints
Design tokens documented8
Specs (minWidth, etc.)6
A11y requirements6
评估标准分值
已记录设计Token8
明确规格参数（如minWidth等）6
说明无障碍要求6

Score Interpretation

得分解读

ScoreGradeExport Status
90-100ExcellentReady
80-89GoodReady with notes
70-79AcceptableFix critical first
60-69Needs WorkNot ready
< 60PoorMajor rework
得分区间等级导出状态
90-100优秀可直接导出
80-89良好可导出，附备注
70-79合格先修复关键问题
60-69需要改进暂不可导出
< 60较差需要大幅重构

Report Output Format

报告输出格式

markdown
undefined
markdown
undefined

Component Evaluation: [Name]

组件评估：[组件名称]

Style Guide Implementation: [XX]/100

风格指南落地得分：[XX]/100

Strengths:
  • [Positive finding]
Weaknesses:
  • [Issue] -> Fix: [Solution]
优势：
  • [正面发现]
不足：
  • [问题点] → 修复方案： [解决办法]

LLM Metadata: [XX]/100

LLM元数据得分：[XX]/100

Includes:
  • [Present metadata]
Missing:
  • [Missing metadata]
已包含：
  • [已有的元数据]
缺失项：
  • [缺失的元数据]

Final Weighted Score

最终加权得分

CriterionScoreWeightContribution
ImplementationXX70%XX.X
LLM AccessibilityXX30%XX.X
TotalXX.X/100
评估项得分权重贡献分
风格落地XX70%XX.X
LLM可访问性XX30%XX.X
总分XX.X/100

Recommendations:

建议：

  1. [Recommendation] - [explanation]

---
  1. [具体建议] - [说明]

---

Review Framework

评审框架

Step 1: Extract Data

步骤1：提取数据

  • Name/structure from Figma
  • Code from get_design_context
  • Screenshot from get_screenshot
  • Metadata from description
  • 从Figma提取名称/结构
  • 从get_design_context获取代码
  • 从get_screenshot获取截图
  • 从描述中提取元数据

Step 2: Evaluate Implementation (70%)

步骤2：评估风格落地（70%）

  • Variant count: expected vs actual
  • Token usage check
  • Visual consistency
  • Accessibility states
  • Code quality
  • 变体数量：预期值 vs 实际值
  • Token使用情况检查
  • 视觉一致性校验
  • 无障碍状态检查
  • 代码质量评估

Step 3: Evaluate LLM Accessibility (30%)

步骤3：评估LLM可访问性（30%）

  • Description present?
  • Tags comprehensive?
  • Dev metadata complete?
  • Usage guidelines?
  • Technical specs?
  • 是否包含组件描述？
  • 标签是否全面？
  • 开发元数据是否完整？
  • 是否包含使用指南？
  • 是否包含技术规格？

Step 4: Calculate

步骤4：计算得分

implementation_score = variant + token + visual + a11y + code
llm_score = desc + search + dev + usage + specs
weighted = (implementation * 0.7) + (llm * 0.3)
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

步骤5：生成报告

  • Strengths (max 6)
  • Weaknesses (max 5, each with fix)
  • Recommendations by priority
  • Export readiness
  • 优势（最多6项）
  • 不足（最多5项，每项附修复方案）
  • 按优先级排序的建议
  • 导出就绪状态

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
  • 每一项不足必须附带修复方案
  • 每一个问题必须明确指出具体字段
  • 优势项最多6个
  • 不足项最多5个
  • 建议按优先级排序
  • 报告仅支持英文

References

参考资料

FilePurpose
references/audit-summary-format.mdOutput format
references/scoring-rubric.mdScoring criteria
references/common-issues.mdFrequent problems
../atomic-design/SKILL.mdExport skill
文件用途
references/audit-summary-format.md输出格式参考
references/scoring-rubric.md评分标准参考
references/common-issues.md常见问题参考
../atomic-design/SKILL.md导出Skill参考