
Anatomy 把概念做成可交互的等距“机器”(较早,10 月 8 日创建,近两天热度最高)
“讲清原理”这个细分里完成度很高的 skill,先照着示例让它做你自己行业的一个原理图试试。
- 渠道
- X(多条帖子推荐)+ GitHub | 类型:skill(Claude Code、OpenCode、Codex) | 作者:wheresryan22(个人)
- 细分人群
- 写技术博客、做课程、做产品原理讲解页的人
- 做什么
- 一句话让智能体把抽象概念(X 上的例子有 LRU 缓存、TCP 握手、消息队列)做成可交互的等距图:不是画框和箭头,而是造一台“真的有很多小零件的机器”,输出独立 HTML 页面、单个 SVG 文件或 React 组件;需要火焰、水波、光影时用 WebGL 着色器叠在同一视角里。替代的是请设计师画原理插图或手工做动效。
- 完整度
- 仓库自带已做好的示例页,可直接打开,README 展示了四个:火箭发动机(可拆成 11 个部件,并有检查脚本证明管线在静止、拆开和中间每一帧都不穿过零件)、水波槽、转盘(3D 模式,标为 beta)、百分表(最小的例子,约 300 行)。安装命令 npx skills add wheresryan22/anatomy -g -a claude-code(OpenCode、Codex 把参数换成 opencode、codex),无需 API key,零依赖,Node 20.10 以上(安装工具本身要求 Node 22.20 以上)。MIT 许可。我核对到:3271 星,65 次提交,最近一次提交在今天早上 7 点 50 分。
- 更新情况
- 10 月 8 日创建后几乎每天都有提交,仍在更新。
- 商用价值
- 技术博客、开发者工具官网、在线课程都需要“能讲清原理”的配图;可以接“互动原理图”代做单,或给 SaaS 官网做可交互的产品原理页。风险:3D 模式还是 beta;成品质量依赖所用模型;示例页较重(整个仓库约 10 MB)。
- 非常规之处
- 把“讲解图”做成有物理感的物体,并用脚本做自动检查,而不是让模型随手画图。
- 小团队可行原因
- 一个人,零依赖,纯本地。
- 上手所需
- Claude Code、Codex 或 OpenCode,Node。









