anatomy：把技术概念造成一台真机器——零依赖等距工程图 skill，自带 12 项几何审计

一仓一个主张：物体本身就是解释

anatomy（MIT，作者 Ryan / @wheresryan22，4,600+ stars、350+ forks，2026-10-08 建仓，主语言 JavaScript，官网 skills.wheresryan.sh/anatomy）是一个标准 Agent Skill：仓库根目录就是一份 SKILL.md，这个仓库本身就是那个「技能文件夹」。它要解决的问题很具体——让模型解释一个技术概念时，别画方框、箭头和标签，而是发明一台真实存在、做工讲究的机器，让这台机器的工作过程就是那个概念本身。

SKILL.md 里那张「概念到物体」的映射表是整份技能的灵魂，也是它区别于所有「画图提示词」的地方：

要解释的概念	它造出来的物体
一个共享的 GPU context 服务多块画布	一台龙门绘图机：唯一的打印头依次走访 16 个工位
没变化就跳过工作的缓存键	一把弹子锁：每颗弹子都对上，锁芯才转得动，才什么都不重画
七个每纹素字节数不同的 render target	一只七抽屉柜，每个抽屉的深度就是它的字节数
可分离模糊（49×49 次采样 vs 49+49 次）	一枚钉床印章，旁边是两条导轨上的梳子
一根既施压又侧倾的弹簧	一台带弹簧、探针与千分表的测试台
一条高度轮廓	一把压在工件边缘上的轮廓量规
随朝向变化的光照	一间小摄影棚：主灯与辅灯围着转台布置

它还明确写出了这个思路的两种典型翻车方式，都是实践中见过的：太抽象（叠起来的板子、悬浮的方块、贴标签的盒子，读者认不出那是任何东西）与太平淡（一整块大板子上画几条线，没有体积、没有零件、没有任何可看的东西）。两种病的药方是同一个：一台认得出的机器，由许多小而精确、各有用途的零件组成。

与之配套的是「细节密度」这条硬要求，而且它把密度写成了可检验的两档：1× 看是一台清楚的机器，4× 看每个区域仍然有真的东西可发现。一块光板面、一个空角落，在这套标准里不算「克制」，算没做完。同时它反复强调细节必须有用途、不是噪点：每个零件都坐在另一个零件上、收在一条边上、渐隐而不是戛然而止。

十步工作流：先报尺寸，再写零件表

SKILL.md 把流程钉成十步，并且明说「概念与零件表要写在任何几何之前，质量的大部分在那一步就决定了」。第一步是它新加的，直接冲着「模型一上来就闷头干六小时」这个毛病：

档位	规模	预估	该怎么做
Figure	一个机构，40-80 个零件，SVG 至多一层 WebGL	30-90 分钟	不用问，直接做
Hero	一个致密物体，数层 WebGL 或一个 3D 主体，80-150 个零件	2-4 小时	先说出来，除非用户要的是「快一点」，否则继续做
Epic	整台载具、整栋建筑或整套厂站，多套运动系统；或在多个主体上开 3D	6 小时以上	不许开工：给估算、提一个保留核心想法的 Hero 方案、列出完整版会多什么，等用户选

无论哪一档，第一个小时内必须有一个能在浏览器里打开的可用页面，之后再往里加深度；每一步开头跑一次 date，某一步超过它应占估算的两倍就要向用户报告进度与剩余工作。把「时间盒」写进技能正文而不是临时写在提示词里，这在同类技能里少见。

剩下九步依次是：先求真（把要解释的东西的真实数字与行为收集齐，读数、运动、图注都必须是真的，能写成纯函数模块就写，像 test-rig 里的 rig.ts）；再发明物体（一句话说清什么在动、这个运动意味着什么，永远不许照抄参考图，只取它的做工，不取它的物体）；写零件表（至少 40 个，按底座、结构、机构、操作件与被解释的主体分组，每个零件都坐在另一个零件上）；规划世界（世界单位约等于实物 1 像素，x/y 在地面、z 向上，方位角默认 45°、要看长边就取 35-60°，仰角 30°、要看进一个开口容器就抬高，涟漪水槽用 44°，最后用 fitProjection(points, width, height, { pad, azimuth }) 收框）；一次性建好几何（静态路径全部预计算，运动件只在静止位建一次再用 translateAlong 移动，只有形状会变的零件才逐帧重建）；从后往前、从下往上着色（包住别的零件的东西一律拆成后半与前半：绕在杆上的弹簧、框住滑台的横梁）；装进卡片框（左上 Fig n、右上短标题、左下交互提示、右下实时读数，图例与真实图注放在卡片下方，文字留在画面外，画面内最多一处极小的刻字铭牌）；让它活过来（基于时间的平缓运动，指数跟随或真弹簧，无人操作时循环一段巡游，响应指针与键盘，离屏即停，prefers-reduced-motion 下完全静止，属性写在 ref 上而不是每帧重渲染）；最后像挑刺的人一样验收。

