Frontend Slides 高质感 HTML 幻灯片

HTML幻灯片，34种模板，Anti-AI审美

详细介绍

Frontend Slides

此 Skill 可帮助非设计人员创建美观的 HTML 演示文稿——既可从零开始创建，也可将 PowerPoint 文件转换为网页演示。它不需要你了解 CSS 或 JavaScript。

教学视频

如果你是第一次使用，可以先观看这个从零开始的完整教学视频：

适用场景

需要创建演示文稿但缺乏设计技能的人

希望通过视觉预览选择风格，而非描述偏好

将现有 PowerPoint 文件转换为可分享的网页

希望获得独立、无依赖、可长期使用的 HTML 演示文件

效果预览

以下是使用此 Skill 制作的演示文稿示例：

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

更多模板效果

此 Skill 可调用 34 种可选设计系统（来自 beautiful-html-templates ）。以下展示部分模板在不同幻灯片布局下的效果。点击模板名称可查看源码库。

Soft Editorial

Cormorant Garamond 衬线字体，暖色纸张，搭配鼠尾草绿、腮红和柠檬黄点缀。

Editorial Forest

森林绿、灰粉色、暖奶油色，使用 Source Serif 4 字体——安静、有意图的季度报告美学。

Pin & Paper

黄色纸张，安全别针插图，墨水蓝色手写风格的 Caveat 字体，纸纹纹理。

Sakura Chroma

复古日本磁带包装美学：奶油色纸张，对角线彩虹色带，紧凑粗体，JIS 风格规格复选框。

Stencil & Tablet

骨色纸张，模板镂空标题，六色大地色系：考古学与品牌相遇。

注意：其余模板（如 Cobalt Grid、Vellum、Neo-Grid Bold 等）也包含在 34 个设计系统中，但此处未展示图片。

核心能力

零依赖 ：生成单个 HTML 文件，内联 CSS/JS，无需 npm、构建工具或框架。

视觉风格发现 ：如果你无法用语言描述设计偏好，Skill 会生成视觉预览供你选择。

PPT 转换 ：将现有 PowerPoint 文件转换为网页，保留所有图片和内容。

反 AI 千篇一律 ：精心挑选的独特风格，避免通用 AI 美学。

可选粗体模板包 ：包含 34 个设计前卫的模板，渐进式加载，安全预设仍作为默认回退。

生产质量 ：可访问，固定 16:9 比例，代码带有良好注释，便于自定义。

工作方式

创建新演示文稿

你告诉 Skill 你的内容（例如“我想为我的 AI 初创公司制作一个融资演示”）。

Skill 会询问你的内容（幻灯片、消息、图片）。

它会生成 3 种视觉风格预览供你比较，根据你的简要描述推断风格（除非你已指定一种）。

你选择视觉方向。

Skill 以你选择的风格创建完整的演示文稿。

在浏览器中打开。

转换 PowerPoint

你提供 PPT 文件。

Skill 提取所有文本、图片和备注。

向你展示提取的内容以供确认。

让你选择视觉风格。

生成包含所有原始资产的 HTML 演示文稿。

你需要提供

一个具有文件系统访问权限和运行 shell 命令能力的本地编码代理（如 Claude Code 或其他支持 Skill 的代理）。

对于 PPT 转换：Python 及 python-pptx 库。

对于部署到在线 URL：Node.js 和 Vercel 账户（免费）。

对于导出 PDF：Node.js（Playwright 会自动安装）。

你会获得

一个独立的 HTML 文件（或包含多个文件的演示文稿），内联 CSS/JS，固定 16:9 比例，可自定义。

可选：部署到可分享的永久 URL。

可选：导出为 PDF（静态快照，不保留动画）。

包含的风格

深色主题

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 个可选粗体设计系统，来自 beautiful-html-templates ，例如 Neo-Grid Bold 、 Editorial Tri-Tone 、 Creative Mode 、 Broadside 、 Signal 、 Vellum 等。

风格发现阶段的预览集包括：

1 个来自 STYLE_PRESETS.md 的安全预设

至少 1 个来自 bold-template-pack/selection-index.json 的粗体模板选项

1 个通配选项（另一个粗体模板或自生成的自定义设计）

选型说明

此 Skill 针对 Claude Code 提供了插件安装方式（使用 /frontend-slides:frontend-slides 命令），也可以作为独立 skill 在其他编码代理中使用。其他代理（如 Codex、Kimi Code、OpenCode、Gemini CLI 等）可以直接使用此 GitHub 仓库中的 SKILL.md 文件。如果代理可以读取 GitHub 仓库，它应加载 SKILL.md 及引用的支持文件。

注意事项

前置条件 ：需要一个具有文件系统访问权限和 shell 命令执行能力的本地编码代理。

PPT 转换 ：需要 Python 和 python-pptx 库。

部署 ：需要 Node.js 和 Vercel 账户（免费）。Skill 会引导你完成首次登录。

PDF 导出 ：需要 Node.js；Playwright 会自动安装。动画不会被保留（静态快照）。

依赖 ：生成的 HTML 文件无外部依赖，但部署和导出功能依赖 Node.js 和 Playwright。

限制 ：此 Skill 不是一个独立的应用程序；它需要编码代理来运行。

隐私 ：所有处理在本地进行；文件不会上传到外部服务，除非你主动选择部署到 Vercel。

试试这样做

• 用这个主题从零生成一套 16:9 HTML 演示稿，先给我 3 个视觉方向选择。
• 把这份 PowerPoint 转成网页幻灯片，保留图片和内容，并改成更有设计感的版式。
• 为这场分享制作一套反 AI 味的演示文稿，避免紫色渐变和模板化卡片。

作者：Zara Zhang Harvard '17，Builder ｜ GitHub Stars 22K ｜ 标签：幻灯片 已认证

来源：colaos.ai ｜ Skill ID：frontend-slides