Component Checker
一款 Figma 插件，用于图标规范检查与设计文档生成。从手动校验 300 个 icon 的痛苦中，生长出一个自动化工具，再从检查工具进化为设计规范平台。
关键词
设计规范 / Figma 插件 / AI / 提效工具
工作内容
UI/UX 设计师 | 制定 Icon 组件规范，开发 Figma 校验插件，撰写 30+ 组件开发规范
项目年份
2025 – 2026
挑战
质量守门
每新增一个 icon，都要逐一校验命名、图层数量、约束设置、填充规则等 6 项细节。任何一个参数没设对，后续调用就会出问题；上传到 iconfont 时甚至会出现前端无法正常渲染的问题。
检索效率
500+ icon 存在组件库中，设计师调用时要在茫茫 icon 海里逐个翻找。没有语义描述，只能靠名字猜，效率十分低下。
规范检查 + AI 描述
校验保证质量，语义描述解决检索 — 两个痛点，一个插件搞定。
规范检查
针对质量守门压力，插件内置 6 项校验规则：命名重复、Vector 图层数量、命名规范、Constraints、Fill Rule、重复路径。支持一键批量修复，fixAll 处理所有常见问题。
AI 描述
针对检索效率问题，调用 Google Gemini API 为每个 icon 自动生成 4 个中文 + 4 个英文语义关键词，写回 Figma 组件的 description 属性。设计师通过模糊检索即可快速定位，不用再逐个翻找。红色图标自动前缀「特殊图标禁止使用」，防止误用。
设计规范生成
以前写一份组件规范，需要参考 Ant Design、Semi Design 等各大组件库，逐一对比属性、交互状态、显示规则。一份规范往往需要 2-3 天的设计工时。
我尝试让 AI 来做这件事 — 但前提是它需要「懂」我们的设计系统。
Step 1：导入知识库
将设计系统文档、组件使用规范、业务逻辑等导入插件，AI 有了上下文。
Step 2：选中组件，一键生成
插件自动提取组件结构（props、变体、图层），结合知识库上下文，AI 生成标准设计规范。
Step 3：人工完善 + 写入 Figma
生成初稿后人工补充细节，一键写入 Figma 画布生成1440px 标准规范帧，包含概述、变体、交互说明、显示规则等分区。
最终成果
批量校验
每新增一个 icon 都要逐一校验 6 项规则，现在一键批量校验。
语义检索
500+ icon 从靠名字猜，变成通过语义关键词模糊检索。
规范提效
一份组件规范从参考各大组件库写 2-3 天，变成 AI 生成0.5d搞定。
500+
icon 校验
30+
组件规范
0.5d
规范生成（原 2-3 天）
其他项目