kit/：一万六千行、零依赖的绘图库

技能自带的 kit/ 是这些图真正被画出来的地方，合计约 16,200 行，除了 React 组件外没有任何依赖——构建脚本、绘图库、检查脚本全部只用 Node 内置模块，所以没有 npm install 这一步。

文件	行数	负责什么
kit/iso-kit.ts / .mjs	842 / 674	整个核心：等距相机、实体、零件库、SVG 字符串渲染器、卡片与页面构建器、ISO_CSS。TS 版拷进项目，ESM 版给 Node 脚本直接 import
kit/lathe.mjs	1,184	任意轴向上的回转体：frameAlong、lathe（剖面带光滑节点就自动开光滑着色）、bandsOf（把一个曲面体切成可深度排序、共享同一表面的带）、sphereOf、saddleOf、rodOut（从填料函里伸出的杆）、fillet（管路圆角）
kit/tube.mjs	306	tubePieces 把一根三维管子或线缆切成可深度排序的段（支持 breaks、卡箍与管夹下的 gaps、椭圆端盖、跟随每个接头横截面的 rings 编织/波纹/缠绕纹理），crossingsOf 找路径穿过卡箍的位置
kit/audit.mjs	1,913	几何证明：recorder 采集、settle 定深度键、auditOrExit 是 --audit 的钩子，任何一项不合格就非零退出
kit/gl.mjs + gl-shared.mjs	184 + 184	画内 WebGL 层：GLSL_ISO（GLSL 里的同一个相机，含 rayOf、pixelOf）、glLayer，以及 smooth / burst / settle 三个 JS 包络
kit/turn*.mjs	3,610 + 3,800 + 1,355 + 1,096	可选 3D 模式：运行时、构建器、轨道审计，加一个尚未文档化的实验变体
kit/react/draw.tsx / live.tsx	205 / 140	服务端安全的组件（Solid、Line、Wire、Dots、FaceText、IsoFigure、Plate）与 "use client" 钩子（useReadout、useLoop、useEased、useInView、useStillness）

着色是「四色调 + 按朝向」的一套固定语言：extrude 会按面朝向返回四个侧面色调外加一个更亮的顶面，有高度的东西一律保留它，只有地面与薄于 1 单位的镶嵌才用 flat。色调层级也是钉死的：底座与脚用 lo、结构用 mid、被解释的主体用 hi，全图只有一个强调色是 lit（深色主题里是白、浅色主题里是黑），那正是读者该盯着看的零件；凹槽 faint、次刻度 lo、主刻度 mid、零位 hi。颜色只在「颜色本身就是主题」时才用，比如 RGB 三通道。

细节给的是具体数字而不是形容词：倒角 0.4-1.6、凹槽距边 3-5、螺钉是 0.4-0.55 的点加一圈环、装在板角上；旋钮要有滚花；标尺每 4-5 单位一个刻度、每第 5 个是主刻度；铭牌上三条横线代表刻字。构图上，主体居中并占卡片约 55-65%，一组图之间比例保持一致，且在 390px 宽下仍然读得出来。

audit：把「看着对」变成可数的失败行

这是 anatomy 与其它「出图类技能」最本质的差别：它不止要求画得好，还配了一台能证伪的机器。kit/audit.mjs 的用法是三段式——

A.recorder(P, { order, spring })   // 每个零件被画出来时顺手记下它的真实形状与路径
A.settle(R, P)                     // 对屏幕上每一对重叠项做射线求交，算出真实深度并写下画家键
A.auditOrExit(R, P)                // node build.mjs --audit，任何一项不合格即非零退出

