Anatomy：用交互插图讲清原理

GitHub Stars 1.3万

分类：图像与视觉设计

用 npx skills add wheresryan22/anatomy 安装；Claude Code 用 /anatomy，Codex 用 $anatomy。先把概念转为具体机械，再用 SVG 搭建零件、动作和读数，并检查结构与画面。可叠加 WebGL 火焰、水波；3D 仍为测试版。构建需 Node 20.10+，验收需 Chrome。适合机制讲解，复杂插图耗时较长。

图像与设计开发教学与研究开源

一句话价值

让 AI 把机器原理和技术概念画成可交互的等轴测插图，可生成 SVG、独立网页或 React 组件，适合文档、科普文章和产品页。

适合场景

设计师
开发者
教育工作者
内容创作者

亮点

/anatomy 给技术文档做一张交互插图：用带 8 个抽屉的机械柜解释 LRU 缓存，展示读取、写入与淘汰；浅色主题，输出独立 HTML。
/anatomy 用剖面咖啡机讲清水从水箱经过泵、锅炉和冲煮头的路径，点击按钮显示流动；输出 SVG 和网页预览。
$anatomy 为 React 教学页面画一个有 4 个工位的机械转台，解释任务队列与并发限制；支持键盘操作，并提供静态预览。

安装指引

npx skills add https://github.com/wheresryan22/anatomy