无尘阁 · anatomy
Anatomy · Skill 观察笔记

把这台机器拆开:
一个 skill 画出了 13 张能动手的等距图

anatomy 的思路反常识:要解释一个技术概念,它不画方框和箭头,而是造一台真机器—— 底座压在脚上,导轨带刻尺,滑车坐在衬套里,表针会动。零件的运动和屏幕上的读数是同一个模型算出来的, 所以你拖一下,数字就跟着变。这里是它的三种图形态(纯 SVG / SVG+WebGL / 3D)、 四种调性(明纸质 / 暗工程 / 蓝晒 / 霓虹夜)、明暗双主题,以及几件官方题材, 每种各画一张,全部可交互。

仓库 wheresryan22/anatomy Star 7k+ 许可 MIT 依赖 0 Node ≥ 20.10
01

三种形态

SVG · SVG + WebGL · 3D

skill 的三种出图方式不是滤镜差别,而是画法不同:零件全是实心面,用四色明暗分出面来; 线条画不出的东西(火、水、光)交给一层 WebGL,跟 SVG 共用同一个等距相机; 要真转起来的那几个零件,则每帧重新投影、重新着色。

02

四种调性

同一台玻璃按钮测试台 · 四种配色

同一份几何、同一套交互,只换调色板:明纸质是工作室里的米色卡纸,暗工程是炭黑机柜, 蓝晒是工程图纸的普鲁士蓝,霓虹夜只靠荧光读数认零件。零件数、投影、读数一个字都没改。

03

明暗双主题

同一把弹子锁 · light / dark

skill 先设计亮色主题(连 shader 一起),再折算暗色。这里是同一把五弹子锁: 钥匙插到底,五颗弹子对齐,锁芯才转得动——一个 cache key 命中就不干活的比喻。

04

官方题材

仓库自带的八件里挑了四件

官方示例是照着真东西造的:1984 年的台式机(能打字)、剖开前脸的街机柜(投币一路滚到钱箱)、 龙门绘图仪(一个头挨个去十六口井取墨)、水波槽(两只振子的干涉投到纸屏上)。

05

它凭什么像真的

规则,不是玄学
规矩做法在这页上的样子
物体即解释不画方框箭头,先造一台「它的运转就是那个概念」的机器弹子锁=缓存键;十六口井=十六个渲染目标
四色明暗每个零件只有顶面、左前、右前、描边四个层次,靠它分出面所有图的零件都只有三到四个色阶
画家顺序按相机方向从远到近排序,没有 z-buffer,全靠排序对发动机的管路压住喷管、滑车压住导轨
数字同源读数、指针、运动都由同一个模型算,改模型才会改数字表针角度=量块高度;推力=油门×230 tf
克制动效指数跟随或真弹簧,不做弹跳;离屏就停,减动效就静每张图都有空闲巡游,指针一离开就自己慢慢走
自己挑错构建时跑几何审计:不许穿模、不许悬空、不许折管本页是手写的等距图,没上审计

一句提醒:官方 skill 装起来是 npx skills add wheresryan22/anatomy -g -a claude-code, 零依赖、不要 API Key;但一张 Hero 级图它自己估 2–4 小时,因为零件是逐个手写坐标的。 这页上的十三张,是按同一套规则用一套等距小工具现画的,几何量比官方示例小一档。