现在做 PPT，先看你想要什么结果 -Xiao Skills

文档来自：

• 🔥PPT-Skills 文章修订版本：* 2026-04-24 11:37

Skills 概念

XiaoPPT-SKills 下载地址，点击右侧下载

xiao-skills.zip

使用方法 ， 将Skills 下载到指定目录

复制Skills 路径，交给Codex，输入提示词： 请你帮我安装下这个Skills，Codex会自动帮你安装

随后通过斜杠调用

大家好，我是晓刘，首先感谢你的关注！文章不是AI写的，更多是用于分享，沉淀知识，就当日记了

因为经常做教学类的PPT，所以就把这个PPT封装成了Skills 方便我快速复用，因为每次录制课程

PPT老是需要重复做，很多人也有跟我一样的习惯，所以有了这篇文章

我相信你也有这种困扰，现在做 PPT，“用什么工具”，我们想要什么结果

很多人做 PPT 时，最先问的是：“有没有一个最强工具，能一次性解决颜色切换、全屏控制、退出逻辑、3D 翻页、鼠标倾斜这些高级效果？”

但如果你真的开始动手，就会发现一个更现实的问题：

• 你要的其实不是某个单点功能，而是一套适合自己表达场景的制作路径。*

因为“做 PPT”这件事，背后其实分成了几种完全不同的目标：

• 你想直接产出一个可展示、可分享、视觉完整的 HTML 演示稿

• 你想做技术分享、代码讲解，重点是内容结构和演示效率

• 你想做更有镜头感、更像视频成片的动态演示

• 你已经决定做 HTML 版 PPT，但还想把视觉质感再往上提一层

如果目标不同，适合的 skill 也完全不一样。 与其泛泛地找“PPT 制作工具”，不如先把这几个方向分清楚。

想直接产出 HTML PPT，优先用 xiao-skills

如果你的目标很明确，就是直接做一个 HTML 版 PPT / Deck，那我更推荐把 xiao-skills 作为主力。

它更像是一套面向演示场景整理过的工作流，适合做：

• PPT 式网页演示

• 多页面内容切换

• 带动画、章节感、结构化很强的展示型内容

• 更接近“可发布作品”而不是单页网页的演示稿

它的优势不只是“能做页面”，而是更贴近 PPT 的真实需求： 你需要的不只是漂亮页面，还需要整套演示体验，比如节奏、翻页感、结构感、章节衔接，以及整体呈现的一致性。

如果你想做的是那种“打开就能讲、讲完也能发链接”的 HTML PPT，xiao-skills 会比泛用型前端工具更顺手。

想写技术分享、代码讲解，优先用 slidev

如果你的内容本质上是技术分享，那重点通常不在花哨效果，而在：

• 代码展示是否清晰

• 章节节奏是否合理

• 演讲流程是否顺手

• 讲解时能不能快速切换内容

这种场景下，slidev 会更合适。

它非常适合：

• 技术培训

• 代码 walkthrough

• 架构说明

• 开发者分享

• 带示例代码的演示稿

相比“做一个很炫的 PPT”，slidev 更擅长的是：

• 把技术内容讲明白。*

也就是说，如果你的核心内容是代码、流程、框架原理、工程实践，那 slidev 的价值会非常高。 它不是单纯追求视觉冲击，而是更强调开发者表达效率和技术演示体验。

所以这类需求可以简单理解为：

• 不是为了做一个像 PPT 的网页，而是为了做一个适合讲技术的演示系统。*

想做视频感演示，优先用 remotion-best-practices

还有一类需求，不是普通汇报型 PPT，而是更偏“视频感表达”。

比如你希望：

• 画面更有镜头感

• 动画更连贯

• 节奏更像短视频或宣传片

• 一页一页不是传统翻页，而是更像“镜头推进”

这种情况下，更适合看的不是普通 PPT 方案，而是 remotion-best-practices。

它适合的不是常规办公汇报，而是：

• 课程包装

• 视频化演示

• 宣传型内容

• 需要强动画和强节奏的展示

• 更偏“成片感”的视觉表达

如果你要的是一种“演示内容最终像视频一样流动”的效果，那它会比传统 deck 方案更对路。

换句话说，remotion-best-practices 解决的不是“怎么把 PPT 做出来”，而是：

• 怎么把演示内容做得更像一支作品。*

4. frontend-design 适合做增强，不适合单独当 PPT 主框架

很多人会问：那 frontend-design 能不能直接拿来做 PPT？

答案是：可以辅助增强，但不建议单独作为主工作流。

因为它本质上不是一个专门的 PPT skill。

它更擅长的是在你已经确定要做 HTML deck 之后，继续把这些部分做得更好：

• 版式

• 配色

• 信息层次

• 视觉质感

• 页面美术完成度

所以它特别适合这样的场景：

• 你已经决定用 xiao-skills 做 HTML PPT，但又不想页面只是“能用”，而是希望它更高级、更有设计感。*

这时候，frontend-design 就很有价值。 它能帮你把页面从“结构完整”继续提升到“视觉成熟”。

但如果单独使用，它并不自带完整的 PPT 交互框架，也就是说：

• 它能把页面设计得更好看

• 但它不是专门为翻页式演示而生的

所以更推荐的搭配方式是：

xiao-skills** 负责 PPT 框架，frontend-design 负责视觉增强。**

这个组合会比单独依赖某一个工具更稳。

5. html-tailwind-ppt-designer 暂时不建议作为主力方案

还有一个名字看起来很贴需求的 skill：html-tailwind-ppt-designer。

从命名上看，它确实像是“专门做 HTML PPT”的方案，理论上很吸引人。 但目前的问题是：本地虽然有这个 skill 目录，说明文档还是 TODO 占位状态，整体还没有整理完成。

这意味着什么？

很简单，意味着它现在的可靠性还不够高。

具体来说：

• 名字确实很贴需求

• 方向也可能是对的

• 但文档没有补全，说明使用路径还不稳定

• 当前不适合作为主力工作流依赖

所以我的建议很明确：

• 现阶段先不要把它当成核心方案。* 等后续文档、示例、工作流补齐后，再评估是否值得纳入主流程。

在当前优先级上，它明显排在 xiao-skills 和 slidev 之后。

真正实用的选择方式，不是“哪个最强”，而是“哪条路径最适合你”

如果你只想快速选型，可以直接按下面这个逻辑判断：

• 想直接做可展示的 HTML PPT：用 xiao-skills

• 想做技术分享、代码讲解：用 slidev

• 想做视频感、镜头感很强的演示：用 remotion-best-practices

• 想在 HTML PPT 基础上继续提升视觉质量：搭配 frontend-design

• html-tailwind-ppt-designer：先观望，暂不建议作为主力

这比单纯讨论“颜色怎么换”“能不能全屏”“能不能加 3D 翻页”更重要。

因为这些功能都只是表现层，真正决定成品质量的，是你一开始选的工作流对不对。

一句话总结

做 PPT 不要先找“最万能的工具”，而要先确定你的表达目标。

• 你要的是 HTML deck、技术讲解、还是视频感演示？* 目标一旦清楚，工具选择就会变得非常简单：

• xiao-skills 负责 HTML PPT

• slidev 负责技术分享

• remotion-best-practices 负责视频化表达

• frontend-design 负责把视觉质感继续拉高

真正高效的做法，不是一个 skill 包打天下，而是用对组合。