夜雨聆风学习资料网

ARTICLE · 1208254

别再画框图了:我让 AI 给初中物理造了 10 台能转的机器

别再画框图了:我让 AI 给初中物理造了 10 台能转的机器
ANATOMY · 造物式解释2026.10

配图这事,忍了十年

一小时造十台

能拧的机器

Anatomy · 等距机械图 · 10 个物理原理 · 可交互

Anatomy 实战

TUTORIALSVG

📦 全文 6 章 · 精选 3 个看点

👉 滑动

01 · 概念

物体即解释

为什么是造机器

02 · 上手

一句话安装

三种装法

03 · 实战

一小时十台

选题到生成

PART ///

写在最后

为什么值得

一句话安装一个开源 Skill

一个多小时,10 个原理变成 10 台能拧的机器

做了这么多年笔记,配图这件事一直很别扭。

想讲清楚“欧姆定律”,画一个电阻符号,再画两根箭头,标上 U、I、R。画十遍,它还是一张示意图。你看着它,能背出公式,但脑子里没有那个“电流被挤压着往前推”的画面。

问题不在画得丑,在于框图这种形式,天生只能表达“谁连着谁”,表达不了“它是怎么动起来的”。

直到这周用上一个叫 Anatomy 的开源 Skill,我才第一次见到另一种解法:不画图,直接给你造一台机器。

01

PART

Anatomy 是什么

THE OBJECT · 物体即解释

Anatomy 的官方定义只有一句话:物体本身,就是解释(The object is the explanation)。

它不是绘图库,也不是图表工具。它是一个 Agent Skill——装进 Claude Code、Codex、OpenCode、Antigravity、MiniMax Code 这类智能体里,然后你描述一个概念,它会做三件事:

1

先为你发明一台物理装置,这台装置的运作方式,就是这个概念的运作方式;

2

把装置拆成几十个真实零件,用等距视角(isometric)画出来,每个零件带四层明暗;

3

让它动起来,配上实时读数,你拨一下、拧一下,数字跟着零件一起变。

官方文档里有几个让我拍桌子的映射:

缓存键 → 一把弹子锁

内容没变就跳过重算,对应“只有所有弹子都对齐,锁芯才能转动”;弹子错一个,就转不动。

GPU 上下文 → 十六孔龙门绘图仪

一个 GPU 上下文服务多块画布,对应一个打印头依次巡访 16 个工位。

布隆过滤器 → 三转轮老虎机

三个转轮对应三个哈希函数,三个都中才算命中。

你看,这已经不是“配图”了,这是用机械结构在替你做比喻,而且比喻是能跑起来的。

— 机械隐喻:Anatomy 智能体原理图

三种输出形态

同一套零件库、同一台等距相机、同一套工艺规则,输出分三档:

SVG · 核心档

实心等距零件,按画家算法从后往前绘制,四色明暗分配受光面。可以导出独立 HTML 页面、单文件 SVG,或 React / Next.js 组件。

SVG + WebGL

火、水、尾焰、焦散、灯光、辉光、蒸汽这些“线条画不出来”的东西,交给着色器。着色器画布被夹在前景与背景两张 SVG 中间,用的是图形自己的等距相机,所以火焰是“画在图纸里”的,不是贴在图纸上的。

3D · Beta

零件逐帧重新投影、重新着色,真的能转,目前只在少量示例上验证过。

它最不像“AI 画图”的地方:几何审计

AI 画图最大的毛病是“看着对,其实错”——零件互相穿模、线条悬在半空、遮挡关系颠倒。

Anatomy 的处理方式是让它自证清白。

kit/audit.mjs 给每个零件记录真实三维形状,对屏幕上每一对重叠零件做射线投射,算出谁在前谁在后。深度顺序是证明出来的,不是目测调的。

收尾的 auditOrExit 会跑十来项检查:间隙、端点悬空、弯折自叠、锥度抖动、深度序,任何一项不过,直接非零退出,不许交付。

此外还有一条“线端检查”:每条纹理线必须终结在描边、端点或轮廓上,任何一条线悬在半空就判失败。

作者在官网写了一句特别清醒的话:审计看得见几何,看不见标记;线端检查看得见标记,看不见深度——都代替不了人眼看一眼。

— 三种输出形态与几何审计

02

PART

安装 Anatomy

INSTALL · 三种装法

三种装法,推荐第一种。

方式一:skills CLI(最省事)

CMDnpx skills add wheresryan22/anatomy -g

