一、全文速览图
最近很火的Anatomy Skill，能让AI一键生成科普视频！全文速览图 前两天发现了一个超棒的 Skill，可能很多朋友也都刷到了。阅读文章 >
18天，264万次围观！
一个叫 anatomy 的超酷免费 skill，早已在全网刷屏，截至目前，已冲破2万颗星！
它做的事特别纯粹：一句话就能让 AI 搓出原理拆解动画，咖啡机、汽车发动机、冰箱，几分钟就能将这些复杂的东西，绘制成细节丰富、可交互的3D等距视角插图动画。
官方案例已超过52种，社区网友也手搓贡献了50多种，随便一个我都能玩好久。
以前你想搞懂一个东西的原理，得先打开一篇科普文章，看着文字和示意图，脑补画面，关掉文章，5分钟后连图长啥样都忘了。
现在，你只需要跟AI说：我想了解某个东西的原理，一行提示词就能搞定，效果还贼好。
这种类型的东西，其实超受小孩哥喜欢。
一个讲打气筒怎么给轮胎打气的儿童课，12 万次观看，一台洗衣机洗衣演示，11 万次观看。
是不是很想学？X上的一个作者 Elvar 最近把整套制作流程写成了一篇手把手教程，收获46万次围观，提示词能直接用。
我照着这篇教程，用 Codex 实测了一遍，一样可以做出来。
二、教程全公开，跟着做
作者做之前先抛出一个自己答不上来的问题：浓缩咖啡机的原理是什么？
然后直接甩给AI，调用anatomy skill，10分钟后，他得到了这样的一个结果。
Elvar 把整套流程写成了 9 步教程，从制作到合集网页上线，提示词可以直接用，开源、免费（作者用的是Claude）
Antigravity、Codex、Minimax-code 也可以。
Step1 安装 anatomy skill
打开你的 AI工具 ，一行命令就可以搞定：
npx skills add wheresryan22/anatomy -g -a claude-code
然后打开 Claude Code，输入 /anatomy，调用这个skill，就可以一句话实现XXX是如何工作的，或者XXX的原理是什么。
Elvar 不满足于一句话实现，他想做的更细致，流程可点击，风格可替换，每一步的效果是什么样的，小孩哥看完也能上头。
Step2 挑一个你答不上来的问题
挑题目有个小窍门：找那种零件贼多，又有直观数据可展示的。
- 马桶冲完水，怎么重新蓄水？
- 自行车变速，怎么让踩踏板更省力？
- 钥匙是怎么把锁打开的？
- 电梯怎么刚好停在正确楼层？
- 每月存 100 元，复利是怎么滚起来的（暴富就算了）
先找一个自己感兴趣的。
Step3 把问题甩给AI
/anatomy Someone asked me: "[How does an espresso machine make coffee?]" Answer with a machine, not a diagram. Build a real, recognisable [lever espresso machine with a burr grinder beside it, a portafilter, a tamper, a milk jug and a cup on a scale], made of many small parts, in isometric view, as one standalone HTML page. The steps are buttons in a column on the left: [Grind 18 g] [Tamp] [Lock it in] [Pull the lever] [Let go] [Steam the milk] [Pour] [New cup]. Only the next step is clickable. Each button plays that step on the machine itself. Cut a window into the part where the real work happens [the group head: the piston, the spring and the water inside]. The viewer sees the cause and the result together. Write one small model of the real thing as a pure function before you draw anything. Drive every number on screen from it: [18 g of coffee in, 36 g of espresso out in 27 s, brew pressure 9 bar falling to 6 as the spring opens, boiler at 1.1 bar, milk from 4 °C to 62 °C in 36 s]. Show them live on gauges, on displays built into the machine and as small chips under the figure. If you are not sure a number is real, say so and tell me where it comes from. Under the figure, one line: "The big idea: [a spring makes the pressure]."
可以直接复制作者的提示词，也可以替换掉 [这里的内容]，翻译成中文喂给 AI 同样可行。
这段结构化提示词，你得说明六件事：机器包含哪些零件、步骤有哪几步、按钮和可视化窗口的布局、哪些数据要实时显示、每一步要有提示、最后一句核心总结。
教程里反复强调一条： 先写模型，再画图。 让 AI 先把真实机器的小模型写成纯函数，屏幕上所有数字都由它驱动。
Step4 让人扫一眼就懂
Make it readable at a glance without dumbing down the numbers: - one short hint at the top for each step, simple enough for a 7-year-old: what is happening and why - big pill buttons with a number in a circle; the running step lights up, finished steps fade - a small handwritten sound word on each action: grrrr at the grinder, tok when the basket locks, psssh at the steam wand, knock when the puck comes out - a speed badge whenever a step runs faster or slower than real time (×4, ×1/20), computed from the real seconds - a switch with 2 modes above the steps: Manual by default, where nothing moves until someone presses a step and the next button pulses; Auto, where the machine runs every step by itself on a loop. Remember the choice between visits - a "Start over" link that puts the machine back at step 1 - [optional] 3 numbered step cards under the figure, a small robot mascot and a "Show me" button that plays the whole thing
Elvar 为了让画面更易懂，改变了按钮的样式、步骤高亮、动作配字幕、速度调节以及手动/自动开关。
检验标准是：小孩哥都能秒懂。
Step5 定义视觉风格
Style: a hand-inked children's book, not a technical drawing. - dark navy ink outlines, 1.2 px, flat colour fills with 3 tones per colour (top lightest, sides darker) - cream paper background (#f5f0e5), one bold colour per object, chrome and brass for the metal parts - colour swatches under the figure that recolour the machine - short, hard-edged, warm grey shadows (#ddd4c3) falling just behind each object; never blue or purple - every dial, display and label sits on a face that nothing else hides
如果你不满足于默认风格，可以重新定义，找一个喜欢的参考喂给AI，让它自己整。
Elvar 这里用到的是手绘墨水儿童绘本风，奶油纸底，每个元素配一个大胆的颜色，暖灰硬边阴影，绝不用蓝紫。
Step6 让AI自己挑刺儿
Before you show me anything, check it like a critic: 1. Capture a still in the middle of every step and read each one: a part hidden behind another part, text that overflows its box, a number that disagrees with the model. 2. Scrub every move longer than 1 second at 0.1 s steps and count how many pixels change per frame. A frame that changes 3x more than its neighbours is a jump: find it and fix it. 3. Slow moves must be continuous. Never step through pre-drawn poses on a move that takes longer than a second. Tell me what you checked and what you fixed. Show me the stills.
别问AI：做好了吗，它永远会说做好了。
你得问它：你查了什么、修了什么，截图给我看。
Elvar 在做拉杆往上抬/回弹的动画时，有一个 bug：其中一帧画面突然出错，黑屏闪了一下。
怎么发现的？他逐帧比较画面变化：拉杆正常上升时，一帧只变 900 到 1,400 个像素；
出错那一帧变了 95,245 个像素，明显不正常，所以被第 2 条检查规则抓出来了。
Step7 转成视频
三个提示词，按这个顺序来。
第一个：先让导览能被录下来。
Make the tour recordable: - add window.seek(t) that replays the whole tour from zero to time t. Any frame can then be drawn in any order - with ?render in the URL, the page stops its own clock - draw a cursor that walks to each button and presses it a moment before the step starts - cut the whole tour to 36 seconds: 0.7 s between steps, the first click at 0.9 s; the main moment [the shot] stays the slowest step
第二个：录制
Record it: open the page with ?render in headless Chrome, call window.seek() for every frame at 60 fps at 1500×1320, screenshot each frame and pipe them into ffmpeg as H.264, yuv420p, faststart. Then make a contact sheet with one frame every 3 seconds and show it to me.
第三个：加音效
Score it in code, no samples and nothing to license: a 36-second lo-fi bed at 84 BPM with soft electric piano on Fmaj7, Em7, Dm7, Cmaj7, a round bass, brushed drums after the first bar and faint vinyl crackle. On top, quiet sounds at the exact seconds of the picture: a click on every button press, the grinder's hum, the steam hiss, a thin trickle while the espresso runs. Master to -14 LUFS with the true peak under -1 dB and mux it into the video with ffmpeg.
用普通录屏软件录慢动作，很容易掉帧卡顿。
换成逐帧截图的方式，每次都能稳定跑出 60 帧。
作者做出来的成品：2160 帧，36 秒，才 4.5 MB。
Step8 批量制作
第一个跑通之后，剩下的就可以让 Claude Code 同时开工，一台机器派一个代理去画。
Build these machines in parallel, one agent per machine: [vending machine, washing machine, toaster, microwave, pencil sharpener, smoke alarm, fridge, capsule toy machine, photo booth]. Every agent follows the rules of my espresso machine: the same look, the step buttons, the window into the mechanism, one model that drives every number, one big idea. Give each one its own fact to prove, with the real number behind it: [the microwave measures the speed of light off a chocolate bar, 6.12 cm between the melted spots]. Each agent works in its own folder, never edits the shared files and checks its own stills before it reports back.
每个代理必须带一个要证明的事实原理，这是整篇教程的灵魂。
你让它做个微波炉，它画个盒子、里面放个盘子，就交差了。
你让它用巧克力棒证明光速，它就必须老老实实把驻波画出来，不画，光速就证明不了。
Step9 整一个网站
等你手头有两三个做好的机器原理，给它整一个网站。
Put my figures on one small site: - a front page with one card per figure: a still from its best moment, the name and one line about what it answers - each figure on its own page with a nav on top: a menu with a thumbnail of every machine, and the ← → keys switch machines - Space or Enter runs the next step - a 1200×630 preview card for every page, made from a still in the middle of a step, with absolute image URLs so the card shows up when the link is shared on X - links to other sites open in a new tab, so the machine stays where the viewer left it - deploy it to Vercel and point my domain at it
每张机器原理卡片下面，都有一句诱惑力拉满的宣传文案，勾起大家的好奇心。
比如：
- 前 17 次为啥死活抓不到兔子？第 18 次就能中？
- 为什么电梯电机只用拉 40 公斤的重物？要是绳子突然断了会怎样？
- 手机一秒出图，这东西拍完得在机器外面泡上12分钟才能看？
这行字不解释功能，就抛一个让人好奇的问题，吸引大家点击，好吧，我是点进去了。感兴趣的朋友可以直接体验：visual-learning.app
三、我照着教程，用 Codex 实测了一把
如果你只是想快速生成一个原理 HTML，不涉及复杂的数学运算，跟着前5步做就可以实现，甚至一句话就能实现。
我让AI发散了几个其它原理的选题。AI自己就上道了，还自信地说：我对第5个最感兴趣了。
提示词部分，我让AI结合教程里的参考，生成了一份同类提示词：
用一台机器来回答，不要画示意图。造一台真实、一眼能认出来的 [商用自动扶梯的侧面剖视，能看到上下两个水平段、中间倾斜段、两侧扶手带、底部和顶部的梳齿板，以及机房里的驱动链轮]，由许多小零件组成：梯级、梯级链、导轨、梳齿板、扶手带、驱动链轮、张紧轮、电机，等距视角，做成一个独立的 HTML 页面。 步骤是左侧一列按钮：[踏上梳齿板] [梯级展平] [开始爬升] [到顶展平] [离开梳齿板] [梯级翻下去] [从底部翻上来] [扶手带循环]。只有下一步可以点。每个按钮都在机器本身上播放那一步。 在真正干活的那个部件上开一个窗口 [底部和顶部的转向段：梯级怎么从水平翻转成倾斜、再翻回水平，以及梯级链怎么绕过驱动链轮和张紧轮]。让观众同时看到“台阶消失”和“台阶从下面回来”是同一件事。 画任何东西之前，先把这台真实机器的小模型写成一个纯函数。屏幕上每个数字都由它驱动：[运行速度 0.5 m/s，梯级深度 400 mm，提升高度 4.5 m，倾角 30°，单侧扶手带速度比梯级快 0–2%，驱动电机功率约 8 kW，满载每级站 2 人、每人按 75 kg 算]。用表盘、机器内置显示屏和图下方的小标签实时显示这些数字。如果你不确定某个数字是不是真的，就说出来，并告诉我它从哪来。 图下面写一行：“一句话核心：[台阶没有消失，它只是转了一圈又回来了]。”
看着还行，直接甩给Codex，10分钟后，它做完了：
这个 skill在Codex上的默认风格是这样的。
如果不满意？直接换，我找了一个游戏手柄的参考，希望它能将左侧的操作按钮换成掌机风格。
直接甩给AI，如果你想做的特别细致，可以反向让 AI 生成一个风格替换的需求框架。
10分钟后，它变了，变得我有点不认识了，亲切又陌生：
四、别光看了，自己动手整一个
看到这里，你不打算试试？挑个你一直想知道、但又说不明白的问题。
比如飞机窗户为什么非得是圆的、微波炉为什么热不匀、洗碗机工作的原理（我家的猫为什么不会说话）挑一个，直接搓。
做出来的、或者卡在半路做不下去的，可以发到评论区。
想看看谁的脑洞最大。
以后有人问你，这玩意背后原理是什么，你直接甩给他一份 HTML，效果拉满！