大数跨境
首页
>
告别框图：Anatomy，AI 生成可运转机械原理图
>

告别框图：Anatomy，AI 生成可运转机械原理图

告别框图：Anatomy，AI 生成可运转机械原理图 苏哲管理咨询
2026-10-13
5
导读：Anatomy 是面向 Claude Code 的 MIT 开源技能，核心理念为物体即解释，摒弃传统方框箭头示意图，将算法、物理原理映射为可动实体机械装置。仅需一行自然语言描述原理，Claude 自主

编者摘要：Anatomy 是面向 Claude Code 的 MIT 开源技能，核心理念为物体即解释，摒弃传统方框箭头示意图，将算法、物理原理映射为可动实体机械装置。仅需一行自然语言描述原理，Claude 自主设计整机，输出可交互等轴测可视化图形。

生成分 Figure、Hero、Epic 三档规模，零件数量、复杂度、耗时逐级提升；遵循标准化流水线：先建立真实数学模型，再发明实体机构、拆分零件、规划相机与深度渲染，最后增加键鼠交互与校验。支持 SVG、WebGL 特效、Beta 版真 3D 三种渲染模式。

内置大量经典案例：哈希表 = 邮局分拣台、布隆过滤器 = 老虎机、TCP 握手 = 索道邮车等；大型工程案例包含 A380 涡扇、SpaceX 猛禽发动机。产物可导出 React 组件或原生 HTML 自定义元素，支持多主题自定义。短板是生成耗时，AI 难以自主识别视觉瑕疵，需要人工试玩迭代优化。

10 个关键问题 Q&A

  1. Q：Anatomy 是什么？ A：Claude Code 的开源技能，将抽象原理转化为可交互等轴测实体机械可视化。
  2. Q：它的核心思想？ A：物体即解释，依靠实体运动表达概念，不用方框箭头示意图。
  3. Q：输入方式有什么要求？ A：一行自然语言描述原理，不用指定画面；可附加 interactive、WebGL、3D 关键词。
  4. Q：三个规模等级区别？ A：Figure（40–80 零件，30–90min）、Hero（80–150 零件，2–4h）、Epic（≥6h，需人工确认）。
  5. Q：支持哪几种渲染方案？ A：SVG、SVG+WebGL 特效、真 3D（Beta，性能受限）。
  6. Q：生成图形可以嵌入网站吗？ A：可以，提供 npm 包 anatomy-figures，支持 React 组件与原生 HTML 自定义元素。
  7. Q：有哪些经典概念映射案例？ A：哈希表 = 分拣台，布隆过滤器 = 老虎机，TCP 握手 = 索道邮车，LRU 缓存 = 书架。
  8. Q：图形上的读数从哪里来？ A：全部来自驱动零件运动的同一个数学模型，保证动画与数据一致。
  9. Q：主要局限是什么？ A：高质量图像生成慢；AI 很难自行发现视觉瑕疵，需要人工交互迭代修改。
  10. Q：开源协议？ A：MIT 协议，可自由使用。
附录 Anatomy・Claude Code Skill 

Anatomy：一款用于 Claude Code 的技能插件 

 GitHub：https://github.com/wheresryan22/anatomy

用一行文字描述一个原理概念，Claude 就能画出一台实现该原理的实体机器。

作品合集： 

https://skills.wheresryan.sh/anatomy/collection/watchhttps://skills.wheresryan.sh/anatomy/collection/computer https://skills.wheresryan.sh/anatomy/collection/hash-maphttps://skills.wheresryan.sh/anatomy/collection/sampling https://skills.wheresryan.sh/anatomy/collection/bloom-filter

指令：/anatomy

合集主页：https://skills.wheresryan.sh/anatomy/collection 发布日期：2026 年 10 月 9 日 安装文档：https://skills.wheresryan.sh/anatomy#install

绝大多数原理讲解都用方框 + 箭头示意图。这类图只能告诉你存在这些组件，但说不清组件做什么；读者需要自行脑补箭头代表的运动。 我希望 Claude 直接画出实物本身：一个真实物件，它内部活动部件的运转行为，完全对应这个概念。

Anatomy 是 Claude Code 的技能，专门做这件事。 你用一句话描述概念 → Claude 创造一台可以实现这个概念的机器 → 生成可交互等轴测图形，可以旋转、点击、阅读参数。 每一张图形都由几十到上百个实体零件构成，画面上所有显示数值，都来自驱动零件运动的同一套数学模型。

