frontend-slides是一个强大的工具，用于创建令人惊叹、动画丰富的 HTML 演示文稿，完全在浏览器中运行，无需任何依赖。它既可以用于从头开始构建全新的演示文稿，也可以将现有的 PowerPoint（.ppt/.pptx）文件无缝转换为基于网页的单文件演示文稿。

• 演示效果：https://demo.zktww.cn/presentation.html
  
  
  
  
  

• 创建路演幻灯片（Pitch Deck）、推介文稿
• 将现有 PPT/PPTX 文件转换为现代网页演示
• 技术会议演讲、教学/教程演示文稿
• 内部团队汇报、战略会议演示
• 改进现有 HTML 演示文稿的布局、动效或排版

Frontend Slides 遵循以下不可妥协的原则：

每张幻灯片都必须完全显示在视口内，任何设备尺寸下都不能出现滚动条。内容溢出时，应拆分为多张幻灯片或减少单页内容。以下是内容密度限制参考：

Frontend Slides 采用“展示，而非讲述”的工作流：

• 根据内容主题，先生成 3 种不同视觉风格的预览文件
• 用户只需像挑选照片一样，点击选择最心仪的一款
• 系统随即基于该风格生成完整的演示文稿

• 自动提取 PPT 中的所有文本、图片和备注
• 在确认提取内容无误后，可以为其套用精选视觉风格
• 最终输出为一个功能完备的 HTML 文件，既保留了原始素材，又拥有了网页端的流畅交互

生成的不仅仅是静态页面，而是具备完整交互逻辑的演示系统：

• 多端导航：支持键盘方向键、空格键、鼠标滚轮、触屏滑动及点击导航圆点
• 动效系统：内置滚动触发动画（Reveal Animations），支持“减少动效”模式以照顾无障碍需求
• 响应式设计：完美适配从手机到大屏幕投影的各种分辨率
• 进度反馈：内置进度条，让观众清晰掌握演讲节奏

Frontend Slides 在不同工具中的核心功能保持一致，但安装方式略有差异。所有方式都需要以下基础环境：

• Node.js（版本 18 或以上）
• npm（Node.js 自带）
• Python（可选，仅用于 PPT 转换功能）

如需使用 PowerPoint 转换功能，请先安装 Python 依赖：

pip install Pillow python-pptx 

4.2.1 概述

Cursor 是一款基于 VS Code 的 AI 编程编辑器，支持通过 Skills 扩展 AI 能力。Frontend Slides 可以通过标准化的 Skills 工作流在 Cursor 中使用。

4.2.2 安装步骤

第一步：安装 OpenSkills 连接器

在终端中执行以下命令，安装全局的 Skills 管理工具：

npm i -g openskills 

此命令只需执行一次，用于让 Cursor 的 AI “看见”并加载技能。

第二步：安装技能并生成配置

npx skills-installer install affaanmustafa/frontend-slides --local --client cursor 

安装成功后，Skills 文件夹会出现在项目根目录的 .claude/skills/ 下，并且会在项目根目录自动生成 AGENTS.md 文件用于技能注册。

第三步：启动 Cursor 并验证

• 打开 Cursor，通过“Open Folder”打开安装了技能的项目文件夹
• 在 Cursor 的 AI 对话面板中，技能会自动加载并在相关任务时被激活
• 可以开始直接使用自然语言描述演示文稿需求

4.2.3 Cursor 中的使用说明

在 Cursor 中，Skills 采用“按需加载”机制，当对话内容匹配技能描述时自动启用。使用时直接向 Cursor AI 描述需求即可，例如：

“帮我创建一个 10 页的产品路演演示文稿，采用深色科技风格。”

Frontend Slides 技能会被自动识别并执行。

4.3.1 概述

Claude Code 是 Anthropic 官方的命令行 AI 编码工具，对 Skills 生态支持最为完整。Frontend Slides 最初正是作为 Claude Code 技能设计的，推荐优先使用此方式以获得**体验。

4.3.2 方式一：使用 shx 命令安装（推荐）

shx 是 x-cmd 提供的 Skill 管理工具，支持从官方仓库一键安装：