settle 的关键在于它不只算静止姿态：静止、拆解、以及拆解动画回放中的每一帧都要重算一遍深度。审计项一共十二类：clearances（间隙）、solidClearances（实体间隙）、terminals（端子落点）、looseEnds（悬空头）、supports（有没有东西支撑）、folds（折弯处是否掐扁）、selfOverlaps（自相交）、crowding（拥挤，细杆也按线参与判定）、coverage（替身形状）、wobble（曲面斜率抖动）、seats（是否真的坐在安装面上）、depthOrder（前后关系）。必须打印 audit passed 且每一条失败行都是 0。

两条配套纪律写得极其硬：咬合问题只能在几何里修，绝不允许用画家键偏置糊过去；必须记录你真正画出来的那个形状——用一个替身形状把审计哄安静，本身就是 bug，而且 coverage 这一项就是专门抓它的。管子与线缆的规则同样量化：保持约 1.5 倍半径的间隙（除了这条线自己的连接点），走线贴着结构走而不是横穿主体表面，凡是法兰、卡箍、波纹管、管夹、阀件包住管子的地方都要把管子断开留出间隙；两个物件在屏幕上无法排出前后关系时叫「咬合」，修法是切一刀或改成相切接触，不是加偏置。

线条必须落在东西上：line ends: 0

几何审计看不见线条标记，所以另有一个专门的检查：scripts/lines.mjs 在无头 Chrome 里遍历页面上每一条纹理线（接缝、刻线、加强筋、刻度、指针），要求每一条都终止在一个笔画、一个端点圆点或一条轮廓上，否则用 --out 把它圈出来并以状态码 1 退出。命令必须打印 line ends: 0，而且浅色页也要跑一遍，每个静止姿态还要借 drive.mjs 的 ["lines"] 动作再跑一遍。

node examples/raptor-engine/build.mjs --audit          # 必须结束于 audit passed
node scripts/lines.mjs examples/dial-indicator/dial-indicator.html --out shots/lines.png
node scripts/lines.mjs examples/dial-indicator/dial-indicator-light.html --out shots/lines-light.png
node scripts/capture.mjs page.html --out shots/phone.png --width 390
node scripts/capture.mjs page.html --out shots/joint.png --zoom 200,80,220,170   # 4× 特写
node scripts/drive.mjs page.html '[["slow",0.05],["key","i"],["sheet","shots/ignite.png",100,16]]'

与线条同族的是纹理收尾规则：加强筋、螺栓圈、刻线、接缝、凹槽永远不许停在一个面的中间，要么收在真实的边上、要么渐隐出去（ribsOf / dotsOf 接受 fade，加强筋行可以 seams: true 收在自己的接缝上，盒子上的一条线用 k.sideSeam 包住四角，非停不可的单线用 fadeLineSvg 做出坡口，朝上的特征要 all: true 表示四周可见）。管子上的编织、波纹、缠绕纹理必须跟着横截面走、穿过每一个分段接头（tubePieces(…, { rings })），绝不允许沿中心线画一条虚线。只有代表印刷文字的刻线、指针的尾巴与尖端可以停在光板面上，且要显式标 free。画面里也不许出现引出线、气泡标注、尺寸箭头或悬浮标签。

WebGL 长在同一个等距相机里

着色器只用来画线条画不出来的东西：火、尾焰、水、焦散、真实的灯光、辉光、蒸汽。零件仍然是 SVG。层结构固定为三层——后层 SVG 放被效果遮住的部分、中间 canvas 放效果本身（pointer-events: none）、前层 SVG 放遮住效果的部分；一个零件同时位于两侧时就把它拆开。

真正的技术核心是「世界空间、同一个相机」：着色器里的每个点都由 onFloor / onWallX / onWallY 构造，或者沿像素射线 rayOf(vb) + t·towardViewer() 步进；尺寸一律是世界单位乘 uK。这样落在某个平面上的效果会与那个平面的 SVG 线条精确对齐，看起来是长在画里而不是贴在画上。