平衡频率 4Hz，每小时振动 28800 次，一拍 0.125 秒，摆幅 282 度，动力储备 38 小时中的剩余 22 小时。 向上拖动表冠上链｜慢速拆解 4Hz・28800 vph・储备 22h

这是机械表机芯。它只来自一行指令： /anatomy explain how a mechanical watch keeps time, interactiveClaude 自主工作了将近两小时生成（有效工作时长 1 小时 54 分钟，一次性构建完成，由同一个智能代理自检）。

向上拖动表冠上链：棘轮转动、棘爪发出滴答声，动力储备数值上升。 按 S 键把时间放慢至 1/20，再按一次到 1/100；你可以观察擒纵叉每次只放行 15 齿擒纵轮的半个齿。 按 E 键抬起夹板，露出底层齿轮系；齿轮齿数比例严格真实：四轮每分钟转一圈，中心轮每小时转一圈。

01 实物，而非示意图

本技能的最高规则，写在所有指令最前面：

物体本身，就是解释。（出自 SKILL.md，最重要的核心思想）

没有方框，没有箭头，没有悬浮标签。 Claude 必须创造一件做工真实的装置，装置的运转过程就是这个概念本身；并用一句话描述：什么部件在运动，这个运动代表什么含义。

图形有两类失败形态，在定下这条规则前我反复踩坑：

  1. 过于抽象
    堆叠平板、悬浮块、带标签的方框，看不出是实体物件
  2. 过于扁平
    一大块薄板，寥寥几笔，没有体积、没有独立零件，没有可供探索的细节

两种问题的解法一致：一台可识别的机器，由大量各司其职的小零件组成。 机器不会直接复刻参考图片；参考图只用来提供表面质感、材质与氛围；装置本体是 AI 原创设计。

有些概念天然容易映射成实体：

  • 队列（queue）= 弹珠轨道：两个料斗接入一条倾斜通道，弹珠按顺序在擒纵机构后排队，直到计时滚筒放行
  • LRU 缓存（淘汰最久未使用条目）= 顶层 4 格书架，最近使用的放在最左侧

另一些概念需要更多创意设计： 布隆过滤器（bloom filter）是一台老虎机：三个转轮对应三个哈希函数；只有待检测单词对应的三个标志位全部抬起，机器才判定命中。

合集包含哈希表、二分查找、DNS、消息队列、LRU 缓存、TCP 握手、梯度下降、布隆过滤器、Flex 布局增长、标记清除 GC、B 树、防抖、互斥锁、归并排序、采样等案例。 全部不是手绘。每一个都只从一行概念描述起步。目前共 33 个可交互案例，全部在线预览：https://skills.wheresryan.sh/anatomy/collection

02 编写提示词

提示词描述原理概念，而不是画面。我几乎从不指定要画什么。

explain how an LRU cache evicts entries（解释 LRU 缓存如何淘汰条目） 仅此一句，由 Claude 自行决定把它做成书架装置。

三个关键词会改变输出效果，只有写进指令才会生效：

  • interactive
    可交互：图形响应鼠标指针与键盘，支持拖拽、按键、长按；不写则生成静态图
  • WebGL
    火焰、水流、等离子体、气流、光照特效，在同一个等轴测相机内渲染
  • 3D
    零件具备深度旋转能力，每帧重新投影、深度排序，不只是伪等轴测效果；代价：构建耗时数小时而非几分钟

如果你本身清楚实物，可以带上真实参数描述。如果图形要嵌入特定场景，直接说明。 技能输出无框架依赖的 TypeScript，可以输出 SVG、HTML，或是 Next.js 网站可用的 React 组件，支持深色 / 浅色主题。

示例提示写法：

  1. 只描述原理 /anatomy explain how an LRU cache evicts entries, interactive
  2. 增加 WebGL 特效 /anatomy explain how a jet engine afterburner works, interactive, WebGL
  3. 开启 3D 旋转 /anatomy explain why the Earth has seasons, interactive, 3D
  4. 直接指定实物 + 参数 /anatomy a mechanical metronome on a small wooden plinth, swinging at 120 bpm, with a sliding weight you can drag, interactive
  5. 指定输出产物与场景 /anatomy explain how a CDN edge cache serves a request, interactive, as React components for our Next.js docs, dark theme

不一定必须写 /anatomy命令。只要请求是原理示意图、技术插图、交互式讲解，哪怕不提等轴测，Claude 也会自动调用这个技能。

只有匹配到用户请求时，Claude 才读取技能完整文档；平时仅能看到技能名称和简介。

03 Claude 的工作流程

