内容编写于 2026.10.30
AI Coding 越来越强，这已经毋庸置疑。
现在我们可以使用 AI Coding 快速生成软件，也可以使用 AI Coding 生成视频。那能不能 AI Coding 应用到更多场景里？
比如：
• 一个复杂的技术原理，如何变成一张让人一眼就能看懂的可视化图？
• 一套复杂的机械结构，如何通过合理的视角、比例、层次和动画，让人直观地理解它的工作方式？
• 一个交互界面，除了功能正常，能不能同时符合专业的设计原则？
最近发现了一个很有意思的开源 Skill —— Anatomy，它将这个事情变得很简单。
它的理念很特别：不画传统流程图，而是把一个技术概念变成一件真实、精密、可以运转的物体。
今天，我把它安装到了 DSH，让我们看看接入 DeepSeek V4.1 Flash-1017 后效果如何？
认识Anatomy
先看 Anatomy 的一些官方作品。
GitHub：github.com/wheresryan2…
它的作品有一个非常鲜明的特点：等距视角、精密的机械结构、丰富的细节，以及可以直接操作的交互。
普通的技术可视化，通常采用流程图、方框、箭头和文字说明。
Anatomy 走的是另一条路。
它希望找到一个真实的物理对象，让这个对象本身承担解释任务。
例如：
• 缓存 Key 匹配：设计成一把弹子锁，只有所有弹子都匹配，锁芯才能转动。
• GPU 一个上下文服务多个 Canvas：设计成一台龙门式绘图机，由一个打印头依次访问多个工作区域。
• 不同容量的 Render Target：设计成一组深度不同的抽屉，每个抽屉的深度代表对应的数据容量。
这背后的设计理念叫：
The object is the explanation.（物体本身就是解释。）
读者不需要先看一大段文字，再试图理解技术概念，而是通过观察物体的结构、运动和读数，直接理解它的工作机制。
Anatomy 能生成什么？
它并不是传统意义上的 AI 图片生成工具。
Anatomy 的核心是通过代码构建等距技术可视化作品，主要有三种实现形式：
| 形式 | 实现能力 | | --- | --- | | SVG | 精密实体、等距投影、分层着色、动态交互 | | SVG + WebGL | 火焰、水波、光照、蒸汽等复杂视觉效果 | | 3D | 真实三维旋转、部件拆解等，目前为 Beta |
最终可以输出独立 HTML、SVG 文件，也支持 React / Next.js 组件。
它还提供了完整的示例工程，例如机械仪表、桌面电脑、街机机柜、火箭发动机、波纹水槽等。
这意味着它不是让模型从零开始摸索绘图方式，而是已经准备好一套设计语言和实现工具。
我认为 Anatomy 最值得关注的地方就在这里：
它把一种专业的技术可视化能力，封装成了 Agent 可以调用的 Skill。
拆解Anatomy
如果只是看几个作品，很容易把 Anatomy 理解成一个高级绘图模板。
但真正打开它的代码仓库之后，会发现它的工程结构远比想象中丰富。
它并不是一个 SKILL.md 文件就结束了，而是一套完整的专业能力包。
1. SKILL.md：专业工作流程
SKILL.md 是整个 Skill 的入口。
它告诉 Agent 应该如何完成一项技术可视化任务。
Anatomy 规定了一套相当明确的工作流程：
1. 确定作品规模：Figure、Hero 或 Epic。
2. 收集真实数据：尺寸、数量、阈值和工作行为。
3. 设计物理对象：找到能够表达技术原理的真实物体。
4. 拆解零件：形成详细的零件清单。
5. 规划空间：确定世界坐标、视角和相机参数。
6. 构建几何：使用工具包生成实体和组件。
7. 排列深度：处理遮挡关系和前后顺序。
8. 设计画面：组织标题、说明和实时读数。
9. 实现交互：添加动画、鼠标和键盘操作。
10. 验证结果：进行几何审计、截图检查和细节修复。
这套流程最值得注意的是：
先理解对象，再设计结构，最后才开始绘制。
它甚至要求先形成零件清单，再进行几何构建。
对于普通 AI Coding，我们经常直接给出需求，让模型自己决定如何实现。
而 Anatomy 通过明确的工作步骤，把原本容易被忽略的设计过程变成了执行规范。
2. Kit：专业绘图工具包
如果说 SKILL.md 负责告诉模型怎么做，那么 Kit 就是提供具体的实现能力。
其中包括：
• iso-kit：等距相机、实体构建、SVG 渲染和页面组件。
• lathe.mjs：圆柱、圆盘、环形件等旋转实体。
• tube.mjs：管线、电缆及其连接结构。
• audit.mjs：几何关系审计。
• gl.mjs：WebGL 着色器和视觉效果。
• turn.mjs：3D 动态运行时。
这些不是普通的提示词，而是真正可以被代码调用的工具库。
例如，绘制一根电缆，不只是画一条曲线，还需要考虑电缆的实际形状、连接端子、弯曲、遮挡和拆解时的运动。
Anatomy 已经把其中很多专业问题封装成了可复用的实现能力。
3. References：专业设计规范
References 是进一步展开的技术文档。
包括：
• Craft：视觉设计、零件结构和绘制规范。
• Kit：工具 API 和使用方法。
• Motion：动画、弹簧、交互和无障碍设计。
• React：React / Next.js 实现方式。
• Verify：自动化检查和质量验收。
• WebGL：着色器与视觉效果。
• Walkthrough：完整设计过程。
• 3D：三维实现与验证。
这部分很重要。
因为专业工作往往存在大量细节，单靠一份 SKILL.md 不可能把所有规范都塞进去。
Anatomy 采用了分层组织的方式，让 Agent 在需要时进一步读取对应的专业资料。
4. Examples：成熟的参考作品
仓库里还提供了多个完整案例。
例如：
• dial-indicator：机械指示仪表。
• desk-computer：桌面电脑。
• arcade-cabinet：街机机柜。
• raptor-engine：火箭发动机。
• ripple-tank：波纹水槽。
这些示例不仅是最终效果展示，还包含完整的实现代码。
Agent 可以先研究最接近当前任务的案例，再复用其中的结构和实现方式。
这比单纯告诉模型一套设计原则更加具体。
5. Scripts：配套执行与验证工具
Anatomy 还提供了一组自动化脚本。
例如：
• 浏览器截图和交互驱动。
• 线条收口检查。
• 几何关系审计。
• 3D 运动与渲染检查。
这意味着它不仅告诉模型怎么设计、怎么实现，还提供了判断作品是否符合规范的工具。
把这五部分放在一起，就能看到一个比较完整的专业能力体系：
SKILL.md 定义方法，Kit 提供工具，References 提供知识，Examples 提供参考，Scripts 负责验证。
这已经远远超出了传统 Prompt 的范畴。
DSH + DeepSeek 运行 Anatomy
在正式使用之前，先说明一个情况：Anatomy 官方目前列出的支持环境中，并没有 DSH。
也就是说，这次并不是使用一个官方已经适配好的方案，顺便测试下 Anatomy 对 DSH 的兼容性。
安装过程比想象中顺利。
我没有研究安装目录，也没有手动下载、复制文件、配置环境，而是直接在 DSH 中告诉 AI：
https://skills.wheresryan.sh/anatomy 帮我安装这个skill
后面的事情就交给 AI 处理了。
实测效果
理论讲得再多，还是要看实际结果。
这次我选择了一台电脑主机的拆解演示作为测试对象。
/anatomy 做一个电脑主机拆解的交互演示
最终效果：一台可以拆解的电脑主机
从斜上方观察机箱内部，左侧板与顶盖采用切口式剖面处理，八组关键部件各自沿开口方向滑出。
它不是一张静态爆炸图，而是一个完整的交互式技术可视化作品。
它可以怎么玩？
| 操作 | 效果 | | --- | --- | | 悬停任一部件 | 对应部件边缘提亮，右下角显示真实参数 | | 点击部件 | 沿开口方向滑出，再次点击装回 | | 空格 | 按真实拆解顺序连续演示 | | 数字键 1–8 | 直接选择对应部件 | | 方向键 ← → | 前后切换部件 | | 点击机箱、工作台或按 Esc | 所有部件装回 |
其中，拆解顺序为：
显卡 → 散热器 → 内存 → 硬盘 → 电源 → 前置风扇 → 后置风扇 → 主板。
同一时间只拆解一组部件，这样能够避免多个部件同时滑出造成画面混乱。
图上都是真实参数
这次并没有把电脑主机简单处理成几个抽象方块，而是尽可能按照真实硬件结构组织。
| 部件 | 真实参数 | | --- | --- | | 显卡 | 268 mm、双槽、1 颗支架螺丝 | | 主板 | ATX，305 × 244 mm，9 个固定铜柱 | | 散热器 | 4 根热管、10 片鳍片、92 mm 风扇 | | 电源 | 750 W 全模组、6 个接口 | | 机箱风扇 | 3 × 120 mm，2 进 1 出 | | 内存 | 4 个 DIMM 插槽，安装 2 条 | | 硬盘 | 3.5 英寸 + 2.5 英寸各一块 |
还有一个细节值得关注：
24 针主板供电线会跟随电源一起移动，另一端则从主板插座上脱开。
画面中能够看到插头随线缆一起离开，而不是简单地把线缆隐藏掉。
这些细节让作品不只是看起来像一台电脑，而是能够表达真实部件之间的结构关系。
结语
这次使用 Anatomy，最让我感兴趣的并不是最终生成了一张多么精细的电脑主机解剖图。
而是它让我重新思考了一个问题：
现有模型的能力其实已经很强了，我们是不是应该更多地思考，如何把这些能力更好地触发出来？
这次实验没有更换模型，依然使用 DeepSeek V4.1 Flash-1017。
但通过接入 Anatomy，模型获得了一套专业的技术可视化工作方法：
• 知道如何理解技术对象。
• 知道如何设计物理隐喻。
• 知道如何拆解零件和规划空间。
• 知道如何构建几何结构和交互。
• 知道如何使用配套工具检查结果。
模型本身没有因为安装 Skill 而发生变化，但它能够完成的任务领域和交付效果却发生了巨大的变化。
或许，就像 Claude 工程主管 Felix Rieseberg 所说的那样：
大家用 AI 的胆子还不够大！
