关于 simple-deck
基于提供的模板和布局库制作单文件横向滑动 HTML 演示文稿的技能。它涵盖页数规划、主题节奏安排和检查清单，适用于演示文稿制作。
主要功能
- 01基于模板生成 HTML 演示文稿
- 02提供 8 种参考页面布局
- 03规划页数与主题节奏
- 04为每页添加主题和屏幕标签
- 05按检查清单进行自查
适用场景
- 01制作产品概览演示文稿
- 02构建主题变化丰富的融资演示
- 03创建较长的投资者进展汇报
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/simple-deck确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
example.htmlassets/template.htmlreferences/checklist.mdlayouts.md详细介绍
简易幻灯片技能
使用种子模板和布局库，制作单文件、可横向滑动的 HTML 幻灯片。
资源地图
simple-deck/
├── SKILL.md ← you're reading this
├── assets/
│ └── template.html ← seed: tokens + slide primitives + proven nav script (READ FIRST)
└── references/
├── layouts.md ← 8 paste-ready slide layouts + theme-rhythm rules
└── checklist.md ← P0/P1/P2 self-review (rhythm spot-check at bottom)
工作流
步骤 0 — 准备工作
- 从头到尾阅读
assets/template.html，包括<style>块和<script>块。 脚本解决了五个 iframe 特有的 Bug（实际滚动容器检测、双重捕获阶段监听器、自动聚焦、不使用scrollIntoView、位置持久化）——不要重写。 - 阅读
references/layouts.md，了解 8 种布局。特别留意“主题节奏”部分——这是防止幻灯片显得沉闷的规则。 - 阅读当前生效的 DESIGN.md——将其中的设计令牌映射到种子模板的六个
:root变量。
步骤 1 — 复制种子模板
将 assets/template.html 复制到项目根目录，命名为 index.html。将六个 :root 变量替换为当前设计系统的令牌。替换页面 <title>。
步骤 2 — 撰写任何幻灯片之前，先确定幻灯片数量和主题节奏
默认：6 张，除非需求另有说明。
| 受众／形式 | 幻灯片数量 |
|---|---|
| 产品概览／闪电演讲（5–10 分钟） | 6 |
| 路演演示文稿（15 分钟） | 8–10 |
| 投资者动态／较长演讲（20–30 分钟） | 12–18 |
然后，在编写任何 HTML 之前，先列出节奏安排——例如，8 张幻灯片：
01 hero light center Cover
02 light Problem
03 hero dark center Big stat
04 light Three points
05 dark Pipeline
06 hero light center Quote
07 light Before / after
08 hero dark center Ask
合理的顺序应满足：
- 同一主题不得连续出现 3 张或以上
- 至少有 1 张
hero dark和 1 张hero light（适用于 8 张或以上的幻灯片） - 每隔 3–4 张交替安排舒缓节奏
编写幻灯片 HTML 之前，先向用户展示这份节奏草案——这样他们可以轻松提出调整。
步骤 3 — 粘贴并填充内容
对于计划中的每张幻灯片，从 layouts.md 中复制对应的 <section> 到正文。将方括号中的文本替换为真实、具体的文案。不要填充空话／占位文。 如果某张幻灯片显得空洞，说明布局不合适——换一种布局。
按编写顺序，为每张幻灯片添加 data-screen-label="01 Cover"、"02 Problem" 等标签。（种子模板的前三张幻灯片已有这些标签——按此模式继续。）
步骤 4 — 自检
按照 references/checklist.md 逐项检查。末尾的“主题节奏抽查”是硬性要求，不可跳过：
grep 'class="slide' index.html
查看最终的 class 列表。如果出现 light × 4 in a row，将其中一张改为 dark。如果 8 张或以上的幻灯片中没有 hero dark，则将一张大数字页或结束页升级为 hero dark。
步骤 5 — 编写项目文件
将完成的幻灯片 HTML 写入 index.html。
然后发送一条简短的普通助手摘要，注明 index.html 并描述这套幻灯片。不要在聊天中输出完整 HTML 源码，也不要生成源代码 <artifact> 块。
硬性规则
- 每张幻灯片都必须有主题类（
light|dark|hero light|hero dark）。裸写class="slide"属于回归。 - 同一主题不得连续出现 3 张或以上。
- 展示文字必须使用衬线字体：
var(--font-display)。.h-hero/.h-xl/.h-md已强制应用该设置。 - 每张幻灯片最多使用一种强调色，且最多出现两次。
- 不要重写导航脚本。 它已验证可用。
- 不要使用
scrollIntoView()。 这会导致 iframe 出错。 - 每张幻灯片都必须有
data-screen-label。