这个skill让你的PPT更有设计感,从此告别＂AI套路风＂

Frontend Slides——一个让 AI 帮你生成漂亮网页幻灯片的神器 Skill，12 套独特风格、零依赖、支持 PPT 转换，而且完全拒绝千篇一律的"紫渐变白底"。

你有没有这种经历？

让 AI 帮你做个 PPT，结果出来的是紫色渐变配白字、居中排版、Inter 字体——说不上丑，但就是一股"AI 味"，跟旁边的人撞风格的概率极高。

我不是针对紫色渐变（它也蛮好看的），但问题是——当所有 AI 都在用同一套模板，你的 PPT 还怎么出彩？

今天介绍的开源项目 Frontend Slides，就是为了解决这个问题而生的。

我用它完成了291页的PPT，因为涉及企业信息，不方便配图

我特别喜欢还有他可以直接帮我美化了课件中的代码示例，效果简直不要太惊艳！

先说清楚：这是个什么东西？

Frontend Slides 是一个 Coding Agent Skill，中文说就是"编码助手技能包"。

什么意思呢？它不是传统意义上的 PPT 模板网站，也不是像 Slidev 那样的开发工具，而是嵌入在 AI 对话助手（比如 Claude Code、Codex、其他编码类 AI）里的一个能力包。

你只需要告诉它你要做什么 PPT，它就能：

1. 自动生成 3 种不同的风格预览让你挑
2. 选定风格后生成完整幻灯片
3. （还能）直接导入你现有的 PPTX 文件，提取内容后重新包装

它能做什么？

场景一：老师做课件

比如你要做一个"Python 入门"的培训课件。打开你的 AI 助手，加载 Frontend Slides skill，告诉它：

"帮我做一份 Python 入门的教学课件，大约 15 页，适合课堂投影用的，字大一点。"

它会先给你 3 种风格预览：

• Notebook Tabs——像活页笔记本，米色纸质感，适合课堂
• Bold Signal——高对比深色风，投影也非常清晰
• Dark Botanical——优雅深色系，有艺术感

你选中一种，它就把完整课件生成了。每页固定 16:9 比例，投上去字不歪、图不乱。

场景二：企业做汇报

你是小企业主，要给投资人做 pitch deck。不需要会写代码，只要告诉 AI：

"这是我们的 AI 项目的简介，帮我做一份 pitch deck，大概 10 页，要有冲击力。"

它会从风格库里选出最匹配的——比如 Electric Studio（蓝白分屏，干净专业）或 Neon Cyber（科技感十足，适合 AI 项目）。

而且所有风格都有一个设计原则：不要"AI 套路风"。没有紫色渐变，没有 Inter 字体，每套风格都有自己的字体、配色和布局逻辑。

场景三：把旧 PPT 翻新成网页版

这个是杀手功能。你手头有个 summary.pptx，直接丢给 AI，它会：

1. 提取里面的所有文字、图片、备注
2. 让你确认内容是否准确
3. 生成 3 种风格预览让你挑
4. 输出一个漂亮的 HTML 网页版 PPT

以后发 PPT 再也不用"XX 最终版_v3.pptx"了，一个网页链接就搞定。

核心亮点

1. "先看再选"的风格发现机制

这是 Frontend Slides 最聪明的设计。

我们大多数人不会说"我要 Trajan Pro 字体配 CMYK 三色调色板"，但我们都会看图选。

所以这个 skill 的工作方式是：不问你想要什么风格，先给你 3 张预览图，你挑一个喜欢的。

（这个过程就像选壁纸——看到喜欢的点一下就好，不需要跟 AI 描述你想要的风格。）

2. 12 套官方风格 × 34 套拓展模板

它的风格库分为：

暗色主题

• Bold Signal——自信、高冲击力，橙色卡片加深色渐变
• Electric Studio——蓝白分屏，干练专业
• Creative Voltage——电蓝配荧光黄，复古未来感
• Dark Botanical——优雅暖色，抽象渐变圆圈装饰

亮色主题

