一句话定位：基于前端原生技术开发、面向 AI 智能代理的 HTML 幻灯片一键生成技能库，可通过 AI 指令自动生成带样式、动画、演讲者视图的在线演示文稿。

（一）项目简介

1. 核心定位

html-ppt-skill 是适配 AgentSkill 框架的幻灯片能力插件，以 HTML+CSS+JS 为底层实现，将 PPT 排版、主题、页面布局、动画效果、演讲助手、批量导出能力封装成标准化技能接口，赋能各类 AI 大模型、智能编程工具通过自然语言指令自动生成可在线播放的 HTML 演示文档，替代传统 Office PPT 手工排版工作。

2. 解决痛点

1. 主流 AI 仅能输出 PPT 文字大纲，缺少版式美化能力，使用者需要耗费大量时间手动调整排版、配色与页面结构；
2. 传统 PPT 文件难以版本管理、不方便网页在线预览，批量截图导出流程繁琐；
3. 线下演讲缺少独立演讲者备注、倒计时、双屏预览等配套辅助工具。

3. 核心优势

1. 内置 36 套成套主题样式、15 套完整成品 PPT 模板、31 种通用页面布局、47 类动画特效，开箱即用无需从零设计；
2. 接入 AgentSkill 生态，一条自然语言即可驱动 AI 自动生成完整幻灯片；
3. 自带 S 键唤起演讲者控制面板，包含前后页预览、讲演文稿、演讲倒计时；
4. 纯静态前端资源，无需编译打包，配套 shell 脚本支持新建文稿、批量导出页面图片；
5. 全组件样式由 CSS 变量管控，一键全局替换整套 PPT 配色与风格。

（二）环境前置要求

1. 运行系统：Windows、macOS、Linux 全平台兼容，Windows 需提前配置 Git Bash/WSL 执行 shell 脚本；
2. 软件依赖：安装 Node.js（支持 npx 命令，用于在线一键安装技能包）、Git（可选，用于源码克隆本地部署）；
3. 运行环境：任意现代浏览器（Chrome/Edge/Firefox），用于预览 HTML 幻灯片效果；
4. 生态依赖：想要 AI 调用能力需搭载兼容 AgentSkill 规范的 AI 客户端（Cursor、Claude Code 等智能代理工具），纯本地预览模板无需接入 AI 环境。

（三）快速开始 / 安装部署

方式 1：npx 一键安装（推荐，接入 AI 智能代理）

在终端执行安装命令，一键将 PPT 生成技能注入 AgentSkill 环境：

shell

npx skills add https://github.com/lewislulu/html-ppt-skill

安装完成后，在绑定该技能的 AI 工具中直接输入自然语言指令即可生成 HTML 幻灯片，示例：

plaintext

生成8页简约商务风格项目汇报PPT

方式 2：源码本地部署（自定义修改、预览全套素材）

1. 克隆项目源码到本地

shell

git clone https://github.com/lewislulu/html-ppt-skill.git
cd html-ppt-skill

2. 使用内置脚本新建空白演示文稿

shell

./scripts/new-deck.sh my-demo-ppt

3. 在浏览器打开预览页面，查看项目内置资源

shell

# 主题样式预览
open templates/theme-showcase.html
# 页面布局预览
open templates/layout-showcase.html
# 动画效果预览
open templates/animation-showcase.html
# 全量模板汇总页
open templates/full-decks-index.html

4. 批量将幻灯片导出为图片（终端执行）

shell

./scripts/render.sh 你的PPT文件路径 指定页码

系统示例图：

源代码：https://github.com/lewislulu/html-ppt-skill