github一个神级skill：把技术概念做成一台真机器或者任何的科普视频

这篇讲一个叫anatomy的技能。它不画方框和箭头，而是把你说的技术概念，做成一台真实、能拆开、还会自己动的等距机器。文中所有配图，都是它生成的。

你有没有过这种体验：

读完一篇很硬的技术文章，合上手机，脑子里剩下的只有"好像有几个方框，中间连着箭头"。

问题不在你记性差。问题在于——方框和箭头本身没有信息量。一个写着"Cache"的圆角矩形，和另一个写着"Origin"的圆角矩形，除了文字标签，长得一模一样。你记不住，是因为图里没有任何值得记的东西。

最近我在我常用的 AI 编程助手里装了一个叫anatomy的技能（作者 Ryan，MIT 协议开源）。它的做法很不一样：不画方框，而是发明一台机器，让这台机器的运转方式，正好就是你要讲的那个概念。

我在自己的 Windows 机器上把它跑通了，还顺手让它给这篇文章做了一张主图。下面把"它是什么、怎么用、有什么坑"一次讲清楚。

一、一句话说清它和普通画图的区别

普通的技术插图，是把文字翻译成图形：这里是一个服务，画个框；它调用另一个服务，连根箭头。

anatomy 的做法是把概念翻译成机器：

• "缓存 key 没变就跳过重算" → 弹子锁。所有弹子对齐了，锁芯才转，没重画任何东西。

• "一张 GPU 上下文服务多块画布" → 龙门绘图仪。一个打印头，依次去巡 16 个孔位。

• "7 个字节深度不同的渲染目标" → 七格抽屉柜。每一格有多深，和它的字节数一样。

• "49×49 的模糊可以拆成 49+49" → 一块钉板印章，旁边两条导轨上各跑一把梳子。

• "光照取决于朝向" → 一间小摄影棚：主光和补光围着一台转台。

看出规律了吗：读者认得那台机器。认出机器的瞬间，机制就被理解了。

这是它官方文档里那张映射表，我原样搬过来的：

它自己也在文档里说了两种失败方式，说得很直白：太抽象（堆在一起的板子、漂浮的方块、贴标签的盒子，什么都不像）和太平太素（一大块板加几条线，没有体积、没有零件、没东西可看）。解法只有一个：一台认得出的机器，由几十个小而精确、各司其职的零件搭起来。

二、它不是"画图"，是"建模 — 出图 — 自检"

这是我用下来觉得它最不像"画图工具"的地方：它把大部分力气花在画之前和画之后。

它的工作流大致是八步，节选几条关键的：

最后一条我得多说一句，因为它是这个技能最"轴"的地方。

它有一个几何审计器，会真的去测：管道有没有穿过别的管道、法兰有没有浮在支座外面、哪根线在半空中断掉、两处重叠画反了顺序。审计必须跑到 0，才允许收工。官方文档里有一组真实数字：第一版火箭发动机图纸，人工目视调出来的绘制顺序有323 处深度错误，另外还有54 处间隙问题、其中 39 处是真的穿模；换成让审计器按真实几何去算、去排序，全部归零。

还有一道线头检查：图里每一根纹理线的端点，都必须落在另一根线、一个点或者一条轮廓上，不许停在半空。它把这条叫做"line ends: 0"。

换句话说，它的严格程度是按"会不会被人放大 4 倍挑错"定出来的。文档里反复出现的一句话是：最后要"像批评者一样验收"——把每个接头在两种主题下都放大 4 倍看一遍，自己读每一张截图。

三、实测：我让它给这篇文章做了一张主图

光说没用。我给它下了一个真实需求：给一篇讲"把一个技术概念做成机器"的文章，做一张封面主图。

它自己发明了一台机器，叫「解剖检验台」：

自建主图「解剖检验台」：方立柱与真刻度尺、可升降的滑块横臂、百分表、测头、转台与工件，前端还有工具架和量块盘

看几个细节，你就知道它不是在"拼图形"：

•立柱上那把刻度尺是真的：每一条刻度都从刻度板的左边线起、落在右边线上，长短分级，不会在板面中间凭空断掉。

•前端两个盘子是有分工的：左边工具架上插着 6 个不同外形的刀头（那是它的零件库），中间托盘里躺着 5 块高低不一的量块（那是尺度基准）。

•测头落下来的时候，指针角度、屏幕上的读数、行程是同一个数字算出来的。也就是说，这张图没法骗人——它自己不会说谎。

下面这张是把测量头抬起来的过程，你可以盯着百分表的指针和右下角的读数看：

测头抬起时，百分表指针、行程与右下角读数来自同一个数字——这张图不会说谎

顺带说一句，我这张图是浅色版。它的浅色主题不是深色翻转过来的，而是它"设计的第一主题"，连着色器都是按浅色设计的。这也是它官方所有截图的主题。

四、它自带 8 个完整示例，从"最小"到"上限"

