Spotkit

技能简介

Spotkit 是一款面向 Claude Code 的产品插画生成 Skill，能够将「功能描述」转化为干净、抽象的产品插画——以真正的 SVG 矢量格式输出，而非生成一张图片。它解决的问题是：同一产品的二十张插画如何做到风格统一、可复用、可主题切换，且不需要设计师逐张手绘。Claude 直接根据功能描述写出 SVG 代码，确保每张图都属于同一个视觉家族。

核心能力

• 功能描述 → 成品 SVG：只需说「帮我做一张 API 版本管理的插画」，Skill 自动完成概念提炼、比喻选取、构图选择和 SVG 代码生成
• 12 种标准化构图：Header+Rows（多元素列表）、Cascade（递进分组）、Tab Bar（选项卡）、Toolbar（工具栏）、Corner Chips（组合部件）、Window（窗口界面）、Fanned（扇形展开）、Notifications（通知）、Constellation（系统汇聚）、Matrix（权限矩阵）、Timeline（时间线）、Split（分阶段），每种构图对应特定的功能语义
• 同一文件支持亮色/暗色主题：12 个 CSS 自定义属性控制全部配色，一张 SVG 在亮色和暗色界面中均完美呈现，无需两张图
• 可复用的产品插画家族：通过一个常量字典 GEO 统一管理所有几何参数，改一处所有十二张图同时更新，确保整套插画的线条粗细、圆角半径、图标风格完全一致
• 纯代码生成，无 AI 幻觉：扩散模型在精确几何（发丝级线条、准确半径、统一占位符）上表现薄弱，Claude 直接写 SVG 代码规避了这一问题
• Phosphor 图标库：内置 Phosphor Icons（MIT 协议）几何路径，确保图标风格统一
• Prompt 备选路径：如需用图片模型生成，可使用附带的 image-prompt.md 模板作为降级方案

安装配置

前提条件

• Claude Code（桌面应用）
• Python 3（仅在需要重新生成插画时需要，用于运行 build.py 和 flatten.py）

安装步骤

git clone https://github.com/Devesh-Shirsath/spotkit.git
ln -s "$PWD/spotkit" ~/.claude/skills/spotkit

重启 Claude Code，直接描述需求即可，例如：「为我们的产品创建一个功能插画集，包括团队管理、权限设置和审计日志三个功能模块」。

无需安装直接预览

打开 examples/gallery.html 即可在浏览器中预览 12 张插画的亮色和暗色版本。

使用步骤

1. 描述功能：在 Claude Code 中描述所需插画，例如：「创建一个 API 版本管理的功能插画」
2. 概念提炼：Skill 自动分析功能实际做什么，提炼核心比喻（分组/连接/门控/打包/审核/排序）
3. 选择构图：根据功能语义从 12 种构图中选择最合适的一种
4. 生成 SVG：Claude 直接写出 SVG 代码，使用 CSS 自定义属性管理配色
5. 主题切换：通过修改 CSS 变量（--il-canvas、--il-stroke、--il-accent 等）一键切换亮/暗色主题
6. Figma 导入：复制 examples/flat/light/ 中的 SVG 内容粘贴到 Figma，即可获得可编辑的矢量图层

批量生成示例

# 生成一套 12 张产品插画
python3 build.py  # 重新生成全部示例和画廊
python3 flatten.py  # 输出 Figma 可直接粘贴的扁平化文件

适用场景

• SaaS 产品文档：为功能模块、API 文档、帮助中心创建一致的插画集
• 设计系统：建立统一风格的产品插画家族，供全产品线复用
• Empty State 图形：为空状态页面添加与产品风格统一的插图
• 营销页面：在 Landing Page、产品介绍页使用抽象化产品功能插画

适用人群

• 产品设计师和 UX 设计师：需要快速为产品功能创建抽象插画，无需手绘或找素材
• 前端开发者：在开发产品界面时直接生成所需 SVG，减少与设计师的往返沟通
• SaaS 创始人和产品经理：在没有专职设计师的情况下也能交付有品质的功能介绍页面
• 技术文档工程师：为 API 文档、开发者门户创建统一的图示系统
• 设计系统维护者：管理并扩展产品插画家族，确保全产品线视觉一致性

工作原理

Spotkit 的核心是一套从功能描述到 SVG 代码的确定性工作流。

用户输入功能描述后，Skill 依次完成以下推理步骤：

1. 功能分析：这个功能实际在做什么？（状态展示/数据配置/协作审核/权限控制……）
2. 比喻提炼：它传达的关系是什么？（分组/连接/门控/打包/审核/排序/序列……）
3. 构图选取：根据语义和元素数量，从 12 种标准构图中选出最恰当的一种
4. SVG 编写：Claude 直接生成代码，使用预定义的 Phosphor 图标路径和 CSS 变量

生成后的 SVG 通过 12 个 CSS 自定义属性（--il-canvas、--il-surface、--il-stroke、--il-fill、--il-accent 等）控制全部颜色主题，单文件同时兼容亮色和暗色模式。修改主题只需改三个值，运行 build.py 即可重新渲染全部插画。

官方链接

• GitHub：https://github.com/Devesh-Shirsath/spotkit
• 作者主页：https://deveshshirsath.com