web-slides

# Web Slides 把一堆素材 / 提纲 / 要点，一步步做成可现场放映的「电影感 HTML 幻灯片」。 产出物 = Vite + React + TS 项目，点击 / 方向键推进，每一步独占整屏，按 P 开独立的演讲者窗口看口播稿（实时预览 + 计时器，两窗联动；投屏只共享主 slide 窗口即可对观众隐藏），按 N 是排练用的备注浮层。 **与 [`web-video-presentation`] 的区别**：那个 Skill 做的是「伪装成视频的网 页」——有口播稿、合成音频、录屏成片。**本 Skill 只做现场放映的 slides**： 没有口播稿、没有音频、没有录屏；每一步的文字变成**演讲备注（presenter notes）**，给演讲者提词用，不会出现在画面上。其余的视觉方法论、主题系统、 逐步揭示原则**完全保留**。 ## 适用场景 - 「我有一些素材 / 提纲，帮我做成 slides / 演示文稿」 - 技术分享 / keynote / 产品演示 / pitch deck / 教学课件 - **面试项目复盘（project retro）** —— 现场对着 slides 讲，按 P 开演讲者窗口看提词 - 想要 16:9 横屏、大字、留白、每屏都有动效的「动态 PPT 但不像 PPT」 - 把一篇文章 / 一份笔记变成可交互的逐步讲解 本 Skill **以方法论 + 协作流程为核心**。脚手架模板提供 token 和原语， 但每个美学决策（配色、字型、动效气质）都应该针对你的主题重新设计 —— 不要照搬。 --- ## 两种密度 profile：视频式 / 演示 deck 式 同一套引擎能跑两种节奏，**Phase 1 就先定一个**（写进 `outline.md` 顶部， Checkpoint Plan 跟用户确认）： | | 🎬 视频式（默认 / 稀疏） | 🎤 演示 deck 式（有限页 / 高密度） | |---|---|---| | 场景 | 录屏讲解、不停讲、节拍多 | 现场 / 投屏演讲、页数有限、围着一页讲（面试复盘常用） | | 一张幻灯片 | = 一个 step（整屏接管） | **= 一个 chapter**（一页稳定的密集画面） | | step 语义 | 切到下一个想法（换场景） | **同一张 slide 上逐步 build**（元素留屏渐显，不换场景） | | 一屏信息 | 1 hero + 1~3 元素 + 大留白 | 图 / 表 / 示意 + 几条要点 + 数据可同屏 | | 规模 | 很多章 × 少步 | 较少章（≈ 目标页数）× 每章 2~5 build | | 主题 | 任意 | 优先结构 / 编辑型（newsroom / monochrome-print / blueprint / swiss-ikb / vintage-editorial） | **两种都不改引擎**（chapter/step、16:9 舞台、token、MaskReveal 全通用）， 差异只在**章节怎么写**。deck 式放开"一屏一想法 / 大留白 / 全 hero"，但 **「避免 AI 味」+ token + 真实层级 + 必须有视觉演示 + 双源**这套照旧 —— 那才是"不难看"的根。每章具体写法见 [`CHAPTER-CRAFT.md`](references/CHAPTER-CRAFT.md)「两种密度 profile」。 > 不确定 → 🎬 视频式。 -...