wheresryan22/anatomy

这是什么？

核心功能

• 01用大量带阴影的小零件生成等距 SVG 图形，并支持交互动画。
• 02提供 WebGL 着色器层，用于火焰、水体、焦散和光照效果。
• 03实验性 3D 模式会每帧重新投影运动部件。
• 04可输出独立 HTML 页面、单个 SVG 文件，或 React / Next.js 组件。
• 05内置几何审计以及无头 Chrome 截图检查。
• 06仅使用 Node 内置模块，无需安装 npm 依赖。

适用场景

• 在文档或博客中用物理类比解释技术概念。
• 为落地页制作可交互的讲解图形。
• 生成独立 SVG 插图并附带 PNG 预览。
• 在 Next.js 文档站中加入 React 组件形式的示意图。

快速上手

1. 1

   使用 skills CLI 安装该技能

   npx skills add wheresryan22/anatomy -g
2. 2

   在 Claude Code 中使用 /anatomy 命令请求生成图示

   /anatomy explain how a token bucket rate limiter works, interactive

使用前须知

• !它面向 Claude Code 等智能体运行，并非独立应用。
• !检查图示需要无头 Chrome，Codex 沙箱可能会阻止它。
• !3D 模式标注为测试版。

标签

常见问题

anatomy 是什么？

一个 Claude 智能体技能，可生成可交互的等距 SVG 图解，用真实机械与系统解释技术概念。 Anatomy 是一个智能体技能，会把技术概念构建成一个真实可运行的物体，让其工作原理本身就体现概念。例如，只有所有销钉都对齐时才会转动的弹子锁，可以用来表示“内容未变时跳过计算”的缓存键。技能会用大量小而带阴影的零件搭建图形，放入带标题、提示和实时读数的卡片中，图中显示的数值来自驱动运动部件的同一个小模型。

anatomy 可以免费使用吗？用的什么许可证？

anatomy 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

anatomy 还在维护吗？

活跃维护中。anatomy 最近一次提交是在 2026年10月18日。

anatomy 适合用来做什么？

在文档或博客中用物理类比解释技术概念。 为落地页制作可交互的讲解图形。 生成独立 SVG 插图并附带 PNG 预览。 在 Next.js 文档站中加入 React 组件形式的示意图。

anatomy 怎么安装和运行？

使用 skills CLI 安装该技能: npx skills add wheresryan22/anatomy -g 在 Claude Code 中使用 /anatomy 命令请求生成图示: /anatomy explain how a token bucket rate limiter works, interactive

在哪里获取 anatomy？

源代码和安装说明在 GitHub 上：https://github.com/wheresryan22/anatomy