lclyn814-chao/html-ppt-adp README：3 问向导生成 14 套单文件 HTML 演示

lclyn814-chao/html-ppt-adp 是一个面向 Claude Code 的 HTML 演示文稿 Skill，用 3 个问题把行业场景、风格偏好和基本信息收齐，再从 templates/ 读取对应模板，生成可直接用浏览器打开的单文件 HTML。它适合想快速做科技、学术、政务、校园活动、艺术、教育、商务类演示的人，产物不是 PPTX，而是 CSS 和 JS 内联的完整 HTML 文件。

这个项目的重点在“少问但问准”：先选 7 个行业场景之一，再选该行业下的两种风格之一，最后填写标题、副标题、页数和主题色。Claude 读取模板后替换封面、调整页数、套入主题变量，并保留模板里的卡片、标题、粒子、动效和导航系统。

一分钟看效果

当前真实仓库入口是 lclyn814-chao/html-ppt-adp。本地安装可先克隆仓库，再把 SKILL.md 链接到 Claude Code 的 skills 目录：

git clone https://github.com/lclyn814-chao/html-ppt-adp.git
ln -s $(pwd)/html-ppt-adp/SKILL.md ~/.claude/skills/html-ppt-adp.md

Windows CMD 对应使用 mklink：

mklink "%USERPROFILE%.claudeskillshtml-ppt-adp.md" "%CD%html-ppt-adpSKILL.md"

安装后在 Claude Code 中输入：

/html-ppt-adp

Skill 会一次性问 3 个问题：行业场景、风格偏好、基本信息。基本信息里至少需要标题；副标题可以留空；页数范围是 3 到 30；主题色可填 #rrggbb，留空则使用模板默认色。

为什么不是直接写一个网页

普通“帮我做个 HTML 演示”的做法会把行业定位、视觉风格、页数、色彩、导航和动效混在一次生成里，结果常见问题是风格泛、页数乱、导航不一致。html-ppt-adp 把选择收窄到 7 个行业和 14 套模板，先把模板骨架定下来，再改标题、页数和主题变量。

14 套模板覆盖哪些场景

模板按 7 个行业场景组织，每个场景两种风格。科技方向有 tech-particle 和 tech-matrix；学术方向有 academic-clean 和 academic-dark；政务方向有 gov-formal 和 gov-data；大学生活动有 campus-vibrant 和 campus-minimal；艺术设计有 art-ink 和 art-neon；教育培训有 edu-warm 和 edu-interactive；商务招投标有 biz-mckinsey 和 biz-pitch。

SKILL.md 里写明模板路径由回答映射而来：templates/{industry}-{style}.html。如果解析出来的模板不存在，会回退到 templates/tech-particle.html。生成时必须读取对应模板文件，不能把原始模板代码塞进 SKILL.md。

工作原理

1. Claude 一次性询问行业、风格和基本信息，等待回答后再生成。
2. 把 Q1 映射成 tech、academic、gov、campus、art、edu 或 biz。
3. 把 Q2 映射成 particle、matrix、clean、dark 等风格 key。
4. 读取 templates/{industry}-{style}.html，替换封面标题和副标题。
5. 按 3 到 30 页范围生成 slide，超出范围会被截到边界内。
6. 如果给了主题色，替换 :root 里的 --primary、--accent 等变量。
7. 输出完整 HTML，不留占位符，也不截断。

仓库结构

html-ppt-adp/
├── SKILL.md
├── README.md
├── index.html
├── templates/
│   ├── tech-particle.html
│   ├── tech-matrix.html
│   ├── academic-clean.html
│   ├── academic-dark.html
│   ├── gov-formal.html
│   ├── gov-data.html
│   ├── campus-vibrant.html
│   ├── campus-minimal.html
│   ├── art-ink.html
│   ├── art-neon.html
│   ├── biz-mckinsey.html
│   ├── biz-pitch.html
│   ├── edu-warm.html
│   └── edu-interactive.html
└── docs/
    ├── systems.md
    └── customization.md

index.html 是模板画廊页面，README 也提供 GitHub Pages 画廊入口。docs/systems.md 解释六大系统：CSS 变量、卡片、标题、粒子、动效、导航。docs/customization.md 说明如何修改顶部 :root {} 变量来换主题色。

改主题色时看两个地方

多数模板的颜色集中在 :root：

:root {
  --primary: #00d4ff;
  --accent:  #0066ff;
  --bg-dark: #040816;
}

只改主色和强调色时，优先改这个区块。需要注意的是，粒子系统通过原生 Canvas API 实现，部分粒子颜色写在 JS 里；如果只改 CSS 变量，Canvas 粒子可能仍然保留旧颜色。浅色模板如 academic-clean、gov-formal、biz-mckinsey，正文颜色也要同步使用深色值。

使用边界

这个 skill 适合快速生成可演示、可打开、易改色的 HTML slide；它不生成 PPTX，也不负责把 HTML 自动转 PowerPoint。模板里允许 Google Fonts CDN，离线时会回退到系统字体；粒子系统只使用原生 Canvas API，不依赖第三方 JS 库。输出 HTML 后，先用浏览器打开检查翻页、触摸、导航、数字动效和移动端宽度，再交给别人使用。

lclyn814-chao/html-ppt-adp 的价值在于把 HTML 演示的选择面压到 3 个问题：确定场景、确定风格，最后填标题、页数和主题色。对经常做轻量演示页的人来说，它比从零写网页更快，也比临时拼模板更稳定；最终检查时，只要核对单文件 HTML、导航交互和 :root 主题变量，就能比较快地判断这份演示是否可用。