Anatomy Skill 技能

技能简介

Anatomy 是一个跑在 Claude Code、Antigravity、OpenCode、Codex、MiniMax Code 里的 Agent Skill，专长是把抽象的技术概念画成一张能转动的实物图。它不给你配插图，而是先发明一个物理装置，让这个装置的工作方式本身就是那个概念：缓存键没变就跳过计算，被画成一把只有当所有弹子对齐才会转动的弹子锁；一块 GPU 上下文要服务十几块画布，被画成一台只有一个打印头却要巡回十六个槽位的龙门绘图仪。

核心能力

• 自动发明隐喻：先想清楚这个概念在物理上等价于什么，再用等轴测视角把装置搭出来，而不是套一个通用示意图模板。
• 三种输出形态：纯 SVG（四色阶着色的实心零件，按前后关系叠压绘制）、SVG 叠加 WebGL（火焰、尾焰、水波、焦散、灯光、蒸汽这些线条画不出来的效果，着色器跑在图自带的等轴测相机里）、3D 测试版（能转的旋钮与转盘、会弯曲的手指、脱落后坠落的零件）。
• 自带画框与实时读数：每张图有标题、提示语和一组随零件运动同步变化的数字，数字不是装饰，来自驱动零件的同一个模型。
• 自检式交付：鼠标悬停与键盘都能让装置平静地动起来，收尾前它会放大检查每个关节的接缝。
• 明暗双主题，浅色优先设计，着色器一并适配。
• 可导出独立 HTML 页面、内嵌样式表的单独 svg 文件，或 React 与 Next.js 组件。

安装配置

1. 全局装到 Claude Code：运行 npx skills add wheresryan22/anatomy -g -a claude-code。把 -a 后面的值换成 antigravity、opencode、codex 或 minimax-code，就能装到对应宿主。
2. 只装到单个项目：去掉 -g，技能会落到项目的 .claude/skills/anatomy 或 .agents/skills/anatomy。
3. 不想用命令行也可以直接 git clone 仓库到上述目录，或下载 ZIP 解压进去。
4. 环境只要求 Node 20.10 以上，零第三方依赖，不需要 API Key，也不需要任何在线服务。

使用步骤

1. 装好后在 Claude Code 里直接下指令，例如 /anatomy explain how a token bucket rate limiter works, interactive。
2. 说清要解释的概念和想要的形态（纯 SVG、带 WebGL、还是 3D），它会先给出隐喻设想再动手。
3. 打开生成的 HTML 预览，用鼠标和键盘试动作，看读数是否与运动一致。
4. 挑刺时描述现象而不是改参数，比如说第三个关节的阴影断层了、读数跟不上转盘，它会局部返工。
5. 满意后要求输出成 svg、React 组件或独立 HTML，直接贴进文档、博客或产品页。

适用场景

• 技术博客与文档：用一张会动的装置图解释限流器、缓存、连接池、索引、调度器这类看不见的结构。
• 产品落地页与发布会：需要让人记住的示意图，而不是又一张扁平流程图。
• 教学与科普：把抽象协议讲成能动手试的机械过程，学生更容易记住。
• 论文与专利附图：等轴测、四色阶、带标注的画风接近工程图，适合印刷与评审。
• 内部分享与新人入职：让新同事五分钟看懂系统某一层到底在干什么。

适用人群

写技术内容的工程师、做开发者关系的同学、独立开发者、产品经理、科普作者，以及需要给客户讲清架构的售前与顾问。不会画画也能用，因为它产出的是结构化图形，不是自由绘画。

工作原理

Anatomy 本身是一个标准 Agent Skill，根目录一份 SKILL.md，把发明隐喻、拆成几十个细小零件、等轴测排布与四色阶着色、加画框与读数、自检关节这套工序写成可执行的创作规则交给模型。图形由技能自带的工具链生成，而不是让模型自由写 SVG，所以零件比例、阴影方向和线宽能保持统一；需要火、水、光的镜头交给同一相机下的 WebGL 着色器，并保证关掉 WebGL 时 SVG 版本依然完整可读。

注意事项

3D 形态目前是测试版，只有活动部件做真实三维重投影，其余仍是静态画。极其复杂的整机爆炸图会被拆成多张卡片交付。

官方链接

• GitHub：https://github.com/wheresryan22/anatomy
• 官网与示例：https://skills.wheresryan.sh/anatomy
• 许可：MIT