Frontend Slides：不会设计也能做出好看的演示文稿

GitHub: zarazhangrui/frontend-slides | ⭐ 14,900+ Stars | MIT License | Claude Code Skill

如果你做演示文稿时最头疼的不是内容，而是"怎么做才好看"——这个项目可能会改变你的工作流。

它是什么？

Frontend Slides 是一个 Claude Code 的 Skill 插件，帮你用 AI 做出带动画、有设计感的 HTML 演示文稿。

最核心的设计理念只有八个字："看，别问"（Show, don't tell）。

它不问你"你喜欢什么设计风格"——大部分人根本回答不上来。而是直接生成 3 张视觉预览图让你挑，看到喜欢的选就行了。

为什么 14,900 人给了 Star？

我觉得有四个原因。

1. 零依赖：一个 HTML 文件走天下

生成的演示文稿是单个 HTML 文件，所有 CSS 和 JS 内联在一起：

• 不需要 npm
• 不需要 React/Vue
• 不需要构建工具
• 双击就能在浏览器里打开

作者有句话我很喜欢：

Dependencies are debt.（依赖就是债务。）

一个 HTML 文件十年后还能打开。一个 2019 年的 React 项目？祝你好运。

2. 反 AI 味

这个项目明确反对 AI 常见的烂大街设计——比如"白色背景上的蓝紫渐变"。内置的 12 种风格都经过人工策展，每种都有辨识度，不会有"又是 AI 做的"那种千篇一律感。

3. 12 种风格，覆盖不同场景

暗色主题（4 种）：

• Bold Signal — 高冲击力，深色背景 + 彩色卡片，适合路演
• Electric Studio — 干净专业，分栏布局，适合汇报
• Creative Voltage — 复古现代风，电光蓝 + 霓虹，适合创意展示
• Dark Botanical — 优雅精致，暖色点缀，适合高端品牌

亮色主题（4 种）：

• Notebook Tabs — 编辑风，彩色标签页
• Pastel Geometry — 友好亲切，几何色块
• Split Pastel — 活泼现代，双色分栏
• Vintage Editorial — 有个性，几何形状装饰

特色风格（4 种）：

• Neon Cyber — 未来感，粒子背景，霓虹发光
• Terminal Green — 黑客风，终端绿，开发者最爱
• Swiss Modern — 极简，包豪斯风格
• Paper & Ink — 文艺范，首字下沉，引语

4. PPT 也能转

如果你已经有一个 PowerPoint 文件，它可以提取里面的文字和图片，转成 HTML 版本，保留所有原始内容。

怎么用？

在 Claude Code 里输入：

/frontend-slides

> "帮我做一个 AI 创业公司的融资路演 PPT"

然后 AI 会：

1. 问你要什么内容
2. 问你要什么感觉（震撼？兴奋？冷静？）
3. 生成 3 种视觉风格让你选
4. 生成完整演示文稿，带入场动画
5. 在浏览器中打开

整个过程不需要你写一行 CSS，不需要懂任何前端知识。

分享和导出

做完之后怎么给别人看？两种方式：

部署到线上：

scripts/deploy.sh ./my-deck/index.html

一键部署到 Vercel，生成一个链接。手机、平板、电脑都能看——这点比 PPT 强，PPT 发过去对方不一定有软件打开。

导出 PDF：

scripts/export-pdf.sh ./my-deck/index.html

用 Playwright 截图每页，合并成 PDF。适合发邮件、Slack、企业微信、Notion。注意动画效果不会保留，是静态截图。

架构设计

这个项目用了**"渐进式披露"**的设计哲学：

• SKILL.md 只有约 180 行，是一张"地图"
• 其他文件（风格预设、动画模式、HTML 模板）只在需要时才加载

作者引用了 OpenAI 的 Harness Engineering 原则：

"给 Agent 一张地图，而不是 1000 页说明书。"

这不只是技术选择，是对 AI Agent 工作方式的深刻理解——Agent 不需要把所有细节都塞进上下文，它只需要知道"去哪里找"。

适合什么场景？

适合：

• 快速做出好看的 HTML 演示稿，不需要打开 PowerPoint
• 路演、汇报、内部分享
• 需要一个可分享的链接（手机也能看）
• 技术分享用 Terminal Green 风格，效果拉满
• 转成 PDF 发邮件

不太适合：

• 需要复杂动画和转场效果的场合（HTML 动画比 PPT 简单但没那么丰富）
• 团队已经有成熟的 Keynote/PPT 工作流且不想改
• 需要打印高精度版本（HTML 的色彩管理不如专业排版软件）

冷静评价

优点：

• 零依赖，单 HTML 文件，兼容性极强
• "视觉预览选风格"的交互方式很聪明，降低决策门槛
• 反 AI 味，风格有辨识度
• PPT 转换功能实用
• MIT 许可，商用无限制
• 体积小，只有几个文件，安装简单

注意点：

• 依赖 Claude Code CLI，不是独立工具
• 动画效果在 PDF 导出时丢失
• 如果你已经有好用的演示文稿工作流，HTML 版本的优势主要在"可分享链接"这一点

总结

Frontend Slides 是我见过的最聪明的 AI 演示工具。它不试图替代 PowerPoint，而是用 AI 的能力解决了一个真实痛点：不会设计的人也想做出好看的演示文稿。

14,900 颗 Star 证明了这个需求是真实存在的。

仓库：https://github.com/zarazhangrui/frontend-slides 安装：git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides 使用：在 Claude Code 中输入 /frontend-slides

标签：Frontend Slides, HTML 演示, Claude Code, AI 工具, 演示文稿, PPT 替代, 零依赖, 开源