不用AI画图,纯写SVG代码就能出图标集——这个skill还偷偷学你的审美

最近刷到一个挺反常识的 SVG 生成器——它不靠任何 AI 画图模型,纯靠写 SVG 代码给你做图,而且能记住你上次喜欢什么。

这货叫 svg-art,藏在 mostafa-drz/claude-skills 这个仓库里,装好后输入 /svg-art 一组科技感图标 就能开工。

它牛在哪

• 真·代码生成 SVG,不是 PNG 渲染:输出是干净的 <path>、<circle>、<line>,你能直接拖进 Figma、塞进 React 组件、改色用 CSS 变量——不是「一张看起来像矢量的位图」那种敷衍货。
• 风格库明确:line-icon / duotone / brand-palette / generative pattern 几条主干路线,选好了就是一致的视觉语言,不会跑偏成万花筒。
• 自带 2026 风的 HTML 画廊预览:每跑完一次自动生成一个 3×3 grid 预览页,丢浏览器里点开就能对比,不用我手动拼图。
• 会记住你:~/.claude/skills/svg-art/feedback-journal.md 里会记录你每次的反馈,「这组太对称了」「喜欢 stroke 1.5」这种。下次开 session 它会自己读、调整输出风格——越用越像你的私人画师。

谁适合用

• 前端开发:给产品做一套统一图标集,以前要么翻 iconify、要么自己撸,现在直接一句话出 9 个。
• 博客作者 / Newsletter:每篇文章配的 cover、icon、decoration 都能从同一个 skill 出来,视觉一致性就立住了。
• 设计资产前期探索:跟设计师沟通之前,先跑几版「不对称 + 负空间 + 极简线」的方向,带具体稿去开会效率翻倍。

怎么装

npx skills add https://github.com/mostafa-drz/claude-skills --skill svg-art

装好后输入 /svg-art 想要的内容 --style line-icon --count 9 --palette duotone --stroke 1.5 这种参数化调用,比让 AI 自由发挥可控太多。

AIGC 不是只有「画」一条路,把代码当画笔反而更可控、更可编辑、更适合进生产链路。这大概就是 svg-art 这种小工具最值得收藏的地方。

GitHub: https://github.com/mostafa-drz/claude-skills/tree/main/code/svg-art

GitHub: https://github.com/mostafa-drz/claude-skills/tree/main/code/svg-art