Anatomy：免费开源AI交互式插图工具，让Claude Code、Codex生成精密SVG和3D动态图解

想给技术文章、产品官网或者教程制作一张专业插图，但自己又不会设计怎么办？

Anatomy 是一款免费开源的 AI Agent Skill，可以配合 Claude Code、Codex、OpenCode 等工具，将复杂概念转化成精密的等距视角插图。

它不只是生成一张静态图片，还可以制作带有动画、鼠标交互、实时数值和 WebGL 特效的 SVG 图解。

最大的特点是：把抽象原理变成一台可以实际操作的虚拟机器，让读者通过画面理解它的工作方式。

一、Anatomy是什么？

Anatomy 是开发者 Ryan 开源的一套 AI 可视化技能。

它遵循 Agent Skills 标准，主要用于制作：

• 技术原理图
• 机械结构图
• 交互式信息图
• 产品功能演示
• 软件架构可视化
• 精密等距插画

例如，普通 AI 解释缓存机制，可能只会画：

请求 → 检查缓存 → 返回结果。

Anatomy 则可以把缓存机制设计成一把机械锁。

只有所有锁芯完全匹配时，锁才能转动，对应缓存命中的过程。

它的设计理念很简单：

不是给概念配一张图，而是让图中的机械结构本身解释概念。

二、功能特征

精密等距SVG插图

Anatomy 可以生成由大量独立零件组成的 SVG 图形。

例如：

• 螺丝
• 齿轮
• 弹簧
• 管道
• 仪表盘
• 电路
• 机械结构

通过明暗层次和等距投影，让二维 SVG 呈现立体机械的效果。

交互式动画

生成的插图可以响应鼠标和键盘操作。

例如鼠标移动到火箭发动机上时，发动机可以逐渐拆解，展示内部的不同组件。

WebGL视觉特效

可以结合 WebGL 制作：

• 火焰
• 排气
• 水波
• 光照
• 蒸汽
• 反射

让技术图解更加直观。

实验性3D模式

Anatomy 还提供 Beta 阶段的 3D 能力，可以制作真正能够旋转的零件。

例如旋转密码盘，机械手指会跟着运动。

实时数值显示

插图中的仪表、数字和动画可以由同一个数据模型驱动。

例如机械滑块移动以后，仪表盘读数也会发生对应变化。

自动检查图形

Anatomy 内置几何检查工具，可以检测：

• 零件穿模
• 管道交叉
• 连接位置
• 图层遮挡顺序
• 动画中的结构问题

还可以通过无头 Chrome 截图，辅助 AI 检查最终画面。

三、操作指南

Anatomy 最简单的安装方式是一条命令：

npx skills add wheresryan22/anatomy -g

安装时选择自己的 AI Agent。

也可以直接指定 Codex：

npx skills add wheresryan22/anatomy -g -a codex

或者 Claude Code：

npx skills add wheresryan22/anatomy -g -a claude-code

安装完成以后，就可以通过对话使用。

例如在 Claude Code 中输入：

/anatomy 制作一个交互式等距插图，
解释数据库连接池的工作原理。

包含10个数据库连接，
请求可以借用和归还连接。

当连接全部占用时，
新请求进入等待队列。

输出独立HTML页面，
支持鼠标交互和动画。

如果使用 Codex，则通过：

$anatomy

调用技能。

Anatomy 会根据要求生成对应的几何结构、交互逻辑和网页文件。

四、支持哪些AI工具？

Anatomy 主要作为 Agent Skill 使用。

它本身不提供大模型。

需要借助已经安装并配置好的 AI 编程助手来执行。

五、支持平台

Anatomy 主要运行在开发环境中。

需要注意，Anatomy 本身的运行工具支持 Node.js 20.10+，但使用 npx skills 安装时，安装器可能要求更新的 Node.js 版本。

如果安装失败，建议先检查 Node.js 版本。

六、可以生成哪些格式？

Anatomy 目前主要支持三类视觉输出。

最终还可以生成：

• 独立HTML页面
• SVG文件
• React组件
• Next.js组件