# 将技能添加到项目的 Claude Skills 目录 shx skill add –skill-dir .claude/skills affaanmustafa/frontend-slides

或安装到全局目录（所有项目可用）

shx skill add –skill-dir /.claude/skills affaanmustafa/frontend-slides

安装完成后，重新启动 Claude Code 会话即可使用。

claude plugin marketplace add affaan-m/everything-claude-code 

claude plugin install everything-claude-code@everything-claude-code 

claude plugin marketplace add affaan-m/everything-claude-code && claude plugin install everything-claude-code@everything-claude-code 

4.3.5 重要提示

• 安装技能时必须确保技能文件夹直接包含 SKILL.md 文件
• 如果安装后技能未生效，请完全重启 Claude Code（关闭终端并重新运行 claude）
• 可以通过在 Claude Code 中输入 /skills 查看已安装的技能列表，确认安装成功

4.4.1 概述

Openclaw 是一个开放的 AI Agent 框架，通过 ClawHub 技能市场提供丰富的技能扩展。Frontend Slides 在 Openclaw 中以 myclaw-frontend-slides 的名称发布。

4.4.2 方式一：ClawHub CLI 安装（推荐）

这是最快捷的安装方式，从官方注册表直接拉取技能：

npx clawhub@latest install myclaw-frontend-slides 

如果尚未安装 clawhub，可以先全局安装：

npm i -g clawhub clawhub install myclaw-frontend-slides 

4.4.3 方式二：提示词安装

在 Openclaw 的对话界面中，直接复制以下提示词，Openclaw 会自动完成安装：

“Help me install myclaw-frontend-slides using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).”

4.4.4 方式三：手动安装

手动安装适用于离线环境或需要定制修改的场景：

1. 从 ClawHub 或相关渠道下载技能 ZIP 包
2. 解压后，将技能文件夹复制到以下位置之一：
   • 全局安装：~/.openclaw/skills/
   • 工作区安装： /skills/
3. 重新启动 Openclaw 会话即可自动加载

技能加载优先级为：工作区 > 本地 > 内置包。

4.4.5 Openclaw 特有功能说明

Frontend Slides 在 Openclaw 中提供了12 种专业预设风格，包括霓虹赛博、午夜行政、深邃空间、终端绿、纸墨质感、瑞士现代、柔和粉彩、复古编辑等，可根据受众和场景快速选择。

在对应工具中，可以通过以下方式验证技能是否已正确安装：

• Cursor：检查项目根目录是否存在 .claude/skills/frontend-slides/SKILL.md 文件
• Claude Code：启动后输入 /skills，列表中应包含 frontend-slides
• Openclaw：启动后输入 /skills 或查看技能列表

首次使用建议

安装完成后，建议先用简单需求测试技能是否正常工作，例如：

“帮我创建一个 3 页的测试演示文稿，主题是‘Hello World’。”

技能更新

• Claude Code：通过 shx skill update affaanmustafa/frontend-slides 或重新运行安装命令覆盖更新
• Openclaw：通过 clawhub update myclaw-frontend-slides 更新到最新版本
• Cursor：重新运行 npx skills-installer install ... 命令即可覆盖更新

兼容性说明

Frontend Slides 的各个版本功能略有差异，但核心能力（零依赖 HTML 生成、视口适配、视觉风格探索）在所有平台上保持一致。Claude Code 版本功能最为完整，Openclaw 版本提供了更丰富的预设风格，Cursor 版本与 Claude Code 技能格式兼容。

系统首先判断用户的需求属于以下哪种模式：

• 模式 A：新建演示文稿 — 用户有主题、笔记或完整草稿，需要从头创建幻灯片
• 模式 B：PPT 转换 — 用户有 .ppt 或 .pptx 文件需要转换为 HTML
• 模式 C：增强现有演示文稿 — 用户已有 HTML 幻灯片并希望改进

系统会询问以下基本信息：

如果用户已有内容，系统会要求在样式设计前提供内容文本、要点或图片。