它会问你要装到哪个 agent。想跳过询问就直接指定:

...bash

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

# 或 -a codex / -a opencode / -a antigravity / -a minimax-code

默认落位分别是:

Claude Code

~/.claude/skills/anatomy

Codex

~/.agents/skills/anatomy

OpenCode

~/.config/opencode/skills/anatomy

Antigravity

~/.gemini/antigravity/skills/anatomy

MiniMax Code

~/.minimax/skills/anatomy

!踩坑提示 🕳

绘图套件最低只要求 Node 20.10,但 skills CLI 1.7.1 要求 Node 22.20 以上。这两个数字经常被混为一谈,装不上先查 CLI 的 Node 版本。

方式二:git clone

CMDgit clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

关键是 SKILL.md 必须落在 skills 目录下的 anatomy 子目录里。

方式三:下载 ZIP

下载后解压,把 anatomy-main 改名成 anatomy,丢进 skills 目录即可。

装完怎么用

装好之后,Claude Code 会自动识别;如果 skills 目录原本不存在,需要执行一次 /reload-skills。调用方式是:Claude Code、OpenCode、Antigravity、MiniMax Code 用 /anatomy,Codex 用 $anatomy。

当然,你根本不用记这些——直接跟你的 Agent 说一句“帮我把这个项目装上”就够了。我这次就是这么干的:

PROMPT请帮我把 https://github.com/wheresryan22/anatomy 安装

这样我们就把 Anatomy 安装好了。

03

PART

先备料:初中物理有多少原理

PREPARE · 找素材

装完 Skill,我想找个足够有说服力的练手素材。技术概念太抽象,讲给非技术朋友听没共鸣;那就换个所有人都学过、但基本都还给老师的东西——初中物理。

先让 AI 把知识点铺开:

PROMPT请帮我梳理一下初中物理有哪些原理?请给出清单

清单是出来了,但纯文字的展示效果很差,密密麻麻一屏,看着就困。于是让它换个形式:

HTML 页面一出来,层次立刻清楚了。这一步很关键:AI 输出内容的质量,一半取决于它用什么形式交付。

04

PART

选题:哪些原理适合做成机器

SELECT · 筛出 TOP 10

Anatomy 有个硬边界——它只画机器、仪器、工具、家具,不画人,不画地图。

所以不是所有物理原理都能塞进去。像“光的折射”“声音的产生”这类纯现象,做出来容易变成一张漂亮但空洞的板子。于是让它按 Anatomy 的“造物”标准重新筛一遍:

...prompt

请根据 https://github.com/wheresryan22/anatomy 项目,结合刚才给你的

初中物理原理,挑选出适合生成 anatomy SVG 动画的初中物理知识,

请给出 10 个最推荐的清单

这 10 个能被选出来,是因为它们背后都有一台现成的机器可以对应:

物理原理
对应的机器
欧姆定律
带可调阀门的管路,电压是水压,电阻是阀门口径,电流是流量
杠杆原理
天平或杆秤,支点可移动,配重块滑动,力矩读数实时变化
滑轮组
定滑轮加动滑轮组,绳子绕法可切换,省力倍数直接读出来
连通器
一组 U 形管,倾斜、加压,液面自己找平
大气压强
托里拆利实验装置,玻璃管升降,水银柱跟着走
浮力
溢水杯加弹簧测力计,物体浸入,排开的水流进量筒
热机
四冲程剖面,活塞、曲轴、气门联动
电磁感应
线圈、磁铁与检流计,磁铁抽插,指针摆动
凸透镜成像
光具座,蜡烛、透镜、光屏三段可滑动
液体压强
压强计加可升降探头,深度变化,U 形管液面差跟着变

看出来了吗?每一个都是一个能上手拧的装置。这就是 Anatomy 的选题标准:先问“有没有一台机器,它的动作就是这个原理”,有,才值得做。

05

PART

开跑:一次一个多小时

GENERATE · 十台机器

接下来就是正式生成:

...prompt

请根据刚才给你的 TOP 10 物理现象,使用 /anatomy 这个技能包,

分别生成 10 个 SVG 动画原理来详细介绍这 10 个物理学现象。

注意生成 10 个 SVG 的带有 anatomy 效果的页面。

这一步要有心理准备。10 个画面,前后跑了 1 个多小时。

原因在 Anatomy 的工作流里写得很清楚:先收集真实数字,再发明物体,写零件表,规划世界坐标,构建几何,从后往前绘制,加卡片边框,让它动起来,最后像批评家一样逐个关节自检。而且它要求零件少于 40 个不算完工,还要在明暗两套主题下分别截图检查。

