一个开源的智能体技能，把技术概念做成能观察、可操作的机器：缓存命中被设计成一把锁，只有所有弹子对齐，锁芯才转得动。Anatomy 本月发布至今已获 9K Star，工作流分四步，输出支持 SVG、WebGL 效果层与 3D 三种形态。

一个开源的智能体技能，把概念变成可交互图示

4 个实验：从冯·诺依曼架构到一台电风扇

#开源#可交互图示

解释一个技术概念，常见的做法是画方框、连箭头。它们能告诉我们有哪些部分，却不一定能讲清楚：部件之间如何配合，事情又是怎样一步步发生的。

Anatomy 选择了另一条路：让 AI 助手把概念设计成一件可以观察、操作的「机器」，再用零件、运动和读数来呈现它的工作机制。

比如，缓存可以理解为程序保存的旧结果，缓存键则像这份结果的查找标签。程序拿新请求对应的标签去查，找到了，就复用旧结果；没找到，就重新计算。Anatomy 可以把「标签是否匹配」设计成一把锁：只有所有弹子都对齐，锁芯才转得动。

项目是这个月才发布的，截止目前已经 9K Star，也一直在快速迭代中。

项目地址：https://github.com/wheresryan22/anatomy

01 它到底做了什么

Anatomy 是一个开源的 Agent Skill，也就是供 agent 调用的一套任务说明和工具。它引导助手把技术概念转化为可交互的插图或网页。

工作流程大致分为四个阶段

1. 收集关键事实。例如部件数量、阈值、尺寸、速度和工作顺序。
2. 选择实体、列出零件。挑一个能体现这些关系的实体，规划它们的连接方式和运动方向。
3. 按空间关系构建图形。然后添加动画、操作方式和读数。
4. 自检。通过截图、放大检查和几何审计等方法，寻找部件穿插、连接不到位或绘制顺序错误的问题。

核心输出有三类

SVG

用分层的实体部件绘制插图，可加入动画、交互和实时读数。

适合表现：仪表、设备结构、部件关系

SVG + WebGL

在 SVG 图示中加入 WebGL 效果层。

适合表现：火焰、水波、蒸汽、光照等效果

3D 模式（Beta）

让部分零件在真实三维空间中运动。

适合表现：旋转、弯曲、脱落等动作

成品可以是独立 HTML 页面、SVG 文件，也可以是 React 或 Next.js 组件。交互可以通过鼠标或键盘触发，具体形式取决于图示设计。

划重点

项目强调一个重要原则：运动和读数应由同一套模型驱动。例如活塞位置变化时，相关读数也应同步更新。这样能减少动画和数字各自表达不同事实的风险。

02 怎么用

现在给智能体安装技能非常轻量。如果你在用支持 Skill 协议的工具（比如 Claude Code、Codex、WorkBuddy 等），直接把仓库地址丢给它即可。

安装并学习这个 skill

https://github.com/wheresryan22/anatomy

03 四个实验：原理能怎样变成机器

以下案例展示了用机器模型解释不同原理的几种方式。它们各自关注的重点不同：有的展示数据和控制信号如何流动，有的用运动表现结构受力，也有的从日常设备入手。

CASE 01 用一台计算机讲清冯·诺依曼架构

我给的提示词：

PROMPT 等距视角计算机

用一台可交互的等距视角计算机，解释冯·诺依曼架构的基本工作原理。

把计算机设计成一台剖面展示的实体机器，清楚呈现 CPU、控制器、算术逻辑单元（ALU）、寄存器、主存、输入设备和输出设备，并用总线连接这些部件。通过动画演示一条指令从内存取出、译码、执行，再把结果写回寄存器或内存的过程；同时表现数据和指令共享同一主存这一关键特点。

请使用一个简单、可追踪的示例程序，例如「读取两个数、相加、输出结果」，让指令计数器、当前指令、寄存器内容和内存地址随步骤更新。用箭头或高亮标出控制信号、地址、数据的流向，并提供播放、暂停、单步和重置操作。

图示面向初学者：零件名称清楚，术语配简短通俗说明；避免把总线、寄存器或控制器画成无法对应真实功能的装饰。先确保架构关系和执行步骤准确，再追求视觉细节。生成独立 HTML 页面，浅色主题。

交付结果

CASE 02 用四缸发动机理解做功脉冲如何衔接

直列四缸发动机可以用来说明：多个气缸按一定相位依次做功，怎样共同带动曲轴旋转。

我给的提示词

PROMPT 直列四缸汽油机

用直列四缸汽油机解释「多个做功单元相位错开如何让输出变平稳」：剖切缸体，四缸按 1-3-4-2 点火顺序每 180 度曲柄角做功一次，点火瞬间各缸以强调色依次亮起，读数同时显示瞬时输出与飞轮转速波动，对比单缸运行模式的剧烈起伏。这是活塞式汽油机，不是涡轮也不是火箭发动机。interactive。标题与读数用简体中文。

交付结果

CASE 03 用动态结构观察虹桥的受力

《清明上河图》中的虹桥常被用来讨论木拱结构。与其只画出桥的外形，不如把构件拆开，再逐步呈现它们如何相互支撑、传递荷载。

我给的提示词

PROMPT清明上河图虹桥

请为《清明上河图》中的虹桥制作原理可视化，说明其结构与力学原理：包括木拱贯木拱架的基本构造、各构件如何相互支撑与受力传递、为何无需桥墩即可跨越较宽河道，以及其稳定性和承载机制。以适合直观演示的可视化方式呈现（如结构分解、受力示意与动态演示），并清晰标注关键构件与受力方向。

交付结果

CASE 04 用电风扇说明电机如何带动空气流动

电风扇的工作原理更贴近日常生活：电机带动扇叶旋转，扇叶推动空气流动，形成我们感受到的风。

我给的提示词很简单

PROMPT 一句话

解释电风扇的原理

交付结果

划重点

四个案例的共同点是：先想清楚「哪些零件、怎么动、读数是什么」，再让工具去画。提示词里交代得越具体，成品越像一台真机器而不是一张示意图。

04 它适合什么，不适合什么

Anatomy 适合解释那些能够转化为「部件如何配合、机制如何运行」的内容，例如机械设备、仪器、结构和某些软件机制。

它并不适合所有可视化任务。常规统计图有坐标轴、数据系列和精确比较需求，使用专业图表工具通常更合适。对于缺少明确机制的概念，硬套机器类比也可能产生误解。

时间成本

制作精细图示需要时间。这四个案例从提示到完成：较简单的约一小时，复杂的超过三小时。时间主要花在补充事实、调整结构和检查图示上。另外，自动几何检查也无法替代领域知识核对。

因此，最稳妥的用法是把 Anatomy 生成的内容视作一份可交互的解释草稿：先检查机制和数据是否准确，再观察能否从部件和运动中看懂原理。

写在最后

机器模型的说服力，最终仍取决于它是否忠实呈现了概念本身。

TAKEAWAY 先想清楚机器怎么转，再让 AI 把它画出来

把可视化交给工具之前，先想明白零件、运动和读数是什么