其余几条都是从实际翻车里长出来的：不许跳变，每个 uniform 都走一条带起音与衰减的包络（事件用 burst、电平用 settle），相位切换是由物理量驱动的交叉淡化，淡出只能变暗；不许硬切，每一项都要在任何 if、任何边界、任何画布边缘之前归零，甚至在任何 cell noise 的格子边之前归零；从开口看到的内容要被遮两次（自己的平面一次、面平面上的开口一次，相乘）；用 tonemap() 加抖动；深色主题下只加光的 canvas 用预乘输出配 mix-blend-mode: screen，需要同时压暗的（涟漪水槽的水面）保持普通混合。

浅色主题是默认出货的那一版，它的着色器是按「纸」设计的：用普通预乘 alpha，绝不用 screen；写「纸该显出什么颜色」然后反解墨量；辉光是一个饱和的主体加一个浅色核心、一圈彩色边缘和一个 alpha 地板，不是把深色主题的辉光调暗——后者正是 Raptor 早期「红色墨水烟」这个 bug 的成因。另外：被光照到的地方要带色偏，承装它的腔体要有更暗的物理底色（烟灰、耐火材料、水深）；炽热体走一张与无 WebGL 回落共用的黑体墨量表；墨量只能随光增长，要淡出就把成品的墨整体淡一次，绝不逐项淡；墨要止于每一笔的内侧边缘；并且要逐帧测量墨量，它必须随光单调变化。

克制也在规则里：设备像素比上限 1.5，只在效果激活且在屏时渲染，prefers-reduced-motion 下只出一帧静态，而且没有 WebGL 时 SVG 必须自己读得通。

3D 模式（beta）：每帧重投影、重着色

3D 和 WebGL 一样是可选项，只在「一个零件在深度方向上的运动就是那个想法」时才用：会转的表盘或转台、会屈伸的手指、会断裂掉落的部件。其余部分仍是静态的 kit 画。

它的实现思路与常见的 three.js 场景完全不同：活动零件就是 kit 自己那张画。每一帧把凸的 kit 基元（棱柱、回转体、穹顶、带平面的球、车削体、管段）按 kit 的规则重新投影、重新着色——转 θ 角，等价于 kit 在方位角 a − θ 上作画。前后关系靠「分离平面」求解：同组的一对用固定在组内的平面，不同连杆上的一对用固定在共同参考系里的平面，其余每帧解一次；轨道审计会证明在任何转角、任何动作片段的任何一帧都不存在环。

其余约束同样硬：接触只能是齐平、相切或轮缘落在平面上，关节是子组上与父连杆相切的同轴 knuckle 圆盘，否则整组会被判「松脱」；没有任何一条活动线可以跨两个运动组——线缆穿过关节要靠两侧各一个卡箍，或者经轮毂上的滑环接到转台；活动管的折弯要落在近水平面内或配件内部，且永不指向视线方向，折弯半径需满足 R ≥ 2r / sin²(e − θmax)（平放时是 8r，骑在 ±12° 铰链上就是 21r）；材质（金、铬、钢、枪金属、橡胶、黄铜、铜）各有明暗两套，色调仍由朝向决定；自由组断裂时不许跳变；同轴零件是「固定的画 + 转动的纹理」；着色器用 controller.anchor 或 toGroup 锚到某个组，用 coverOf 遮挡前层 canvas，而烟、下落的火花、台面上的油这类世界效果要留在组空间之外。

性能与成熟度都写得很诚实：小型 3D 图 60 fps，380 零件的压力手在一台负载很重的机器上 1440px 宽约 20 fps、手机档（390px 加 4 倍 CPU 降频）13-15 fps；这个模式只在它自己的示例和一张测试图上验证过，还没在生产图上验证过，所以规则是一次只转一个主体，周围的杂物保持静态。完整轨道审计按每个零件 30-40 秒预算，30 个零件要跑 15-20 分钟，日常迭代用 --quick --only=…，全量放后台跑，只有全量跑出的 turn audit passed 才算数。

八个示例：从 300 行到 380 个零件

技能自带八个完整示例，构建产物（HTML 页面）是提交进仓库的，随便打开一个就能试。文档明确指定了标杆：test-rig 是「画面本身」的质量线，raptor-engine 是「着色器」的质量线。