这不是“生成一张图”,这是“装配一台设备”

点进任意一个可以看明细页。拿欧姆定律举例:

注意几个细节:每台装置外面都有一个卡片框架,带标题、提示文字和实时读数;读数不是随手标的标签,而是和驱动零件运动的是同一个模型——你调阀门,电流表数字真的在变;零件有真实的厚度和受光面,四层色调,遮挡关系正确,不会出现“A 管子从 B 箱子里穿过去”的穿模。

下面是我整合好的 10 个成品(可交互,可拆解):

关注
重播 分享 赞

06

PART

想让它出好图,记住三条铁律

RULES · 踩坑之后

踩了 10 个坑之后,我总结出三条,比任何参数都重要。

01说概念,别说图形

不要写“画一个电路图,左边是电池,右边是电阻”,要写“解释欧姆定律:电压不变时,电阻变大电流变小”。你越具体描述图形,它越退化成一张示意图;你越说清概念,它越会去发明一台真正的机器。

02给真实数字

尺寸、数量、速率、阈值、温度、压力,有多少给多少。因为 Anatomy 的整个自检体系是围绕“真实数字”建立的:你给 3 个零件,它给你 3 个零件;你给“16 孔龙门架、10 个连接池、阈值 100 令牌每秒”,它才会认真排布世界坐标。

03指定产物形态

独立 HTML 页面,还是单个 SVG 文件,还是 React / Next.js 组件?亮色主题还是暗色主题?要不要 WebGL 层,也就是有没有火、水、光这类场景?不指定,它会自己猜,猜错的概率不低。

一个完整的例子是这样的:

...prompt

做一个解释“液体压强随深度增加”的等距装置:

一个可升降的压强探头,深入水面 0、10、20、30 厘米四个刻度,

U 形管液面差对应 0、980、1960、2940 帕。

交互式 HTML 单文件,亮色主题,探头可以拖动。

///

LAST

写在最后

SUMMARY · 为什么值得

今天主要带大家了解并实测了一个叫 Anatomy 的开源 Skill——它到底是什么、为什么值得折腾,以及怎样用它把初中物理做成能转的机器,核心看点是“不画框图、不写一行绘图代码,一句话让 AI 给你造一台能上手拧的装置”。

通过“让 Agent 自己装 Skill”这套最低门槛的方案,即便你完全不懂前端、不会写 SVG、也没碰过等距投影,也能跑通从梳理知识点、筛选题,到批量生成 10 个可交互页面的完整链路——先认清“只画机器不画人”“零件少于 40 个不算完工”“慢是刻意的”这 3 道硬约束,再按“装 Skill、铺知识点、筛 TOP 10、批量生成”这 4 步走一遍,全程不用自己画一笔,一个多小时就能拿到 10 台带实时读数、能拨能拆的等距机械装置。

无论你是想给技术文档配图、又受够了框图的工程师,还是想把“抽象原理”讲给孩子、讲给同事听的普通用户,都能通过这套流程把看不见的概念变成摸得着的实物,明显降低“把一件事讲清楚”的门槛。在实际使用中,Anatomy 把零件表、几何、明暗、动效、自检这 5 个环节串成一条流水线,零件按画家算法从后往前绘制,几何审计逐对射线投射证明遮挡顺序,线端悬空直接判失败;尤其是“屏幕上的读数和驱动零件运动的是同一个模型”这套设计,让它在“真的能解释清楚”这个方向上,比只会生成漂亮示意图的工具更有说服力。

当然,它慢、它不是 CAD、它甚至可能让你“看着懂了其实没懂”——但只要它能把一个抽象的东西,变成有重量、有间隙、有摩擦、可以亲手拨一下的实物,这一个小时就花得值。

今天的分享就到这里结束了,我们下一篇文章见。

装了 5 个 AI 编程工具才发现:我真正缺的是一个"模型中转层"

把 Meta Muse 接进本地代理,AI 对话、生图、生视频全部免费

一句话提示词,AI 帮我做了一条手绘白板讲解视频

Meta Muse 爆火,国内 0 门槛注册全攻略

用 Seed-2.1-pro 0915 做了个技能包:把中国古诗词做成带朗诵和字幕的视频

既然看到这里了,如果觉得有用,随手点个赞、在看、转发三连吧。

点赞
在看
转发

THANKS FOR READING

相关学习资料