• Notebook Tabs——米色纸面，彩色侧标签，适合阅读型内容
• Pastel Geometry——柔和几何，友好现代
• Split Pastel——双色分屏，活泼玩味
• Vintage Editorial——奶油底色，几何装饰，有编辑个性

特色主题

• Neon Cyber——霓虹光效，粒子背景，科技感拉满
• Terminal Green——Hacker 风，终端绿纯等宽字体
• Swiss Modern——包豪斯极简，红黑白几何
• Paper & Ink——文艺编辑风，首字母大写，引文突出

此外还有 34 套拓展模板，包括 Soft Editorial、Sakura Chroma、Neo-Grid Bold、Vellum 等更多设计体系。

3. 零依赖，单文件搞定

生成的 PPT 就是一个 .html 文件，所有 CSS、JS 都内联在文件里。

• 不需要装软件
• 不需要有网络
• 在浏览器打开就能放
• U 盘拷走，发微信，发邮件都行

4. 拒绝"AI 套路风"

这是项目的核心价值主张。作者在 STYLE_PRESETS.md 里明确写了 DO NOT USE（禁止使用） 的清单：

• 字体：Inter、Roboto、Arial
• 配色：#6366f1 通用靛蓝、紫色渐变配白底
• 布局：全部居中、千篇一律的卡片网格
• 装饰：无意义的毛玻璃效果、不必要的投影

每一页幻灯片都要像是手工定制的，而不是 AI 生成的。

怎么用？

如果你是 Claude Code 用户

最方便，直接在插件市场安装：

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides/plugin install frontend-slides@frontend-slides

安装后敲 /frontend-slides:frontend-slides，然后说你的需求。

如果你是其他 AI 编码助手

比如 Codex、Kimi Code、OpenCode、Gemini CLI，直接把项目 GitHub 链接发给它：

https://github.com/zarazhangrui/frontend-slides

告诉它 "用 Frontend Slides skill 帮我做 PPT"，它就会自动读取 SKILL.md 和配套文档来工作。

不需要会写代码

你完全不需要懂 HTML、CSS 或 JavaScript。你的角色就是"甲方"：

1. 告诉 AI 你要什么内容
2. 从 3 个预览里挑一个喜欢的
3. 看成品，如果哪里要调，说一声

不需要会写代码，只需要会做选择题和提需求。

适合谁？

• 老师、培训师——课件可以做得有设计感，学生看着也舒服
• 创业者、管理者——pitch deck 不再清一色"AI 模板味"
• 内容创作者——视频脚本、课程大纲用 PPT 梳理时也要好看
• 技术分享者——展示代码和技术方案时干净专业
• 所有要做 PPT 但又不想花时间排版的人

想要更好用？

几个建议：

1. 准备内容再开工 先把你要讲的要点列出来，给 AI 的信息越清楚，出来的东西越准。

2. 试不同的风格 别一上来就锁定风格。Frontend Slides 的预览机制就是鼓励你"先试试看"。

3. 对高密度内容记得选"阅读模式" 如果 PPT 要让别人自己翻着看的（不是演讲用），告诉 AI 用高密度模式，每页可以多放内容。

4. 如果已经有 PPT，直接丢给它翻新 现有素材别浪费，让 AI 提取内容重新排版，省时省力。

说实话，Frontend Slides 让我最震撼的地方不是它风格多丰富，而是它真的在对抗"AI 内容同质化"这件事。

当市面上的 AI PPT 工具都在往"省事"的方向卷的时候，它选择了往"好看"的方向钻。而且它不是靠设计师一张张画模板——而是给 AI 一套完整的设计原则和风格体系，让 AI 在生成时就知道什么是好的设计，什么该避开。

下次想做 PPT 的时候，不妨让你身边的 AI 助手试试这个 skill。

👉 GitHub 项目地址^[1] 👉 或者下次聊天直接说一句"帮我用 Frontend Slides 做个课件"

注：文中风格示例图由 AI 按 Frontend Slides 的 STYLE_PRESETS.md 描述生成，模拟项目内的三种典型风格。

引用链接