用 Anatomy 制作互动网页：以激光打印机为例

先玩一次：你的输入就是作品的一部分

在演示页输入“星河”，点击“打印我的内容”。看这两个字怎样先出现在鼓面，再来到纸上。途中可以暂停，也可以拖动时间轴回看。

这段过程包含曝光、显影、转印、定影：激光改变鼓面的电荷，碳粉附着到相应位置，图案转移到纸上，再经热和压力固定。这个例子里，你输入的内容会贯穿整个过程。

曝光后鼓面留下、尚未附着碳粉的电荷图案称为“潜像”。潜像本身不可见，演示中用青色表示。

Anatomy 是交给代码助手使用的一套制作规则和绘图工具。助手读取它后，可以编写带有立体部件、动态过程和操作控件的网页。你负责说明想让人看懂什么、检查结果；助手负责写文件、构建和修正代码。

本课使用的打印机经过多轮修改。下面的指令是根据这次制作整理的复练建议，没有逐条从零重跑；画面和修正案例来自实际作品。你的初稿可能采用不同的外形和布局，检查时要看它能否清楚响应输入、呈现过程和交代结果。

准备一个能让助手工作的文件夹

你需要一个能读写本地文件、运行程序和预览网页的代码助手。本课以本地 Codex 为工作环境；如果你已经会打开项目文件夹、发消息，就可以从这里开始。Anatomy 的官方项目也列出了其他兼容助手，具体入口以各宿主说明为准。

先下载练习包，解压后在助手中打开里面的 anatomy-workshop 文件夹。包内保留了本例使用的 Anatomy 固定版本，供助手按路径读取。

anatomy-workshop/
  anatomy/
    SKILL.md        制作规则
    kit/            绘图工具
    examples/       官方示例与源码
  开始前.txt      打开目录与包内范围说明

这里的 anatomy 文件夹就是技能材料。后面让助手先读 anatomy/SKILL.md，再开始制作；本课采用这条项目内文件路线。

把下面这段发给助手，先确认文件和运行环境可用：

请先读取当前项目的 anatomy/SKILL.md，并按需读取它引用的文件。
我准备使用 Anatomy 做一个本地互动作品。请检查：
1. 是否能读取本项目的 Anatomy 规则、kit 和 examples。
2. 是否有 Node.js 20.10 或更新版本，以及可供你检查网页的 Chrome 或 Chromium。
3. 构建并打开 anatomy/examples 中的 dial-indicator 最小示例，确认网页能显示。
把新作品放在当前目录的 my-printer 文件夹中。现在先完成上述检查，告诉我实际打开了哪个文件、是否有错误。

准备完成的标志，是助手给出了可打开的示例，并且你能看见仪表和滑台。Node.js 用于构建网页，浏览器用于查看和检查。练习包已经在空目录中完成过构建与浏览器打开检查；你本机的工具是否齐备，仍由这一步确认。

如果找不到 SKILL.md，先检查打开的是否为 anatomy-workshop 文件夹。把实际文件位置告诉助手，再让它重试读取。如果缺少 Node 或浏览器，让助手说明缺少哪项并给出适合你系统的准备方法，补齐后重复这一步。出现明确的权限拒绝时，保留错误，通过宿主支持的方式处理。

先说明它怎么工作，再让助手画

“画一台打印机”只说了外形。互动作品还需要说明：读者能做什么，哪些部件会因此变化，最后怎样看出结果。

先把本例的要求写成一条可以跟随的过程：输入文字或画图，激光在鼓面留下电荷图案，碳粉附着，鼓把图案交给纸张，定影辊固定碳粉，最后纸上出现刚输入的内容。这样的要求能帮助助手把动作、画面和解释接起来。

请使用当前项目中的 anatomy/SKILL.md，为我制作一台原创的单色激光打印机互动作品，保存在 my-printer 中。
读者可以输入1至4个字，也可以手绘小图案。点击打印后，同一份输入点阵依次经过曝光、显影、转印、定影，最终出现在纸上。
请先读官方资料核对基本原理，用简短文字说明部件、过程和教学简化，然后继续做一个能在浏览器中操作的第一版。
具体要求：
- 采用 Anatomy 的等角剖面与部件绘制方式，让人能辨认感光鼓、显影部件、纸路、转印位置和定影辊。
- 所有阶段共用同一份输入点阵和过程状态；纸上图案对应本次输入。
- 允许播放、暂停和回看。输入、播放入口、当前讲解和最终结果要容易找到。
- 同一时刻可以有不同的行处在不同工序，讲解要与实际运动相符。
- 明确标注潜像颜色、激光颜色、放大或放慢等教学示意。
- 先做清楚可用的浅色版，并考虑手机窄屏。先交付可操作版本，再继续补细节。
请由你运行构建、打开网页并检查错误，给我可打开的本地预览入口。只制作本地作品。

你可以让助手先交付能操作的第一版，尽早看画面。若它只回复了方案，就继续要求它把方案做成可打开的网页。若它已经给出文件和预览入口，打开查看，再决定具体改什么。

