背景
最近在重构官网的时候遇到了一个问题：网站需要大量图标和插图，但设计团队就那么几个人。实际负责绘制插图的只有一个人，并且由于其他的任务，需要很久的时间才能出一张图如果赶上需求扎堆的时候，设计师基本就是加班画图的状态。更糟糕的是，时间紧的时候质量难免参差不齐，风格也容易飘。
我们试过用图标库，但那些通用图标很难和官网实际的风格相结合，放在我们的产品里总觉得格格不入。
所以我开始琢磨：能不能让 AI 帮忙干这个活
直接让 AI 画
一开始我的想法很简单——直接告诉 AI："给我画个数据库集群的图标，要科技感，紫色系。"
结果出来的东西...怎么说呢，能看，但就是不对味儿。风格和我们现有的设计完全不搭，有时候 AI 还会脑补一些莫名其妙的元素。
改了几轮，我意识到问题所在：AI 不知道我们的"设计语言"是什么样的。
给 AI 看看参考
然后我想到一个办法：既然 AI 不知道我们的风格，那就直接给它
我打开 Figma，找到之前做过的几个图标，复制成 SVG 代码，然后丢给 AI，说："参考上面的 svg 代码样式，生成新的 svg 代码，实现类似服务器的插图"
效果立竿见影！AI 生成的图标在配色、渐变、线条粗细上都贴近我们的设计了。虽然还需要微调，但至少方向对了。
这时候我发现了 SVG 的好处：
- Figma 复制粘贴很方便，Copy as SVG 就搞定
- AI 理解 SVG 代码，因为它本质上就是结构化的代码
- 改完可以直接粘回 Figma，无缝衔接
加入草图环节
但还有个问题：AI 生成的构图经常不是我想要的。我得反复描述"这个圆放左边，那个线连这里"，AI 还不一定理解对。
后来我灵机一动：先画个草图
试了一次，效果好得超出预期。我在纸上花 30 秒画了个简笔画——三个框框，中间几条连线，然后截图发给 AI，配上之前的 SVG 参考，基本上和草图差不多。
AI 生成的结果基本一次过！构图是我想要的，风格也对，只需要在 Figma 里微调一下细节就能用了。
这个草图环节彻底改变了之前的工作流程：
- 设计把控创意方向（构图、元素、关系）
- AI 负责执行细节（渐变、描边、对齐、优化）
- 最后人工把关（微调、检查、导出）
你能看出来上面三个哪个是 AI 生成，哪个是原图标吗
完整流程：从草图到成品
准备阶段
首先要准备"风格参考库"。去 Figma 里翻翻之前做过的图标，挑 2-3 个最能代表你设计风格的图标或者插图：
- 选中图标 → 右键 → Copy as SVG
- 把 SVG 代码保存到文档里
- 标注一下关键特征，比如"紫色渐变 #7855FA"、"圆角 8px"
这些就是你的"风格字典"，每次让 AI 生成图标时都要用到。
画草图
需要新图标的时候，先拿张纸画个草图：
不用画得多精细，通常就画几个圈圈框框，用箭头标一下关系。重点是把构图、元素位置这些"骨架"定下来。
我的草图工具箱：
- 纸笔：最快，适合简单图标，画完拍照就行
- excalidraw：免费的白板工具
- Figma：有时候直接在 Figma 里用框线工具画个低保真草图，省得切换工具
小技巧： 可以在草图上加点文字标注，比如"主节点(大)"、"虚线连接"，这样 AI 理解起来更准确。
让 AI 生成
实操下来，比较建议使用 claude，代码能力更强，且可以比较方便的预览
可以使用下面的提示词模板：
参考这个 SVG 的风格（保持配色、渐变、描边等细节）： [粘贴参考 SVG 代码] 根据附件中的草图生成插图，主题是"XXX"： - 保持草图的构图和元素布局 - 使用参考 SVG 的设计语言 - 输出 600x400 尺寸的 SVG 代码
实战例子：
做一个"多集群架构"的插图。在纸上画了三个方框（代表集群）+ 一个中间的圆（控制平面）+ 几条连线，拍照发给 AI，配上之前的 SVG 参考。
AI 生成的结果：三个集群的位置、大小关系和我草图一致，紫色渐变、光晕效果都保留了风格，连接线的虚实也处理得很到位。
我只需要在 Figma 里调了调对齐和间距，5 分钟搞定。要是从零开始画，至少要 1 个小时。
Figma 精修
拿到 AI 生成的 SVG 后：
- 复制代码 → Figma 里粘贴（自动识别为矢量图形）
- 检查细节：对齐、间距、文字位置
- 和设计系统对比，确保一致性
- 导出给开发用
通常精修环节只需要 5-10 分钟，除非是特别复杂的插图。
一些要点
1. AI 需要参考
没有参考，AI 生成的风格往往乱七八糟，改了半天还是不对。后来才明白：一定要给参考，而且最好是 2-3 个，AI 才能抓住你的设计语言。
2. 草图画得太潦草
草图画得太抽象了，AI 容易理解错了。最好加点文字标注，或者关键位置画清楚一点。
3. 期望太高
AI 不是魔法，复杂的插画还是需要人工主导。它最适合的场景是"构图确定、风格明确"的中等复杂度图标。
4. 忘记保存提示词
生成效果好的图标，记得把提示词存下来。下次类似需求可以直接复用，省很多时间。