CoinCat777/html-ppt README 风格本地安装与使用教程

作者：袖梨 2026-07-11

CoinCat777/html-ppt 是一个面向 Claude Code 的互动式 HTML 简报 Skill，作用是把文字、文件内容、URL 摘要或条列资料整理成单个自包含 index.html。产物不是传统 PPTX，而是能在浏览器里翻页的网页简报，内置键盘切换、左侧 Hover 目录、底部进度条，并用 Reveal.js 驱动页面切换。

它更像一个“网页报告生成规范包”：先规划 storyboard.md，等使用者确认后再写 index.html。这个两阶段流程能把主题、页数、素材取舍、图解模式和转场先定下来，减少直接写 HTML 后反复返工。

CoinCat777 html-ppt 从输入素材到 storyboard 和 index.html 的两阶段工作流

一分钟看效果

本地安装不需要构建服务，核心动作是把整个仓库放进 Claude Code 的 skills 目录。macOS 和 Linux 可以直接克隆到目标路径：

mkdir -p ~/.claude/skills
git clone https://github.com/CoinCat777/html-ppt.git ~/.claude/skills/html-ppt

Windows 放到 C:Users你的帐号.claudeskillshtml-ppt。重启 Claude Code 后，输入类似下面的请求即可触发：

把这份产品说明做成 html ppt，先输出分镜规划。
主题选 light-tech，内容深度选 A。

第一轮应得到 storyboard.md，里面包含主题选择、页数、每页标题、视觉素材、图解模式、转场和图表字段。确认后再进入 HTML 开发阶段，最终得到可直接打开的 index.html。

为什么不直接让模型写一个网页

普通“转成网页”的做法通常会把内容、版式、交互、配色和动画一次塞进 HTML，长资料很容易出现页数失控、文字太小、图文重叠、目录漏页。html-ppt 把问题拆成两段：先做分镜，再做页面，这让读者能在写代码前确认页面顺序和内容取舍。

做法前置规划产物检查方式
直接写单页网页常常没有一个 HTML靠浏览器肉眼检查
使用 html-pptstoryboard.md 先确认index.html + 可复查分镜主题、pattern、页数、TOC 分开检查

核心能力

  • 单文件交付：CSS 和 JS inline 到 index.html，不需要额外后端服务，浏览器可直接打开。
  • Reveal.js 交互：支持左右键翻页、鼠标点击、ESC 总览、滚轮和底部进度条。
  • 左侧目录：鼠标移到左侧边缘展开 TOC，点击目录项跳到对应页。
  • 四套主题：business、light-tech、warm-minimal、brand-warm，主题 token 集中在 config/themes.json。
  • 八种结构图：flowchart-vertical、flowchart-horizontal、compare-pairs、ng-ok-split、timeline-dual、stat-grid、vs-duel、warm-card-pattern。

从输入到输出的流程

  1. 扫描素材密度，先让使用者选择主题；细节很多时再选择精简版或豪华版。
  2. 生成 storyboard.md，每页写清布局、文案、视觉素材、图解模式、转场、图表和字体规范。
  3. 暂停等待确认，不在分镜阶段输出 HTML。
  4. 确认后读取 pattern demo 和 metadata，把主题 token、页面结构、Reveal.js 交互和 GSAP 动画写入 index.html。
  5. 完成后检查 section 数量、TOC 数量、进度条、键盘、点击、滚轮、图片路径和文字溢出。

CoinCat777 html-ppt 的主题配置、pattern、脚本和最终产物结构

仓库结构

html-ppt/
├── SKILL.md
├── config/
│   ├── themes.json
│   └── themes.index.json
├── assets/
│   ├── theme-business.css
│   ├── theme-light-tech.css
│   ├── theme-warm-minimal.css
│   └── theme-brand-warm.css
├── docs/
├── references/
│   ├── patternindex.html
│   ├── layouts.md
│   ├── previews/
│   └── patterns/
├── scripts/
│   ├── validate-patterns.js
│   ├── validate-themes.js
│   ├── generate-themes-index.js
│   └── generate-theme-previews.js
└── evals/
    └── evals.json

config/themes.json 是主题 token 的中心；references/patterns/index.json 是 pattern 清单；references/patternindex.html 提供视觉 demo 入口；scripts 目录用于检查主题、pattern 和索引是否一致。

常用检查命令

如果要改主题或新增 pattern，先准备 Node.js，再从仓库根目录运行检查脚本：

node scripts/validate-themes.js
node scripts/validate-patterns.js
node scripts/generate-themes-index.js

validate-themes.js 会检查主题 token、字体、UI 字段、预览路径和对比度；validate-patterns.js 会检查 pattern 的 HTML demo、JSON schema、索引关系和主题 token 引用。改动主题或结构图后先跑这两条，能提前发现缺文件、字段不一致和低对比度问题。

接手开发时看哪里

只想使用 Skill，可以从 README.md 和 SKILL.md 入手；要改主题，看 config/themes.json、assets/theme-*.css 和 docs/CONTRIBUTING_THEMES.md；要改结构图，看 references/patterns/*.json 和对应 HTML demo。新增内容时保持两个产物不混淆：storyboard.md 负责规划，index.html 负责最终展示。

CoinCat777/html-ppt 的优势在于把互动网页简报拆成可确认、可检查、可扩展的工程流程。安装后先用一段短资料跑出 storyboard.md，确认后再生成 index.html，再用主题和 pattern 脚本检查仓库一致性。这样处理长报告、产品说明和教学内容时，页面结构、交互和视觉规范都更容易稳定下来。

相关文章

精彩推荐