可以生成漂亮的演示网页的Skill

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

在github逛的时候发现了一个比较有用的 Claude Code 的 Skill——专门用来做 HTML 演示文稿的工具，而且做得还挺讲究的，目前已经13.9k 个 Star。

地址：https://github.com/zarazhangrui/frontend-slides

image.png

做 PPT 这事，大部分人都不擅长。你脑子里有内容，但一打开 PowerPoint 就不知道怎么排版、配色、加动画。最后要么用默认模板（太丑），要么花大量时间调格式。

这个 Skill 的思路是：你只管说你想讲什么，它帮你生成一个网页版的幻灯片。不用学 CSS 也不用写 JavaScript，而且做出来的东西不廉价，没有那种“AI 味儿”的紫渐变白背景。

它还多做了一个功能：可以把你现有的 PPT 转成这种网页版，图片和文字都能保留。

这个 Skill 跑在 Claude Code 里（Anthropic 的命令行工具）。如果你已经在用 Claude Code，装它有两种方式。

推荐：通过插件市场

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

装完之后，在 Claude Code 里输入 /frontend-slides 就可以用了。

手动安装

克隆仓库到 Claude Code 的 skills 目录：

git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

从零新建一个演示文稿

输入 /frontend-slides 之后，跟 Claude 说你想做什么主题的 slides，比如“帮我做一个 AI 创业公司的 pitch deck”。

它会先问你几个问题：

你想放哪些内容？每一页写什么？
希望观众看完是什么感觉？ impressed？ excited？ calm？

然后它会生成 3 种不同的视觉风格预览，你选一个喜欢的，它就按这个风格生成完整的 HTML 幻灯片，自动在浏览器里打开。

转换已有的 PPT

如果你手上已经有一个 PowerPoint 文件，直接告诉它：

/frontend-slides
> “帮我转换一下 presentation.pptx”

它会提取 PPT 里的文字、图片、备注，让你确认一下内容对不对，然后让你挑一个视觉风格，最后生成一个网页版。原来的内容一点不少。

一共 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：纸张质感，有首字下沉和引用样式

你可以直接挑，不用自己调色。

零依赖

生成的幻灯片就是一个独立的 HTML 文件，所有 CSS 和 JS 都写在里面。不依赖 npm、不依赖框架、不需要任何构建工具。你把它拷到 U 盘里，十年后打开应该还能正常跑。

“选我喜欢的”而不是“描述我想要的”

大部分设计工具让你用文字描述想要的风格，比如“现代简约带点科技感”——这种描述其实很难准确。这个 Skill 的做法更直接：我给你几个预览图，你看着点。这就是它说的 “show, don‘t tell”。

没有 AI 泛化审美

作者特意避开了那种烂大街的 AI 生成风格（紫白渐变 + 圆角 + 阴影拉满）。每个样式都试图有自己的个性。

代码可读

生成的 HTML 里面注释写得比较清楚，你想自己改也方便。

做完之后，它提供两种分享方式。

部署到线上

bash scripts/deploy.sh ./my-deck/

会给你一个永久链接，手机电脑都能直接访问。用的是 Vercel 免费版，首次用会引导你登录。

导出 PDF

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

用 Playwright 把每一页截成 1920×1080 的图片，然后合成 PDF。动画不会保留，因为是静态截图，但用来发邮件或者打印足够了。

作者在文档里写了几句话，我觉得挺认同的：

你不需要成为设计师才能做出好看的东西。你只需要在看到选项时，知道自己喜欢哪个。
依赖就是债务。一个独立的 HTML 文件十年后还能用，一个 React 项目可能两年后就跑不起来了。
通用等于容易被忘记。每个演示文稿都应该像是为你定制的。
注释是一种善意。代码应该能自己解释自己。

如果你平时需要在 Claude Code 里做演示文稿，或者手头有一些 PPT 想转成更轻量、更好看的网页版，这个 Skill 值得试试。

安装不复杂，生成出来的东西也确实比默认 PPT 模板好看。而且因为是 HTML，你可以直接打开浏览器按方向键翻页，手机上也自适应。

作者是 @zarazhangrui，MIT 协议，随便用随便改。

GitHub 地址再放一次：https://github.com/zarazhangrui/frontend-slides

有 Claude Code 的话，直接 /plugin install 就行。没有的话，也可以先看看仓库里的示例视频和样式截图。

如果你是个讲师，用这个来生成网页版的HTML，演示什么的都很方便，就算演示机器没有安装PPT，也没有影响，有兴趣的朋友可以试试！

可以生成漂亮的演示网页的Skill

从零新建一个演示文稿

转换已有的 PPT

相关推荐