一、选一个适合动手看的问题
先找可见的变化 Anatomy是给编程助手使用的开源Skill，提供绘图组件和交互案例，也配有检查工具，帮助助手制作支持点击、拆解和调参的网页。选题时，先问一句：读者操作后，应该看见什么变化？投币后硬币的路径、发动机拆开后的结构，都适合做成交互图。水波频率改变后的现象也适合。
把范围缩到一次操作 第一次做，建议只讲清一个过程。比如“打开一张本地照片”，就比“讲解整台电脑”容易实现。先写清给谁看、要解释什么，再确定允许操作哪里。然后浏览项目案例，判断自己更需要分步播放、部件拆装，还是参数调节。街机案例适合参考动作与信号的衔接，发动机案例适合参考结构展示。
二、装好工具，把需求写具体
按助手选择安装方式 项目地址是github.com/wheresryan2… Code、Codex等工具的安装说明，按自己使用的助手选择对应方法。Anatomy采用MIT开源许可，运行其绘图工具不需要另外申请API密钥。生成和修改代码的费用，则取决于编程助手与模型；接本地模型还要看助手兼容性和模型的代码能力。
直接套用这段需求 可以这样写：“制作一个打开照片的交互网页，面向没学过计算机原理的人。假设照片来自本地SSD，格式为JPEG，尚未缓存，由CPU解码。分步展示SSD和内存的作用，再展示CPU和屏幕的作用，每一步都能暂停。左侧高亮当前部件，右侧解释数据状态。”把条件和布局写清楚，也说明允许哪些操作，助手才有明确的实现目标。
三、先把流程讲通，再补零件
用四种状态搭骨架 照片演示可以沿着数据变化组织。从SSD上的JPEG文件开始，到读入内存的压缩数据，再到解码后的像素，最后是屏幕上的画面。点击照片后，看图软件向操作系统请求读取文件，SSD读出数据，原文件仍留在盘上。数据进入内存后，CPU执行解码程序，算出像素颜色。随后软件和图形系统处理窗口显示、缩放与合成，再由显示系统呈现。
每一步只突出一个重点 先让“下一步”和暂停功能跑通，再补内存插槽和芯片接口，以及固定件等细节。画面上同步回答两个问题：哪个部件在工作，数据变成了什么。可以用大块像素展示解码结果，方便读者观察，但要说明这是教学简化。动画被刻意放慢，播放时长不能当作电脑的真实处理时间。
四、把画面检查和原理审核分开
先查图有没有画对 Anatomy提供外壳和圆柱等组件，也有管道和螺丝可用。透视与明暗的处理、前后遮挡都有规则，便于保持统一画风。成品出来后，重点检查零件是否穿插、前后遮挡是否合理，再看线路端点是否接好。还要实际点击和拖动，检查旋钮变化是否带动参数。试着拆装，看目标结构是否露出，并核对高亮是否对应当前讲解。
再查解释是否成立 图画得精细，不等于原理准确。发动机的结构和工作参数需要另查资料，示意图不能替代工程验证。电脑演示也要保留适用条件。实际读写与处理可能交叠，部分软件会用硬件解码。再次打开可能命中缓存，部分图形芯片与CPU共享内存。先讲清选定情形，再补充这些差异。
五、用读者测试决定是否交付
按三件事验收 找一个不了解主题的人试用，先看对方能否找到操作入口，再请对方说清每一步的变化，并解释最终结果从哪里来。如果对方只记住动画漂亮，却说不出SSD、内存和CPU各做了什么，就该调整步骤和说明。需求里约定的暂停和部件高亮要逐项核对，数据解释也不能漏。
给修改留出时间 Anatomy提供组件和案例，也提供检查方法，减少从零搭建的工作量。成品仍是可修改的网页，文字和步骤可以继续调整，零件位置也能修改，通常需要几轮打磨。做好的纯前端页面在打开播放时，通常无需再调用大模型。确认流程准确、操作清楚后，就可以用于教学文章或技术文档，也可以放在产品介绍页。
