一天一个开源项目

一天一个开源项目（第256篇）：Anatomy —— 让 Claude 为技术概念「发明一台机器」，画成可交互的等距插画

Anatomy 是一个 Agent Skill：你给它一个技术概念，它会发明一件物理装置来体现这个概念（缓存键变成插销锁，共享 GPU 上下文变成龙门绘图仪），再用一个小模型驱动画面，生成可交互的等距 SVG 插画，可选 WebGL 着色器和 3D。零依赖绘图库、九步工作流、自带几何与遮挡审计。支持 Claude Code、Codex、OpenCode 等。MIT 协议，约 2.5 万 Stars。

·约 7 分钟阅读·AI 工程
开源项目AnatomyAgent SkillSVG可视化WebGLClaude Code开源

引言

「缓存键是一把插销锁，共享 GPU 上下文是一台龙门绘图仪。」

这是「一天一个开源项目」系列的第 256 篇。今天的项目是 Anatomy。

给别人讲清楚一个技术概念，最难的往往不是知识本身，而是找到一个对的比喻。令牌桶限流器该怎么画？画成方框加箭头，大家看了一遍就忘；画成一台有水龙头、水桶和出水阀的机器，并且能拖动、能看数字变化，就容易记住。

Anatomy 把这件事做成了一个 Agent Skill：你给概念，Claude 先发明一件物理装置，让它的运转方式恰好对应这个概念，然后把它画成可交互的等距（isometric）插画。仓库创建于 2026-10-08，目前约 2.5 万 Stars。

你将学到什么

  • Anatomy 的核心做法：先发明物体，再画图
  • 九步工作流，以及为什么「所有数字都来自驱动零件运动的同一个小模型」
  • 三种输出：纯 SVG、SVG + WebGL、3D（beta）
  • 怎么安装、怎么调用，什么情况下不适合用
  • 它自带的验证机制

前置知识

  • 用过 Claude Code 或类似 Agent，并装过 Skill
  • 对 SVG / HTML 有基本了解
  • 可选：了解 React 与 WebGL

项目背景

项目简介

Anatomy 是一个让 Claude 通过「发明一件物理物体」来解释技术概念的 Agent Skill。物体的行为要能体现概念本身，例如缓存键对应插销锁、共享 GPU 上下文对应龙门绘图仪。主要面向 Claude Code，也能在 Antigravity、OpenCode、Codex 和 MiniMax Code 中运行。

项目数据

  • ⭐ GitHub Stars：约 25,360
  • 🍴 Forks：约 2,120
  • 💻 语言：JavaScript
  • 📅 创建时间：2026-10-08
  • 📄 许可证：MIT
  • 👤 作者：Ryan（@wheresryan22）

主要功能

核心作用

常见的技术示意图：
  方框 + 箭头 → 看得懂，记不住
  数字是手填的，和图里的动作对不上
 
Anatomy：
  先发明一台机器，让它的运转方式就是概念本身
  ↓ 零件由一个小模型驱动
  ↑ 图上出现的每个数字，都来自驱动零件运动的同一个模型

三种输出

类型说明
SVG实心等距零件，四色调着色。可交付为独立 HTML、单个 .svg，或 React / Next.js 组件
SVG + WebGL火焰、废气、水、焦散、光、辉光、蒸汽等着色器，渲染在前后两层 SVG 之间，使用同一相机。没有 WebGL 时 SVG 仍然可读
3D（beta）运动零件每帧重新投影、重新着色

图形有浅色和深色主题（先设计浅色），启用「减少动态效果」时全部静止。还可以通过 scripts/print.mjs 输出 A4 的 PDF。

快速开始

# 快速安装
npx skills add wheresryan22/anatomy -g
 
# 指定某个 Agent
npx skills add wheresryan22/anatomy -g -a claude-code
# 其他可选: antigravity / opencode / codex / minimax-code

也可以直接 git clone 到 Agent 的 skills 目录（例如 ~/.claude/skills/anatomy），或下载 ZIP。用 Codex 时，浏览器检查可能需要沙箱批准。

调用

