AI 工具箱 · frontend-slides

frontend-slides:不用懂设计,一句话生成好看的网页 PPT

⭐ HTML 演示品类 GitHub 星标第一(25.7k 星),出自科技博主 张咋啦 Zara(前飞书产品营销负责人、哈佛本科、美国湾区 AI 产品经理)。

frontend-slides 生成的幻灯片示例(Neo-Grid Bold 风格)

一、这是什么

frontend-slides 是一个跑在 AI 编程助手里的演示制作工具(skill),专门做 网页版幻灯片——不是传统的 .pptx 文件,而是一个可以直接在浏览器里翻页演示的 HTML 页面。

它能从零帮你生成一整套幻灯片,也能把你现成的 PowerPoint 提取出来、换成好看的网页版。最大的特点是「不用你懂设计」:你只管说内容,好不好看它来负责。

二、它解决什么痛点:给你看,不让你说

做 PPT 最难的从来不是写字,是「不知道排成什么样才好看」。传统 AI 工具会问你"想要商务风还是极简风",可这些词你自己都说不清。

frontend-slides 反过来玩——它一次直接给你 3 版不同风格的预览,你挑一个顺眼的就行。作者把这套思路叫「Show, don't tell(给你看,不让你说)」,也就是你只需要"反应",不需要"描述"。

另一个坚持:零依赖。每份演示都是单个 HTML 文件,样式和脚本全内联,不装任何框架。作者的原话是——"一个 HTML 文件 10 年后还能打开;2019 年的 React 项目?祝你好运。"

三、核心能力

🎨 46 套设计风格

12 套精选主题 + 34 套大胆模板,风格覆盖暗色、亮色、复古、瑞士排版、赛博等,还特意规避了"白底紫渐变"这种一眼 AI 味的俗套。

📑 旧 PPT 一键翻新

提取现有 PowerPoint 里的文字、图片和演讲备注,套上你选的新风格,变成网页版(需要 Python 环境)。

🔗 导出与分享

一条命令部署到 Vercel 拿到永久在线链接(手机/平板/电脑都能看),或者导成 1920×1080 的 PDF 发邮件、发群、打印。

▶️ 演示与动画

输出的 HTML 自带键盘翻页、过场动画,固定 16:9 比例,代码带注释、可读性好,方便再手动微调。

🤖 多助手通用

Claude Code 官方支持,也能在 Codex、Kimi Code、OpenCode、Gemini CLI 等有文件读写权限的助手里用。

四、怎么用(5 步)

1
起个头:给它一段内容说明,或直接丢一个 PPT 文件。
2
挑风格:它出 3 版预览(一个稳妥预设 + 一个大胆模板 + 一个惊喜款),选你喜欢的。
3
生成:确认内容后,它按选定风格做出整套幻灯片。
4
预览调整:浏览器里直接看,不满意就让它改内容、配色、排版。
5
导出分享:部署成在线链接,或导成 PDF。

五、46 套设计风格长什么样

12 套精选主题

暗色系:Bold Signal、Electric Studio、Creative Voltage、Dark Botanical
亮色系:Notebook Tabs、Pastel Geometry、Split Pastel、Vintage Editorial
特色款:Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink

34 套大胆模板 · 风格一览

从杂志编辑风到复古像素风,风格跨度极大,按需加载、用到才取。下面是其中 9 种的实际效果:

Editorial Tri-Tone · 三色编辑杂志风

Cobalt Grid · 科技网格风

Blue Professional · 商务蓝专业风

Editorial Forest · 自然编辑风

Sakura Chroma · 柔和樱色风

Coral · 珊瑚活力风

Bold Poster · 大字海报风

Retro Zine · 复古杂志风

8-Bit Orbit · 复古像素风

六、适合谁

不会写代码、不懂设计,但要快速做出专业演示的人
受够了千篇一律模板、想要点风格的人
手上有一堆旧 PPT、想搬到网页上分享的人
⚠️ 一句实话:它输出的是网页幻灯片,不导出可编辑的 .pptx 文件。如果你必须交付传统 PPT,去看「传统PPT」子分类里的 Anthropic 官方 pptx 或 ppt-master。另外它需要在 Claude Code 这类 AI 编程助手里使用,纯网页/App 用不了。