周四下午,领导突然甩来一句"下周一给你半小时,讲讲Q3规划"。你打开PPT,模板翻来覆去就那几套,网上搜"高级感模板"不是要会员就是带水印。配色对不齐、动画不会加、字体不统一,折腾到深夜做出来的东西自己都不想看第二眼。
再看看苹果发布会的幻灯片——简洁、丝滑、高级。心想:这到底怎么做出来的?
答案比你想的简单。
frontend-slides——一个AI演示文稿生成技能。你告诉它主题,它直接吐出一份连设计带动画的成品HTML,零模板、零代码、零设计基础。不用装软件、不用翻模板,拿到手就能演示。
简单说:它是一个AI驱动的演示文稿生成技能。 你给它一个主题或者一段内容,它直接吐出一个独立的HTML文件——浏览器打开就能演示,不需要装任何软件。

跟一般AI帮你写PPT大纲的区别在于:大纲还得手动往PPT里填,排版配色动画全得自己来。而Frontend Slides是连设计带动画一起生成好,拿到手就是成品。
三个真正"能打"的亮点:
第一,零依赖。 生成的是一个HTML文件,不依赖网络、不需要插件,拷到U盘去会议室直接双击打开。
第二,零设计门槛。 不让你从抽象风格名称里瞎选——先问你希望观众什么感受,然后生成3种风格预览让你挑。看效果选风格,不用懂设计术语。
第三,零妥协的质感。 毛玻璃卡片、霓虹光晕、粒子动画、分步揭示——发布会上那些"好酷但不会做"的效果,全部自动生成。
跟传统工具对比一下就明白了:

🔔 还没装? 前往SkillHub(skillhub.cn)搜索「frontend-slides」,复制安装提示词发给你的AI助手即可完成安装。下面的教程都基于已安装状态,文末也有完整安装指引。
Step 1:告诉AI你要做什么
这一步简单到可能不信——直接用大白话描述需求就行。
比如你说:"帮我做一个AI Agent2026趋势的PPT。"
安装了frontend-slides技能后,AI会自动接管接下来的流程。不用手动切换模式、不用记指令格式——说人话就行。
AI会问你三个问题来确认方向:
用途是什么? 路演材料、教学/教程、会议演讲、还是内部演示?
大概多少页? 精简版5-10页、标准版10-20页、还是详细版20+页?
内容准备好了吗? 已有完整内容、只有粗略笔记、还是只有个主题?

这里有个实操技巧:如果你只有一个主题,啥都没准备,直接说主题就行。AI会帮你搭好内容框架,你确认一下就行。不用自己先写大纲再丢给它——让它干活,你当甲方。
这一步是决定你PPT "气质"的关键时刻。frontend-slides的做法很聪明——它不让你从一堆风格名称里选,而是先问你一个问题:
你希望观众看到幻灯片时有什么感受?
四个选项,最多选两个:
印象深刻/自信 — 专业、可信、这个团队知道自己在做什么
兴奋/充满活力 — 创新、大胆、这就是未来
平静/专注 — 清晰、深思熟虑、易于理解
受到启发/深受感动 — 情感化、叙事性、令人难忘
选好之后,AI会根据你的情绪选择生成3种不同风格的预览文件——每个都是一张标题幻灯片,展示真实的排版、配色和动画效果。你打开看一眼,告诉AI你更喜欢哪个就行。
不同情绪对应的风格方向,给你一个参考:

这只是方向参考,实际风格会根据你的内容主题动态生成,以预览效果为准。
如果三个预览都不够完美,还可以说"混合元素",比如"A的配色 + B的排版",AI会帮你组合。

选定风格后,AI开始干活。它会自动完成这些事:
搭建完整的页面结构(每页 100vh,完美适配屏幕)
应用你选的风格(配色、字体、卡片样式)
生成动画系统(分步揭示、渐入效果、悬浮动画)
添加导航系统(键盘翻页、触屏滑动、导航点、进度条)
处理响应式适配(桌面、平板、手机都正常显示)
全程不需要你写一行代码。通常一两分钟就生成完了。
浏览器直接打开生成的HTML文件就能预览。方向键翻页、空格键下一页、点右侧小圆点跳转、手机上下滑动翻页。
效果满意就结束了。想微调配色字体,后面进阶技巧会讲到。
检查习惯:电脑全屏看一遍,再缩小到手机宽度看一遍。两个尺寸都没截断,就稳了。
选的情绪不同,AI生成的视觉风格就完全不同。以"AI Agent 2026 趋势"为例,在不同情绪下分别生成一版,感受一下差异:
科技感/未来感(对应"兴奋/充满活力")
深色背景配霓虹发光,网格图案隐约可见。翻页时内容从下方渐入,标题文字带渐变发光。青色、洋红、电光蓝是主色调。
👉适合 AI/科技产品发布、前沿趋势分享。

