Anatomy

用 SVG 构建细节丰富、可交互的等距机械与仪器模型，解释技术概念。

wheresryan22 开发的 Anatomy 将概念映射为可辨认的实体机构，通过带明暗层次的立体零件、可操作控件和实时读数解释其工作原理，运动与读数由同一模型驱动。支持输出独立 HTML、SVG 或 React/Next.js 组件，可选配 WebGL 效果和实验性 3D 模式。上游项目采用 MIT 许可证。

适用场景

• 用可交互的实体类比解释算法与系统
• 为技术文档和文章制作说明插图
• 为产品与落地页构建精细的技术图形
• 用剖面和爆炸视图展示机械结构

使用方法

为所用智能体安装上游 Skill 后，在 Claude Code 中通过 /anatomy、在 Codex 中通过 $anatomy 描述概念与交互需求，例如制作交互式令牌桶限流器。运行需要 Node.js 20.10+，验证需要 Chrome 或 Chromium。可先从 SVG 开始，火焰、水等效果可选用 WebGL，3D 模式仍处于实验阶段。

Skills

• anatomy

  Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with many small precise solid parts, four-tone shading, correct painter's order, a framed card with title, hint and live readout, and calm eased motion. Use this whenever someone wants an isometric illustration, an explanatory diagram or figure for docs, a blog post, a landing page or an article, a "Linear-style" or "premium" technical drawing, an interactive explainer, or an SVG that shows how a system, algorithm or component works, even if they never say "isometric". Works framework-free (TypeScript/JS that writes SVG and HTML) and in React/Next.js, and can add realistic WebGL shaders (fire, exhaust, water, caustics, lamp light) that live inside the drawing in the same isometric perspective. Also publishes a finished figure to the Anatomy community gallery when asked.

  wheresryan22/anatomy