ClaudeMap

Spotkit

Claude Code skill，把一段功能描述变成干净、抽象的产品插画——真实手写 SVG 矢量文件，而不是「画得像矢量」的图片。

技能与命令skillsvgillustrationdesignvector
访问项目Devesh-Shirsath/spotkit

Spotkit 把一段功能描述转成极简、抽象的产品插画，交付的是 agent 亲手写出的生产级 SVG——绝不用图像生成。每张产出都带概念与隐喻，而不只是几个形状；仓库演示了十二张插画（团队、分类、工作区访问、API 网关、审计日志、发票等），同一份源文件分别渲染出亮色与暗色两版。自带的 AGENTS.md 告诉 agent 该读什么、跳什么，只要你提到插画需求，skill 就自己接管。支持 Claude Code、其他 harness 读取的 agents 目录，以及打包 zip 上传到 Claude.ai。

它做什么

  • 真 SVG，agent 按代码手写——绝不用图像生成，产出保持可编辑、可换主题、任意缩放不糊
  • 每张插画都带概念与隐喻：图是在解释功能，不是给功能贴装饰
  • 十二张演示插画，同一份源分别渲染亮色与暗色两版——明暗配对保持一致
  • AGENTS.md 划定范围，skill 自动触发：只要提到插画，它就加载所需内容、跳过其余

什么时候用

空状态配图、功能讲解、文档示意图、抽象的产品营销视觉——要的是可编辑矢量，而不是又要重画一遍的位图。

如何上手

# Claude Code：
git clone https://github.com/Devesh-Shirsath/spotkit.git ~/.claude/skills/spotkit

# 其他 harness（Codex 等）：
git clone https://github.com/Devesh-Shirsath/spotkit.git ~/.agents/skills/spotkit

# Claude.ai：Settings -> Capabilities -> Skills -> 上传本仓库的 zip

注意事项

MIT。手写 SVG 比图像模型慢、也不做照片级真实感——它只做抽象产品插画，不适合主视觉摄影图。装完重启 Claude Code 让 skill 注册生效。

代码仓库

Devesh-Shirsath/spotkit

收录日期

地图上的相关资源

  • guizang-product-video-skill

    技能

    归藏的 Agent Skill：把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐，全程不碰视频剪辑软件。

    • agent-skill
    • video
    • promo
    • marketing
    查看

  • geo-sleuth

    技能

    一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片，把「这是哪」变成带误差半径的测量答案。

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
    查看

  • Birdview

    技能

    让 AI 编码 agent 在动第一行代码之前先画出架构、声明影响范围的 skill——成果是一张可直接打开的独立 HTML 架构地图。

    • skill
    • architecture
    • code-visualization
    • change-scope
    查看