BAIZE AI RESOURCE

HTML 演示文稿生成

frontend-slides

面向编码 Agent 的演示文稿 Skill，可生成带动画的 HTML 幻灯片，或将 PowerPoint 转换为网页演示。

获取资源
frontend-slides

资源介绍

Frontend Slides 是一个以 SKILL.md 为核心的编码 Agent 技能，打包为 Claude Code 插件，也可被具备文件系统和 Shell 权限的其他编码 Agent 读取使用。它的工作方式是“先看再选”：Agent 先了解演示内容与用途，再生成若干张真实标题页作为视觉预览，用户挑选方向后才产出完整演示。成品是单个自包含 HTML 文件，CSS 与 JS 内联，无需 npm、构建工具或框架，可直接在浏览器中打开。技能强调固定 1920×1080 的 16:9 舞台整体缩放，禁止为手机重排内容，并内置排版、配色、动效与背景的设计规范，避免常见的“AI 味”模板感。除新建演示外，它还支持从 PPTX 提取文字、图片与备注后重新生成网页版，以及增强已有 HTML 演示。适合需要做路演、汇报、分享但缺乏前端与设计经验的用户。

Skill 能力

零依赖单文件输出

生成的演示文稿是单个 HTML 文件，CSS 与 JS 内联，不需要 npm、构建工具或前端框架即可在浏览器中运行。

可视化风格选择

不要求用户用语言描述审美偏好，而是先生成真实标题页预览，让用户直接比较并挑选视觉方向。

PPT 转换

可读取 PPTX 中的文字、图片与备注，确认内容后按所选风格重新生成网页演示，保留原有素材。

固定 16:9 舞台

所有幻灯片都在 1920×1080 画布内创作并整体缩放适配视口，不因设备尺寸重排内容。

内置风格与模板包

提供多套明暗主题预设，并附带可选的设计感模板包，按渐进披露方式先读索引与预览卡，选定后再加载完整设计说明。

反通用 AI 审美

规范中明确避免常见字体、紫色渐变等套路化视觉，要求排版、配色与动效具有针对具体场景的辨识度。

资源配置

适用平台

Claude CodeClaudeCodexGemini CLI通用 Agent

调用方式

手动调用命令调用Agent调用

安装与调用

  1. 在 Claude Code 中通过自定义市场源安装插件，或把技能文件复制到本地技能目录，也可让其他编码 Agent 直接读取仓库中的 SKILL.md。

  2. 调用技能后说明需求，例如新建一份路演演示或转换某个 PPTX 文件。

  3. 按提示提供内容、图片与用途信息，并说明是演讲型还是阅读型演示。

  4. 查看 Agent 生成的风格预览，选择其中一个视觉方向。

  5. 等待生成完整 HTML 演示文稿，并在浏览器中打开查看与继续调整。

使用案例

创业路演演示

使用场景内容创作

向技能描述 AI 创业项目的路演需求，从生成的风格预览中选定方向，得到一份可直接在浏览器演示的 HTML 幻灯片。

PPT 转网页演示

使用场景办公效率

把已有的 presentation.pptx 交给技能，确认提取出的文字与图片后选择风格，生成保留原始素材的网页版演示。

已有 HTML 演示增强

使用场景设计创作

对已有的 HTML 演示提出修改需求，技能在固定舞台约束下增补内容或调整视觉，并检查溢出与面板重叠问题。

包含内容

frontend-slides-source.zip
LICENSE-MIT.txt
README-中文安装说明.md
SHA256.txt

常见问题

使用 Frontend Slides 需要安装前端依赖吗？
不需要。生成的演示文稿是单个自包含 HTML 文件，CSS 和 JS 内联，无需 npm、构建工具或框架。
它支持哪些编码 Agent？
它以 Claude Code 插件形式打包，核心 SKILL.md 也可被 Codex、Kimi Code、OpenCode、Gemini CLI 等具备文件系统和 Shell 权限的编码 Agent 读取使用。
可以把现有的 PowerPoint 转成网页演示吗？
可以。技能会提取 PPTX 中的文字、图片和备注，展示提取结果供确认，再按选定风格生成包含原有素材的 HTML 演示。
生成的幻灯片在手机上会自适应重排吗？
不会。所有幻灯片都在固定 1920×1080 的 16:9 舞台内创作并整体缩放适配视口，不会为手机重新排布内容。