从一行提示词到成品图形，Claude 遵循固定流程。绝大多数画面质量在绘制几何图形前的前 4 步就已经确定：

  1. 设定规模
    预先判定等级：Figure / Hero / Epic，预估耗时
  2. 先保证物理真实性
    收集真实参数与行为，建立小型数学模型；运动和读数都从这个模型读取
  3. 发明实体装置
    设计一套机械，机构与概念一一对应
  4. 拆分零件清单
    至少 40 个零件，分为底座、主体结构、传动机构、控制器、高亮核心部件；零件互相堆叠
  5. 规划场景空间
    世界单位、布局（圆角矩形 / 圆形）、相机，适配卡片画布尺寸
  6. 一次性构建几何体
    静态路径预计算；运动零件在静止基准姿态下建模，再做位移
  7. 由后往前渲染绘制
    按深度排序；被遮挡部件拆分成两部分；复杂场景需要校验绘制顺序
  8. 卡片排版
    标题、交互提示、实时读数；文字放在画布外侧，不侵入绘图区域
  9. 激活交互逻辑
    平缓的时序动画、自动演示漫游、键鼠交互；支持减少动画偏好（静态降速）
  10. 评审校验
    截图、裁切多倍率检查 + 两轮自动校验，直到缺陷修复

第 2 步实例：玻璃按钮受力形变演示装置。整套行为由一个弹簧模型驱动。零件外观、读数、屏幕阅读器文本、说明文字全部读取同一模型，保证信息自洽，不会互相矛盾。

附带 ts 弹簧模拟代码片段

第 6 步实例：最小案例千分表。底座包含 4 个带深度排序的支脚、斜面底板、边缘内凹槽、四角带环螺丝。所有实体都来自组件库，不是手绘线条。

附带 build.mjs 零件构建代码片段

第一步：规模分级（预算评估）

等级
零件规模
特性
耗时
Figure
40–80 个零件
SVG，最多 1 个着色器
30–90 分钟
Hero
80–150 个零件
多个着色器 / 大型旋转部件
2–4 小时
Epic
整车 / 整建筑 / 整套装置
大量零件与复杂管线
6 小时以上
  • Figure：直接生成，无需确认
  • Hero：先告知你预估时长，再开始构建
  • Epic：不会直接启动；Claude 给出预估，建议先用保留核心思想的 Hero 版本，并列出完整版会新增哪些内容

无论哪个等级，一小时内就能产出可在浏览器运行的页面；剩余时间用于打磨细节。

04 图形绘制统一规范

这套规则让图形看起来是实体物件，而非草图：

  1. 单一相机
    等轴测视角，从角落向下 30° 观察；无透视变形，平行线永远平行
  2. 实体填充
    每个零件填充着色，按深度绘制，近处遮挡远处；无半透明穿透轮廓
  3. 四阶明暗色调
    每个面根据光照方向上色，顶面更亮
  4. 唯一高亮部件
    只点亮一个零件，就是读者需要重点观察的部位
  5. 线条收敛
    每根线条终止于平面、另一根线或者顶点。禁止引线、标注气泡、箭头
  6. 四倍放大仍有细节
    正常尺寸看是完整机器；放大 4 倍，每个区域依然存在符合原理的细节
  7. 图内无文字
    文字全部放在绘图外围；最多允许一处微小雕刻刻印标签
  8. 真实数值
    所有读数都来自驱动零件运动的同一数学模型

图形本身也是小程序：无人操作时自动漫游演示；鼠标悬停 / 聚焦暂停；鼠标滚动移出视口则静止；开启系统减少动画偏好后画面保持静止；数值变化会向屏幕阅读器播报。

独立卡片页面：四个角落放置编号、标题、交互提示、实时读数。本网站将提示与读数移到侧边留白，保证绘图主体干净。

05 六台代表性装置（简要原理映射）

