Anatomy 开源：用一个 Claude Code Skill 把技术概念画成可交互的等轴测机械图

核心背景与行业痛点

技术文档、博客和落地页里最难做的往往是“解释图”：流程图太抽象，手绘插画又贵又慢，而让大模型直接画 SVG 常常出现零件穿模、线条悬空、数字随手编。开源项目 Anatomy（MIT）把这件事做成了一个标准的 Claude Code Agent Skill：仓库 10 月 8 日创建，10 月 10 日发布 v1.0.0，目前约 1,970 star、150 fork，是近期开发者圈传播最广的 Skill 之一。

架构亮点与底层机制

Anatomy 的思路是“把概念造成一台机器”：例如缓存键命中跳过计算，被画成一把只有所有弹子对齐才能转动的锁。SKILL.md 规定工作流——先收集真实数字、发明物体、列零件表、规划场景，再用 kit/ 的等轴测相机与零件库一次性构建几何、由后往前绘制、加上卡片与实时读数。图中显示的每个数字都来自驱动零件运动的同一个小模型。输出分三类：纯 SVG（可导出独立 HTML、单个 .svg 或 React/Next.js 组件）、SVG+WebGL（火焰、尾焰、水面焦散等着色器嵌在同一相机中）、以及 3D 模式（beta，逐帧重投影与重着色）。

权威 Benchmark 与实测跑分对比

项目没有与其他工具的公开横向评测。作者在 README 中给出的数据（厂商/作者口径）：小型 3D 图可达 60 fps；380 个零件的压力测试手部模型在 1440px 宽约 20 fps、限速手机配置下 13–15 fps；猛禽发动机示例构建需数分钟，30 个零件的 3D 全轨道审计需 15–20 分钟。质量保障靠 kit/audit.mjs 证明零件互不穿透、每个端点都有支撑，以及无头 Chrome 截图脚本逐个关节放大检查。

开发者实战落地与开箱指南

安装：npx skills add wheresryan22/anatomy -g -a claude-code（或 git clone 到 ~/.claude/skills/anatomy），然后在 Claude Code 中输入 /anatomy explain how a token bucket rate limiter works, interactive。需要 Node 20.10+，自检脚本需本机 Chrome/Chromium（可用 CHROME_PATH 指定）。注意它不是图表库，不画坐标轴和数据曲线，也不画人物和精确地图；单张图是“慢工”，适合文档与官网关键图。示例与在线画廊见 项目主页，52 个现成图形的 React 组件版见 anatomy-figures。