graphic-slide-deck

图形演示文稿

根据简报、内容笔记或现有文件，生成设计专业的 HTML 演示文稿。输出为单个独立的 HTML 文件，可在任何浏览器中打开，无需构建工具。

---

关键规则——必须遵守：

1. 每张幻灯片都必须在 100vh 内完整显示。幻灯片内不得滚动。内容溢出时 → 拆分成两张幻灯片。
2. 所有字号和间距都必须使用 clamp()。任何会缩放的元素都不得使用固定 px/rem。
3. 仅使用单个独立的 HTML 文件：所有 CSS/JS 均内嵌。除字体 CDN 链接外，不得使用任何外部依赖。
4. 切勿在聊天中直接输出 HTML。保存到文件，仅展示摘要。
5. 禁止使用千篇一律的 AI 廉价美学——请对照 references/style-presets.md 中的「禁止使用」列表进行检查。

---

第 1 步：收集简报

开始前需要三项信息。如果消息中三项信息均已提供：跳至第 2 步。

如果缺少任何一项，请原样询问：

"To get started, I need three things:

1. Purpose -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other)
2. Audience -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn)
3. Topic or content -- paste notes, a URL, a brief description, or upload a file"

在收到全部三项信息前，请等待。

---

第 2 步：完整收集信息

在一条消息中按类别询问所有问题。用户可以跳过任何问题——将采用默认值。

"A few questions before I start:

内容

1. 核心信息——受众离开后必须记住的一句话
2. 幻灯片数量——短篇（5-10）/ 中篇（10-20）/ 长篇（20+）？
3. 内容来源——所有内容已准备好 / 粗略笔记（我来整理）/ 仅有主题（我来起草）？
4. 现有素材——是否有要加入的图片、截图或徽标？（有 + 路径 / 无）

设计 5. 风格——midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options" 6. 宽高比——16:9（1920×1080，默认）/ 1:1（1080×1080，LinkedIn） 7. 内嵌编辑——导出后是否应支持在浏览器中编辑文本？（是 / 否）

输出 8. 输出格式——仅 HTML / HTML + PDF / HTML + PDF + 部署到 URL 9. 演示文稿名称——用于文件夹/文件命名的 slug（例如 "q2-investor-pitch"）；如果跳过，我会自动生成"

跳过时采用的默认值：

问题	默认值
核心信息	根据用途和主题推导
幻灯片数量	12
内容来源	仅有主题
现有素材	无
风格	clean-slate
宽高比	16:9
内嵌编辑	否
输出格式	HTML + PDF
演示文稿名称	根据主题 slug 推导

如果风格 = "show me options"： 生成 3 个单页 HTML 预览，每个预览使用一种适合演示文稿用途的不同风格预设。保存到 .claude-design/previews/style-a.html、style-b.html 和 style-c.html。分别打开：open .claude-design/previews/style-a.html 等。请用户选择后再进入第 3 步。

---

第 2.5 步：内部设计方向（不向用户展示）

根据第 2 步的回答，在第 3 步之前确定：

视觉风格（根据风格推导；如果未指定，则进行推断）：

• midnight-editorial 或 magazine-red → dark-editorial
• clean-slate 或 product-minimal → light-minimal
• matt-gray → neutral-professional
• brutalist → bold-expressive
• mint-pixel-corporate 或 soft-cloud → fresh-corporate
• 未指定风格：投资者路演 → midnight-editorial；销售 → clean-slate；会议 → brutalist 或 midnight-editorial；内部演示 → matt-gray

一张令人过目不忘的幻灯片——在第 3 步之前确定：

• 投资者路演 → stat-highlight（业绩/指标幻灯片）
• 销售演示文稿 → stat-highlight（ROI/成果幻灯片）
• 会议演讲 → quote-callout 或 stat-highlight（关键见解）
• 内部演示文稿 → closing-cta（决策/建议幻灯片）

布局选择倾向——记录最适合此类演示文稿、应在第 3 步优先考虑的 2-3 种布局。

切勿向用户询问设计方向——完全根据他们的回答推导。

---

第 3 步：结构设计

规划之前，先阅读 references/layout-library.md。

规划完整的幻灯片顺序。为每张幻灯片指定 references/layout-library.md 中的 13 种布局之一。

演示文稿类型 → 典型结构：

投资者路演（12 张幻灯片）：

1. [title-hero] 公司 + 标语
2. [section-divider] 问题
3. [text-full] 问题详述
4. [text-left-image-right] 解决方案概述
5. [image-full] 产品截图
6. [stat-highlight] 业绩——令人过目不忘的幻灯片
7. [comparison-table] 与竞争对手对比
8. [timeline] 路线图
9. [text-full] 团队
10. [stat-highlight] 市场规模
11. [text-left-image-right] 商业模式
12. [closing-cta] 融资诉求

销售演示文稿（8-10 张幻灯片）：

1. [title-hero]
2. [quote-callout] 潜在客户的痛点
3. [text-left-image-right] 解决方案
4. [image-grid] 产品截图
5. [stat-highlight] ROI/成果——令人过目不忘
6. [comparison-table] 与替代方案对比
7. [text-full] 实施/后续步骤
8. [closing-cta]

