stan-html-deck

斯坦星球品牌 HTML 演讲 Deck 生成器 — 输入内容，输出品牌演示文稿。替代 PPT，专注 HTML。

---

触发条件

当用户说以下任一表达时激活：

• "做一个关于 XX 的斯坦讲座" / "做斯坦 PPT"
• "生成一个 HTML 演示稿 / slide deck"
• "我要做教学分享的 slide"
• "帮我把这个内容做成演讲页面"
• 明确要求"用斯坦风格"或"蓝色橙色科技风"的演示

---

设计原则

这是斯坦星球的专属演示工具，只有一套主题。 不做多风格选择。

• 深蓝科技感为主调（#1A3C96 蓝 + #E87800 橙）
• 微软雅黑字体，16:9 横版
• 每页一个核心观点，信息密度低
• 用于投屏/大屏演示，字号要大、对比度要高

---

工作流程（3 步）

Step 1: 确认基础信息（一次问完）

请确认以下信息：
1. 讲座主题？
2. 受众人群？（家长/学生/教师/内部员工/合作方）
3. 预计页数？（一般 8-20 页）
4. 是否有素材图片？（路径或 URL）

如果用户已提供完整的讲座大纲或内容草稿，直接跳到 Step 2，不需要再追问。

Step 2: 展示内容大纲

基于用户提供的内容，输出讲座大纲：

## 讲座大纲

**标题**：[讲座标题]
**受众**：[受众]
**页数**：约 N 页

1. 封面 (L01) — 标题 + 副标题
2. 目录 (L02) — 章节导航
3. 章节一标题 (L03) — 章节分隔
4. 要点一 (L04) — 具体内容
5. 要点二 (L05) — 卡片展示
...
N. 结束页 (L06) — 致谢

展示大纲等用户确认。每个页面标注版式类型（L01-L06）。

Step 3: 生成 HTML

大纲确认后，读取以下文件按需使用：

1. assets/template.html — HTML 骨架模板。不要从零写 HTML，始终基于此模板修改。
2. references/brand-tokens.md — 品牌颜色、字体、间距 CSS 变量
3. references/layouts.md — 6 种版式的 HTML 结构和规范

生成步骤：

1. 复制 assets/template.html 的完整内容
2. 替换 <title> 为讲座标题
3. 在 <!-- SLIDES_HERE --> 处插入所有 <section class="stan-slide ..."> 页面
4. 每页按 references/layouts.md 的规范选择版式：
   • L01 封面 → 深蓝渐变背景，居中大标题 + 副标题
   • L02 目录 → 浅蓝白底，2 列网格排列章节
   • L03 章节分隔 → 深蓝 + 橙色顶条，章节名
   • L04 正文单栏 → 白底，橙色圆点列表或分栏布局
   • L05 卡片网格 → 浅蓝底，2×2 或 3×2 白色卡片
   • L06 结束页 → 深蓝渐变，居中致谢
5. 关键元素用 data-anim 属性标记，实现入场动画
6. 输出为单个 HTML 文件，保存到工作区

---

版式速查

ID	类名	背景	用途
L01	.stan-slide.hero-dark	深蓝渐变	封面、开场
L02	.stan-slide.toc-light	#F5F7FB	目录大纲
L03	.stan-slide.section-divider	深蓝+橙条	章节过渡
L04	.stan-slide.content-single	白色	正文要点
L05	.stan-slide.card-grid	#F5F7FB	多要点卡片
L06	.stan-slide.ending-dark	深蓝渐变	结束致谢

详细结构和 HTML 示例见 references/layouts.md。

---

内容规范

1. 每页文字不宜过多 — 标题 ≤ 15 字，正文要点 ≤ 5 条/页
2. 优先用图标而非文字列表 — emoji 或纯 CSS 几何图标
3. 深色/亮色页面交替 — L01(深) → L02(亮) → L03(深) → L04(亮) → L05(亮) → L06(深)，形成视觉节奏
4. 橙色作为强调色 — 不要大面积使用，仅用于序号、标签、分割线、高亮词
5. 所有页面必须有 data-anim 标记 — 标题、正文区域都加上，保证翻页有入场效果

---

技术要求

• 单文件：所有 CSS/JS 内联，无外部依赖
• 16:9 横版：100vw × 100vh
• 投屏友好：字号 ≥ 14px，高对比度
• 键盘翻页：← → Space PageUp/Down Home End
• ESC 索引：网格缩略图概览
• 全屏：按 F 键进入
• 触屏：左右滑动翻页
• 轮播锁：翻页动画 0.7s 内禁止二次触发

---

生成示例

用户输入："做一个关于'AI 如何辅助教学'的内部分享，面向教研团队，大概 10 页。"

→ Step 1 跳过（信息已足够）
→ Step 2 输出大纲，确认
→ Step 3 读取模板 + 版式文件，生成 HTML

---

参考文件

• assets/template.html — HTML 骨架模板（必须基于此生成，不要从零写）
• references/brand-tokens.md — 品牌设计令牌（CSS 变量全集）
• references/layouts.md — 6 种版式规范 + HTML 示例

---

与 stan-slides 的关系

本技能是 stan-slides 的HTML 专项升级版：

• stan-slides 同时输出 HTML + PPTX，效果分散 → 本技能只输出 HTML
• stan-slides 使用 Reveal.js 风格 → 本技能纯手写 Vanilla JS
• stan-slides 有多套风格选项 → 本技能只有斯坦品牌专属主题
• 旧技能的品牌规范（brand-guide.md）已整合到 references/brand-tokens.md

如果用户需要 .pptx 格式，应使用 stan-slides 的 PPT 生成功能；如果只需要 HTML 演讲，使用本技能。

---

技能版本: 1.0.0 | 创建日期: 2026-05-16 | 基于 guizang-ppt-skill 技术骨架 + stan-slides 品牌规范