因此不仅可以放进技术文章，也可以直接嵌入产品官网。

与传统 AI 生成的 PNG、JPG 图片不同，Anatomy 生成的内容包含实际代码。

这意味着你可以继续修改颜色、结构、动画和交互逻辑。

七、产品定价

Anatomy 本身：

完全免费开源。

项目采用：

MIT License。

可以自由使用、修改和集成。

Anatomy 的绘图库主要使用 Node.js 内置模块，不需要额外购买专门的绘图 API。

但如果通过 Claude Code、Codex 等 AI 工具生成插图，仍然可能消耗对应服务的订阅额度或 API Token。

所以可以理解为：

Anatomy免费，AI Agent使用费用另算。

八、实际作品展示

官方 GitHub 已经提供多个完整示例。

**Raptor Engine：火箭发动机**

可以生成带有复杂管道、支架和喷射火焰的发动机插图。

鼠标悬停以后，还能将发动机拆解成11个组件。

Ripple Tank：波纹水槽

展示水面波纹、干涉效果、光照和投影。

Desk Computer：复古电脑

生成带有键盘和CRT屏幕的复古电脑。

用户可以直接输入文字，屏幕内容会实时变化。

Turning Dial：旋转密码盘

展示可以真正旋转的机械密码盘和小型机器人手臂。

这些案例可以在 GitHub 的 examples 目录中查看，部分示例已经包含构建好的 HTML 页面。

九、使用场景

Anatomy 比较适合以下几类用户：

• 技术博主：制作算法、数据库和计算机原理图解。
• 程序员：给开源项目和技术文档添加交互图。
• 产品设计师：制作精密产品功能演示。
• 教育创作者：用动态机械模型解释复杂知识。
• 独立开发者：制作有特色的产品官网插图。
• 前端开发者：生成可以直接集成的SVG和React组件。

例如制作一篇介绍 CDN 缓存的文章，可以让 Anatomy 生成：

一台带有多个存储仓位的机械装置。

通过物体运动分别展示缓存命中、缓存失效和重新获取数据的过程。

相比普通静态流程图，读者更容易理解其中的逻辑。

十、运作模式

Anatomy 的工作流程可以简单理解为：

用户提出技术概念
↓
AI Agent理解原理
↓
设计对应的物理机械结构
↓
列出需要制作的零件
↓
通过SVG绘制精密图形
↓
添加动画和交互
↓
根据需要加入WebGL特效
↓
自动检查几何结构
↓
生成HTML / SVG / React组件

它不会单纯调用图片生成模型输出一张无法编辑的图片。

而是使用代码构建图形，因此最终作品可以保留结构和交互能力。

十一、使用限制

Anatomy 虽然功能很有特色，但并不适合所有绘图需求。

第一，不是普通图表工具。

它不主打折线图、柱状图和统计数据可视化。

第二，更适合机械和系统原理。

例如机器、工具、仪器和具有明确运行机制的技术概念。

如果需要人物插画、写实摄影或者地图，并不是它的主要方向。

第三，复杂作品制作时间较长。

因为需要生成大量零件，还要检查几何结构和动画效果，所以通常比生成普通静态图片更复杂。

第四，3D功能仍处于Beta阶段。

目前更成熟的使用方式仍然是 SVG 和 SVG + WebGL。

结语

Anatomy 是一款比较有意思的 AI 可视化工具。

它没有选择传统的文生图路线，而是让 Claude Code、Codex 等 AI Agent：

理解概念 → 设计机械模型 → 编写绘图代码 → 添加交互 → 自动验证。

最终得到的不只是一张图片，而是一个可以操作、可以修改、可以嵌入网页的视觉作品。

如果你经常制作技术教程、知识科普、软件介绍或者产品官网，Anatomy 值得尝试。

它真正解决的不是：

“怎么让AI画一张漂亮的图。”

而是：

“怎么让一张图本身就能把复杂的原理讲清楚。”

网址

Anatomy 官网

Anatomy GitHub项目

Anatomy 最新版本

Anatomy 示例作品

Anatomy 社区作品库