simple-deck

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Simple Deck Skill

Produce a single-file horizontal-swipe HTML deck using the seed and layout library.

使用种子文件和布局库制作单文件横向滑动HTML演示文稿。

Resource map

资源地图

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)

simple-deck/
├── SKILL.md                ← 你正在阅读的文件
├── assets/
│   └── template.html       ← 种子文件：包含设计令牌、幻灯片基础组件及经过验证的导航脚本（请先阅读）
└── references/
    ├── layouts.md          ← 8个可直接粘贴使用的幻灯片布局 + 主题节奏规则
    └── checklist.md        ← P0/P1/P2 自我检查清单（底部包含主题节奏抽查项）

Workflow

工作流程

Step 0 — Pre-flight

步骤0 — 前期准备

Read
assets/template.html
end-to-end through the
```
<style>
```
block AND the
```
<script>
```
block. The script solves five iframe-specific bugs (real scroller detection, dual capture-phase listeners, auto-focus, no
```
scrollIntoView
```
, position persistence) — do not rewrite it.
Read
references/layouts.md
so you know the 8 layouts. Pay special attention to the "Theme rhythm" section — it's the rule that prevents the deck from feeling sleepy.
Read the active DESIGN.md — map its tokens to the six
```
:root
```
variables in the seed.

**通读
```
assets/template.html
```
**的
```
<style>
```
块和
```
<script>
```
块。该脚本解决了5个iframe特有的问题（真实滚动器检测、双捕获阶段监听器、自动聚焦、禁用
```
scrollIntoView
```
、位置持久化）——请勿重写此脚本。
阅读
references/layouts.md
，了解8种布局样式。请特别关注「主题节奏」部分——这是避免演示文稿显得单调的关键规则。
阅读当前的DESIGN.md——将其中的设计令牌映射到种子文件中的6个
```
:root
```
变量。

Step 1 — Copy the seed

步骤1 — 复制种子文件

Copy

assets/template.html

to the project root as

index.html

. Replace the six

:root

variables with the active design system's tokens. Replace the page

<title>

将

assets/template.html

复制到项目根目录并重命名为

index.html

。将6个

:root

变量替换为当前设计系统的令牌，同时替换页面的

<title>

内容。

Step 2 — Decide slide count + theme rhythm BEFORE writing any slide

步骤2 — 确定幻灯片数量和主题节奏（编写幻灯片前完成）

Default: 6 slides unless the brief says otherwise.

Audience / format	Slides
Product overview / lightning talk (5–10 min)	6
Pitch deck (15 min)	8–10
Investor update / longer talk (20–30 min)	12–18

Then write out the rhythm before any HTML — for example, 8 slides:

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

A healthy sequence has:

No 3+ same theme in a row
≥ 1
```
hero dark
```
AND ≥ 1
```
hero light
```
(for 8+ slides)
Alternating breath every 3–4 slides

Show this rhythm sketch to the user before writing slide HTML — they can redirect cheaply.

默认：除非需求说明另有规定，否则使用6张幻灯片。

受众 / 格式	幻灯片数量
产品概述 / 闪电演讲（5–10分钟）	6
推介演示文稿（15分钟）	8–10
投资者更新 / 较长演讲（20–30分钟）	12–18

然后在编写任何HTML之前规划好节奏，例如8张幻灯片的节奏示例：

01  hero light center  封面
02  light              问题
03  hero dark center   核心数据
04  light              三点要点
05  dark               流程管线
06  hero light center  引用
07  light              前后对比
08  hero dark center   诉求

合理的节奏序列需满足：

连续3张及以上相同主题的幻灯片
8张及以上幻灯片需包含至少1张
```
hero dark
```
和至少1张
```
hero light
```
每3–4张幻灯片切换一次主题，形成呼吸感

在编写幻灯片HTML之前，将这份节奏草图展示给用户——这样可以低成本地调整方向。

Step 3 — Paste and fill

步骤3 — 粘贴并填充内容

For each planned slide, copy the matching

<section>

from

layouts.md

into the body. Replace bracketed text with real, specific copy. No filler / no lorem. If a slide feels empty, the layout is wrong — pick a different one.

Tag each slide with

data-screen-label="01 Cover"

"02 Problem"

, etc., in the order you wrote them. (The seed's first three slides already do this — extend the pattern.)

针对每张规划好的幻灯片，从

layouts.md

中复制对应的

<section>

到页面主体中。将括号内的文本替换为真实、具体的内容。禁止使用占位符/无意义文本。如果幻灯片显得空洞，说明布局选择有误——请更换其他布局。

为每张幻灯片添加

data-screen-label="01 封面"

、

"02 问题"

等标签，与你规划的顺序一致。（种子文件的前三张幻灯片已设置该标签，请遵循此模式扩展。）

Step 4 — Self-check

步骤4 — 自我检查

Run through

references/checklist.md

. The "Theme rhythm spot-check" at the end is non-negotiable:

bash

grep 'class="slide' index.html

Read the resulting class list. If you see

light × 4 in a row

, swap one to

dark

. If no

hero dark

exists in an 8+ slide deck, promote one big-stat or closing slide.

对照

references/checklist.md

进行检查。末尾的「主题节奏抽查」为必查项：

bash

grep 'class="slide' index.html

查看输出的类列表。如果出现

light × 4 连续出现

，请将其中一张切换为

dark

。如果8张及以上的演示文稿中没有

hero dark

，请将某张核心数据页或收尾页调整为该主题。

Step 5 — Emit the artifact

步骤5 — 输出成品

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

One sentence before the artifact. Stop after

</artifact>

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

在成品前添加一句说明文字。

</artifact>

之后无需添加内容。

Hard rules

硬性规则

Theme class on every slide (
```
light
```
|
```
dark
```
|
```
hero light
```
|
```
hero dark
```
). Bare
```
class="slide"
```
= regression.
No 3+ same theme in a row.
Display = serif via
var(--font-display)
.
```
.h-hero
```
/
```
.h-xl
```
/
```
.h-md
```
already enforce.
One accent per slide, used at most twice.
Don't rewrite the nav script. It's proven.
No
scrollIntoView()
. Breaks iframe.
data-screen-label
on every slide.

每张幻灯片必须添加主题类（
```
light
```
|
```
dark
```
|
```
hero light
```
|
```
hero dark
```
）。仅使用
```
class="slide"
```
属于倒退。
禁止连续3张及以上相同主题的幻灯片。
标题字体通过
var(--font-display)
设置为衬线体。
```
.h-hero
```
/
```
.h-xl
```
/
```
.h-md
```
已默认强制执行此规则。
每张幻灯片最多使用一种强调色，且使用次数不超过两次。
请勿重写导航脚本。该脚本已验证可行。
禁止使用
scrollIntoView()
。会破坏iframe功能。
每张幻灯片必须添加
data-screen-label
标签。