web-deck

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Deck — CoinFund Web Presentation Builder

Web Deck — CoinFund网页演示文稿构建工具

Build minimalist, CoinFund-branded slide decks as self-contained HTML files. Each deck is a single

.html

file — no build step, no dependencies, trivially versionable in Git.

构建极简风格、CoinFund品牌的独立HTML格式幻灯片演示文稿。每个演示文稿都是单个

.html

文件——无需构建步骤，无依赖项，可轻松在Git中进行版本控制。

When to Use

使用场景

Any time the user wants a web-based slide deck (HTML/CSS/JS). For

.pptx

output, use the

jake-deck

skill instead. This skill is for browser-native presentations that can also export to PDF.

The user specifies:

Mode:
```
static
```
(print-optimized, no JS) or
```
dynamic
```
(keyboard navigation, slide transitions). Default:
```
dynamic
```
.
Content: Slide titles and content, as an outline or bullet points.

当用户需要基于网页的幻灯片演示文稿（HTML/CSS/JS）时使用此工具。若需要输出

.pptx

格式，请使用

jake-deck

技能。本技能适用于原生浏览器演示文稿，这类文稿也可导出为PDF。

用户需指定：

模式：
```
static
```
（优化打印，无JS）或
```
dynamic
```
（键盘导航、幻灯片转场）。默认值：
```
dynamic
```
。
内容：幻灯片标题和内容，可采用大纲或项目符号形式。

Design System

设计系统

Color Palette (CSS Custom Properties)

调色板（CSS自定义属性）

css

:root {
  --bg:      #F7F3EE;  /* Warm cream — all slide backgrounds        */
  --text:    #1A1A1A;  /* Near-black — headings, primary body text   */
  --gray:    #7A7A7A;  /* Secondary text, labels                     */
  --ltgray:  #C8C2BA;  /* Divider rules, subtle borders              */
  --white:   #FFFFFF;  /* Title slide background, table headers      */
  --red:     #C0392B;  /* Warnings, risks, negative indicators       */
  --green:   #27AE60;  /* Positive indicators, "ready" status        */
  --blue:    #2C3E50;  /* Section headers, callout boxes             */
}

css

:root {
  --bg:      #F7F3EE;  /* 暖奶油色 — 所有幻灯片背景色        */
  --text:    #1A1A1A;  /* 近黑色 — 标题、主要正文文本颜色   */
  --gray:    #7A7A7A;  /* 次要文本、标签颜色                     */
  --ltgray:  #C8C2BA;  /* 分隔线、细微边框颜色              */
  --white:   #FFFFFF;  /* 标题幻灯片背景色、表格表头颜色      */
  --red:     #C0392B;  /* 警告、风险、负面指标颜色       */
  --green:   #27AE60;  /* 正面指标、“就绪”状态颜色        */
  --blue:    #2C3E50;  /* 章节标题、提示框颜色             */
}

Typography

排版

All text uses Nunito (loaded from Google Fonts, with system-font fallback for offline use).

Element	Size	Weight	Color
Slide title	28px	700	`--blue`
Section header	16px	700	`--text`
Body text	13px	400	`--text`
Labels/secondary	11px	400	`--gray`
Footnotes	10-11px	400	`--red` or `--gray`

所有文本使用Nunito字体（从Google Fonts加载，离线时回退到系统字体）。

元素	字号	字重	颜色
幻灯片标题	28px	700	`--blue`
章节标题	16px	700	`--text`
正文文本	13px	400	`--text`
标签/次要文本	11px	400	`--gray`
脚注	10-11px	400	`--red` 或 `--gray`

Layout

布局

Slides are 16:9 aspect ratio (960px x 540px base, scaled to fill viewport).

