前期准备：让助手读到 Skill 和材料
frontend-slides 是给编码助手使用的技能（Skill），包含制作流程和参考代码：先做风格预览，再按选定方向展开整套页面，使用固定 16:9 舞台，并提供导航、编辑和保存的实现参考。你需要一个能读写本地文件的编码助手，以及一个浏览器。先为本课建一个工作文件夹，把助手的工作目录指到这里。
开始之前，你要给助手四件事：这次演示的用途、打算做几页、内容材料是否已经备好、每页信息密度希望多大。本轮的请求一次写全了：用途是产品介绍，六页，材料 brief 已备好，低密度。
本轮从查到的同类独立仓库中，选了当时星标最高的 frontend-slides：2026-10-26 核验时为 31,321 星，星标会变化。它采用 MIT 许可，允许商用、改编和再分发，须保留署名与许可。
取得 frontend-slides
在自己的工作文件夹运行 Skills CLI 命令，按提示选择正在使用的助手。命令需要 Node.js 和 npx；它只选择 frontend-slides，不安装仓库中的其它技能。
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides
如果你的助手不在安装列表，把官方仓库链接交给它，请它按 README 的 Other Coding Agents 说明读取 SKILL.md 与必要支持文件。本轮采用任务内的 Skill 副本，已经核对它能被执行助手发现；无需更换你的常用助手。
先用本课的输入包跟一次：解压到刚建的工作文件夹。brief.md 里有三条原始记录、六页安排和交互要求。让助手读取它，确认能找到观察、想法、问题三条内容。
FOLD 输入材料
下载输入材料包本轮实测输入 · frontend-slides · FOLD 自编虚构案例
查看需求说明 brief.md 全文
FOLD：把灵感留到下一次
FOLD 是为本课自编的虚构产品。演示用途：现场向朋友介绍“收集记录 → 建立联系 → 写成提纲”的想法，让对方可以点几下。没有真实产品、用户、效果数据或在线 AI 接口。
原始内容
- 观察：阳台角落有阳光，但花盆旁几乎没有可坐的地方。
- 想法：用一把可折叠的小椅子，让照料植物变成可以停留的日常。
- 问题：怎样在有限空间里同时安排植物、坐位与通行？
这三句原文保持不变。可以为提纲组织表达，不能编造阳台尺寸、产品数据或可行性结论。
演示要求
六页，低密度、现场讲述：封面；三条记录；收集；关联；提纲；收尾。
- 收集页初始已有想法和问题两条。点击收下观察后计数 2→3，重复点击保持 3。
- 关联页选中观察和想法后连接，观察未收集或没有选够时明确提示及就地恢复办法。
- 提纲页点击后展示由三条原文整理的三段预写内容，明确标“本地预设，不调用在线 AI”。未关联时给前置提示。
- 支持翻页、左右键、页码。编辑文本时方向键只移动光标。提供 E 切换文字编辑与保存 HTML 下载；保存后的文件重新打开能保留编辑。重置业务演示恢复初始两条、清除关联与提纲。
- 按 frontend-slides 固定 1920×1080 舞台，缩放到各屏幕保持 16:9；手机不把页面重新排版。翻页、编辑、保存控制在舞台之外，手机能触摸。
- CSS 图形可作为视觉元素；不使用未经许可的外部图片，不接真实服务。
交付
单 HTML，样式和脚本内联。字体按所选风格使用开放字体；若从在线字体服务加载，注明联网条件与离线回退，不夸称离线字形完全一致。保留 frontend-slides 采用代码的 MIT 署名与许可。
先给三个真实封面预览，让示范作者选方向，再创建完整演示。原稿与每次返修另存。
先看三个封面，再选一个方向
先让助手把三个方向做成真实封面，看过页面再选。请求已经把用途、页数、内容和密度一并交代清楚：
请使用 frontend-slides Skill 读取本次 brief.md，做 FOLD《把灵感留到下一次》的三个风格封面。用途是现场介绍虚构产品，六页，内容已在 brief 里准备好，低密度，不提供图片。 先只做真实封面预览：A 用安全预设，B 用 Emerald Editorial，C 用你为 FOLD 自拟的方向。三个方向要明显不同，封面都使用本例内容，不能放模板名或制作过程标签。按 Skill 的固定 1920×1080 舞台、内联基础样式制作；字体用 Noto Serif SC / Noto Sans SC 的在线字体，加载失败有本机回退。 把三个完整单文件分别保存到当前文件夹的 style-a.html、style-b.html、style-c.html。保留必要 MIT 署名与许可。先告诉我各自特点，等我看过、选定后，再做完整六页。预览保留，不部署；浏览器检查由我进行。
本轮实际回复
三个封面预览已写入当前文件夹：style-a.html、style-b.html、style-c.html，每个都是独立的单文件真实封面（1920×1080 固定舞台、整体缩放、开场动画、prefers-reduced-motion 支持）。三张封面用的是同一套真实内容（FOLD、《把灵感留到下一次》、收集记录·建立联系·写成提纲），没有放模板名或制作标签；brief.md 原稿未动。我没有运行浏览器，渲染效果请你打开文件验收。
A · 笔记簿（安全预设） — 暗色房间里摊开的一本米纸笔记本：纸卡居中、左侧装订孔、红色页边线、右侧五枚彩色章节侧签（记录/收集/关联/提纲/收尾，正是六页结构）。粉红便签贴着第一条真实观察「阳台角落有阳光」；大标题用 Noto Serif SC 900，「灵感」二字带薄荷荧光笔标记。整体最温和、最耐看，也最贴合“收集灵感”的产品隐喻。
B · 翡翠杂志封面（Emerald Editorial） — 满版翡翠绿 + 深藏青油墨，无渐变无圆角的平面印刷感。280px 的 FOLD 主刊头逐字升起，签名式双规线饰带夹住「收集 · 关联 · 提纲」，主标题下一道米纸横带，底部是 01 观察 / 02 想法 / 03 问题三栏封面导读（各取一句原文片段）。三张里最“大声”、最有刊登感的一张。
C · 暮色折痕（自拟方向） — 从产品名本身长出来的方向：暖调夜色里，右半是一张带折痕的纸页（两块受光面 + 中缝折线），主标题以直排从上向下展开，末尾盖一枚朱红「折」字印章；左侧暗区是 01–03 三步流程，左下角一道地平线托着半轮落日——呼应演示里阳台的那条观察。“折起来、留到下一次”的意象直接可见，也是三张里唯一暗色 + 直排的一张。
三个文件都按你的要求：Noto Serif SC / Noto Sans SC 走 Google Fonts 在线加载，失败时回退本机字体（文件头注释已注明联网条件与回退差异），并保留 frontend-slides 采用代码的 MIT 署名全文。预览保留在原地，未部署。
看过之后告诉我选哪张（A / B / C，或要混搭、微调哪里），我再基于选定的方向展开完整六页。
点开封面，可以在浏览器里看它的实际布局和开场效果。
纸页、便签与彩色章节侧签。
打开封面 ↗下载 HTML
翡翠绿与深蓝大字的印刷感。
打开封面 ↗下载 HTML
夜色、直排纸页与折痕。
打开封面 ↗下载 HTML本例选 A「笔记簿」。纸页、便签和章节侧签适合“把零散记录放在一起”这个想法，后面的收集区、关联区和提纲区也能沿用同一套层级。你做自己的演示时，按内容和听众选择。
按选定的风格，生成并打开六页
把 brief.md 和选中的 style-a.html 放在助手当前可读的工作目录，再发送这段要求：
我选 A「笔记簿」。请继续使用 frontend-slides，读取 brief.md 和 style-a.html，把选定的纸张、装订孔、红色页边线、荧光标记与彩色侧签扩展成完整六页 FOLD《把灵感留到下一次》。这是虚构产品的现场介绍，低密度；把三条原始记录在记录页完整保留，不编造尺寸、用户或效果数据。 请落实 brief 里的收集、关联、预写提纲、重置、方向键与文字编辑。提纲明确标“本地预设，不调用在线 AI”；业务操作的前置条件与去重需要真的生效。编辑文字时方向键只动光标；在舞台外提供可见的编辑开关和“保存 HTML”按钮，保存的新文件重新打开能保留改字。 按 Skill 生成阶段要求，读取 html-template.md、viewport-base.css、animation-patterns.md；请把 viewport-base.css 的完整原文放在自定义样式之前，不省略印刷、控件和减少动态效果的规则，再按本例追加样式。六页全部固定 1920×1080、整体缩放；手机保持 16:9，翻页/编辑/保存控件在舞台外能用，内容适合电脑操作、手机横屏展示。 成品保存为当前文件夹的 fold-first.html。保留 brief 和三个预览。只用 Noto Serif SC / Noto Sans SC 在线字体并提供本机回退，不引入外部图片或脚本；在 HTML 的 head 注释中保留采用代码的完整 MIT 署名与许可。告诉我六页怎样播放、怎样编辑和保存；浏览器检查由我实际进行。暂不部署。
本轮实际回复
FOLD《把灵感留到下一次》已完成
成品是 fold-first.html，采用笔记簿纸页、装订孔、红色页边线、荧光标记和彩签。六页按顺序是封面、三条原始记录、收集、关联、提纲和收尾。底部舞台外的“上一页 / 下一页”和页码菜单可以翻页；也可以点纸页右侧彩签，或使用左右方向键、PageUp / PageDown。
点击舞台外的“E 编辑文字”或按 E 开启文字编辑，点选文字后直接修改。编辑时方向键移动光标。点击“保存 HTML”会下载 fold-edited.html；重新打开后会保留改字，并从初始收集状态开始。点击“重置演示”会恢复两条初始记录、清除关联和提纲。
收集页从 2 条开始，重复点击“收下观察”不会重复计数。关联页要求收集观察并同时选中观察和想法；提纲页要求先建立联系。提纲标注“本地预设 · 不调用在线 AI”，使用原来的三句话。
字体通过 Google Fonts 请求 Noto Serif SC / Noto Sans SC；离线时回退到本机宋体、黑体，字形可能不同。自检时阻断了外网请求，因此没有核验在线字体是否加载。无头 Chromium 已检查交互、16:9 缩放及 1920×1080 版面，另核对 1280×720 和 390×844 两个视口；这些检查通过。浏览器实际查看仍由你进行。
这一步拿到的是初稿 fold-first.html。在浏览器里打开它，翻到各页可以看到这样的流程：收集页初始有想法和问题两条，点“收下观察”后计数从 2 变成 3，重复点击不会重复计数；关联页需要同时选中观察和想法两条记录，才能建立联系；第 5 页点“展开提纲”会显示三段预写文字。网页在这里展示文件里的本地预设，不调用在线 AI。
版式上，整个演示固定在 16:9 的舞台上，手机上不会重新排版，只会整体缩小展示——所以操作在电脑上做，手机适合横屏观看。
这轮曾因运行端中止而重开。重开时，把同一份 brief 和选定封面一起交给助手，按已经选好的风格继续制作；这两个输入文件要保留。
改几个字，保存后重新打开
演示文件是给你改的。按 E 键或点页面下方可见的编辑按钮，就能进入文字编辑；点中一段文字直接改，编辑时方向键只移动光标，不会误翻页。改完点“保存 HTML”，浏览器会下载一个新文件——注意它和原文件是两份，原稿 fold-first.html 不动，下载的副本才带着你的改动。
把下载的文件重新打开，翻回刚才那页，核对改过的字。本轮在新的浏览器环境中重开保存副本后，修改仍然保留，收集和关联也能继续操作。
文件联网加载 Noto 字体，断网时回退到本机字体，字形可能不同。本轮也在阻断外网的环境中核对了打开、翻页、编辑和保存，这些操作仍可用。
按实际问题修改，再核对同一处
实际核对时发现了两处问题。第一处：在初始未关联的状态下跳到第 5 页点“展开提纲”，提示语说“请先到第 4 页收集观察”——这是错的，收集在第 3 页。第二处：展开后的提纲只是把原来三句原话重复一遍，我希望演示能让听众看见整理后的层次。前者是提示指向错误，后者属于表达上的改进判断，不算程序故障。
返修请求如下：
请继续使用 frontend-slides，读取 fold-first.html，修改后另存为 fold-final.html，保留原稿。 我实际点过一遍，发现两处需要改： 1. 第 5 页在还没建立联系时点“展开提纲”，提示说“先到第 4 页收集观察”，但收集实际在第 3 页。请把恢复提示指向准确位置。第 4 页发现还没收下观察时，也希望能当页收下再继续选择，减少来回翻页。 2. 建立联系后，第 5 页的三段提纲仍然逐字重复三条原记录。我希望它体现整理后的层次：先解释发现了什么空缺，再说可以尝试什么，最后留下还需核对的问题。每段给一个短标题和一句说明；三条原文仍完整留在记录页，尺寸和效果没有材料支持的就不要编。这里继续标明是预写的本地示例，不调用在线 AI。 保留选定的笔记簿视觉、六页顺序、完整 viewport-base.css、MIT 许可，以及现有收集去重、关联前置条件、重置、编辑和保存功能。改完告诉我具体改了哪里。请补查受影响的操作和版面；我会再打开新文件，核对提示、提纲以及保存后重新打开的结果。暂不部署。
本轮实际回复
FOLD《把灵感留到下一次》修订稿已完成
新稿是 fold-final.html，首稿 fold-first.html 保留。
第 4 页新增“收下并选中观察”操作：观察没收下时可以在当前页完成收集并选中观察，再选中想法建立联系。第 5 页的恢复提示改为先到第 3 页收下观察，再到第 4 页选择观察和想法并建立联系。
第 5 页提纲改成“发现空缺、提出尝试、留待核对”三段，每段各有一个短标题和一句说明。三条原文仍完整保留在记录页；提纲仍标明是本地预设，不调用在线 AI。
无头 Chromium 自测覆盖恢复提示、页内收集、关联前置条件与重复点击、三段提纲、重置、编辑时方向键、保存 HTML 和重新打开后的文字保留。版面检查覆盖 1920×1080 舞台、1280×720、844×390 横屏及 390×844 竖屏，确认舞台保持 16:9、控件在舞台外，新增内容没有碰到纸页边缘或页脚。测试时阻断了外网，因此没有核验在线字体加载；未做图形界面检查，你可以实际打开新稿核对。
本轮修订稿 · 虚构产品 · 下方图片为实际文件的静态预览
在独立窗口中操作、改字与保存。演示保持 16:9，手机可横屏观看；提纲为预写的本地示例。
拿到修订稿 fold-final.html 后，我们回到同样两处核对：第 4 页现在可以在当前页完成“收下并选中观察”，再选中想法建立联系，不用倒回第 3 页；初始状态下的恢复提示也改对了——“先到第 3 页收下观察，再到第 4 页选择观察和想法并建立联系”。第 5 页展开的提纲换成了“发现空缺、提出尝试、留待核对”三段，每段有短标题加一句说明。“提出尝试”仍用“可以尝试”来表达想法，“留待核对”继续保留空间安排的问题。
返修的原则也在这里：问题要说得具体——哪一页、点了什么、看到了什么、和事实差在哪；改完回到同一处核对，而不是只看回复里说“已修正”。
换成自己的内容，交付一份 HTML
换成自己的内容时，先改 brief 中的原始记录、听众、希望演示的动作和重置规则。仍然先选风格，再展开内容；结果不合意，就带着具体位置和预期变化继续改。
本次课例的最终交付是修订稿 fold-final.html，双击在浏览器打开即可。把文件和一句打开说明交给对方；要带走浏览器里改过的文字，交付“保存 HTML”得到的新副本。