CS 网页幻灯片

将内容做成浏览器内运行的高质量演示：有明确设计方向、连贯动效、键盘与触控导航，以及可分享的网页交付物。目标不是把文稿机械放进卡片，而是让每一页都为叙事服务。

交付边界

• 默认交付一个离线可运行的网页演示目录：index.html 与相对路径 assets/；小型无图片 deck 可交付单文件 HTML。
• 页面采用固定 1920×1080 的 16:9 舞台，整体等比缩放以适应任意屏幕。允许留黑边，不在手机上重排幻灯片内容。
• 默认支持方向键、空格、Home/End、点击左右区域、触控滑动、进度与页码；除非用户要求锁定文件，否则提供浏览器内文字编辑与下载修改版本。
• 默认不部署、不公开分享、不上传品牌资产。仅当用户明确请求后才进行托管、导出或外部发布。
• 需要静态 PNG 小黄课件图时转用 cs-xiaohuang-skill；需要可编辑 PPTX 文件而非网页交付时，使用专门的演示文稿工作流。

先读什么

按任务读取最少的参考资料：

• 新建、补强或改版网页 deck：读取 references/design-discovery.md 和 references/implementation.md，并以 assets/web-slide-starter.html 为功能底座。
• 知识课程、方法论或教学型 deck：先读取 references/style-index.md，再只读取入选的风格说明。默认预览池为 笔记手帐、杂志静奢、果冻多巴胺。
• 转换 PPTX：先运行 scripts/extract-pptx.ps1，再读取 references/pptx-conversion.md。
• 最终检查与交付：读取 references/quality-checklist.md。

工作方式

1. 判断模式与输入

区分三种模式：

1. 新建：用户给主题、笔记、文章、讲稿、产品资料或简报。
2. 转换：用户给 PPT/PPTX，目标是重新设计为网页，而不是逐像素复刻。
3. 增强：用户给已有 HTML 演示，需要补内容、改视觉、修复适配或加入互动。

提取目标、受众、场景、内容密度、语言、页数、品牌资产与交付用途。已有信息足够时直接继续；缺少会改变演示结构的信息时，一次性问清。现场演讲默认低密度，异步阅读默认高密度。

2. 用视觉而不是术语确定审美

先理解用户的审美线索：喜欢与讨厌的作品、品牌、色彩、字体、气质、场地和受众反应。不要把“选设计风格”变成抽象问卷。

默认做 3 个真实首屏预览，保存到工作目录的 .cs-web-slides/style-previews/。知识课程从风格索引的默认预览池中选取；若主题、受众或品牌需要，可替换其中一个方向：

• 一条稳妥、可读的方向；
• 一条更具记忆点的方向；
• 一条基于内容的大胆定制方向。

三个预览必须都是该演示真实的封面页，包含用户主题或品牌，不能在画面中出现“方案 A”“预览”“模板”等内部标签。打开或展示预览供用户选择；若用户已经指定了清晰风格，可将其作为一个方向，但仍保留有意义的对比。

用户选择后，保持所选方向的字体、网格、调色、装饰语言与运动节奏贯穿全套，不要在中途退回通用卡片式设计。

一套 deck 只能有一个主风格。用户要求混搭时，只允许借用另一个风格的一项明确元素（例如字体、数据图形或动效），并在动工前说明主从关系。

3. 建立叙事，再生成页面

• 先写简洁的 slide outline；一页只有一个主要判断或动作。
• 现场演讲使用更少文字、更强节奏与更多留白；阅读型 deck 使用更完整的解释、清晰图表和可扫读结构。
• 图片、截图和 logo 是内容的一部分，应从大纲阶段就参与版式，而不是最后塞进空白区域。
• 有品牌资产时，保留原始文件并以相对路径放入 assets/；不要用重新生成的图替换 logo、产品截图、人物照片或用户明确指定保留的图片。

4. 实现互动与动效

从 starter 中保留固定舞台、缩放、导航、无障碍和降低动态效果支持，再替换内容与视觉系统。每页只使用服务于信息层级的动效：进入、强调、转场和可选的 hover/cursor 反馈。

不可使用 display: none 控制 slide 切换；使用 .active 与 opacity / visibility / pointer-events，避免后续布局样式让所有页面同时可见。所有动效都要遵守 prefers-reduced-motion。

5. 验收并交付

在实际浏览器中检查 1280×720 和窄屏竖向视口：舞台应等比缩放、无页面滚动、无溢出、无重叠、不会同时露出多页。确认每张图片与品牌资产加载，键盘/触控可导航，减少动态效果可用。详见质量清单。

交付时说明目录或 HTML 路径、页数、已选设计方向、导航方式和如何修改主题变量。仅在用户要求时继续部署为 URL 或导出 PDF。

默认设计标准

• 不使用无主题的白底紫色渐变、千篇一律的 dashboard 卡片墙或系统默认字体。
• 每套 deck 选择一组有性格但可读的字体组合，并用 CSS 变量集中控制色彩、间距、阴影与动效时长。
• 用 CSS 图形、构图、渐变、纹理和已有真实资产创造氛围；图像应有内容意义，不是装饰性占位。
• 字号、对比度、留白与对齐优先于“炫技”。内容超出舒适阅读范围时拆页，不缩小到不可读。

最终回复

简短说明：交付路径、页数、设计方向、保留的品牌资产、已完成的适配/交互检查，以及用户下一步可选的修改、导出或部署操作。