这里有一个会影响解释的要求：各阶段共用同一份输入和过程状态。否则，界面可能显示正在转印，纸上的图案却已经完整出现；读者很难从画面理解各步骤的关系。实现方式由助手处理，你可以通过回看过程判断是否对得上。

打开初稿，跟着自己的内容看一遍

先输入容易辨认的两个字。播放时沿着这份内容看，不急着逐个检查所有螺丝。

1. 看输入。 换字以后，输入预览是否跟着变？如果支持手绘，画一个不对称的小图案，再看输出有没有方向错误或缺失。
2. 看过程。 曝光时应能分清电荷图案与碳粉；显影时看鼓面；转印时看鼓与纸的交接位置；定影后再看纸面结果。画面里的示意颜色需要有说明。
3. 看操作。 你能否在看机器时找到暂停？暂停后能否回看关键位置？窄屏下，文字、按钮和机器是否相互遮挡？

本例把输入处理成 96×48 的点阵，并按整行更新。它展示打印过程的关系，潜像的青色和激光颜色都是教学示意。这些简化应该在作品里说清楚，避免让读者误以为真实鼓面会显示彩色潜像。

遇到问题时，反馈里保留操作、现象和影响。例如：“输入星河，播放到显影阶段后暂停；鼓面前面的辊筒挡住了图案，我无法判断碳粉是否已经附着。”附上这一位置的截图，助手就有了可以定位的对象。

如果网页没有打开，先把实际错误交给助手处理，让它核对文件路径、构建结果和预览入口。等到页面能运行，再检查画面。助手报告检查通过以后，你仍需要按自己的输入看一遍过程。

用一处真实遮挡，练习怎样提修改意见

本例曾出现上面提到的遮挡：在“星河”运行到 7.5 秒时，模型中已有碳粉，近侧的辊筒和支承却挡住了鼓面。这时需要先解决观察位置。

看下面的鼓面局部。修正前，绿色鼓面前方的深色辊筒遮住了碳粉所在区域；修正后，近侧部件在相关工序中淡出，鼓面下沿可以看到黑色图案。两张图来自同一输入和同一时刻的不同版本，页面布局也经过调整，这里比较的是可见性。

修正前

修正后

这次修正保留了机器原来的几何和层次关系，让近侧部件按工序淡出，并补充说明这是用于观察的教学剖面。若直接把图案强行画到所有部件上方，它可能看起来悬浮在机器外，接触关系也会变得含糊。

你遇到相似问题时，可以这样要求助手继续修改：

请检查当前初稿的显影过程。我需要看清输入图案在鼓面上形成碳粉图案，但近侧辊筒或支承可能挡住它。
请在显影阶段暂停并检查实际画面，定位遮挡来源。保留原来的模型、纸鼓时序和机器几何，用清楚标注的教学剖面、局部淡出或合适视角暴露鼓面。
修改后，请给出能观察鼓面图案的预览，并回放到转印和出纸，检查这次调整有没有遮住纸面结果或破坏其他阶段。若你检查后没有发现这处问题，请说明实际观察，不必照搬修改。

再看一次修正后的画面：原来被挡住的区域是否露出来了？零件之间的位置还说得通吗？继续播放到转印和出纸，确认改动没有把后面的观察挡住。

官方的可输入电脑示例也能提供一个检查角度：按下键以后，屏幕会回应刚才的输入。把这种观察用在自己的作品上，追问每次操作是否带来了清楚、有关联的变化。等过程能看懂以后，再放大检查接缝、线端、阴影和部件细节。

留下能再打开、能继续改的成品

当你已经能跟着输入看完过程，最后让助手整理交付。独立 HTML 用于打开和分享体验，源码用于继续修改和重新生成。打印完成后会出现“保存这张结果 PNG”按钮，用它保存的是一张图片。

请把当前通过检查的版本整理到 my-printer/delivery。
交付一个可独立打开的 HTML，并保留继续修改所需的完整源码、Anatomy 依赖及许可说明。写一份简短使用说明，告诉我打开哪个文件、怎样修改后重新构建。
请由你检查：在新目录中按说明能否重建；使用离线浏览器检查 HTML 能否显示并运行；更换文字或手绘输入以后，过程和最终结果是否对应；播放、暂停、重播和窄屏操作是否正常。
把实际完成和未完成的检查分别说明，给我最终 HTML 和源码目录的明确位置。

拿到文件后，离开原预览入口，重新打开交付的 HTML，换一份输入，再播放一次。若图案或样式消失，把这个文件和现象交回助手，请它检查是否还有没有打包进去的依赖。若要继续修改，沿用源码目录，让助手修改、重建并再次检查。

参考包是这台打印机经过多轮修改的本地版本，供你查看实现或继续改动。包内源码已在空目录重建，并完成“星河”的实际播放检查。演示页顶部保留了制作时的“待视觉核验版本 · 暂不替代正式成品”状态条，这份演示仍作为本地候选提供。真实手机触控和读屏语音尚未验收。

换成你自己的题目时，可以先找一件容易观察输入与结果的对象：例如转动旋钮时读数随之变化，或移动滑台时指针指出对应刻度。把这一次输入会改变什么、怎样看到结果说明白，再让助手开始画。