用一套 Prompt 生成可编辑 SVG 资产：把图标设计从"画完还要改"变成"改完还能用"

很多前端在赶版本时会遇到一个尴尬场景：设计稿里 20 个图标，落地到代码时发现其中 5 个尺寸不对、3 个颜色要随主题切换、2 个需要在 hover 状态再变一次。拿到的是 PNG/JPG，处理方式要么让设计重出，要么自己拿 SVG 路径硬改——前者排队等资源，后者翻 Figma 找原始节点。

更系统的问题是：当一个产品需要"视觉语言一致"的一组图标或插画时，单张生成和"成系列生成"是两件完全不同的事。单张可以靠运气；成系列需要 prompt、风格预设、导出格式三个变量同时被控制住。

一种更省事的做法：风格预设 + 可编辑导出

最近在试 GlyPho 这类工具，它的思路是把"成系列 SVG 资产"拆成两件事：提示词质量决定构图，风格预设决定统一性。例如选 Minimal Outline 后，同一组 prompt 输出会是同一描边粗细、同一圆角半径、同一画布尺寸的图标；选 Notion Style 则会切换到手绘感、双色填充那一类。

这里的关键不是"AI 生成图片"本身，而是 SVG 仍然是矢量、可编辑、可被项目直接引用。导出的不是"图片文件"，而是带节点结构、可在 Figma / Illustrator / VS Code 里继续改的源码。

一次实战：以"设置类图标组"为例

我需要为新功能的设置面板准备 8 个图标：账户、安全、通知、外观、隐私、备份、集成、关于。

第一步：先写 1 个 prompt，把握住风格基线。
例如：

minimal outline icon, single stroke, 24x24 viewBox, no fill, 
rounded line caps, neutral gray stroke, on transparent background

第二步：用同一 prompt 模板生成其余 7 个，只替换主体词。
账户、通知、安全、外观……每张图都用上面的句式，只把最后的对象换掉。这是保证"系列感"最容易被忽略的一步——很多人每个图标单独写 prompt，结果每张图的描边、留白、圆角都对不齐。

第三步：导出 SVG 后做轻量校验。
可以用一条 grep 快速检查 viewBox 是否一致：

grep -h 'viewBox' *.svg | sort -u

如果输出超过一行，说明有图跑出了预设的画布，要么是 prompt 写漏了关键词，要么需要重跑一张。

第四步：把它接到设计 token。
把 stroke、stroke-width、fill 替换成 CSS 变量（例如 var(--icon-color)），图标就具备了主题切换能力，不用再为深色模式出第二套图。

一些踩坑点

• Prompt 写得太满反而难统一。 风格词堆得越多，单张图可能更"好看"，但系列之间越难对齐。保持句式固定，比堆形容词更有效。
• viewBox 不一致是最常见的隐性 bug。 一个是 24x24、一个是 32x32，CSS 里设 width: 1em 视觉上就完全错位。
• AI 生成的 SVG 偶尔会有未闭合的 `或冗余transform`。 建议过一遍 svgo 之类的工具再做提交。
• 版权与商用。 用 AI 生成时，确认所用平台对产出物的商用授权条款。GlyPho 这类工具一般允许商用，但团队内仍建议把这点写进设计 SOP。

这套流程适合谁

• 独立开发者：产品发布前需要一套"看起来不业余"的图标，但又不想专门雇插画师。
• 小团队前端：当设计资源排队时，能在半天内交付一组风格统一的占位资产，后期再替换也方便。
• 写技术博客 / 做开源项目的人：README 和文档需要配图时，一致的视觉语言比"每张图风格迥异"更显专业。

可以带走的清单

1. 先固定 1 句 prompt 模板，再批量替换主体。
2. 选一个风格预设（Minimal Outline / Duotone / Notion Style 等），整组都跑同一预设。
3. 导出后用脚本检查 viewBox 一致性。
4. 用 CSS 变量替换 stroke / fill，为多主题预留空间。
5. 跑一遍 svgo 清理冗余节点。

接下来你可以做的

挑你项目里最常用的 5 个图标（例如"新建 / 删除 / 设置 / 搜索 / 用户"），按上面的模板在 glypho.app 上跑一组 Minimal Outline 的 SVG，导出后接到你现有的设计 token 里。一杯咖啡的时间，就能验证这套流程在你自己的项目里是不是真的省事。