会议演讲（15-20 张幻灯片）： title-hero → section-dividers → text-full 幻灯片 → image-full → stat-highlight 或 quote-callout（令人过目不忘） → timeline → closing-cta

内部演示文稿（8-12 张幻灯片）： title-hero → text-full（背景）→ stat-highlight（当前状态）→ two-column-text（选项）→ comparison-table → text-full（建议）→ closing-cta（决策——令人过目不忘）

以带 [layout-type] 的编号列表形式输出建议结构。示例：

Proposed structure (12 slides, midnight-editorial style):

1. [title-hero] DataPulse -- Revenue decisions in 5 minutes
2. [section-divider] The Problem
...
12. [closing-cta] The ask + [email protected]

Does this structure work, or should I adjust any slides?

等待确认后再进行第 4 步。

---

第 4 步：内容草稿

按顺序撰写每张幻灯片的文案。仅限纯文本——暂不添加 HTML。

各版式的文案规则：

• title-hero：标题（最多 6 个词）+ 副标题（1 个句子）+ 可选的徽章文字
• section-divider：仅限 2–4 个词的章节标签
• text-full：标题（最多 5 个词）+ 4–6 个项目符号，或 2 个段落（同一张幻灯片上不能兼有两者）
• text-left-image-right / image-left-text-right：标题 + 3–4 个项目符号 + [IMAGE: description]
• two-column-text：2 个栏标题 + 每栏最多 3 个项目符号
• image-full：[IMAGE: description] + 可选的说明文字（最多 10 个词）
• image-grid：最多 6 个 [IMAGE: description] 占位符，并附上简短说明
• stat-highlight：2–4 个指标，格式为 NUMBER | label（例如 3× | faster close）。正文内容必须为零。
• quote-callout：引言（最多 30 个词）+ 引述者信息（姓名、职位）
• comparison-table：列标题（最多 3 个）+ 4–6 个行标签 + 单元格内容（每格 1–3 个词）
• timeline：3–6 个里程碑（标签 + 日期 + 1 行说明）
• closing-cta：标题（最多 5 个词）+ CTA 行动文字 + 联系信息（必须同时包含电子邮件和 URL）

禁用词（所有文案中一律不得出现）： "powerful"、"seamless"、"game-changing"、"leverage"、"innovative"、"revolutionary"、"transform"、"cutting-edge"、"robust"、"unlock"、"scalable"（作为填充形容词时）。

文案理念： 片段式表达也可以。数字胜过形容词。每个词都要发挥作用。

---

步骤 5：HTML 生成

生成任何 HTML 前，请全部阅读：

此技能的参考资料：

• references/design-system.md
• references/layout-library.md
• references/style-presets.md
• references/animation-guide.md

frontend-slides 交叉参考（请阅读以下确切文件）：

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css —— 将完整内容原样放入 <style> 块中
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md —— SlidePresentation 类、键盘导航、内联编辑系统
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md —— 入场动画、背景效果、交互效果

生成规则：

1. 使用单个自包含 HTML。所有 CSS 和 JS 均内联。字体 CDN <link> 是唯一的外部引用。
2. 将 viewport-base.css 的完整内容原样放入 <style> 块中——不得改述或缩短。
3. 字体仅限 Google Fonts 或 Fontshare。字体选择须来自 references/style-presets.md 中选定的预设。
4. 使用 html-template.md 中的 SlidePresentation 类。实现完整的键盘导航（方向键、空格、Page Up/Page Down）、触摸/滑动、进度条和导航圆点。生成导航圆点前，先执行 navDotsContainer.innerHTML = ""——绝不能跳过。
5. 如果选择启用内联编辑：实现 html-template.md 中完整的内联编辑系统，包括 exportFile()。exportFile() 函数在捕获 outerHTML 前，必须移除 contenteditable、body.edit-active 以及 .active/.show 类。
6. 宽高比：
   • 16:9（默认）：幻灯片为 width: 100vw; height: 100vh
   • 1:1（LinkedIn）：添加 --slide-height: min(100vh, 100vw) CSS 自定义属性，并将其用于 .slide
7. 每个幻灯片区块都必须使用 class="slide"——这是 export-pdf.sh 检测幻灯片所必需的。
8. 在每张幻灯片前添加注释：/* === SLIDE N: LAYOUT-TYPE === */
9. 以最大视觉权重呈现步骤 2.5 中那张最令人瞩目的幻灯片——采用最大字号、最多动画，并将风格预设的标志性元素以最高强度呈现。其他幻灯片的构图都应更克制。
10. 未提供图片时，使用 CSS 生成视觉元素（渐变网格、几何形状、animation-patterns.md 中的网格图案）。这是一种首选方案，而非备用方案。

排版规范：

• 统计数字：clamp(3.5rem, 12vw, 9rem)——占据幻灯片三分之一的指标会显得更具权威性
• 主视觉标题：至少使用 clamp(2.5rem, 8vw, 6rem)。绝不要为了稳妥而缩小字号。
• 用户可见的任何元素都不得使用固定 px/rem 尺寸。所有尺寸都使用 clamp。