这是“展示，而非描述”的核心阶段。大多数用户无法用语言准确描述设计偏好，因此系统会生成视觉预览供用户选择：

1. 询问演示文稿应营造何种感觉：印象深刻、充满活力、专注、激发灵感
2. 在 .ecc-design/slide-previews/ 目录中生成 3 个单幻灯片预览文件
3. 每个预览都是自包含的 HTML 文件，清晰展示排版、色彩和动效，大约保持在 100 行以内
4. 用户选择保留哪个预览或混合哪些元素

如果用户已经知道所需的预设风格，可以跳过预览直接使用。

系统输出以下之一：

• presentation.html
• [presentation-name].html

仅当演示文稿包含提取的或用户提供的图像时，才使用 assets/ 文件夹。

输出文件必须包含以下结构：

• 语义化的幻灯片部分
• 视口安全的 CSS 基础
• 用于主题值的 CSS 自定义属性
• 用于键盘、滚轮和触摸导航的演示文稿控制器类
• 用于揭示动画的 Intersection Observer
• 支持减少动效模式

系统会自动添加以下导航功能到脚本块中：

• 键盘快捷键导航
• 触摸/滑动支持
• 进度指示器

最终文件会附带导航说明和通过 CSS 变量进行本地定制的指南。

生成的演示文稿包含以下交互功能：

Frontend Slides 内置了丰富的风格预设，涵盖深色和浅色主题，覆盖多种场景：

Openclaw 版本额外提供复古编辑（Vintage Editorial）等共计 12 种专业预设。

• 文件格式：单个自包含的 .html 文件
• 样式：内联 CSS
• 脚本：内联 JavaScript
• 图片：存储在 assets/ 文件夹中，通过直接路径链接

每个演示文稿必须包含以下核心 CSS 以确保视口适配：

/* 视口锁定 */
html, body {
  height: 100%;
  overflow-x: hidden;
}
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* 每张幻灯片 = 精确视口高度 */ .slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; position: relative; }

/* 内容容器使用 flex 居中 */ .slide-content

/* 排版使用 clamp() 实现响应式缩放 */ :root { –title-size: clamp(1.5rem, 5vw, 4rem); –h2-size: clamp(1.2rem, 4vw, 3rem); }

Q1：生成的幻灯片在手机上显示不全怎么办？

Frontend Slides 使用响应式设计，字体大小通过 clamp() 函数实现流畅缩放。如果内容溢出，请检查是否遵循了内容密度限制（参见 2.1 节），必要时将内容拆分到多张幻灯片。

Q2：如何自定义主题？

可以通过修改 HTML 文件中的 CSS 变量来自定义主题色彩和字体。所有 CSS 都是内联的，直接在生成的 .html 文件中编辑即可。

Q3：PPT 转换支持哪些元素？

支持提取 PPT 中的文本、图片和备注。复杂的图表、SmartArt 和动画效果可能无法完全保留，但核心内容会被正确提取并转换为语义化的 HTML 结构。

Q4：生成的演示文稿是否需要网络连接？

不需要。生成的 HTML 文件包含所有内联的 CSS 和 JavaScript，可以完全离线运行。唯一需要注意的是，如果使用了外部字体（如 Google Fonts），则需要网络连接才能加载字体。

Q5：如何切换幻灯片？

支持多种导航方式：

• 键盘：←/→ 方向键、空格键
• 鼠标：滚轮滚动
• 触摸：左右滑动
• 点击：导航圆点

Q6：安装后技能未生效怎么办？

• 确保完全重启了对应的 AI 工具（关闭终端/编辑器后重新打开）
• 检查技能文件夹是否直接包含 SKILL.md 文件，而非嵌套在子文件夹中
• 在 Claude Code 中输入 /skills 查看是否成功加载

• 源代码仓库：https://github.com/zarazhangrui/frontend-slides
• Openclaw 技能页：https://www.toolify.ai/openclaw-skills/myclaw-frontend-slides-10790
• x-cmd 技能详情：https://hk.x-cmd.com/skill/affaanmustafa/frontend-slides

许可证：Frontend Slides 采用 MIT 许可证。