slide-deck

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/slide-deck — Draft, update, convert, and export branded React decks

/slide-deck — 起草、更新、转换并导出品牌化React幻灯片

Authors React/TypeScript decks for

${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/page.tsx

using the user's slide system. Branded output (no separate HTML pipeline) — when portable HTML/PDF is needed, export mode snapshots the rendered React deck via Playwright so the output is brand-perfect.

使用用户的幻灯片系统为

${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/page.tsx

创建React/TypeScript幻灯片。输出内容带有品牌样式（无需单独的HTML流水线）——当需要可移植的HTML/PDF时，导出模式会通过Playwright对渲染后的React幻灯片进行快照，确保输出内容完美保留品牌样式。

Modes (pick one before Step 1)

模式（在步骤1之前选择一种）

Mode	Invocation	Goal
new	`/slide-deck new <topic>` (default)	Draft a new deck from a brief
update	`/slide-deck update <slug>`	Modify an existing deck (with overflow guards)
ppt	`/slide-deck ppt <path-to-pptx>`	Convert a legacy PPTX into a React deck
export	`/slide-deck export <slug> [html\|pdf\|vercel]`	Snapshot a deck to HTML, PDF, or Vercel URL

For

update

ppt

, and

export

, skip to the corresponding mode section below. For

new

, continue through Steps 1–8.

模式	调用命令	目标
新建	`/slide-deck new <主题>` （默认）	根据概要起草新幻灯片
更新	`/slide-deck update <slug>`	修改现有幻灯片（带有内容溢出防护）
PPT转换	`/slide-deck ppt <pptx文件路径>`	将旧版PPTX转换为React幻灯片
导出	`/slide-deck export <slug> [html\|pdf\|vercel]`	将幻灯片快照为HTML、PDF或Vercel链接

若选择

update

、

ppt

或

export

模式，请直接跳至下方对应的模式章节。若选择

new

模式，请继续执行步骤1至8。

Step 1 — Capture the brief (ask all at once)

步骤1 — 收集概要信息（一次性询问所有问题）

Ask in one structured message. Don't round-trip on each.

Topic / title — what's the deck about?
Audience — who's in the room? (technical / executive / mixed / clients) Push for specificity: "founders" is too broad; "B2B SaaS founders at MicroConf" is workable.
Length — rough slide count: 5–10 (lightning / short internal) / 10–15 (short keynote, pitch) / 20–25 (keynote) / 30+ (workshop — uncommon for branded decks).
Density — speaker-led (1 idea/slide, big type, lots of breathing room, more slides if needed) or reading-first (4–6 bullets/slide, structured grids, self-contained for async review).
CTA — what should the audience do/think/feel after?
Slug — kebab-case (e.g.,
```
marketing-like-an-engineer
```
).
Content state — all content ready / rough notes / topic only.

Remember density — it affects slide count, copy length per slide, and which primitives to favor. See

references/narrative-and-voice.md

for the density-specific rules.

用一条结构化消息一次性询问所有问题，不要逐个来回确认。

主题/标题 — 幻灯片的主题是什么？
受众 — 目标受众是谁？（技术人员/管理层/混合人群/客户）请尽量具体：“创始人”过于宽泛；“MicroConf大会上的B2B SaaS创始人”是可行的表述。
篇幅 — 大致的幻灯片数量：5–10张（闪电演讲/简短内部汇报）/10–15张（短主题演讲/融资推介）/20–25张（主题演讲）/30张以上（工作坊——品牌化幻灯片中较少见）。
密度模式 — 演讲主导型（每张幻灯片1个观点，大字体，留白充足，必要时增加幻灯片数量）或阅读优先型（每张幻灯片4–6个要点，结构化布局，适合异步审阅）。
行动号召（CTA） — 受众看完幻灯片后应该做什么/想什么/有什么感受？
Slug — 短横线分隔格式（例如：
```
marketing-like-an-engineer
```
）。
内容状态 — 内容全部准备就绪/仅有粗略笔记/只有主题。

请记住密度模式会影响幻灯片数量、每张幻灯片的文案长度以及优先使用的基础组件。有关密度模式的具体规则，请查看

references/narrative-and-voice.md

。

Step 2 — Three narrative angles

步骤2 — 三种叙事角度

Riff on

zarazhangrui/frontend-slides

' "show, don't tell" — but applied to story, not visuals (your visual system is fixed).

Pitch 3 angles in 1–2 sentences each:

Safe — most likely to land. Conventional structure for the audience.
Bold — contrarian or counterintuitive frame. Higher upside, slight risk.
Wildcard — unexpected structure (story-first, single-question deck, anti-thesis, etc.).

the user picks one. If he rejects all three, propose three more — don't force a path.

借鉴

zarazhangrui/frontend-slides

的“展示而非讲述”理念，但将其应用于叙事而非视觉效果（你的视觉系统是固定的）。

每种角度用1-2句话阐述：

稳妥型 — 最容易被接受，采用受众熟悉的常规结构。
大胆型 — 反向或违反直觉的框架，潜在收益更高，但存在轻微风险。
创新型 — 出乎意料的结构（故事优先、单问题幻灯片、反论点等）。

由用户选择一种角度。若用户拒绝所有三种角度，请再提出三种，不要强迫用户选择。

Step 3 — Outline

步骤3 — 大纲

For the chosen angle:

Sections — propose 3–7 named sections (e.g.,
```
Title
```
,
```
Hook
```
,
```
Problem
```
,
```
Framework
```
,
```
Examples
```
,
```
Close
```
). The default 3-act structure is OPTIONAL; only use it if the user wants it or the deck is a keynote-length talk that benefits from one.
Slide titles within each section
One-line takeaway per slide

Total slide count should match the duration estimate from Step 1.

Show the outline as a table. the user edits / approves before expand.

针对选定的角度：

章节 — 提出3-7个命名章节（例如：
```
Title
```
、
```
Hook
```
、
```
Problem
```
、
```
Framework
```
、
```
Examples
```
、
```
Close
```
）。默认的三幕式结构为可选，仅当用户要求或幻灯片为主题演讲长度且能从中受益时才使用。
每个章节内的幻灯片标题
每张幻灯片的一句话核心要点

幻灯片总数量应与步骤1中预估的篇幅相符。

将大纲以表格形式展示，经用户编辑/批准后再展开内容。

Step 4 — Expand to slide content

步骤4 — 扩展为幻灯片内容

For each slide, write the full content using his primitives. Reference

references/system.md

for the primitive vocabulary and

references/narrative-and-voice.md

for hook patterns and voice rules.

Slide types and which primitives fit:

Slide type	Primitives	Pattern
Title	`Eyebrow` + `<h1>` with `<Accent>` keyword	First slide, sets brand and topic
Hook	`Heading` + `Body`	A take, story open, contrarian frame, or specific stat
Section divider	`Eyebrow` + `Heading` (centered, large)	Clean break between sections
Framework	`Heading` + `BulletList` or custom layout	The thing the user's teaching
Two-column	`TwoCol`	Comparison, before/after, problem/solution
Quote / pull-quote	`Body` (large)	Authority or audience-recognition moment
Resource / link	`Body` + URL on its own line	Outbound (rare — the user's voice says minimize)
Close / CTA	`Heading` + `Body` + `BulletList` for next steps	What the audience should do

Voice anchors — write for the ear, not the page (see

narrative-and-voice.md

for full rules):

Decks are spoken aloud. Slide text + speaker notes both get said out loud. Write as you'd talk.
Read every slide out loud before saving. If you stumble, if it sounds like a press release, rewrite.
Contractions everywhere (don't, won't, you're, I'd). Strip them only on reading-first decks.
"You" — never "the audience," "users," "people."
Numbers said naturally ("a quarter" not "23.7%").
Conviction-coded, listener-perspective, short sentences, specific nouns.
No filler ("Today I want to talk about…") — open with a take.
(Reading-first density mode exception: written voice is fine since no one will speak the slides — see
```
narrative-and-voice.md
```
.)

为每张幻灯片使用用户的基础组件编写完整内容。基础组件的相关说明请参考

references/system.md

，钩子模式和语气规则请参考

references/narrative-and-voice.md

。

幻灯片类型	基础组件	模式说明
标题页	`Eyebrow` + 包含 `<Accent>` 关键词的 `<h1>`	第一张幻灯片，确立品牌和主题
引入页	`Heading` + `Body`	提出观点、故事开篇、反向框架或具体数据
章节分隔页	`Eyebrow` + `Heading` （居中、大字体）	清晰划分不同章节
框架页	`Heading` + `BulletList` 或自定义布局	用户要讲解的核心框架
双栏页	`TwoCol`	用于对比、前后变化、问题/解决方案展示
引用页/醒目引用	`Body` （大字体）	权威观点或引发受众共鸣的时刻
资源/链接页	`Body` + 单独一行的URL	外部链接（尽量少用——用户的风格要求减少此类内容）
结尾/行动号召页	`Heading` + `Body` + 列出下一步的 `BulletList`	明确受众应采取的行动

语气准则 — 为听觉而非视觉写作（完整规则请查看

narrative-and-voice.md

）：

幻灯片是用来朗读的。 幻灯片文本和演讲者备注都要能大声朗读出来，写作风格要像日常说话一样。
保存前大声朗读每张幻灯片。 如果读起来磕磕绊绊，或者像新闻稿，就重写。
大量使用缩写形式（如don't、won't、you're、I'd）。仅在阅读优先型幻灯片中去掉缩写。
使用“你”而非“受众”、“用户”、“人们”。
数字表述要自然（用“四分之一”而非“23.7%”）。
语气要坚定，站在听众的角度，使用短句和具体名词。
不要使用冗余开场白（如“今天我想谈谈……”）——直接提出观点。
（阅读优先型密度模式例外：由于不会有人朗读幻灯片，书面化语气是可以的——请查看
```
narrative-and-voice.md
```
。）

Step 5 — Speaker notes

步骤5 — 演讲者备注

Every slide gets 3–5 notes lines. Notes are the full spoken talk — write them the way you'd actually say them, pauses and asides included. Slide text is the headline; notes are the full thought.

Notes structure:

The opener — what you say when the slide comes up
The point — the one idea this slide is making
The supporting beat — example, data, or color
The transition — how this connects to the next slide
(Optional) The aside — a quip or callback

For title slides and section dividers, 2–3 notes is fine.

每张幻灯片需添加3-5行演讲者备注。备注是完整的演讲内容——要按照你实际演讲的方式来写，包括停顿和题外话。幻灯片文本是核心要点，备注是完整的思路。

备注结构：

开场语 — 幻灯片出现时你要说的内容
核心观点 — 这张幻灯片要传达的核心想法
支撑论据 — 示例、数据或补充说明
过渡语 — 如何衔接下一张幻灯片
（可选）题外话 — 俏皮话或回顾之前的内容

标题页和章节分隔页只需2-3行备注即可。

Step 6 — Generate files

步骤6 — 生成文件

Write to

${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/

```
layout.tsx
```
— Next.js layout with
```
<title>
```
metadata (use the deck title)
```
page.tsx
```
— the slide deck

Use the templates in

references/template.md

as the skeleton.

page.tsx

must:

Have
```
"use client"
```
at the top

Import

SlideDeck

and

Slide

type from

@/components/slides/slide-deck

Import

SectionRange

from

@/components/slides/sections

(only if using sections)

Import the primitives the user uses from
```
@/components/slides/slide-primitives
```
Declare
```
const slides: Slide[] = [...]
```

(Optional) Declare

const sections: SectionRange[] = [...]

with 0-indexed

from

to

Export default a component that returns

<SlideDeck slides={slides} sections={sections} />

将文件写入

${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/

```
layout.tsx
```
— 包含
```
<title>
```
元数据的Next.js布局文件（使用幻灯片标题）
```
page.tsx
```
— 幻灯片主文件

以

references/template.md

中的模板为框架进行编写。

page.tsx

必须满足以下要求：

文件顶部包含
```
"use client"
```
声明

从

@/components/slides/slide-deck

导入

SlideDeck

和

Slide

类型

从

@/components/slides/sections

导入

SectionRange

（仅当使用章节时）

从
```
@/components/slides/slide-primitives
```
导入用户使用的基础组件
声明
```
const slides: Slide[] = [...]
```
（可选）声明
```
const sections: SectionRange[] = [...]
```
，其中
```
from
```
/
```
to
```
为从0开始的索引

默认导出一个返回

<SlideDeck slides={slides} sections={sections} />

的组件

Step 7 — Preview

步骤7 — 预览

After writing the files, check if your slide-deck dev server is running.

bash

lsof -i :3000-3099 2>/dev/null | grep -E "LISTEN" | head

If a port is in use (portless-compatible — check

package.json

for the dev script naming):

bash

undefined

文件生成后，检查幻灯片开发服务器是否正在运行。

bash

lsof -i :3000-3099 2>/dev/null | grep -E "LISTEN" | head

若端口已被占用（支持无端口模式——请查看

package.json

中的开发脚本命名）：

bash

undefined

Suggested URL pattern

建议的URL格式

echo "Preview at: http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>"


If no dev server is running, tell the user:

```bash
cd ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site} && npm run dev

echo "预览地址: http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>"


若开发服务器未运行，请告知用户：

```bash
cd ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site} && npm run dev

then visit http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>

然后访问 http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>


Don't auto-start the dev server (might disrupt other work).


不要自动启动开发服务器（可能会干扰其他工作）。

Step 8 — Archive

步骤8 — 归档

Append a one-liner to

references/decks-archive.md

(create if missing):

markdown

- 2026-06-17 — [<title>](${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/page.tsx) — <audience> — <one-line angle>

This compounds — future decks can grep "what talks have I done about X" to avoid repetition and find reusable patterns.

在

references/decks-archive.md

中添加一行记录（若文件不存在则创建）：

markdown

- 2026-06-17 — [<标题>](${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/page.tsx) — <受众> — <一句话角度说明>

这样做的好处是，未来创建幻灯片时可以通过grep查询“我做过哪些关于X主题的演讲”，避免重复内容并找到可复用的模式。

Mode: update

模式：更新

Modify an existing deck without breaking it. Risks: overflowing slides, exceeding density limits, breaking the section ranges.

Before modifying, check:

Read the existing
```
page.tsx
```
Count slides + identify the section ranges
For each modification, apply the right guard:

Change	Guard
Adding bullets	Max 6 per `BulletList` in reading-first; 3 in speaker-led. If exceeded → split into two slides.
Adding text	If `<Body>` paragraph >2 sentences in speaker-led → split. >5 sentences in reading-first → split.
Adding images	Images must fit in the 1920×1080 stage. If the slide already has heavy content, move image to its own slide.
Adding slides	Update `sections` array — increment `from` / `to` for all sections after the insertion point.
Removing slides	Decrement `from` / `to` for sections after the removal. Watch for orphaned `id` references.
Rewriting a slide	Preserve the `id` (used for anchors). Only change `content` and `notes` .

After modifying:

Re-count slides and verify section ranges sum correctly
Spot-check the visual in the dev server before committing

修改现有幻灯片时确保不破坏原有结构。风险包括：幻灯片内容溢出、超出密度限制、破坏章节范围。

修改前需检查：

阅读现有的
```
page.tsx
```
文件
统计幻灯片数量并确定章节范围
针对每项修改应用相应的防护规则：

修改操作	防护规则
添加要点	阅读优先型幻灯片中每个 `BulletList` 最多6个要点；演讲主导型最多3个。若超出则拆分为两张幻灯片。
添加文本	演讲主导型幻灯片中 `<Body>` 段落超过2句则拆分；阅读优先型超过5句则拆分。
添加图片	图片必须适配1920×1080的画布。若幻灯片已有大量内容，则将图片移至单独的幻灯片。
添加幻灯片	更新 `sections` 数组——将插入点之后所有章节的 `from` / `to` 值递增。
删除幻灯片	将删除点之后所有章节的 `from` / `to` 值递减。注意检查是否有孤立的 `id` 引用。
重写幻灯片	保留 `id` （用于锚点）。仅修改 `content` 和 `notes` 。

修改后：

重新统计幻灯片数量并验证章节范围是否正确
提交前在开发服务器中抽查视觉效果

Mode: ppt

模式：PPT转换

Convert a legacy PPTX (client deck, conference template) into the user's React system.

Extract content via

python3

and

python-pptx

bash

pip install python-pptx 2>/dev/null
python3 -c "
from pptx import Presentation
import json, sys
p = Presentation(sys.argv[1])
out = []
for i, s in enumerate(p.slides):
    title = next((sh.text for sh in s.shapes if sh.has_text_frame and sh.shapes_element.tag.endswith('}sp') == False), '')
    texts = [sh.text for sh in s.shapes if sh.has_text_frame]
    notes = s.notes_slide.notes_text_frame.text if s.has_notes_slide else ''
    out.append({'i': i, 'texts': texts, 'notes': notes})
print(json.dumps(out, indent=2))
" "<path-to-pptx>"

See

references/ppt-conversion.md

for the full extraction + mapping recipe.

Show the user the extracted summary — slide titles, content excerpts, image count. Confirm before proceeding.
Map to React primitives:
- First slide → title pattern (Eyebrow + h1 + Accent)
- Content slides with bullets →
```
Heading + BulletList
```
- Comparison slides →
```
TwoCol
```
- Section breaks (title-only slides in PPTX) → section divider pattern
- Speaker notes from PPTX →
```
notes
```
  array on each slide

Images — copy referenced images from PPTX assets to

${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/public/slide-assets/<slug>/

, reference them in slides via

<img src="/slide-assets/<slug>/<filename>" />

inside the

content

Write
page.tsx
+
layout.tsx
per the new-deck flow (Step 6).
Preserve the original PPTX — never modify in place. Save under
```
~/Documents/slide-conversions/<slug>-from-pptx/
```
with the original file + extracted JSON for audit.

将旧版PPTX（客户幻灯片、会议模板）转换为用户的React幻灯片系统。

通过
python3
和
python-pptx
提取内容:

bash

pip install python-pptx 2>/dev/null
python3 -c "
from pptx import Presentation
import json, sys
p = Presentation(sys.argv[1])
out = []
for i, s in enumerate(p.slides):
    title = next((sh.text for sh in s.shapes if sh.has_text_frame and sh.shapes_element.tag.endswith('}sp') == False), '')
    texts = [sh.text for sh in s.shapes if sh.has_text_frame]
    notes = s.notes_slide.notes_text_frame.text if s.has_notes_slide else ''
    out.append({'i': i, 'texts': texts, 'notes': notes})
print(json.dumps(out, indent=2))
" "<pptx文件路径>"

完整的提取和映射方法请查看

references/ppt-conversion.md

。

向用户展示提取的摘要 — 幻灯片标题、内容摘录、图片数量。确认后再继续。
映射到React基础组件:
- 第一张幻灯片 → 标题模式（Eyebrow + h1 + Accent）
- 带要点的内容幻灯片 →
```
Heading + BulletList
```
- 对比幻灯片 →
```
TwoCol
```
- 章节分隔（PPTX中仅含标题的幻灯片） → 章节分隔页模式
- PPTX中的演讲者备注 → 每张幻灯片的
```
notes
```
  数组

图片 — 将PPTX资源中的引用图片复制到

${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/public/slide-assets/<slug>/

目录，在幻灯片的

content

中通过

<img src="/slide-assets/<slug>/<文件名>" />

引用。

按照新建幻灯片流程（步骤6）编写
page.tsx
和
layout.tsx
文件。
保留原始PPTX文件 — 切勿原地修改。将原始文件和提取的JSON保存到
```
~/Documents/slide-conversions/<slug>-from-pptx/
```
目录，以备审计。

Mode: export

模式：导出

Snapshot a deck rendered in the corey.co dev server to portable HTML / PDF / Vercel URL. Output is brand-perfect because it's screenshots of your actual rendered React deck.

Output options:

```
html
```
— standalone HTML file with snapshots as inline
```
<img>
```
, keyboard nav (arrow keys) baked in
```
pdf
```
— combined slide snapshots
```
vercel
```
— push standalone HTML to a Vercel project for a shareable URL

Flow (full details in

references/export.md

Verify dev server: confirm

${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>

loads. If not, prompt the user to

cd ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site} && npm run dev

Count slides: read
```
page.tsx
```
, count entries in the
```
slides
```
array.

Run Playwright snapshot:

bash

bash references/export.md script: snapshot-deck <slug> <count>

Launches headless Chromium at 1920×1080

Loads

http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>?present=1

(presenter mode hides chrome)

Sets

localStorage["slides:/slides/<slug>"] = "0"

to start at slide 0

Loops: screenshot → keyboard ArrowRight → wait — for N slides

Saves PNGs to

~/Documents/slide-exports/<slug>-<YYYY-MM-DD>/slide-<n>.png

Combine per output type:
- ```
html
```
  → wrap snapshots in a minimal HTML shell with arrow-key navigation
- ```
pdf
```
  → use
```
magick
```
  (ImageMagick) or
```
img2pdf
```
  to combine PNGs
- ```
vercel
```
  →
```
vercel deploy ~/Documents/slide-exports/<slug>-<date>/
```
Report path / URL.

Caveats (mention to the user):

Animations and presenter view are not preserved — exports are static snapshots.
For interactive demo, present the React version live; for sharing/PDF/portable, use exports.
Snapshots are 1920×1080 — high-quality on any device, but file size scales with slide count.

将corey.co开发服务器中渲染的幻灯片快照为可移植的HTML/PDF/Vercel链接。输出内容完美保留品牌样式，因为它是实际渲染的React幻灯片的截图。

输出选项：

```
html
```
— 独立HTML文件，快照以内嵌
```
<img>
```
形式存在，内置键盘导航（箭头键）
```
pdf
```
— 合并后的幻灯片快照
```
vercel
```
— 将独立HTML推送到Vercel项目，生成可分享链接

流程（详细内容请查看

references/export.md

）：

验证开发服务器：确认

${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>

可以正常加载。若不能加载，请提示用户执行

cd ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site} && npm run dev

。

统计幻灯片数量：读取
```
page.tsx
```
文件，统计
```
slides
```
数组中的条目数量。
运行Playwright快照:
bash
```
bash references/export.md script: snapshot-deck <slug> <数量>
```
- 以1920×1080分辨率启动无头Chromium
- 加载
```
http://${SLIDE_DECK_DEV_HOST:-localhost:3000}/slides/<slug>?present=1
```
  （演示模式隐藏浏览器界面）
- 设置
```
localStorage["slides:/slides/<slug>"] = "0"
```
  ，从第0张幻灯片开始
- 循环执行：截图 → 键盘右键 → 等待 — 共执行N次（N为幻灯片数量）
- 将PNG图片保存到
```
~/Documents/slide-exports/<slug>-<YYYY-MM-DD>/slide-<n>.png
```
根据输出类型合并内容:
- ```
html
```
  → 将快照包裹在带有箭头键导航的极简HTML框架中
- ```
pdf
```
  → 使用
```
magick
```
  （ImageMagick）或
```
img2pdf
```
  合并PNG图片
- ```
vercel
```
  → 执行
```
vercel deploy ~/Documents/slide-exports/<slug>-<日期>/
```
报告文件路径/链接。

注意事项（需告知用户）：

动画和演示者视图不会被保留——导出内容为静态快照。
若需交互式演示，请现场展示React版本；若需分享/PDF/可移植版本，请使用导出功能。
快照分辨率为1920×1080——在任何设备上都能呈现高质量效果，但文件大小会随幻灯片数量增加而增大。

Modes (quick invocations)

模式（快速调用命令）

Invocation	Mode	Behavior
`/slide-deck new <topic>`	new	Full pipeline (Steps 1–8)
`/slide-deck angles <topic>`	new	Stop at Step 2 (just the 3 angles)
`/slide-deck outline <topic>`	new	Stop at Step 3 (outline only)
`/slide-deck expand <slug>`	new	Skip to Step 4 from an existing outline
`/slide-deck notes <slug>`	update	Rewrite speaker notes for an existing deck
`/slide-deck rewrite <slug> <slide-id>`	update	Edit one slide
`/slide-deck update <slug>`	update	General modification with overflow guards
`/slide-deck ppt <pptx-path>`	ppt	Convert legacy PPTX → React deck
`/slide-deck export <slug> html`	export	Snapshot to standalone HTML
`/slide-deck export <slug> pdf`	export	Snapshot to PDF
`/slide-deck export <slug> vercel`	export	Snapshot + Vercel deploy → shareable URL
`/slide-deck preview <slug>`	—	Just check the deck URL

调用命令	模式	行为
`/slide-deck new <主题>`	新建	完整流程（步骤1至8）
`/slide-deck angles <主题>`	新建	执行到步骤2停止（仅提供3种角度）
`/slide-deck outline <主题>`	新建	执行到步骤3停止（仅生成大纲）
`/slide-deck expand <slug>`	新建	从现有大纲直接跳至步骤4
`/slide-deck notes <slug>`	更新	重写现有幻灯片的演讲者备注
`/slide-deck rewrite <slug> <幻灯片id>`	更新	编辑单张幻灯片
`/slide-deck update <slug>`	更新	常规修改，带有内容溢出防护
`/slide-deck ppt <pptx文件路径>`	PPT转换	将旧版PPTX转换为React幻灯片
`/slide-deck export <slug> html`	导出	快照为独立HTML
`/slide-deck export <slug> pdf`	导出	快照为PDF
`/slide-deck export <slug> vercel`	导出	快照并部署到Vercel → 生成可分享链接
`/slide-deck preview <slug>`	—	仅检查幻灯片URL

Composes with

可组合使用的工具

```
business-brainstorm
```
— if a pitch deck, brainstorm the offer first; deck draws from the brief
```
decide
```
— for talks that hinge on a decision (e.g., "should I take VC money?"),
```
/decide
```
first
```
deep-research
```
— for talks needing data the deck doesn't have yet
```
second-brain
```
— pull relevant
```
[[wiki]]
```
pages as content sources; the deck can cite them
```
watch-video
```
— turn a podcast episode, Loom, or talk recording into a deck outline (run in
```
visual
```
mode to also capture key moments + slides shown)
```
jab-hook
```
— once delivered, the talk becomes promo angles for the BIP rotation
```
frontend-skills
```
(external) — for non-branded HTML decks where your React deck repo isn't the home

```
business-brainstorm
```
— 若创建融资推介幻灯片，先通过该工具构思方案；幻灯片内容基于其生成的概要
```
decide
```
— 若演讲内容取决于某个决策（例如“我是否应该接受风险投资？”），先使用
```
/decide
```
工具
```
deep-research
```
— 若演讲需要幻灯片中没有的数据，可使用该工具进行深度调研
```
second-brain
```
— 提取相关的
```
[[wiki]]
```
页面作为内容来源；幻灯片可以引用这些内容
```
watch-video
```
— 将播客片段、Loom视频或演讲录音转换为幻灯片大纲（在
```
visual
```
模式下运行还可捕捉关键时刻和展示的幻灯片）
```
jab-hook
```
— 演讲完成后，可通过该工具将演讲内容转化为BIP轮换的推广角度
```
frontend-skills
```
（外部工具） — 若创建非品牌化HTML幻灯片，且不使用你的React幻灯片仓库时，可使用该工具

Notes on quality

质量注意事项

Show, don't tell — applied to narrative. Present 3 different angles for the deck (not one polished draft); let the user pick. Committing to a narrative before the alternatives are surfaced produces decks that are workmanlike, not memorable.
Density modes matter more than aesthetic. A speaker-led deck has 3-word slides and 5-line speaker notes. A reading-first deck (leave-behind, async) reverses it. Same content, opposite artifact. Ask which mode before drafting.
Slide text is abbreviated spoken. Both pass the read-aloud test. If a slide reads like a memo, it's wrong. If speaker notes read like slides, they're wrong.
Overflow guards on update mode. Don't blindly cram more content into an existing slide — if the addition tips the slide over its target word count or line count, propose splitting the slide or trimming existing content. Silently overflowing produces cramped decks.
Presenter-view stripped for exports. Playwright snapshots the
```
?present=0
```
mode so the export is clean. Never export the presenter view.
Brand-perfect > portable. The React deck is the source of truth. HTML/PDF/Vercel exports are snapshots for sharing — animations, interactions, presenter view live only in the React version.
1920×1080 default, 1280×720 for previews. Full-res snapshots run 30-50 MB for a 20-slide deck; low-res halves that at minimal visual loss.
Deploy is a real-money operation. Export mode's
```
vercel
```
path prompts before deploying. Auto-renew is on for domains + Vercel projects.

将“展示而非讲述”应用于叙事。 为幻灯片提供3种不同的角度（而非一个打磨好的草稿）；让用户选择。在展示替代方案之前就确定叙事结构，会导致幻灯片只是合格但不够令人难忘。
密度模式比美观更重要。 演讲主导型幻灯片每张只有3个单词的文本和5行演讲者备注。阅读优先型幻灯片（供留存、异步审阅）则相反。相同的内容，产出的形式完全不同。起草前务必询问用户选择哪种模式。
幻灯片文本是口语化的缩写。 幻灯片文本和演讲者备注都要能通过朗读测试。如果幻灯片读起来像备忘录，那就是错误的。如果演讲者备注读起来像幻灯片文本，那也是错误的。
更新模式下的内容溢出防护。 不要盲目地在现有幻灯片中塞入更多内容——如果添加的内容使幻灯片超出目标字数或行数，建议拆分幻灯片或删减现有内容。悄悄溢出会导致幻灯片内容拥挤。
导出时去除演示者视图。 Playwright会对
```
?present=0
```
模式进行快照，确保导出内容干净整洁。切勿导出演示者视图。
品牌完美优先于可移植性。 React幻灯片是权威来源。HTML/PDF/Vercel导出内容只是用于分享的快照——动画、交互、演示者视图仅在React版本中可用。
默认分辨率1920×1080，预览用1280×720。 20张幻灯片的全分辨率快照文件大小为30-50 MB；低分辨率版本文件大小减半，且视觉损失极小。
部署涉及实际费用。 导出模式的
```
vercel
```
路径在部署前会提示用户。域名和Vercel项目已开启自动续费。