# Cs Web Slides

> 制作精美、可交互的网页幻灯片，或把现有 PPT/PPTX 转成保留品牌图片资产的网页演示。适用于演讲、产品发布、路演、课程和网页化演示；不用于只需静态 PNG 或可编辑 PPTX 的任务。

- Skill: `chenshuo2004/cs-web-slides` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds@latest add chenshuo2004/cs-web-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chenshuo2004/cs-web-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: chenshuo2004 (https://skillmd.com/u/chenshuo2004)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chenshuo2004/cs-web-slides

---


# CS 网页幻灯片

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

## 交付边界

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

## 先读什么

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

- 新建、补强或改版网页 deck：读取 [references/design-discovery.md](references/design-discovery.md) 和 [references/implementation.md](references/implementation.md)，并以 [assets/web-slide-starter.html](assets/web-slide-starter.html) 为功能底座。
- 知识课程、方法论或教学型 deck：先读取 [references/style-index.md](references/style-index.md)，再只读取入选的风格说明。默认预览池为 笔记手帐、杂志静奢、果冻多巴胺。
- 转换 PPTX：先运行 [scripts/extract-pptx.ps1](scripts/extract-pptx.ps1)，再读取 [references/pptx-conversion.md](references/pptx-conversion.md)。
- 最终检查与交付：读取 [references/quality-checklist.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 图形、构图、渐变、纹理和已有真实资产创造氛围；图像应有内容意义，不是装饰性占位。
- 字号、对比度、留白与对齐优先于“炫技”。内容超出舒适阅读范围时拆页，不缩小到不可读。

## 最终回复

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