┌──────────────────────────────────────────────┐
│  padding-left: 76px (~0.8" equivalent)       │
│  ┌─ Title zone: top 50px ──────────────────┐ │
│  │                                          │ │
│  ├─ Content zone: top 110px ───────────────┤ │
│  │  width: 808px (~8.4" equivalent)        │ │
│  │                                          │ │
│  ├─ Footnote zone: bottom 30px ────────────┤ │
│  └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

幻灯片为16:9宽高比（基础尺寸960px x 540px，可缩放以填满视口）。

┌──────────────────────────────────────────────┐
│  padding-left: 76px (~0.8" 等效值)       │
│  ┌─ 标题区域：顶部50px ──────────────────┐ │
│  │                                          │ │
│  ├─ 内容区域：顶部110px ───────────────┤ │
│  │  width: 808px (~8.4" 等效值)        │ │
│  │                                          │ │
│  ├─ 脚注区域：底部30px ────────────┤ │
│  └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

Required Slides

必填幻灯片

Title Slide (always first)

标题幻灯片（始终位于首屏）

Background:
```
--white
```
(#FFFFFF), not cream
CoinFund logo: text wordmark "CoinFund" in 52px Arial bold, color
```
--text
```
, centered
Thin divider line below wordmark: 240px wide,
```
--text
```
, centered
Deck title: 28px Nunito bold, color
```
--blue
```
, centered below divider
Subtitle/date: 14px Nunito, color
```
--gray
```
, centered

html

<section class="slide slide--title">
  <div class="slide__wordmark">CoinFund</div>
  <hr class="slide__divider slide__divider--title">
  <h1 class="slide__deck-title">Deck Title Here</h1>
  <p class="slide__subtitle">March 2026</p>
</section>

背景色：
```
--white
```
（#FFFFFF），而非奶油色
CoinFund标志：文本标志“CoinFund”采用52px Arial粗体，颜色为
```
--text
```
，居中显示
标志下方细分隔线：宽240px，颜色
```
--text
```
，居中
演示文稿标题：28px Nunito粗体，颜色
```
--blue
```
，位于分隔线下方居中
副标题/日期：14px Nunito，颜色
```
--gray
```
，居中

html

<section class="slide slide--title">
  <div class="slide__wordmark">CoinFund</div>
  <hr class="slide__divider slide__divider--title">
  <h1 class="slide__deck-title">Deck Title Here</h1>
  <p class="slide__subtitle">March 2026</p>
</section>

End Slide (always last)

结束幻灯片（始终位于末屏）

Background:
```
--bg
```
(cream)
"CoinFund" in 36px Nunito bold, color
```
--blue
```
, centered
Gray divider rule centered
"coinfund.io" in 13px Nunito, color
```
--gray
```
, centered

html

<section class="slide slide--end">
  <div class="slide__end-wordmark">CoinFund</div>
  <hr class="slide__divider slide__divider--end">
  <p class="slide__end-url">coinfund.io</p>
</section>

背景色：
```
--bg
```
（奶油色）
“CoinFund”采用36px Nunito粗体，颜色
```
--blue
```
，居中显示
灰色分隔线居中
“coinfund.io”采用13px Nunito，颜色
```
--gray
```
，居中

html

<section class="slide slide--end">
  <div class="slide__end-wordmark">CoinFund</div>
  <hr class="slide__divider slide__divider--end">
  <p class="slide__end-url">coinfund.io</p>
</section>

Content Slide Patterns

内容幻灯片模板

Every content slide follows this HTML structure:

html

<section class="slide">
  <h2 class="slide__title">Slide Title</h2>
  <hr class="slide__accent">
  <div class="slide__body">
    <!-- Content using one of the patterns below -->
  </div>
  <!-- Optional footnote -->
  <footer class="slide__footnote">Footnote text</footer>
</section>

每个内容幻灯片遵循以下HTML结构：

html

<section class="slide">
  <h2 class="slide__title">Slide Title</h2>
  <hr class="slide__accent">
  <div class="slide__body">
    <!-- 使用以下模板之一填充内容 -->
  </div>
  <!-- 可选脚注 -->
  <footer class="slide__footnote">Footnote text</footer>
</section>

Pattern 1: Header + Body Blocks (default, most common)

模板1：标题+内容块（默认，最常用）

For slides with 3-5 topics, each with bold header and description.

html

<div class="block">
  <div class="block__header">Bold header text</div>
  <div class="block__body">Gray body description text.</div>
</div>
<!-- Repeat for each block. Max 4-5 per slide. -->

适用于包含3-5个主题的幻灯片，每个主题包含粗体标题和描述。

html

<div class="block">
  <div class="block__header">粗体标题文本</div>
  <div class="block__body">灰色正文描述文本。</div>
</div>
<!-- 可重复添加内容块。单页最多4-5个。 -->

Pattern 2: Label-Value Grid

模板2：标签-值网格

Two-column layout: gray labels left, text values right.

html

<div class="kv-grid">
  <div class="kv-grid__row">
    <span class="kv-grid__label">Label</span>
    <span class="kv-grid__value">Value text here</span>
  </div>
  <!-- Max 6 rows per slide -->
</div>

两列布局：左侧为灰色标签，右侧为文本值。

html

<div class="kv-grid">
  <div class="kv-grid__row">
    <span class="kv-grid__label">标签</span>
    <span class="kv-grid__value">此处为值文本</span>
  </div>
  <!-- 单页最多6行 -->
</div>

Pattern 3: Table

模板3：表格

Blue header row with white text, alternating cream/white body rows.

html

<table class="deck-table">
  <thead>
    <tr><th>Column A</th><th>Column B</th><th>Column C</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

蓝色表头行配白色文本，正文行采用奶油色/白色交替。

html

<table class="deck-table">
  <thead>
    <tr><th>列A</th><th>列B</th><th>列C</th></tr>
  </thead>
  <tbody>
    <tr><td>数据</td><td>数据</td><td>数据</td></tr>
    <tr><td>数据</td><td>数据</td><td>数据</td></tr>
  </tbody>
</table>

Pattern 4: Numbered List

模板4：编号列表

Blue number + bold label + body inline.

html

<ol class="numbered-list">
  <li>
    <span class="numbered-list__label">Item name</span>
    <span class="numbered-list__desc">Description text explaining the item.</span>
  </li>
</ol>

蓝色编号 + 粗体标签 + 内联正文。

html

<ol class="numbered-list">
  <li>
    <span class="numbered-list__label">项目名称</span>
    <span class="numbered-list__desc">解释该项目的描述文本。</span>
  </li>
</ol>

Pattern 5: Callout Box

模板5：提示框

Light blue-gray fill with left border accent.

html

<div class="callout">
  <p>Key insight or important note goes here.</p>
</div>

浅蓝灰色填充，左侧带边框强调。

html

<div class="callout">
  <p>此处放置关键见解或重要提示。</p>
</div>

Entrance Animations

入场动画

In dynamic mode, add

class="reveal"

to any element that should animate in when its slide becomes active. Elements fade up with staggered timing based on their position among siblings.

html

<section class="slide">
  <h2 class="slide__title reveal">Title animates first</h2>
  <hr class="slide__accent reveal">
  <div class="slide__body">
    <div class="block reveal">This block animates third</div>
    <div class="block reveal">This one fourth (0.08s delay)</div>
  </div>
</section>

In static mode,

reveal

has no effect — elements render normally.

在动态模式下，为需要在幻灯片激活时动画入场的元素添加

class="reveal"

。元素会根据其在同级元素中的位置，以交错时序向上淡入。

html

<section class="slide">
  <h2 class="slide__title reveal">标题最先动画入场</h2>
  <hr class="slide__accent reveal">
  <div class="slide__body">
    <div class="block reveal">此内容块第三个动画入场</div>
    <div class="block reveal">此内容块第四个（延迟0.08秒）</div>
  </div>
</section>

在静态模式下，

reveal

类无任何效果——元素正常渲染。

Static vs. Dynamic Mode

静态模式 vs 动态模式

Static Mode (

data-mode="static"

)

静态模式 (

data-mode="static"

)

No JavaScript whatsoever
All slides visible in sequence, separated by CSS page breaks
Optimized for
```
Cmd+P
```
/
```
Ctrl+P
```
browser print or Puppeteer PDF export

Each

<section class="slide">

gets

page-break-after: always

完全无JavaScript
所有幻灯片按顺序显示，通过CSS分页符分隔
针对浏览器
```
Cmd+P
```
/
```
Ctrl+P
```
打印或Puppeteer PDF导出优化

每个

<section class="slide">

添加

page-break-after: always

样式

Dynamic Mode (

data-mode="dynamic"

)

动态模式 (

data-mode="dynamic"

)

Keyboard navigation: Arrow keys, Space, Page Up/Down
Touch/swipe navigation on mobile and tablet
Current slide indicator (e.g., "3 / 12") in bottom-right
Blue progress bar at top of viewport
Subtle fade transitions between slides (CSS
```
opacity
```
+
```
transition
```
)
Staggered entrance animations on
```
.reveal
```
elements
URL hash updates per slide (
```
#slide-3
```
) for deep linking
Press
```
F
```
for fullscreen,
```
Esc
```
to exit
Press
```
P
```
to toggle overview mode (shows all slides, click to jump)
```
prefers-reduced-motion
```
automatically disables animations

键盘导航：方向键、空格键、Page Up/Page Down
移动端和平板支持触摸/滑动导航
右下角显示当前幻灯片指示器（例如：“3 / 12”）
视口顶部蓝色进度条
幻灯片间淡入淡出转场效果（CSS
```
opacity
```
+
```
transition
```
）
```
.reveal
```
元素的交错入场动画
每张幻灯片更新URL哈希值（
```
#slide-3
```
），支持深度链接
按
```
F
```
键进入全屏，
```
Esc
```
键退出
按
```
P
```
键切换概览模式（显示所有幻灯片，点击跳转）
若系统开启
```
prefers-reduced-motion
```
，自动禁用动画

HTML Template

HTML模板

The file

template.html

(in the same directory as this SKILL.md) is the complete, working boilerplate for every deck. It includes all CSS (design tokens, patterns 1-5, animations, static/dynamic modes, print styles) and all JS (keyboard/touch nav, overview mode, fullscreen, progress bar, hash deep linking).

文件

template.html

（与本SKILL.md同目录）是所有演示文稿的完整可用模板。包含所有CSS（设计标记、模板1-5、动画、静态/动态模式、打印样式）和所有JS（键盘/触摸导航、概览模式、全屏、进度条、哈希深度链接）。

Creating a new deck

创建新演示文稿

Copy the template to start every new deck:

bash

cp <skill-dir>/template.html deck.html

Then:

Set
```
data-mode
```
on
```
<html>
```
to
```
"dynamic"
```
or
```
"static"
```

Replace

DECK_TITLE_HERE

<title>

and

.slide__deck-title

Replace
```
MONTH YEAR
```
in
```
.slide__subtitle
```
Add content slides between the title and end slides, using the content patterns documented above

Do not regenerate the boilerplate from memory. Always copy the template file.

复制模板来创建新演示文稿：

bash

cp <skill-dir>/template.html deck.html

然后：

将
```
<html>
```
标签的
```
data-mode
```
设置为
```
"dynamic"
```
或
```
"static"
```

替换

<title>

和

.slide__deck-title

中的

DECK_TITLE_HERE

替换
```
.slide__subtitle
```
中的
```
MONTH YEAR
```
在标题幻灯片和结束幻灯片之间添加内容幻灯片，使用上述文档中的内容模板

请勿凭记忆重新生成模板代码。始终复制模板文件。

Live Development Server (MANDATORY)

本地开发服务器（必填）

ALWAYS serve decks through the dev server. Never open deck files directly via

file://

— the server provides live reload, the hamburger overlay menu, and PDF export. Without it, the user gets a static file with no interactivity tools.

The dev server is at

serve-deck.mjs

(same directory as this SKILL.md). Zero npm dependencies (Puppeteer auto-installed on first PDF export).

始终通过开发服务器加载演示文稿。 切勿直接通过

file://

打开演示文稿文件——服务器提供实时重载、汉堡菜单和PDF导出功能。没有服务器，用户只能得到一个无交互工具的静态文件。

开发服务器文件为

serve-deck.mjs

（与本SKILL.md同目录）。无需npm依赖（首次导出PDF时自动安装Puppeteer）。

Starting the server

启动服务器

bash

node /path/to/skills/web-deck/serve-deck.mjs 3333 /path/to/deck/directory

Then open the browser:

bash

open http://localhost:3333/deck.html

Start the server BEFORE opening the browser. Use

run_in_background: true

so it persists across edits.

bash

node /path/to/skills/web-deck/serve-deck.mjs 3333 /path/to/deck/directory

然后在浏览器中打开：

bash

open http://localhost:3333/deck.html

先启动服务器，再打开浏览器。 使用

run_in_background: true

让服务器在编辑过程中持续运行。

What the server provides

服务器功能

Live reload — SSE-based, auto-reloads the browser on every file save. The user sees changes instantly as you edit slides.
Hamburger overlay menu — always-visible hamburger icon (☰) in the top-right corner with:
- Download as PDF — Puppeteer renders the deck server-side at 960×540px per slide, producing a faithful PDF with all fonts and styles intact. Auto-installs Puppeteer on first use.
- ⌘P hint — reminder that browser print also works
Static file serving — serves the deck and any local assets (images, fonts)

The overlay menu and reload client are injected at serve time — they do not exist in the

deck.html

file itself. The deck stays clean and self-contained. This is why the server is mandatory: without it, no hamburger menu, no PDF export, no live reload.

实时重载 — 基于SSE，文件每次保存后自动重新加载浏览器。用户可在编辑幻灯片时即时看到更改。
汉堡菜单 — 右上角始终显示汉堡图标（☰），包含：
- 导出为PDF — Puppeteer在服务器端以960×540px每张幻灯片的尺寸渲染演示文稿，生成保留所有字体和样式的PDF。首次使用时自动安装Puppeteer。
- ⌘P提示 — 提示用户也可使用浏览器打印功能
静态文件服务 — 提供演示文稿和本地资源（图片、字体）

菜单和重载客户端是在服务时注入的——它们不存在于

deck.html

文件本身。演示文稿保持简洁独立。这就是为什么服务器是必填项：没有它，就没有汉堡菜单、PDF导出和实时重载。

Workflow

工作流程

User provides outline (slide titles + content bullets) and mode preference (static/dynamic)
Copy the template:
```
cp <skill-dir>/template.html deck.html
```
Set the mode, title, and subtitle in the copied file
Choose the right content pattern for each slide and add content slides

Start the server (background, one time):

node <skill-dir>/serve-deck.mjs 3333 .

with

run_in_background: true

Open in browser (one time):
```
open http://localhost:3333/deck.html
```
Iterate — use the Edit tool to modify slides. The browser auto-reloads on every save.
User clicks the hamburger menu → Download as PDF when ready.

用户提供大纲（幻灯片标题+内容项目符号）和模式偏好（静态/动态）
复制模板：
```
cp <skill-dir>/template.html deck.html
```
在复制的文件中设置模式、标题和副标题
为每张幻灯片选择合适的内容模板并添加内容

启动服务器（后台运行，一次即可）：

node <skill-dir>/serve-deck.mjs 3333 .

，参数

run_in_background: true

在浏览器中打开（一次即可）：
```
open http://localhost:3333/deck.html
```
迭代编辑 — 使用编辑工具修改幻灯片。浏览器会在每次保存后自动重载。
用户准备就绪后，点击汉堡菜单 → 导出为PDF。

Important: keep the server running

重要提示：保持服务器运行

Start the server with
```
run_in_background: true
```
so it persists across edits
The second argument is the directory to serve (defaults to
```
.
```
)
The server stays alive for the session — no auto-shutdown
When the session ends or user is done, kill the server:
```
pkill -f serve-deck
```
or let it die naturally

使用
```
run_in_background: true
```
启动服务器，使其在编辑过程中持续运行
第二个参数是要服务的目录（默认为
```
.
```
）
服务器在会话期间保持运行——不会自动关闭
会话结束或用户完成操作后，关闭服务器：
```
pkill -f serve-deck
```
，或让其自然终止

Style Principles

设计原则

The CoinFund deck style is defined by restraint:

No gradients, drop shadows, or decorative elements. The CSS
```
box-shadow
```
on slides is only for the browser viewport framing, not part of the slide content itself.
Color is semantic. Blue for structure, red for risk/warnings, green for readiness/positive. Never decorative.
Whitespace does the heavy lifting. Generous padding, clear spacing between blocks. If it feels crowded, split into two slides.
Max 4-5 content blocks per slide. Prevents overflow and keeps slides scannable.
Footnotes sit below main content with a clear gap. Use
```
slide__footnote
```
positioned at the bottom.
One accent line per slide. The short
```
slide__accent
```
```
<hr>
```
separates title from content. That's the only decoration.
Terse over verbose. Bullets should be 1-2 sentences max. The deck is a conversation starter, not a whitepaper.
Uniform style changes. When the user makes a visual or stylistic change to one slide, apply that change consistently across all slides in the deck.

CoinFund演示文稿风格以克制为核心：

无渐变、投影或装饰元素。 幻灯片上的CSS
```
box-shadow
```
仅用于浏览器视口框架，不属于幻灯片内容本身。
颜色具有语义。 蓝色用于结构，红色用于风险/警告，绿色用于就绪/正面信息。绝不用作装饰。
留白是关键。 充足的内边距、内容块间清晰的间距。若感觉拥挤，拆分为两张幻灯片。
每张幻灯片最多4-5个内容块。 避免内容溢出，保持幻灯片易读。
脚注位于主内容下方，与主内容有明显间距。使用
```
slide__footnote
```
类固定在底部。
每张幻灯片仅一条强调线。 短
```
slide__accent
```
```
<hr>
```
分隔标题和内容。这是唯一的装饰元素。
简洁优先。 项目符号最多1-2句话。演示文稿是对话的起点，而非白皮书。
样式更改保持统一。 当用户对某张幻灯片进行视觉或样式更改时，需将更改一致应用于演示文稿中的所有幻灯片。

Incremental Editing

增量编辑

The live server makes editing feel like a REPL — edit the file, see the result immediately.

Because the deck is a single HTML file:

Git-friendly: each slide is a
```
<section>
```
block, so diffs are clean and meaningful
Add slides: insert new
```
<section class="slide">
```
blocks between existing ones
Reorder: cut/paste
```
<section>
```
blocks
Edit content: modify text within existing sections
Style tweaks: adjust CSS custom properties in
```
:root
```
for global changes

When the user asks to edit specific slides, use the Edit tool to modify just the relevant

<section>

blocks. Do not regenerate the entire file for small changes. The live server will auto-reload on every save.

本地服务器让编辑体验类似REPL——编辑文件，立即看到结果。

由于演示文稿是单个HTML文件：

Git友好：每张幻灯片是一个
```
<section>
```
块，因此差异对比清晰有意义
添加幻灯片：在现有幻灯片之间插入新的
```
<section class="slide">
```
块
重新排序：剪切粘贴
```
<section>
```
块
编辑内容：修改现有区块内的文本
样式调整：修改
```
:root
```
中的CSS自定义属性以实现全局更改

当用户要求编辑特定幻灯片时，使用编辑工具仅修改相关的

<section>

块。小改动无需重新生成整个文件。本地服务器会在每次保存后自动重载。

Overflow Prevention

防止内容溢出

5 blocks max per slide (Pattern 1)
6 rows max per label-value grid (Pattern 2)
7 table rows max (including header)
Footnotes anchored to
```
bottom: 20px
```
via absolute positioning
If content won't fit, split into two slides — never shrink fonts below 10px

每张幻灯片最多5个内容块（模板1）
标签-值网格最多6行（模板2）
表格最多7行（含表头）
脚注通过绝对定位固定在
```
bottom: 20px
```
若内容无法容纳，拆分为两张幻灯片——切勿将字体缩小到10px以下

web-deck

Original

Translation

Web Deck — CoinFund Web Presentation Builder

Web Deck — CoinFund网页演示文稿构建工具

When to Use

使用场景

Design System

设计系统

Color Palette (CSS Custom Properties)

调色板（CSS自定义属性）

Typography

排版

Layout

布局

Required Slides

必填幻灯片

Title Slide (always first)

标题幻灯片（始终位于首屏）

End Slide (always last)

结束幻灯片（始终位于末屏）

Content Slide Patterns

内容幻灯片模板

Pattern 1: Header + Body Blocks (default, most common)

模板1：标题+内容块（默认，最常用）

Pattern 2: Label-Value Grid

模板2：标签-值网格

Pattern 3: Table

模板3：表格

Pattern 4: Numbered List

模板4：编号列表

Pattern 5: Callout Box

模板5：提示框

Entrance Animations

入场动画

Static vs. Dynamic Mode

静态模式 vs 动态模式

Static Mode (data-mode="static")

静态模式 (data-mode="static")

Dynamic Mode (data-mode="dynamic")

动态模式 (data-mode="dynamic")

HTML Template

HTML模板

Creating a new deck

创建新演示文稿

Live Development Server (MANDATORY)

本地开发服务器（必填）

Starting the server

启动服务器

What the server provides

服务器功能

Workflow

工作流程

Important: keep the server running

重要提示：保持服务器运行

Style Principles

设计原则

Incremental Editing

增量编辑

Overflow Prevention

防止内容溢出

Static Mode (
`data-mode="static"`
)

静态模式 (
`data-mode="static"`
)

Dynamic Mode (
`data-mode="dynamic"`
)

动态模式 (
`data-mode="dynamic"`
)