1. 项目定位与用途
html-ppt-skill 是一个纯静态 HTML 演示文稿生成工具包，定位为 AgentSkill，用于快速生成专业级别的 HTML 幻灯片。它提供丰富的视觉主题、页面布局和动画效果，所有资源均为即插即用的静态文件，无需任何构建步骤或依赖安装。用户可以通过自然语言指令让 AI agent 自动选择合适的主题、模板和布局来创建演示文稿，大幅降低创作门槛。
项目档案模板 / Starter
html-ppt-skill：纯静态 HTML 演示文稿生成工具包，36 主题 47 动画一键安装
html-ppt-skill 是一个纯静态 HTML 演示文稿生成工具包，提供 36 套主题、14 个模板、31 种布局和 47 种动画效果。通过 npx 命令一键安装，支持自然语言指令快速创建专业幻灯片，适用于技术分享、商业路演、小红书图文等场景。
AI 总结
html-ppt-skill 是一个纯静态 HTML 演示文稿生成工具包，集成 36 套主题、14 个完整模板、31 种单页布局和 47 种动画效果，通过 AgentSkill 机制支持自然语言指令快速创建专业幻灯片，无需任何构建步骤。
中文项目介绍
项目用途：html-ppt-skill 是一个用于生成专业 HTML 演示文稿的静态资源工具包，旨在简化从零制作幻灯片的过程。
解决的问题：传统制作 HTML 演示文稿需要手动编写大量 HTML/CSS/JS，且难以保证视觉一致性和专业性。本项目通过预定义的高质量主题、模板、布局和动画，让用户能快速生成视觉统一的专业幻灯片。
适用场景：技术分享、商业路演、社交媒体图文（如小红书）、产品发布、周报、课程模块等。
技术特征：纯静态实现，无构建步骤；36 个 CSS 主题文件可一键切换整体视觉风格；14 个完整模板覆盖常见场景；31 种模块化单页布局；27 种 CSS 动画与 20 种 Canvas 特效分离设计；通过 iframe 隔离预览避免样式冲突；运行时依赖 runtime.js 和 fx-runtime.js 处理导航与动画。
详细信息与使用说明
2. 解决的问题
本项目解决了从零开始制作 HTML 演示文稿的繁琐过程，包括设计系统不一致、动画实现复杂、多场景适配困难等问题。通过预定义的 36 套主题（覆盖从极简到赛博朋克等多种风格）、14 个完整模板（含真实场景提取和通用场景 scaffold）、31 种单页布局（封面、图表、时间线等）以及 47 种动画效果（27 种 CSS + 20 种 Canvas 特效），用户无需从零设计，即可快速产出视觉专业、动画丰富的演示文稿。
3. 适用场景
根据 README 和模板分类，主要适用场景包括：技术分享演示（tech-sharing）、商业路演（pitch-deck）、产品发布（product-launch）、周报（weekly-report）、社交媒体图文（如小红书 9 张 3:4 格式的 xhs-post）、课程模块（course-module）等。14 个完整模板中，8 个提取自真实案例（如小红书白底杂志风、终端 cyberpunk 风、蓝图架构图风），6 个为通用场景 scaffold，覆盖了大部分常见演示需求。
4. 安装方式
安装方式在 README 中明确给出：通过单条命令将 skill 注册到支持 AgentSkills 的 agent runtime 中。具体命令为：npx skills add https://github.com/lewislulu/html-ppt-skill。安装后，agent 即可使用该 skill 的能力。仓库中未提供手动下载或本地直接使用的安装方式，所有使用均需通过 agent 运行时。
5. 使用方式
使用方式为自然语言指令驱动。安装后，任何支持 AgentSkills 的 agent 可通过自然语言创建演示文稿，示例包括："做一份 8 页的技术分享 slides，用 cyberpunk 主题"、"turn this outline into a pitch deck"、"做一个小红书图文，9 张，白底柔和风"。agent 会自动解析需求，选择合适的主题、模板、布局和动画生成 HTML 文件。此外，examples/demo-deck/index.html 展示了手动引入资源的结构：通过 link 标签引入主题 CSS，section 使用 data-title 和 class 定义布局，data-anim 指定动画。
6. 实现特点与补充说明
核心实现特点包括：1) 纯静态资源：所有主题、模板、布局、动画均为 HTML/CSS/JS 文件，无构建步骤；2) 主题系统：每个主题为独立 CSS 文件，通过切换 link 标签全局重建设计令牌（颜色、字体、间距等）；3) 动画分层：CSS 动画（轻量级过渡）与 Canvas 特效（高性能图形）分离，分别通过 class 和脚本引入；4) 布局模块化：31 种单页布局作为可复用 HTML 片段，与内容解耦；5) 隔离预览：使用 iframe 渲染不同主题/模板，避免样式冲突；6) 运行时支持：runtime.js 处理导航与动画触发，fx-runtime.js 管理 Canvas 特效渲染。仓库中包含 4 个 showcase decks 和 56 张验证截图用于质量保证。
思维导图
html-ppt-skill
主题系统 (36)
极简风 (minimal-white, sharp-mono)
杂志风 (editorial-serif, xiaohongshu-white)
暗黑风 (dracula, nord, cyberpunk-neon)
复古风 (retro-tv, y2k-chrome, vaporwave)
其他 (bauhaus, glassmorphism, terminal-green...)
模板系统 (14)
真实案例提取 (8)
通用场景 scaffold (6)
布局系统 (31)
内容型 (cover, toc, bullets, quote)
数据型 (kpi-grid, chart-bar/line/pie/radar, table)
流程型 (timeline, roadmap, process-steps, gantt)
结构型 (two/three-column, arch-diagram, mindmap)
动画系统 (47)
CSS 动画 (27)
Canvas 特效 (20)
运行时支持
runtime.js (导航与触发)
fx-runtime.js (Canvas 渲染)
常见问题
如何安装 html-ppt-skill？
通过单条命令安装：npx skills add https://github.com/lewislulu/html-ppt-skill。该命令会将 skill 注册到支持 AgentSkills 的 agent runtime 中。仓库中未提供手动下载或本地直接使用的安装方式。
如何使用这个工具包创建演示文稿？
安装后，任何支持 AgentSkills 的 agent 可通过自然语言指令创建演示文稿，例如："做一份 8 页的技术分享 slides，用 cyberpunk 主题"、"turn this outline into a pitch deck"、"做一个小红书图文，9 张，白底柔和风"。agent 会自动选择合适的主题、模板、布局和动画生成 HTML 文件。此外，examples/demo-deck/index.html 展示了手动引入资源的结构。
支持多少种主题、模板、布局和动画？
根据 README，项目包含 36 个 CSS 主题（如 minimal-white、cyberpunk-neon、dracula 等）、14 个完整模板（8 个提取自真实案例，6 个通用场景）、31 种单页布局（封面、目录、图表、时间线等）以及 47 种动画效果（27 种 CSS 动画 + 20 种 Canvas 特效）。
是否需要构建步骤或额外依赖？
不需要。项目为纯静态资源，所有主题、模板、布局、动画均为 HTML/CSS/JS 文件，无需任何构建步骤或 npm 安装。资源即插即用，但需要通过 AgentSkill 机制或手动引入到 HTML 中使用。
可以在哪些场景下使用？
主要适用场景包括：技术分享演示、商业路演（pitch deck）、产品发布、周报、社交媒体图文（如小红书 9 张 3:4 格式）、课程模块等。14 个完整模板覆盖了大部分常见演示需求，且所有主题和布局均可自由组合。