戏剧性/电影感(对应"受到启发/深受感动")
深色底但节奏更慢——慢速淡入,大比例缩放过渡,聚光灯聚焦内容,视差滚动增加层次感。
👉适合品牌故事、年度总结、创始人叙事。

专业/商务(对应"印象深刻/自信")
微妙的快速动画,干净的无衬线字体,海军蓝、石板灰背景。精确的间距对齐,数据可视化为重点。
👉适合企业汇报、解决方案提案。

宁静/极简(对应"平静/专注")
非常缓慢微妙的运动,大面积留白,柔和调色盘。衬线排版,充裕的内边距。
👉适合知识分享、教学教程、读书笔记。

明确业务目标 → 执行真实路径 → 在关键步骤加入断言 → 检查最终业务状态 → 保留截图、日志或结构化结果。
不用学设计术语,选个感受就行。
想亲手试试?前往SkillHub搜索「frontend-slides」,复制安装提示词发给AI就能装好,几分钟就能跑出你自己的第一个作品。
基础操作会了,接下来四个进阶玩法,能让PPT从"能用"变成"惊艳"。
手头有.pptx文件不想重做?直接丢给AI。它能提取原PPT的文字、图片、演讲者备注,自动转换成选定风格的HTML演示文稿。文字保留、顺序保留,视觉焕然一新。
适合旧汇报翻新、过时模板升级。
除了基础风格和动画,还支持一系列增强效果,生成时或生成后跟AI说就行:
粒子系统背景 — canvas粒子动画,适合科技感主题
视差滚动 — 翻页时不同图层以不同速度移动,增加深度感
悬停3D倾斜 — 鼠标移到卡片上时产生立体倾斜效果
噪点纹理背景 — 给纯色背景增加质感,避免"太干净"的塑料感
一次最多加1-2个,别贪多——效果服务于内容,堆太多反而分散注意力。
生成的HTML文件顶部有一段 :root变量定义:控制着整个PPT的配色、字体、间距。某次赛博风生成的示例:
:root {--bg-primary: #0a0f1c;--accent-cyan: #00ffcc;--accent-magenta: #ff00aa;--text-primary: #e8f0ff;...}
变量名会因风格不同而变化,不用纠结具体叫什么。不需要懂CSS,打开文件搜索:root,找到里面值是#开头的颜色行,把颜色值改成品牌色,保存刷新,整个PPT配色就全变了。
比如把某个#00ffcc改成#1890ff(蚂蚁蓝),一处修改全局生效。
很多人容易踩的坑:一页塞太多内容,手机上看全挤成一团。通用的内容密度原则:
标题页:1个标题 + 1个副标题,留白要大
内容页:1个标题 + 最多4-6个要点(每点不超过两行)
卡片网格:1个标题 + 最多 6张卡片
代码页:1 个标题 + 不超过10行代码
密度与重要性成反比,越重要的页面留白越多。超了就拆成两页,宁可多翻一页,不要挤成一团。
frontend-slides = AI生成内容 + 情绪驱动风格 + 零门槛操作。
四步上手:说需求 → 选情绪 → AI生成 → 预览微调。4种情绪方向、每次3个预览可选,覆盖从赛博科技到极简商务的各种演示场景。
今天就用手头的主题试试——哪怕只是一个三页的小demo,跑一遍流程,就知道什么叫"降维打击"了。
请根据 https://skillhub.cn/install/skillhub.md,安装 frontend-slides-zh。
AI会自动完成安装,之后直接在对话中说"帮我做个PPT"即可调用。
装好之后,下次领导再临时甩来一个"下周一给你半小时讲讲"——你五分钟就能交出一份发布会级别的演示文稿。
— END —

📍官网:skillhub.cn
🔧安装文档:https://skillhub.cn/install/skillhub.md
支持的Agent类型: OpenClaw · Hermes Agent · WorkBuddy · Claude Code · Codex · Cursor等