关于 figma-component-audit
检查 Figma 组件库并生成结构化审计结果及优先级建议。审查命名、组件覆盖、变体完整性、文档和交互状态。
主要功能
- 01库健康度摘要与评分
- 02命名问题及具体修正方案
- 03组件覆盖缺口检查
- 04交互变体完整性检查
- 05按优先级排列的修复计划
适用场景
- 01检查 Figma 库的一致性
- 02查找产品所缺少的组件
- 03检查组件变体和状态
- 04规划设计系统清理工作
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/figma-component-audit确认已加载。
详细介绍
Figma 组件审计技能
对 Figma 组件库进行结构化审计，识别不一致、命名问题、覆盖缺口，并提出优先级明确的建议。
必需输入
- 组件列表或描述（粘贴组件名称或描述现有组件）
- 产品类型（移动应用 / Web 应用 / 桌面端 / 多平台）
- 设计系统成熟度（新建 / 成长中 / 成熟 / 遗留）
- 主要关注点（可选）
输出结构
1. 审计摘要
| 维度 | 状态 | 评分 |
|---|---|---|
| 命名一致性 | 红 / 黄 / 绿 | /10 |
| 组件覆盖度 | /10 | |
| 变体完整度 | /10 | |
| 文档 | /10 | |
| 整体健康度 | /10 |
结论： 这个组件库目前状况如何？最需要解决的一件事是什么？
2. 命名问题
针对每个问题： 问题：[问题类型]
- 当前情况：[具体示例]
- 重要性：[对设计师和开发者的影响]
- 修复方法：[应采用的确切命名规范]
- 示例：修改前 / 修改后
应遵循的命名规范：
- 组件：PascalCase（NavigationBar）
- 变体：使用斜杠分隔的小写形式（size/large、state/hover）
- 页面：全部大写（COMPONENTS、FOUNDATIONS）
3. 覆盖缺口
| 缺少的组件 | 优先级 | 需要原因 |
|---|---|---|
| [组件] | 高 / 中 / 低 | [使用场景] |
4. 变体完整度检查
| 组件 | 默认 | 悬停 | 激活 | 禁用 | 错误 | 缺少 |
|---|---|---|---|---|---|---|
| [Button] | 是 | 是 | 否 | 是 | 否 | 激活、错误 |
5. 按优先级排序的修复计划
| # | 修复项 | 工作量 | 影响 | 优先处理？ |
|---|---|---|---|---|
| 1 | [修复项] | 低 / 中 / 高 | 高 | 是 |
质量检查
- 命名建议包含修改前 / 修改后的示例
- 覆盖缺口与产品类型相关
- 修复计划按影响与工作量的比值排序
- 变体完整度涵盖所有交互状态
反模式
- 指出命名问题时，必须提供具体、一致且应采用的命名规范
- 不要只审查视觉一致性，也要检查缺失的交互状态和无障碍合规性
- 不要将所有问题列为同等优先级；应按影响分组（严重 / 主要 / 次要），以便制定可执行的修复计划
- 不要遗漏变体完整度；每个交互组件都必须涵盖所有必需状态
- 指出覆盖缺口时，必须建议应添加的具体组件
示例触发语
- “审计我的 Figma 组件库”
- “检查我们的设计系统有哪些一致性问题”
- “我们的 Figma 组件库缺少哪些组件？”
- “我们的组件命名一团糟——帮我整理一下”
- “检查一下我们的 Figma 组件健康状况”
评论
支持 Markdown