让 AI 手写 SVG 插画：Spotkit 做产品功能图真香

做产品设计的时候，最头疼的事是什么？

不是画图，是每次要给功能页面配一张「看起来像一家人」的插画——结果找了半天图，要么风格打架，要么像素糊成一团，要么根本找不到合适的。

今天发现一个 Skill，解决这个问题的方式很聪明：不让 AI 生成图，让 AI 手写 SVG 代码。

这个 Skill 叫什么

叫 Spotkit，是一个给 Claude Code 用的设计 Skill。作者是 Devesh Shirsath，GitHub 目前 64 星。

核心能力很直接：你描述一个功能，它给你一张抽象的产品插画——不是截图，不是图生图出来的模糊图，而是一套基于 CSS 变量的、干净的 SVG 代码。

为什么不用 AI 图片生成

作者在 README 里说得很清楚：这种极简几何风格（细线条、统一圆角、占位符栏、单一图标库），扩散模型根本画不准。

Diffusion 模型擅长「看起来像」，但不擅长「精确一致」——二十张插画要像同一个家族，线条宽度、间距比例、颜色编号必须一模一样。图像模型做不到。

但 Claude 可以直接手写 SVG 代码，输出是精确的、可编辑的、可 diff 的，而且一套图只需要改 12 个 CSS 变量就能整体换肤。

12 个布局，应对所有功能场景

Skill 内置了 12 种固定布局，每种都有明确的语义：

• Header + rows：列表型功能
• Cascade：递进关系
• Tab bar：多选项切换
• Window：有层级的面板
• Constellation：系统汇聚
• Timeline：时间序列

你描述功能 → AI 判断这是什么类型的关系（分组？连接？时序？）→ 选中最匹配的布局 → 从模板改内容 → 输出 SVG。全程无需你手动排版。

安装超简单

Claude Code 用户：

git clone https://github.com/Devesh-Shirsath/spotkit.git 
 ~/.claude/skills/spotkit

重启 Claude Code，然后直接说：「给我做一个 API 版本管理的插画」，它会自动识别并生成。

不需要任何依赖，纯 Python 3（仅用于重新生成和校验）。也可以直接打开 examples/gallery.html 预览全部 12 种布局在亮色和暗色主题下的效果。

适合谁用

• PM / 产品设计师：快速给 PRD 或原型配上一致的插画
• 前端开发：在产品文档里自动生成 SVG 插图，不用再问设计师要图
• AI 创业者：给你的 AI 产品界面批量生成品牌统一的空状态图、功能引导图

总结一下

Spotkit 的本质是一个「AI 设计系统生成器」——它不帮你画图，它帮你建立一套插画规范，然后用 AI 执行这套规范。

当你需要给产品做一整套风格一致的插画时，与其一张张让设计师画或用 Midjourney 生图再修，不如让 Claude Code 照着 Spotkit 的规则直接输出可编辑的 SVG。

省时间，还不会风格漂移。

GitHub：https://github.com/Devesh-Shirsath/spotkit

GitHub: https://github.com/Devesh-Shirsath/spotkit