AI灵感世界AI Skills · 设计spotkit
入馆：2026 年 11 月 4 日
spotkit
把一句功能描述变成简洁抽象的 SVG 产品插图，给产品设计师和开发者用。
- 生态
- Agent Skills
- Skill 分类
- 设计
- 创建者 / 机构
- Devesh-Shirsath
它是什么
Spotkit 是 GitHub 用户 Devesh-Shirsath 做的 Claude Code Skill。你说一句“给 API 版本管理做一张插图”，它先想清楚这个功能到底做什么、讲的是哪种关系，挑出 2 到 5 个界面元素，再从 12 种版式里选一种，最后直接手写出 SVG 代码。画的是界面的抽象：保留最能认出这个功能的部分，其余九成都去掉。它特别在不用图像生成模型，所有线宽、圆角、颜色都来自同一份规范，二十张插图也像一家人。
亮点：
- 12 个 CSS 变量控制明暗两套主题，同一份文件两种主题都能用
- 图标统一用 Phosphor 图标库
- 交稿前按规范里的清单自查
- 不安装也能在浏览器打开 examples/gallery.html 看样例。
怎么用：
- 先把仓库克隆到 ~/.claude/skills/spotkit（Codex 是 ~/.agents/skills/spotkit）
- 再重启 Claude Code 或 Codex
- 最后直接提需求，比如功能插图、空状态图或一整套产品插图。
适合谁：
要给产品功能页、空状态做统一风格配图的产品设计师和前端开发者。
使用前提：
- 没有其他依赖，只有重新生成样例或运行 check.py 时需要 Python 3。
- Claude.ai 可以上传仓库压缩包，ChatGPT 等聊天工具可以把 SPEC.md 等几个文件上传到 Project 里使用。
- README 没有提到联网或 API key。
- 许可证是 MIT。
以上根据项目公开说明整理，本站没有实际测试。