FrontendSlides：零依赖 HTML 演示工具
FrontendSlides：零依赖 HTML 演示工具
来源：用户分享（文章整理）
整理时间：2026-05-18
标签：#FrontendSlides #HTML演示 #PPT转换 #Claude Code #零依赖 #网页幻灯片
一、项目概览
| 项目 | 信息 |
|---|---|
| 名称 | FrontendSlides |
| 定位 | 零依赖 HTML 演示文稿工具 |
| GitHub | github.com/zarazhangrui/frontend-slides |
| 协议 | MIT |
| 依赖 | Claude Code CLI、Python（PPT转换用）、Node.js（部署用） |
核心理念： 无需前端知识，就能快速生成兼具动画效果与视觉美感的 HTML 演示文稿。
二、核心优势
2.1 零依赖
| 特性 | 说明 |
|---|---|
| 单 HTML 文件 | CSS 和 JS 完全内嵌 |
| 无 npm | 不需要 Node.js 环境 |
| 无构建工具 | 不需要 Webpack/Vite |
| 无框架 | 原生 HTML/CSS/JS |
2.2 视觉样式选择
- 不需要文字描述设计偏好
- 直接从 3 种生成的预览效果中挑选心仪风格
2.3 PPT 文件转换
- 完整保留原有图片与内容
- 样式经过精心筛选，避免同质化
2.4 优质代码特性
| 特性 | 说明 |
|---|---|
| 可访问性 | 无障碍支持 |
| 响应式 | 适配不同屏幕 |
| 动画效果 | 丰富的演示动画 |
三、适用场景
| 场景 | 说明 |
|---|---|
| AI 创业公司路演 | 专业商务演示 |
| 学术成果展示 | 清晰展示研究内容 |
| 企业内部培训 | 统一的培训材料 |
| 个人作品介绍 | Portfolio 展示 |
| 日常办公 | 快速制作演示 |
四、环境准备
| 功能 | 依赖 |
|---|---|
| 核心功能 | Claude Code CLI |
| PPT 转换 | Python + python-pptx |
| 在线部署 | Node.js + Vercel 账号 |
| 导出 PDF | Node.js |
五、安装方式
5.1 插件市场安装（推荐）
在 Claude Code 中依次执行：
# 安装命令（文章中未提供具体命令）
安装完成后，输入 /frontend-slides 即可调用。
5.2 手动安装
# 1. 创建技能目录
mkdir -p ~/claude/skills/frontend-slides
# 2. 克隆仓库
git clone https://github.com/zarazhangrui/frontend-slides ~/claude/skills/frontend-slides
六、使用方式
6.1 创建新演示文稿
- 在 Claude Code 中输入
/frontend-slides - 告知工具制作需求（如：AI 初创公司路演文稿）
- 工具逐步询问内容、想要传递的感受
- 生成 3 种视觉风格预览
- 选定后生成完整演示文稿
- 自动在浏览器打开
6.2 转换 PPT 文件
- 输入
/frontend-slides - 告知转换需求
- 工具提取 PPT 中的文本、图片等内容
- 确认后选择视觉风格
- 快速生成包含所有原有资源的 HTML 演示文稿
七、部署与导出
7.1 部署为在线链接
# 使用 Vercel 部署
vercel --prod
7.2 导出为 PDF
# 导出 PDF
npx puppeteer-cli slides.pdf
八、项目特点总结
| 特点 | 说明 |
|---|---|
| 零依赖 | 单 HTML 文件，无 npm/框架 |
| 可视化选风格 | 不需要设计知识 |
| PPT 转换 | 保留原有内容 |
| 优质代码 | 可访问性、响应式 |
| 动画丰富 | 专业演示效果 |
九、总结
FrontendSlides 重新定义了演示文稿的制作方式，降低了网页版演示文稿的制作门槛。
核心价值：
- 无需设计与前端开发能力
- 生成的代码规范优质
- 展示效果稳定且富有创意
- 兼顾实用性与专业性
适用人群：
- 不想学 PPT 设计的人
- 需要快速制作演示的开发者
- 需要将 PPT 转为网页格式的用户
十、资源链接
| 资源 | 链接 |
|---|---|
| GitHub | github.com/zarazhangrui/frontend-slides |
| 协议 | MIT |
本文由 AI 辅助整理，供技术学习参考。