simple-deck

Simple Deck 技能

使用 seed 和布局库制作一个单文件、可水平滑动的 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 — 准备工作

1. 从头到尾阅读 assets/template.html，包括 <style> 块和 <script> 块。脚本解决了五个特定于 iframe 的问题（实际滚动容器检测、双重捕获阶段监听器、自动聚焦、不使用 scrollIntoView、位置持久化）——不要重写它。
2. 阅读 references/layouts.md，了解 8 种布局。特别留意“主题节奏”部分——这条规则能避免演示文稿显得沉闷。
3. 阅读当前的 DESIGN.md——将其中的设计令牌映射到 seed 中的六个 :root 变量。

步骤 1 — 复制 seed

将 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> 复制到 body 中。将方括号中的文字替换为真实、具体的文案。**不要填充无意义内容 / lorem。**如果某张幻灯片显得空洞，说明布局不合适——换一种布局。

按编写顺序，为每张幻灯片添加 data-screen-label="01 Cover"、"02 Problem" 等标签。（seed 的前三张幻灯片已经添加了这些标签——沿用这一模式。）

步骤 4 — 自检

按照 references/checklist.md 逐项检查。末尾的“主题节奏抽查”不可省略：

grep 'class="slide' index.html

查看生成的 class 列表。如果发现 light × 4 in a row，就将其中一张换成 dark。如果一份包含 8 张或更多幻灯片的演示文稿中没有 hero dark，就将一张大数字页或结束页改为该主题。

步骤 5 — 输出成品

<artifact identifier="deck-slug" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

在成品前写一句话。输出到 </artifact> 后停止。

硬性规则

• 每张幻灯片都必须设置主题 class（light | dark | hero light | hero dark）。仅有 class="slide" = 回归。
• 不得连续出现 3 张或更多相同主题的幻灯片。
• 显示文字 = 使用 var(--font-display) 的衬线字体。.h-hero / .h-xl / .h-md 已经强制设置了该字体。
• 每张幻灯片只使用一种强调色，且最多使用两次。
• **不要重写导航脚本。**它已经过验证。
• **不要使用 scrollIntoView()。**这会导致 iframe 出问题。
• 每张幻灯片都必须设置 data-screen-label。