导读：Anatomy 是一套开源的互动图解工具包，适合把难讲清的机器、系统和技术原理，做成可浏览、可点击、可拆解的网页视觉作品。
Anatomy 是什么？
Anatomy 是一个开源 Skill 和绘制工具包。它的目标不是生成一张静态配图，而是帮助创作者交付可以继续编辑的 SVG、独立 HTML 或 React 组件，用互动等距插图解释真实物件、复杂系统和技术概念。
它适合做哪些内容？
- 科普与课程：把抽象过程画成可观察、可点击的装置与步骤。
- 产品说明：用部件、数据读数和状态变化讲清产品如何运作。
- 文档与文章：为技术文章、使用手册和案例页加入可互动的解释图。
- 网页展示：输出SVG、HTML或前端组件，方便继续调整并嵌入网站。
从选题到交付的建议流程
- 先收窄主题：一次只解释一个关键过程，例如发动机气流、缓存队列或能量转换。
- 确定互动动作：决定用户点击、悬停、拖动或播放后应该看到什么变化。
- 选择交付格式：需要兼容性优先时选SVG；需要单页演示时选HTML；要进入产品项目时选React组件。
- 检查文字与图形：确保图例、读数、部件名称和动画节奏服务于解释本身。
- 在浏览器实测：检查移动端、缩放、键盘操作、加载失败和交互遮挡，不把未经验证的效果当作完成品。
使用前需要知道的边界
互动图解可以让解释更直观，但不能替代准确的专业知识。尤其是医学、工程、安全等主题，图中的比例、运动和数值要区分“示意”与“真实测量”。项目的部分高级效果依赖浏览器能力，复杂场景也需要单独评估性能与兼容性。
官方入口
常见问题
- 互动教学作品需要哪些技术基础？
原文案例涉及网页3D、Three.js、React等技术；具体实现要分别评估交互、性能、素材与内容校验。 - 提示词能一次生成完整作品吗？
不能保证。复杂互动作品通常需要多轮修改，并在浏览器中检查画面、交互、素材加载和运行状态。 - Anatomy适合做什么？
它更适合制作可点击的互动图解、网页科普、产品说明和技术演示，而不是替代所有大型三维应用。 - 如何保证科普内容准确？
应由理解主题的人核对原理、数值和表述，明确哪些是示意，并对最终交互做实际运行验证。