技能介绍

Frontend Slides 是一个帮非设计人员创建美观 HTML 演示文稿的 skill，作者是 Zara Zhang。它支持两条路径：既可以从零开始做一套网页演示稿，也可以把 PowerPoint 文件转换成网页演示。使用它不需要你了解 CSS 或 JavaScript——只要给出内容和大致意图，剩下的版式与视觉由 skill 负责。

适用场景

  • 需要创建演示文稿但缺乏设计技能的人
  • 希望通过视觉预览选择风格，而非用语言描述偏好
  • 将现有 PowerPoint 文件转换为可分享的网页
  • 希望获得独立、无依赖、可长期使用的 HTML 演示文件

核心能力

  • 零依赖：生成单个 HTML 文件，内联 CSS/JS，无需 npm、构建工具或框架。
  • 视觉风格发现：如果你无法用语言描述设计偏好，skill 会先生成视觉预览供你选择。
  • PPT 转换：将现有 PowerPoint 文件转换为网页，保留所有图片和内容。
  • 反 AI 千篇一律：精选的独特风格，避免通用 AI 美学。
  • 可选粗体模板包：包含 34 个设计前卫的模板，渐进式加载，安全预设仍作为默认回退。
  • 生产质量：可访问，固定 16:9 比例，代码带有良好注释，便于自定义。

效果预览

以下是使用此 skill 制作的演示文稿示例。

Frontend Slides 高质感 HTML 幻灯片预览

此 skill 可调用 34 种可选设计系统（来自 beautiful-html-templates）。以下展示部分模板在不同幻灯片布局下的效果：

[Soft Editorial](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/soft-editorial/) — Cormorant Garamond 衬线字体，暖色纸张，搭配鼠尾草绿、腮红和柠檬黄点缀。

Soft Editorial — 幻灯片 4

[Editorial Forest](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/editorial-forest/) — 森林绿、灰粉色、暖奶油色，使用 Source Serif 4 字体，安静、有意图的季度报告美学。

[Pin & Paper](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/pin-and-paper/) — 黄色纸张，安全别针插图，墨水蓝色手写风格的 Caveat 字体，纸纹纹理。

[Sakura Chroma](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/sakura-chroma/) — 复古日本磁带包装美学：奶油色纸张，对角线彩虹色带，紧凑粗体，JIS 风格规格复选框。

Sakura Chroma — 幻灯片 1

[Stencil & Tablet](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/stencil-tablet/) — 骨色纸张，模板镂空标题，六色大地色系：考古学与品牌相遇。

其余模板（如 Cobalt Grid、Vellum、Neo-Grid Bold 等）也包含在 34 个设计系统中。

工作方式

创建新演示文稿

  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 个通配选项（另一个粗体模板或自生成的自定义设计）。

可以直接这样提需求：

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

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

注意事项：此 skill 不是独立应用程序，需要编码代理来运行；PPT 转换需 Python 与 python-pptx；部署需 Node.js 与 Vercel 账户，skill 会引导你完成首次登录；PDF 导出需 Node.js，Playwright 会自动安装，动画不会被保留（静态快照）；生成的 HTML 文件无外部依赖；所有处理在本地进行，文件不会上传到外部服务，除非你主动选择部署到 Vercel。