AI 图标生成入库：漂亮图标还要过语义和网格检查

AI 图标生成入库：漂亮图标还要过语义和网格检查

AI 生成图标很快，但直接入库风险很高。图标可能风格不统一、线宽不一致、语义含糊、视图盒不规范，甚至在小尺寸下糊成一团。图标库是设计系统的高频资产，不能只凭“看起来不错”通过。

AI 图标生成可以用于草稿，但入库前必须经过语义、网格、可读性和代码格式检查。

一、图标入库流程要分层

flowchart TD A[AI Icon Draft] --> B[Semantic Review] B --> C[Grid Check] C --> D[Style Check] D --> E[SVG Cleanup] E --> F[Icon Package]

先确认图标表达的概念是否准确，再看视觉规范。一个“导出”图标如果像“分享”，线条再漂亮也不该入库。

二、统一网格和线宽

图标库要有固定 viewBox、描边宽度、端点样式和安全边距。

icon_spec: viewBox: "0 0 24 24" strokeWidth: 2 strokeLinecap: round strokeLinejoin: round padding: 2

AI 生成 SVG 时，常会出现奇怪的小数、冗余路径或不一致的 viewBox。需要清理后再进代码库。

三、小尺寸可读性必须检查

图标在 24px 看着清楚，不代表 16px 也清楚。工具栏、表格操作列、移动端按钮经常使用小尺寸。

readability_check: sizes: [16, 20, 24, 32] backgrounds: [light, dark] states: [default, disabled, active]

如果 16px 下主要轮廓消失，就需要简化路径。图标不是插画，细节过多反而会降低识别效率。

语义相近的图标还要做成组对比。例如“上传、下载、导入、导出”如果箭头方向、容器形状和命名规则不统一，用户会在工具栏里反复确认。AI 生成单个图标时可能好看，但图标库看的是整体系统。

icon_family_review: concepts: [upload, download, import, export] compare: - arrow_direction - container_shape - stroke_weight - optical_balance

这类成组评审能避免图标越积越杂。

四、SVG 要可维护

入库 SVG 应避免内联颜色，使用currentColor，方便组件继承文字颜色。

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"> <path d="M12 5v14" /> <path d="M5 12h14" /> </svg>

同时要检查无障碍语义。装饰图标用aria-hidden，有功能含义的图标按钮必须提供可访问名称。

图标命名也要规范。文件名、组件名和语义名应一致，例如IconDownload不要画成云上传。名称一旦进入代码补全，错误语义会被大量复用。

五、总结

AI 生成图标可以加快草稿探索，但入库前要经过语义、网格、线宽、小尺寸可读性和 SVG 代码检查。

漂亮不是图标库的唯一标准。统一、清晰、可维护，才是图标能长期服务产品的前提。

AI 负责拓宽草稿空间，设计系统负责收敛标准。没有入库标准，生成速度越快，图标债越多。