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 比例，代码带有良好注释，便于自定义。

工作方式

创建新演示文稿

1. 你告诉 Skill 你的内容（例如“我想为我的 AI 初创公司制作一个融资演示”）。
2. Skill 会询问你的内容（幻灯片、消息、图片）。
3. 它会生成 3 种视觉风格预览供你比较，根据你的简要描述推断风格（除非你已指定一种）。
4. 你选择视觉方向。
5. Skill 以你选择的风格创建完整的演示文稿。
6. 在浏览器中打开。

转换 PowerPoint

1. 你提供 PPT 文件。
2. Skill 提取所有文本、图片和备注。
3. 向你展示提取的内容以供确认。
4. 让你选择视觉风格。
5. 生成包含所有原始资产的 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。