每个案例：原理名称 → Claude 设计的实体装置；点击可交互

  1. 哈希表 Hash Map：分拣台
    哈希表把每个 key 分配到桶；同一桶内的 key 堆叠存放。 装置：邮局分拣台。编码机构计算名称哈希对 8 取模，打印对应桶编号，投递到对应鸽巢；已有信件会叠在上方。
  2. 布隆过滤器 Bloom Filter：老虎机
    布隆过滤器：可以百分百判定 “不存在”，只能给出 “可能存在”。 装置：老虎机。三个转轮对应三个哈希函数，16 个标志位构成位数组；只有单词对应的三个标志全部抬起，才判定命中。
  3. 互斥锁 Mutex：水箱与钥匙
    两个写入方同时读取同一数值，会读到过期数据并误操作。 装置：双泵供水水箱。无互锁钥匙时，两个控制器读取同一水位，造成溢出；持有钥匙的一方才允许读取与执行操作。
  4. TCP 三次握手：索道邮车
    传输数据前，两端必须确认对方监听就绪。 装置：两站点之间的索道。运载 SYN、SYN+ACK、ACK 的邮筒在索道往返；每个站点信号灯展示连接状态。
  5. 采样 Sampling：轮盘赌轮
    温度参数改变下一个 token 的概率分布，但不会新增 / 移除候选 token。 装置：轮盘，16 个槽位对应候选 token，槽宽度等于概率。温控旋钮调节温度，移动隔板改变各槽宽度。
  6. 防抖 Debounce：八音盒记录仪
    防抖：等待信号稳定静止才触发；节流：固定时间窗口最多放行一次调用。 装置：带旋转销盘的八音盒记录器。每次旋钮点击代表一次调用；节流与防抖缓冲缸各自控制销钉，直观看到函数实际触发时机。

统一模式：装置本身在执行这个概念，不是单纯符号代表；你看到的运动，就是要讲解的原理。

06 两套巨型装置

简单概念对应小型机器；复杂概念才真正体现这个技能的价值：数百零件、真实工程参数、着色器嵌入绘图内部而非叠加在表层。

罗尔斯・罗伊斯 Trent 970 发动机（A380 客机发动机）固定在地面推力试验台，右上四分之一剖切。拖动操纵杆，风扇、中压、高压转子按各自转速启动。风扇每秒吸入 1.2 吨空气；大部分作为外涵冷气流喷出，剩余空气进入燃烧室燃烧；测力传感器读数推力从 14kN 上升至 334kN。按空格键模拟起飞。

校验：541 个实体、6320 组重叠面，全部绘制顺序正确。

SpaceX 猛禽 2 全流量分级燃烧发动机固定在试验台。鼠标悬停会拆分为 11 个组件，从万向节到喷管；按 I 点火。所有氧气经过富氧预燃室驱动氧泵；甲烷全部进入富燃料预燃室驱动燃料泵；两股高温燃气在主燃烧室以 300bar 压力汇合。 火焰、激波、水汽、蒸汽使用 WebGL 渲染，绘制在 SVG 前景与背景之间，试验台结构可以遮挡火焰。 第一版可用原型仅耗时 38 分钟；打磨完善额外花费 10 小时。校验证明：静止、拆解、每一动画帧，管道都不会互相穿插。

07 三层渲染架构

大部分图形原生 SVG。需要火焰、水流、等离子体、光效时，Claude 加入 WebGL 着色器，复用同一等轴测相机，火焰嵌入画面而不是浮在顶层。少数案例更进一步，使用真 3D。

  • SVG
    机械表仅 SVG 实现。四阶明暗，每帧重新计算画家渲染顺序；抬起夹板时，仅重绘运动零件。
  • WebGL
    涡扇发动机，画布绘制进气气流、外涵气流、燃烧室火焰、涡轮发光、尾喷流。所有参数带平滑包络，不会突兀跳变；读数与画面保持一致。
  • 3D
    四季模型，26 个实体真 3D 旋转，每帧重投影；双画布模拟光源。读数采用天文历法太阳公式：北纬 50° 地区，6 月白天 16 小时 22 分，12 月白天 8 小时 04 分。

3D 仍处于 beta 阶段：小型旋转物体 60fps；380 零件高密度手部测试模型约 20fps。

08 构建耗时统计

细节需要时间，这里给出 Claude 有效工作时长（从首次提示词到上线成品，包含多轮评审，不含空闲等待）

  • 机械表机芯：1h54m｜一次性构建，agent 自检修复
  • 四季模型：1h57m｜与手表并行开发，包含 3D 校验
  • 猛禽发动机：10h33m｜38 分钟产出首个可运行版本
  • 涡扇发动机：14h｜4h41m 首版，后续 5 轮评审修复

整套合集都是这个规律：快速跑出可用原型；绝大多数耗时花在四倍放大检查，排查缺陷：管线穿入管道、喷嘴明暗阶梯错误、叶片剖切后变成细条。

09 在你的项目代码中使用

合集里所有图形都是可交互、支持主题切换的 React 组件。