**来自 viewport-base.css 的 CSS 易错点：**切勿直接在 CSS 中写 -clamp()、-min() 或 -max()。请使用 calc(-1 * clamp(...)) 将其包裹起来。

步骤 6：自我检查

逐项检查。修复所有未通过项——不要跳过。

视口与渲染：

• 每个 .slide 都有 height:100vh; height:100dvh; overflow:hidden
• 所有字号和间距都使用 clamp()——缩放元素不得使用固定 px
• 在 1280×720 视口下没有幻灯片溢出（根据 layout-library.md 中的密度限制进行检查）
• 图片使用 max-height: min(50vh, 400px)
• 已设置适用于 700px、600px、500px 视口高度的断点（参照 viewport-base.css）
• 已设置 prefers-reduced-motion 媒体查询
• CSS 中没有 -clamp()、-min()、-max()——需要负值时使用 calc(-1 * ...) 包裹

结构：

• 幻灯片数量与步骤 3 的计划一致
• 每张幻灯片都使用 class="slide"
• 每种布局类型都按照 references/layout-library.md 正确实现
• 存在 SlidePresentation 类，并包含键盘导航、触控、进度条和导航圆点
• 构建导航圆点前，先执行 navDotsContainer.innerHTML = ""
• 如果选择启用内联编辑：exportFile() 会在捕获 outerHTML 前移除编辑状态

设计质量：

• 有一张视觉上无可忽视的幻灯片占据主导地位——不会被埋没在权重相同的幻灯片中
• 字体层级清晰：展示文字 >> 标题 >> 正文（各层级之间的字号比例至少为 2:1）
• 样式预设标记应用一致（颜色、字体参照 references/style-presets.md）
• 没有粗制滥造的设计模式（根据 references/style-presets.md 中的「禁止使用」列表进行检查）

内容：

• 所有幻灯片文案中都没有禁用词
• title-hero 标题不超过 6 个词
• stat-highlight 中没有与数字争夺注意力的正文
• closing-cta 包含具体行动和联系信息（不能只有“Thank You”）

如果任何一项未通过：直接修复，然后在继续前重新逐项检查。

---

步骤 7：输出

先保存主 HTML 文件：

mkdir -p deck/[name]-slides

写入：deck/[name]-slides/index.html

打开：open deck/[name]-slides/index.html

单页 HTML 文件（始终生成）：

从主 HTML 中提取每个 <section class="slide">。为每个部分创建一个独立文件，包含：

• 主 HTML 中完整的 <style> 块（原样复制）
• 用最简 HTML 框架包裹的独立 <section class="slide">
• 不包含 SlidePresentation JS（单页静态查看，无需导航）

写入：deck/[name]-slides/slide-001.html、slide-002.html 等（编号补零至 3 位）。

如果请求生成 PDF：

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  deck/[name]-slides/index.html \
  deck/[name].pdf

注意：首次运行会自动安装 Playwright（约 30–60 秒）。请告知用户。

如果请求部署：

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
  deck/[name]-slides/

清理： 如果步骤 2 中生成了样式预览文件，请删除 .claude-design/previews/。

---

步骤 8：总结（聊天中不包含 HTML）

在聊天中提供：

## Slide Deck: [deck name]
Date: [today] | Style: [style] | Slides: [N] | Aspect: [16:9 or 1:1]
Purpose: [purpose] | Audience: [audience]

---

### Files
Main:      deck/[name]-slides/index.html
Per-slide: deck/[name]-slides/slide-001.html → slide-0NN.html
PDF:       deck/[name].pdf  [if generated]
Live URL:  [url]  [if deployed]

---

### Navigation
Arrow keys / Space / Page Up/Down -- advance slides
Click nav dots -- jump to any slide
Touch / swipe -- works on mobile

---

### Customize
Edit :root CSS variables at the top of the file to change colors
Swap the @import font URL to change typography
Remove .reveal class from elements to disable entrance animations

---

### Deck Checklist
- [ ] Replace [IMAGE: description] placeholders with real images
- [ ] Verify the metric/quote on slide [N] is accurate (the unmissable slide)
- [ ] Test on your target display size ([1920×1080 or 1080×1080])
- [ ] If presenting live: test keyboard nav in fullscreen mode (F11 / Cmd+Ctrl+F)
- [ ] Replace [QR: url] on closing slide with an actual QR code image

不要在聊天中输出 HTML。

---

章节参考

布局	适用场景
title-hero	开场幻灯片——大标题 + 副标题
section-divider	章节分隔——醒目的标签，简洁明了
text-full	标题 + 项目符号列表或段落
text-left-image-right	并排布局：文字 + 图片
image-left-text-right	并排布局：图片在前
two-column-text	对比、优缺点、前后对比
image-full	全幅图片 + 可选说明文字
image-grid	2×2 或 3×2 图片画廊
stat-highlight	2–4 个大型 KPI 指标
quote-callout	引言 + 署名
comparison-table	功能／选项对比表格
timeline	水平或垂直里程碑
closing-cta	结束幻灯片——行动号召 + 联系信息