/anatomy 令牌桶限流器

Codex 里写成 $anatomy。官方示例提示词包括：令牌桶限流器、连接池 React 组件、CDN 边缘缓存 SVG、带 WebGL 火焰的本生灯、意式咖啡机。小技巧：说出概念（最好带真实数字）或者你想要的物体，并说明用在哪里（HTML、SVG、React）以及用哪种主题。

环境要求

  • Node.js 20.10 或更高（只用内置模块）
  • 做检查需要 Chrome 或 Chromium
  • 只有输出 React 时才需要 React 18+
  • 一个受支持的 Agent

项目详细剖析

目录结构

  • SKILL.md：工作流和精简后的作图规则
  • kit/：零依赖的绘图库，包含等距相机、实体与零件（iso-kit）、车削零件、管线与线缆、WebGL 层、3D 运行时和 React 组件
  • references/：较长的指南，涵盖作图、kit API、运动、React、验证、WebGL、讲解流程和 3D

九步工作流

  1. 收集真实数字
  2. 发明物体
  3. 写零件清单
  4. 规划「世界」
  5. 用 kit 一次性构建几何
  6. 由后向前绘制
  7. 套上卡片：标题、提示和实时读数
  8. 让它动起来（指针和键盘交互）
  9. 像评论家一样验证

第 1 步和第 8 步是关键：图里出现的每个数字都来自同一个小模型，这个模型同时也在驱动零件运动，所以画面和数字不会对不上。

验证：不是画完就算

大多数「AI 画图」只管生成。Anatomy 把验证做进了流程：

  • kit/audit.mjs 检查零件之间不会相互穿透，重叠部分按深度排序正确
  • 用无头 Chrome 脚本（capture、drive、lines、turn-check）生成截图、特写和联系表，Skill 会逐张读取每个 PNG 来检查

这样才能让一个几何关系复杂的等距图保持可信。

示例

仓库提供了 dial-indicator（约 300 行）、desk-computer、arcade-cabinet、raptor-engine（11 个组件，带 WebGL 尾焰）、ripple-tank、test-rig、spot-plate（React）和 turning-dial（3D）。大多数可用 node examples/<name>/build.mjs 构建，可加 --light 或 --audit。

局限

  1. 不是图表库：没有坐标轴，也不画数据曲线
  2. 适合机器、仪器、工具、家具，不适合人物或地图
  3. 刻意很慢：一张图需要一个较长的会话
  4. 着色器需要 WebGL
  5. 3D 还是 beta：官方的 380 个零件压力测试大约 20 fps

社区与贡献

作品可以通过 Agent 替你发起的 Pull Request 发布到 anatomy-community 画廊。贡献要遵循 CONTRIBUTING.md，其中包括：代码里不写注释，已有示例要保持字节级一致。仓库另有 Issue 模板、更新日志、行为准则和安全策略。

项目地址与资源

总结与展望

核心要点回顾

  1. 思路：先发明一件物体，让它的运转体现概念，再画出来
  2. 数字可信：画面上的数字与驱动零件的是同一个模型
  3. 三种输出：SVG、SVG + WebGL、3D（beta）
  4. 自带验证：几何穿透与遮挡审计，加上截图逐张检查
  5. 边界：不是图表工具，不画人物和地图，生成较慢

适用人群

  • 要给团队或读者讲清楚系统设计、算法、协议的人
  • 做技术博客、文档、课程需要「会动的示意图」的人
  • 对 Agent Skill 如何组织工作流、验证和参考资料感兴趣的开发者

学习建议

先装好，用一个你熟悉的概念试一次，例如 /anatomy 令牌桶限流器，对照输出看看比喻是否贴切、数字是否一致。然后读 SKILL.md 和 references/，看它是怎样把流程拆成步骤并加上验证的，这套写法放到你自己的 Skill 里也适用。

欢迎访问 PrimeSkills —— 一个精心策划的 AI Agent 与技能市场，所有内容均经过真实企业级工作流验证。没有噱头，只有真正有效的东西。

更多实用知识和有趣产品，欢迎访问我的个人主页

← 返回博客列表