npm install anatomy-figures
import { Watch } from "anatomy-figures";
export default function Page() {
  return <Watch theme="light" />;

按需引入，单独导入不会打包其他图形：

import Turbofan from "anatomy-figures/turbofan";

内置 5 套主题：dark / light / paper / blueprint / sepia可以单独给组件指定，或者用AnatomyTheme批量设置子树主题，也可自定义 CSS 变量 token。

import { AnatomyTheme, Turbofan } from "anatomy-figures";
<AnatomyTheme theme="paper">
  <Turbofan />
</AnatomyTheme>
<Turbofan theme={{ base: "light", "--anatomy-card": "#fafafa" }} />
<Watch
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
    "--anatomy-weight": "0.8px",
  }}
/>

26 个 CSS 变量控制全部填充、线条、标签样式。变量直接作用在图形组件，优先级高于外部 CSS。

罗列卡片底色、实体纸面、顶面、各级阴影、高亮部件、线条粗细、光晕、文字等全部 token

不使用 React：图形同时提供自定义 HTML 元素

import { define } from "anatomy-figures/element/turbofan";
define();
<anatomy-turbofan theme="dark"></anatomy-turbofan>

10 安装

一行命令给 Claude Code 添加技能：

npx skills add wheresryan22/anatomy

或者下载压缩包解压到 skills 目录 https://skills.wheresryan.sh/anatomy/anatomy.zip

unzip anatomy.zip -d ~/.claude/skills

打开 Claude Code，直接描述原理即可。描述概念，不要描述画面。示例指令：

/anatomy explain how a pin tumbler lock opens, interactive
/anatomy explain how a CPU cache line is filled, interactive
/anatomy explain how a gas burner mixes air and fuel, interactive, WebGL
/anatomy explain how React reconciles a list, interactive

技能自带 6 个完整示例，从 300 行代码的千分表到猛禽发动机；启动前 Claude 会读取最相近示例作为参考。

11 局限性

Claude 擅长构建这类图形，但不一定擅长 “肉眼审视” 画面。它优先保证功能、参数正确，但画面观感依然会出错。大部分重要修复，都需要你运行图形，描述视觉上违和之处，迭代修改。

高质量版本生成很慢。技能强制每个图形至少 40 个零件，不会自动牺牲细节换速度。想要快速结果，直接说明，会生成 Figure 级别而不是 Hero。 3D 尚在 beta。同一时间只支持单个主体旋转；旋转图形完整校验要 15–20 分钟，只有深度运动是核心需求时才选用。 参考图只用来参考质感。你给照片，AI 只提取表面材质，不会原样复刻物体。复刻别人的图纸不是它的目标。

所以把第一版图形当作草稿。上手交互，发现问题，描述缺陷，再次生成。https://skills.wheresryan.sh/anatomy/how-i-built-it 记录了这个迭代闭环的开发过程。

12 常见问题

  • 是否必须 React？
  • 生成图形后能否修改？
  • 是否会拖慢页面性能？
  • 是否具备无障碍访问能力？
  • 浅色还是深色？
  • 如何拿到最好效果？
  • 使用什么开源协议？

作者：Ryan 所有图形由 Claude + Claude Code 生成。字体 Inter 与 EB Garamond。手部素材来自西斯廷教堂《创造亚当》公有领域照片。 开源地址：https://github.com/wheresryan22/anatomy｜X：https://x.com/wheresryan22｜邮箱 hello@wheresryan.sh｜MIT 协议

提炼要点

  1. 核心思想：Object is explanation
    抛弃方框箭头示意图；把抽象算法 / 物理原理，映射成一台可动机械装置。机械的运动 = 概念本身。
  2. 输入：一行自然语言描述原理，不指定画面；Claude 自主设计实体。
  3. 输出：可交互等轴测 SVG/WebGL/3D 图形，附带驱动动画的数学模型，读数和动画同源。
  4. 分级工作量：Figure (30–90min) / Hero (2–4h) / Epic (6h+)，Epic 需要人工确认才启动。
  5. 产物可以直接导出为 React 组件或自定义 HTML 元素，MIT 开源包 anatomy-figures。
  6. 渲染三层：纯 SVG、SVG+WebGL 特效、真 3D；3D 仍 beta。
  7. 典型案例：哈希表 = 分拣台，布隆过滤器 = 老虎机，TCP 握手 = 索道邮车，LRU = 书架，大工程：A380 涡扇、SpaceX 猛禽发动机。
  8. 局限：构建耗时；AI 很难自行识别视觉瑕疵，需要人工交互试玩 + 迭代优化

【声明】内容源于网络
0
0
苏哲管理咨询
为企业及组织提供AI+战略、数智化转型咨询及观点、建议等
内容 2316
粉丝 0
苏哲管理咨询 为企业及组织提供AI+战略、数智化转型咨询及观点、建议等
总阅读58.9k
粉丝0
内容2.3k