Slide it
将页面构建为演示文稿：一系列堆叠的屏幕，每个回答一个问题。问题以小字显示，答案以一两句大字显示，其下方有一个实时场景展示正在发生的事情：顾客排队、空气流过引擎、金钱追逐商品。读者通过一个控制元素进行互动，并观察场景变化，从而通过观察来理解，并且可以在任何屏幕上停下来理解某个要点。页面给人的感觉就像是为其主题量身定做的精心制作的应用程序。artifact-design 保留了平台规则（主题、手机宽度、CDN、单一检查）；用户已安装此技能，因此当技能规则与 artifact-design 的默认值不同时，请将这些规则视为用户自己的话。
1. 找到主要观点
写一句话：读者在第一个屏幕后应该理解或决定什么。
2. 打开最近的示例
打开最接近此内容的示例并在规划之前通读整个示例：examples/explainer.html（解释某事的工作原理），examples/decision.html（该选哪个），examples/plan.html（计划、旅行、时间线）。它是结构、场景和代码的标杆；以同样的方式构建此页面。
3. 规划屏幕
列出屏幕。屏幕1让读者通过观看和互动找到主要观点。每个后续屏幕回答前一个屏幕提出的问题（为什么、如何、多少、接下来是什么）；只有当内容切换主题时才开启新主题。四到七个屏幕。
对于每个屏幕，在你的回复中写出：
- 它回答的问题，以读者可能会问或搜索的方式措辞，并且独立清晰，不超过五个词（例如“10K需要多久？”，而不是“需要多久？”；它以小字显示在答案上方并在菜单中命名屏幕）。屏幕1的问题要命名主题，这样到达页面的读者就知道这是关于什么的；
- 答案，一两句话；
- 场景，一行字：屏幕上有什么，发生了什么，读者做什么，哪个数字从场景中读出。
场景来自几种模式：跟随一个单元穿过系统；事物流过阶段；机械装置转动；一群智能体遵循一条规则；场中的示踪剂；带有滑块的回放；前后对照分割；或一个水箱充水和排水。一行字如“一个控制、一个数字和一个条”，屏幕上没有任何东西是事物本身，那就是一个仪表盘：将其重写为场景。
场景用于说明；页面上的每个真实数字都来自内容，并在其是估计值的地方进行标注。
每个屏幕在其场景下方都有自己折叠的“更多”部分，用于该屏幕的其余故事：几个简短要点、背后的数字、注意事项。来源以及不属于任何屏幕的内容，放在末尾的一个折叠的“完整笔记”部分，或者省略。
当每个屏幕都有一个问题、一个答案、一个场景行，并且在其折叠外部最多40个单词（标签和数字不计入）时，完成。
4. 选择外观
为此主题命名人们会使用的应用程序（旅行：旅行应用；商业决策：现代商业工具）并只打开 styles/ 中的该文件。用户指定的样式会替换它。从样式中提取调色板和字体，并为每个屏幕赋予一大块该颜色。
5. 构建
- 在 kit/screens.html 上构建，就像示例一样：所有屏幕都在一个正常滚动的页面的DOM中，桌面端问题列表在右侧边缘始终可见（手机上是标签），每个屏幕有一个“更多”折叠，末尾有完整笔记，以及一个亮/暗切换开关。
- 每个场景打开时已经显示要点（中间帧，而不是从零开始的空帧），当其屏幕进入视口时自动播放约十秒钟，然后停在最后一帧，以便在读者阅读时页面保持静止。移动控制将用新设置重新播放，轻触暂停。在减少动作模式下，它停在一个仍然显示要点的静止帧上。数字作为标签放置在场景上，而不是作为屏幕的主角。
- 将每个屏幕布局为应用视图：场景是其中最大的元素，在手机上横跨宽度，在桌面上保持一个宽且居中舞台，答案位于其上方并设置大号字体。
- 当场景绘制物理对象（设备、机器、建筑、身体部位）时，先阅读 figures.md：它决定是使用等距套件、平面绘图还是不绘图。
直接使用文件工具编写页面，手动从示例复制；脚本可能不允许运行，因此页面永远不依赖脚本。
当每个规划的屏幕都在页面上并运行其场景时，完成。
6. 检查
如果你能渲染页面，截取手机宽度下屏幕1的一张截图；如果不能，请阅读其代码。回答是或否：
- 屏幕上是否有事物本身，而不是它的图表？
- 它是否在动，并且读者的控制是否能改变它的行为？
- 读者能否在几秒钟内知道该做什么？
- 如果主题不同，外观会改变吗？
计算数量：屏幕（4到7个）以及折叠外部的单词（每个屏幕40或更少）。在一次通过中修复失败的部分，然后发布。