示例	规模	它在示范什么
dial-indicator	约 300 行（build 脚本 275 行，产物页 866 行）	最小的一个：带底座的千分表，悬停推动滑台，指针逐块读数
desk-computer	约 85 个实体、850 条路径	一台 1984 风格的桌面电脑，键盘真的能打字，字符出现在机箱前面那个平面里画的 CRT 上；关机时画面塌缩成一条线和一个点
arcade-cabinet	约 240 个实体、15 根线缆	侧板拆开的立式街机。投币后硬币以「圆盘在 30° 斜面上能达到的速度」滚下币道、撞开币开关钢丝、落进钱箱；开关的脉冲沿线缆一段段传到主板；CRT 预热、自检、跑吸引模式；摇杆压下板下的微动开关。示范的是剖视相机怎么摆、凹面板怎么沿任意轴画成棱柱、活动件如何在页面里用构建时同一个模块重建
raptor-engine	11 个组件，构建要几分钟	回转体全部出自 lathe.mjs、管路与线束出自 tube.mjs；致密管路、光滑着色、渐隐与审计的参考实现
ripple-tank	两层 WebGL，仰角 44°	着色器与等距平面的配准，以及由纯模型驱动效果
test-rig	53 个实体、约 470 条路径	来自真实站点的 React/Next 生产图：弹簧支撑滑台上的玻璃按钮、导轨上会压会拉的手指探针、读侧倾的千分表
spot-plate	六对玻璃液滴	同一站点的第二张生产图：每一对液滴由同一个距离场画出，两滴近于 merge 就融成一块玻璃；一扇塞尺刀片各控制一个间隙，是「形状互相变形」与「一个控制量驱动多个零件」的参考
turning-dial	约 90 个活动零件（压力件 380）	3D 模式本体

另有八份长篇参考文档放在 references/，模型按需展开：craft.md（外观与零件词汇表、色调表、画家算法范式、回转体、管路与线束、爆炸图、面上的屏幕，以及那些「让图被打回」的反模式）、kit.md（API 签名与示例）、motion.md（循环、弹簧、巡游、指针、键盘、无障碍、reduced motion，以及一次性事件、爆炸视图、深度重排与解锁的包络）、react.md（服务端/客户端切分与大 payload 的 key 警告陷阱）、verify.md（截图与驱动命令、评审清单、常见故障）、webgl.md、walkthrough.md（test-rig 从概念到代码的逐步设计记录）、3d.md。evals/evals.json 里还放着测试提示词以及「一份好答案应该包含什么」。

CI 与家规：改 kit 必须让每个示例逐字节相同

