AI 生成 SVG 图标要想真正可用，关键不是让模型画出一张“像图标”的图片，而是明确图标语义、网格、笔画、填充和导出规则，再检查 SVG 是否可编辑、可缩放、可读和方便交给开发。墨刀 AI 可以帮助探索图标方向、整理一组图标的视觉约束并生成应用草稿；如果需要直接用于产品，还要人工清理路径、检查授权和验证不同尺寸。
你可以先进入墨刀 AI 图片生成，从 UI 配图与插画或品牌视觉任务开始描述图标用途，再把选定方向放入原型中验证。本文重点讲“可编辑矢量资产”的工作流，不把普通 PNG 或自动描摹结果当成合格 SVG。
先定义一组图标的交付标准
单个图标看起来漂亮，不代表它能进入产品。开始前先写清楚这组图标服务什么界面、有哪些状态、需要哪些尺寸和颜色模式。
| 维度 | 先回答的问题 | 验收信号 |
|---|---|---|
| 语义 | 用户看到图标能否猜到操作或状态？ | 与按钮文案、无障碍名称和上下文一致 |
| 几何 | 是否共享同一网格、圆角和光学平衡？ | 放在同一工具栏中，大小和重心不跳动 |
| 笔画 | 线宽、端点和转角是否统一？ | 缩放后仍保持相近视觉重量 |
| 颜色 | 默认、悬停、选中、禁用是否有明确规则？ | 状态变化能被看懂，文字不只依赖颜色 |
| 文件 | 研发能否继续编辑和复用？ | 路径干净、viewBox正确、无意外位图和外链字体 |
例如“订单、筛选、导出、失败、成功”五个图标，应先写出名称、动作和状态，再讨论形状。不要让模型按抽象审美随机生成几十个风格不一致的符号。
用图标 brief 约束语义与视觉
把下面的信息放在一个文件或提示词里，模型才有机会保持系列一致：
icon-set.md
- 产品场景：后台订单列表工具栏
- 图标：订单、筛选、导出、成功、失败
- 网格：24×24，图形安全区20×20
- 风格：单色线性，2px视觉笔画，圆角端点
- 规则：不使用渐变，不添加文字，不使用阴影
- 状态：默认#667085，强调#635BFF，禁用#B8C0CC
- 输出：每个图标独立SVG，viewBox="0 0 24 24"，保留可读命名
- 用途：网页按钮、工具提示和无障碍标签“2px”只是本例的设计约束，不是所有项目的通用标准。它要和现有设计系统、显示密度与设备尺寸一起决定。涉及无障碍时，为每个图标同时提供可读名称和文字提示，不能只靠颜色或形状传递状态。
先生成语义草图，再选一条视觉路线
第一轮让 AI 输出三条路线，每条只展示少量代表图标：线性、面性或双色。要求它解释哪些几何规则会贯穿全套，避免先生成一大包无法统一的成品。
请为后台订单列表创建一组5个图标方向：订单、筛选、导出、成功、失败。每个方向说明图形语义、24×24网格中的主要形状、线性/面性处理、状态色使用方式和可能误读点。先输出每条路线的5个SVG草图或结构说明，不添加文字、阴影和品牌专属图形；指出需要设计师复核的语义与版权问题。
评审时先看“用户是否能猜到用途”，再看风格是否好看。失败图标往往不是绘制能力不足，而是把“导出”画成下载、“订单”画成购物车却没有上下文。把误读点写出来，下一轮提示词会比泛泛要求“更精致”更有效。
把草图整理成真正可编辑的 SVG
检查 viewBox 与尺寸
每个文件应有明确 viewBox，页面尺寸不应依赖固定像素才能显示。把图标放进24、20、16像素按钮中观察边缘和光学重量，必要时调整路径位置，不要只缩放整个画布。
清理路径与颜色
删除隐藏图层、重复路径和无用元数据；统一填充与描边规则。确认颜色是设计系统允许的值，默认状态和强调状态不要在文件里写死成无法覆盖的样式。
处理文字、字体与位图
图标文件中不要保留需要外部字体才能渲染的文字，也不要把整张位图嵌入 SVG 冒充矢量。若确实需要品牌字形，交给设计师按项目授权与交付规范处理。
| 检查 | 方法 | 不通过时怎么做 |
|---|---|---|
| 可缩放 | 在16/20/24/32像素和大尺寸画布查看 | 调整安全区与细节，避免缩小时糊成一团 |
| 可编辑 | 在设计工具或代码编辑器中选取路径 | 拆分复杂路径，删除隐藏或重复节点 |
| 可复用 | 替换颜色、放入深浅背景和不同按钮状态 | 移除固定样式，按组件规则暴露状态 |
| 可访问 | 核对名称、提示文字和非颜色提示 | 补充aria-label、tooltip或伴随文本 |
在原型里验证图标，而不是只看文件
把图标放到真实工具栏、按钮、空状态和错误状态中，检查间距、点击区域、对比度和文案关系。墨刀原型适合把图标放进页面和交互流程，观察它与组件状态是否匹配；如果图标在独立画板中很好看，放入真实布局后却挤压文字，就应回到网格和尺寸规则调整。
- 先放默认状态，确认图形重心与文字基线一致。
- 再切换悬停、选中、禁用和错误状态，检查颜色和描边是否改变过度。
- 点击图标验证反馈、跳转或弹层，给图标配文字或提示。
- 在手机窄屏与高密度桌面上各看一次，记录具体页面和组件问题。
原型可以验证界面关系和交互路径，不能代替浏览器、系统主题、字体渲染和真实辅助技术的最终测试。开发交付时附上 SVG、命名、颜色 token 和状态表，减少二次猜测。
可复制的 SVG 图标生成提示词
请基于icon-set.md继续完善“筛选、导出、成功、失败”四个24×24单色线性SVG。保持同一网格、安全区、视觉笔画和圆角规则；逐个说明语义、可能误读和路径结构。输出时不要嵌入位图、外部字体或渐变，不把测试通过当成已验证。对每个文件列出viewBox、路径数量、默认/强调/禁用状态和需要人工检查的项目。若“失败”与“警告”语义容易混淆，请提出两个备选方向供评审。
拿到结果后，先抽查一枚复杂图标和一枚简单图标：缩放、换色、放进真实按钮，再检查 SVG 源码。不要把 AI 输出的路径数量或格式声明当成自动质量证明。
常见问题
AI 生成的 SVG 一定是干净、可编辑的吗？
不一定。必须检查路径、隐藏元素、viewBox、位图、外部字体和样式依赖；需要时在设计工具或代码编辑器中清理。
能不能直接把 PNG 转成 SVG？
自动描摹可以作为起点，但复杂渐变、照片和细节容易得到大量杂乱路径。图标通常应先确认语义和几何，再选择适合的矢量重绘方式。
SVG 图标需要给每个图标加文字吗？
图形按钮应提供可读名称或伴随文本；是否显示文字取决于界面任务和空间，不建议仅靠图标让用户猜测。
墨刀 AI 能直接完成开发交付吗？
它可以帮助探索图标方向和在原型中验证使用场景，但最终文件清理、组件接入、无障碍实现和多端测试仍由设计与研发确认。
准备好图标 brief 后，可以进入墨刀 AI生成第一轮方向，再在墨刀原型中验证工具栏、按钮和状态流程。进入工作区整理图标资产与评审记录。