装好之后examples/目录里躺着 8 个做好的例子，每一个的成品页面都提交在仓库里，双击就能打开。从最小的到最夸张的：

挑三张给你看：

先是最讨人喜欢的一张。注意屏幕上那行字是在机箱正面的平面里画出来的，不是贴上去的：

1984 风格台式机：屏幕上那行字画在机箱正面的平面里，不是贴上去的

然后是这台火箭发动机——它代表这个技能的上限：478 个参与深度排序的图元、11 个装配体，悬停能把它拆开，审计会保证任何一根管道在拆开的每一帧里都没有穿到别的零件里面：

上限：火箭发动机吊在试车台上，可拆成 11 个装配体；尾焰是与 SVG 共用同一套等距相机的 WebGL 着色器

最后这张是我的私心，因为它最能说明"数字是真的"——下面那一圈水波纹和纸上的焦散，不是贴图，是一个色散和光学模型算出来的；右下角的频率、波长、节点线数目会跟着你改的参数变：

水波槽：水波与纸面焦散由一个色散与光学模型算出，右下角的频率、波长、节点线数目会随参数变化

五、怎么装上、怎么用

它是一个标准的 Agent Skill（一个根目录带SKILL.md的文件夹），用官方的 skills 命令行装最省事：

npx skills add wheresryan22/anatomy -g

命令会问你要装给哪个助手（Claude Code / Antigravity / OpenCode / Codex）。想跳过提问就加参数，比如只要 Claude Code：

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

装完直接用斜杠命令，说清它要解释什么就行：

/anatomy explain how a token bucket rate limiter works, interactive

而且你不必点名这个技能。你只要说"给我一张等距插画"、"给文档配一张解释性插图"、"要一张能交互的讲解图"，它就会被加载。

官方给了三条提高成功率的建议，我觉得挺关键：

产出物是你能拿走的源码：一个 Node 构建脚本和它写出的页面；React 的话是几何模块 + 一个服务端组件 + 一个客户端组件。绘图库（camera、实体、零件库、圆件车削、管道线缆、WebGL、3D 运行时）跟着一起给你。

六、几个必须提前知道的坑

它官方文档里有一节叫 Limits，写得很老实。结合我自己跑下来的感受：

1. 它慢，而且是故意的。一张图要经历写零件表、建几何、跑审计、两种主题下逐处放大检查。火箭发动机那张，光构建就要好几分钟；3D 模式的完整环绕审计，30 个零件要跑 15–20 分钟。想要"一句话出一张图"的，这个技能会让你失望。

2. 它不画图表。没有坐标轴、没有数据系列、没有数据图。数字只以两种形式出现：模型驱动的实时读数，和零件真实的尺寸与数量。要画折线柱状图的活儿，找别的工具。

3. 它画机器、仪器、工具、家具，不画人，也不画精确地图。如果一件事没有"机构"可以搭，出来的东西会明显弱一档。

4. 着色器要 WebGL。火、烟、水、光这类线画不出来的东西才用着色器；没有 WebGL 时 SVG 依然完整可读，但特效就没有了。开了"减弱动态效果"的话，所有图都会静止。

5. 3D 模式还是 beta。官方给的数字：小的 3D 图能跑 60fps；那个 380 个零件的压力测试手，1440px 宽下约 20fps，模拟手机（390px、CPU 4 倍降速）掉到13–15fps。上生产前要掂量。

6. 它产出的是 SVG / HTML，不是位图。这一点我在公众号这条链路上踩到过：微信不认 SVG，所以我最后是用它自带的capture.mjs，启一个无头 Chromium 把页面截成 PNG 再上传的。上面那几张图，包括那张动图，都是这么来的。

七、什么活儿值得用它

一个很实在的判断标准：如果这个概念能对应到"有个东西在动、动完就说明白了"，就值得用它；如果它本质上是"一堆条目和关系"，就别用。

结语

做完这张封面，我最大的感受不是"图变好看了"，而是它逼我把概念想清楚。

因为要让它造出一台机器，我必须先能回答：这里到底什么东西在动？动一下意味着什么？这个数字是真数还是我瞎编的？——想不清楚，它就搭不出机器；想清楚了，图反而只是顺手的结果。

如果你也受够了满屏的方框箭头，可以去装一个试试。仓库在 GitHub 的wheresryan22/anatomy，MIT 协议，除了 React 输出那一档需要 React 18+，其余零第三方依赖（Node 20.10+ 加一个 Chrome 或 Chromium 就能跑），官网在skills.wheresryan.sh/anatomy。作者在 README 里留了一句话：如果它帮你画出了有用的东西，点个 Star 能帮别人找到它。

你最想让它给你解释哪个概念？是缓存、限流、还是某个你一直没给别人讲明白的机制？评论区说说，下篇我可以挑一个真的做出来。

（文中所有插图由 anatomy 技能生成，浅色主题；封面与动图为我自建的「解剖检验台」，用它的capture.mjs截取。）