CI 跑在 macos-latest 加 Node 22 上，做两件事：先把 react@19.3.0、react-dom@19.3.0、typescript@5.9.3、esbuild@0.28.2 装进一个临时目录、用 NODE_PATH 指过去跑 node --test scripts/*.test.mjs（仓库自身仍然零依赖，测试依赖不进 package.json）；然后把每个示例的两个主题都重新构建一遍，再用 git diff --exit-code 要求提交的页面与重建结果逐字节相同。这条比任何风格指南都有效：kit 的任何改动只要让一张既有图变了一个字节，CI 立刻红。

CONTRIBUTING.md 的家规也值得单独列，因为它们大多是可判定的：

家规	具体含义
代码里不许有注释	不是文件头、不是难点旁的一句话、不是 JSDoc，解释放进命名与结构里；"use client" 这类工具指令不算注释，保留
kit 改动必须是 opt-in	改 kit/ 或 scripts/inline-kit.mjs 只能新增选项或函数、默认行为仍是旧行为；每个既有示例必须逐字节重建相同；确实要改图就在 PR 里说明并提交重建后的页面
两个主题都要能用，浅色是出货版	每个颜色都是一个有浅色值加深色覆盖的 token，绝不允许在图的 CSS 或着色器里写字面色值；浅色着色器按纸设计（普通预乘 alpha，绝不 screen），不是把深色辉光调暗
不许重叠	静止、拆解、任何运动帧里，管与缆都不穿过任何东西；每处交叉按真实深度画，由审计证明而非肉眼调；咬合在几何里修，替身形状算 bug
线条收口、纹理渐隐	每条线都终止在某个东西上；加强筋行、螺栓圈、接缝、刻线收在真实边上或渐隐，绝不停在面中间；曲面光滑着色，没有色调阶梯
着色器不许跳变	每个 uniform 走带起音与衰减的包络，相位切换是交叉淡化，每一项在任何边界前归零；效果活在图自己的相机的世界空间里，没有 WebGL 时 SVG 仍读得通
每个数字都是真的	读数、运动、图注出自同一个带真实数字的模型；文档同规则：没查过的数字与没验证过的特性一律不许写
每张 PNG 都要看	请评审之前，两个主题下每个接头的 4× 特写都要自己打开看过

实测判断与边界

强项很清楚。它把「审美」翻译成了可执行的检查：间隙 1.5 倍半径、倒角 0.4-1.6、螺钉 0.4-0.55 的点、构图占卡片 55-65%、设备像素比上限 1.5、折弯半径 R ≥ 2r / sin²(e − θmax)，这些不是形容词而是能写进代码的数；它自带证伪工具，十二项几何审计加 line ends: 0 加逐帧墨量测量，模型没法用「看起来还行」糊过去；CI 的逐字节重建要求让 kit 的兼容性变成了机器保证；零依赖意味着没有供应链面，装完就能跑；把「先报尺寸与预估、Epic 不许开工、超两倍就汇报」写进第一步，是同类技能里少见的对时间与预期的治理。

边界也要说清楚。第一，它不是图表库：没有坐标轴、没有数据系列、没有数据绘图，数字只以「模型驱动的实时读数」和「零件的真实尺寸与数量」两种形式出现，要画 dashboard 和统计图请另找工具。第二，它只画机器、仪器、工具与家具，不画人、不画精确地图；一个没有机构可造的想法，出来的东西会更弱。第三，它就是慢：一张图要一整个长会话（零件表、几何、审计、两个主题下每个接头的特写），Raptor 的构建要几分钟，30 个零件的完整 3D 轨道审计要 15-20 分钟。第四，3D 模式自报 beta，只在示例与一张测试图上验证过，密集场景掉到 20 fps 量级。第五，检查链路依赖本机的 Chrome/Chromium（可用 CHROME_PATH 指定），在 Codex 的沙箱里可能被拦住——文档给了三条路：按命令批准、在 ~/.codex/config.toml 里配 approval_policy = "on-request" 加 sandbox_mode = "workspace-write"（含 network_access = true 与 writable_roots = ["/tmp"]）、或者自己在普通终端里跑那条检查命令。第六，skills CLI 会把整个仓库连示例一起拷下来（约 10 MB），且 CLI 1.7.1 自己要求 Node 22.20 以上（技能本体只要 20.10+，Node 20 上浏览器脚本会带 --experimental-websocket 自我重启；示例在 Node 20.19 与 22.11 上都逐字节重建过）。

一句话判断：如果你的文档、博客或落地页需要一张「读者一眼认出是台真机器、放大四倍还有东西可看」的解释性插图，并且你愿意为它花掉一个长会话，这是目前把工艺标准写得最像工程规范的一个出图类技能；如果你要的是图表、人物插画或十秒出一张的装饰图，它从设计上就不做这件事。

安装

# Claude Code（装到 ~/.claude/skills/anatomy）
npx skills add wheresryan22/anatomy -g -a claude-code

# OpenCode（~/.config/opencode/skills/anatomy）／ Codex（~/.agents/skills/anatomy）
npx skills add wheresryan22/anatomy -g -a opencode
npx skills add wheresryan22/anatomy -g -a codex

# 只装进当前项目：去掉 -g
npx skills add wheresryan22/anatomy

# 或者用 git
git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy

装完在 Claude Code 与 OpenCode 里用 /anatomy，在 Codex 里用 $anatomy（技能列表在 /skills 下）。如果会话启动时技能文件夹还不存在，Claude Code 里跑一次 /reload-skills；OpenCode 与 Codex 重启即可。不点名技能也会命中：只要你说要一张等距插图、文档/博客/落地页的解释性图、或者「Linear 那种高级感的技术图」，模型会自己加载它。

提示词的三个习惯（出自 README）：说想法，别描述画面——把要解释的东西和真实数字（尺寸、数量、速率、阈值）给它，物体会由它来发明，这本来就是这份工作的大头；或者反过来直接点名物体——你已经知道要一台意式咖啡机、一盏本生灯、一把锁，就说出来并说清什么该动；说清它最终落在哪——独立 HTML 页、单个 .svg 文件、还是 React/Next 组件，浅色还是深色，几种产物的构建路径不同。