图形幻灯片组
从简短描述、内容笔记或现有文件生成专业设计的HTML幻灯片组。输出为单个自包含HTML文件——可在任何浏览器中打开，无需构建工具。
关键规则——不可协商：
- 每个幻灯片必须适合100vh。幻灯片内部无滚动。内容溢出→分成两个幻灯片。
- 所有字体大小和间距必须使用
clamp()。在任何可缩放元素上从不使用固定的px或rem。 - 单个自包含HTML：所有CSS/JS内联。零外部依赖，除了字体CDN链接。
- 永远不要将HTML转储到聊天中。保存到文件，仅显示摘要。
- 没有通用的人工智能垃圾美学——对照
references/style-presets.md中的“禁止使用”列表进行检查。
步骤1：内容获取
需要三件事才能开始。如果消息中已包含这三件事：跳到步骤2。
如果有任何缺失，请准确询问：
“要开始，我需要三件事：
- 目的——这个演示文稿的用途是什么？（投资者推介 / 销售电话 / 会议演讲 / 内部演示 / 入职培训 / 其他）
- 受众——谁会看到它？（风险投资人、潜在客户、你的团队、高管、会议厅、LinkedIn）
- 主题或内容——粘贴笔记、URL、简短描述或上传文件”
等待这三件事全部提供后再继续。
步骤2：完整信息收集
一次性询问所有问题，按类别分组。用户可以跳过任何问题——使用默认值。
“在我开始之前，有几个问题：
内容
- 关键信息——观众离开后必须记住的一句话
- 幻灯片数量——短（5-10）/ 中（10-20）/ 长（20+）？
- 内容来源——所有内容已准备好 / 粗略笔记（我来整理）/ 仅主题（我来起草）？
- 现有资源——是否包含任何图片、截图或标志？（是 + 路径 / 否）
设计 5. 风格——午夜编辑 / 哑光灰 / 清洁状态 / 粗野主义 / 薄荷像素企业 / 产品极简 / 杂志红 / 软云 / “显示选项” 6. 宽高比——16:9（1920×1080，默认）/ 1:1（1080×1080，LinkedIn） 7. 内联编辑——导出后文本是否可以在浏览器中编辑？（是 / 否）
输出 8. 输出格式——仅HTML / HTML + PDF / HTML + PDF + 部署到URL 9. 演示文稿名称——用于文件/文件夹命名的短链接（例如“q2-investor-pitch”）；如果跳过，我将自动生成”
如果跳过则使用的默认值：
| 问题 | 默认值 |
|---|---|
| 关键信息 | 从目的+主题推导 |
| 幻灯片数量 | 12 |
| 内容来源 | 仅主题 |
| 现有资源 | 无 |
| 风格 | 清洁状态 |
| 宽高比 | 16:9 |
| 内联编辑 | 否 |
| 输出格式 | HTML + PDF |
| 演示文稿名称 | 从主题短链接推导 |
如果风格 = “显示选项”：
生成3个单幻灯片的HTML预览（分别对应适合演示文稿目的的3种不同风格预设）。保存到.claude-design/previews/style-a.html、style-b.html、style-c.html。打开每个：open .claude-design/previews/style-a.html等。在步骤3之前要求用户选择。
步骤2.5：内部设计方向（不显示给用户）
根据步骤2的答案，在步骤3之前确定：
视觉特征（从风格推导，如果未指定则推断）：
- 午夜编辑或杂志红→
dark-editorial - 清洁状态或产品极简→
light-minimal - 哑光灰→
neutral-professional - 粗野主义→
bold-expressive - 薄荷像素企业或软云→
fresh-corporate - 风格未指定：投资者推介→午夜编辑；销售→清洁状态；会议→粗野主义或午夜编辑；内部→哑光灰
一个不可错过的幻灯片——在步骤3之前确定：
- 投资者推介→数据高亮（吸引力/指标幻灯片）
- 销售演示文稿→数据高亮（ROI/结果幻灯片）
- 会议演讲→引用标注或数据高亮（关键见解）
- 内部演示→结束行动号召（决策/推荐幻灯片）
布局选择倾向——记录此演示文稿类型最相关的2-3种布局，以便在步骤3中优先考虑。
永远不要向用户询问设计方向——完全从他们的答案中推导。
步骤3：结构设计
在规划之前阅读references/layout-library.md。
规划完整的幻灯片顺序。为每个幻灯片分配一个来自references/layout-library.md中13种布局的布局类型。
演示文稿类型→典型结构：
投资者推介（12张幻灯片）：
- [标题英雄] 公司 + 标语
- [章节分隔线] 问题
- [全文本] 问题详情
- [左文本右图片] 解决方案概述
- [全图片] 产品截图
- [数据高亮] 吸引力——不可错过的幻灯片
- [对比表格] 对比竞争对手
- [时间线] 路线图
- [全文本] 团队
- [数据高亮] 市场规模
- [左文本右图片] 商业模式
- [结束行动号召] 请求
销售演示文稿（8-10张幻灯片）：
- [标题英雄]
- [引用标注] 潜在客户痛点
- [左文本右图片] 解决方案
- [图片网格] 产品截图
- [数据高亮] ROI/结果——不可错过
- [对比表格] 对比替代方案
- [全文本] 实施/后续步骤
- [结束行动号召]
会议演讲（15-20张幻灯片）： 标题英雄→章节分隔线→全文本幻灯片→全图片→数据高亮或引用标注（不可错过）→时间线→结束行动号召
内部演示（8-12张幻灯片）： 标题英雄→全文本（背景）→数据高亮（当前状态）→双列文本（选项）→对比表格→全文本（推荐）→结束行动号召（决策——不可错过）
将建议的结构输出为带方括号[布局类型]的编号列表。示例：
建议结构（12张幻灯片，午夜编辑风格）：
1. [标题英雄] DataPulse——5分钟内做出收入决策
2. [章节分隔线] 问题
...
12. [结束行动号召] 请求 + [email protected]
这个结构是否可行，还是需要调整任何幻灯片？
在步骤4之前等待确认。
步骤4：内容草稿
按顺序编写每个幻灯片的文案。仅纯文本——尚无HTML。
每种布局的文案规则：
标题英雄：标题（最多6个字）+ 副标题（1个句子）+ 可选徽章文本章节分隔线：仅2-4个字的章节标签全文本：标题（最多5个字）+ 4-6个要点或2个段落（同一幻灯片上永远不要同时使用）左文本右图片/左图片右文本：标题 + 3-4个要点 +[图片: 描述]双列文本：2列标题 + 每列最多3个要点全图片：[图片: 描述]+ 可选说明文字（最多10个字）图片网格：最多6个[图片: 描述]占位符，带简短说明文字数据高亮：2-4个指标，写为数字 | 标签（例如3× | 更快关闭）。零正文文案。引用标注：引用（最多30个字）+ 出处（姓名、职位）对比表格：列标题（最多3个）+ 4-6行标签 + 单元格内容（每个1-3个字）时间线：3-6个里程碑（标签 + 日期 + 1行描述）结束行动号召：标题（最多5个字）+ 行动号召文本 + 联系信息（电子邮件 + URL——两者都需要）
禁止使用的词汇（在所有文案中，无一例外）： “强大”、“无缝”、“改变游戏规则”、“利用”、“创新”、“革命性”、“转变”、“前沿”、“健壮”、“解锁”、“可扩展”（作为填充形容词）。
文案理念： 片段即可。数字优于形容词。每个字都要有存在的价值。
步骤5：HTML生成
在生成任何HTML之前阅读所有内容：
此技能的参考资料：
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/animation-guide.md
前端幻灯片交叉引用（阅读这些确切的文件）：
/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——入场动画、背景效果、交互效果
生成规则：
- 单个自包含HTML。所有CSS和JS内联。字体CDN
<link>是唯一的外部引用。 - 在
<style>块内包含viewport-base.css的完整逐字内容——不要解释或缩短它。 - 仅使用Google Fonts或Fontshare的字体。字体选择来自
references/style-presets.md中选定的预设。 - 使用
html-template.md中的SlidePresentation类。实现完整的键盘导航（箭头键、空格键、Page Up/Down）、触摸/滑动、进度条和导航点。在构建导航点之前执行navDotsContainer.innerHTML = ""——永远不要跳过此步骤。 - 如果选择内联编辑：实现
html-template.md中完整的内联编辑系统，包括exportFile()。exportFile()函数在捕获outerHTML之前必须剥离contenteditable、body.edit-active以及.active/.show类。 - 宽高比：
- 16:9（默认）：幻灯片为
width: 100vw; height: 100vh - 1:1（LinkedIn）：添加
--slide-height: min(100vh, 100vw)CSS自定义属性，并在.slide上使用它
- 16:9（默认）：幻灯片为
- 每个幻灯片部分必须使用
class="slide"——这是export-pdf.sh的幻灯片检测所必需的。 - 在每个幻灯片之前添加注释：
/* === 幻灯片 N: 布局类型 === */ - 以最大的视觉权重应用步骤2.5中的一个不可错过的幻灯片——最大的字体、最多的动画、风格预设的标志性元素全强度应用。所有其他幻灯片在构图上应更安静。
- 未提供图片→使用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中的“禁止使用”列表进行检查）
内容：
- 任何幻灯片文案中没有禁止使用的词汇
- 标题英雄标题为6个字或更少
- 数据高亮具有零正文文案与数字竞争
- 结束行动号召具有具体行动 + 联系信息（不仅仅是“谢谢”）
如果任何检查失败：内联修复，然后在继续之前重新运行检查清单。
步骤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）
在聊天中呈现：
## 幻灯片组：[演示文稿名称]
日期：[今天] | 风格：[风格] | 幻灯片：[N] | 宽高比：[16:9或1:1]
目的：[目的] | 受众：[受众]
---
### 文件
主文件： deck/[name]-slides/index.html
逐幻灯片： deck/[name]-slides/slide-001.html → slide-0NN.html
PDF： deck/[name].pdf [如果生成]
实时URL： [url] [如果部署]
---
### 导航
箭头键 / 空格键 / Page Up/Down —— 前进幻灯片
点击导航点 —— 跳转到任何幻灯片
触摸 / 滑动 —— 在移动设备上有效
---
### 自定义
编辑文件顶部的:root CSS变量以更改颜色
交换@import字体URL以更改字体
从元素中移除.reveal类以禁用入场动画
---
### 演示文稿检查清单
- [ ] 用真实图片替换[IMAGE: description]占位符
- [ ] 验证幻灯片[N]上的指标/引用是否准确（不可错过的幻灯片）
- [ ] 在目标显示尺寸（[1920×1080或1080×1080]）上测试
- [ ] 如果现场演示：测试全屏键盘导航
…
[为翻译而截断]