83.3K+下载
跳转到使用指南
frontend-slides作者 Zara Zhang

Frontend Slides Skill.

Claude Code 和 Codex 的 PPT 和幻灯片 skill：从零创建或从 PowerPoint 文件转换动效丰富的 HTML 演示文稿。

  • Presentations
  • HTML 幻灯片
下载 OpenDesign查看使用指南
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
前言和章节标题读取自上游文件，时间为 2026-09-14 · 完整内容 28,057 字符

01 功能说明

frontend-slides Skill 在 Claude Code 和 Codex 中的功能

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

Frontend Slides 构建无依赖、动效丰富、完全在浏览器中运行的 HTML 演示文稿，可从零创建，也可从 .pptx 文件转换而来。它面向非设计师用户，让他们通过观看而不是从抽象描述中选择来发现自己的审美偏好：它会生成三份单页样式预览（一个安全预设、至少一个大胆模板、一个随机方案），让用户对其进行视觉反馈。

一份演示文稿承载的文字量由密度选择决定，可选低密度的以演讲者为主导，或高密度的以阅读为主导。每份演示文稿都在固定的 1920x1080 舞台内编写，按视口统一缩放，交付方式可以是一个可用的 Vercel 网址，也可以是 PDF 导出文件。

它产出什么

  • 一份自包含的 HTML 演示文稿，所有样式和脚本均内联。
  • 三个临时的样式预览文件（style-a.html、style-b.html、style-c.html），会在交付时删除。
  • 可选地在 Vercel 上生成一个可用网址，以便通过短信、Slack 或邮件分享该演示文稿，可在任何设备上查看。
  • 可选地生成一份 PDF，用于邮件、Slack 或打印，通过对每一页幻灯片截图并合并而成。
查看示例提示词 ↗

工作方式

  1. 01
    检测模式

    该 skill 首先判断这项任务是从零构建的新演示文稿、一次 .pptx 转换，还是对现有 HTML 演示文稿的增强，并应用相应的阶段路径。

  2. 02
    一次性提出发现性问题

    目的、篇幅、内容准备情况和密度这几个问题会一起被提出，在具备原生结构化问答界面的环境中使用该界面，让用户一次性填完全部信息。

  3. 03
    生成三份样式预览

    该 skill 不会要求用户说出一种风格名称，而是渲染三份单页标题预览，自动打开它们，并询问用户更喜欢哪一个（或是否想混合其中的元素）。

  4. 04
    生成单文件演示文稿

    完整的演示文稿被写成一个 HTML 文件，内联整份必需的 viewport-base.css，并按章节添加注释，同时使用所选的密度选择和所选的样式方案。

  5. 05
    转换 PowerPoint 文件

    对于 .pptx 源文件，内置的 Python 脚本会先提取内容，由用户确认标题、摘要和图片数量，之后才进行样式发现和 HTML 生成。

  6. 06
    先交付，再提议分享

    预览文件会被删除，演示文稿在浏览器中打开，用户会被告知导航方式、CSS variables、字体、.reveal 类和内联编辑，然后才会被提供部署或 PDF 导出。

02 找到适合场景

何时使用 frontend-slides Skill

当工作内容是此类 PPT 和幻灯片时，在 Claude Code 或 Codex 中使用 frontend-slides skill。下方的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 任何需要为演讲或路演制作幻灯片，或将现有 PPT/PPTX 转换为网页幻灯片的人。
  • 说不出视觉偏好、但能对两三个渲染方案作出反应的非设计人员。
  • 从需要重新调整样式、而非重新撰写的 PowerPoint 文件开始的人。
  • 改进已存在的 HTML 演示文稿，此时新增内容有破坏固定舞台适配的风险。
  • 将在手机上查看的演示文稿，可接受带黑边的 16:9 舞台，但不需要针对手机的专属布局。

了解边界

  • 应根据观看设备调整布局的演示文稿；幻灯片内容永远不会为适配屏幕而重排。
  • 期望 PDF 导出能保留动效或交互性；实际上它只是一张静态快照。
  • 导出外部创建的 HTML，其幻灯片使用的类名不是 .slide，这会导致导出脚本找不到任何内容。

需要提供的信息

  • 用途场合决定预设匹配和通配符设计；可选方案包括路演演示文稿、教学教程、会议演讲或内部汇报。
  • 长度大致的幻灯片数量分为短、中、长三档，据此决定演示文稿可容纳的章节页和内容页数量。
  • 现有内容用户说明所有内容是否已就绪、仅有粗略笔记，还是只有一个主题，并提供相应材料，以此为基础构建演示文稿。
  • 密度模式预先在低密度（演讲者主导）与高密度（阅读优先）之间做一次选择，该选择会被记住并贯穿应用于幻灯片数量、字号比例和布局。
  • 图片文件夹（可选）图片会逐一评估其可用性和主色调，大纲会围绕这些图片共同设计，而非事先规划。

03 Skill 内部

frontend-slides Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 零依赖，单一文件

    演示文稿是带有内联 CSS 和 JS 的单一 HTML 文件，因此该 skill 不得使用 npm、打包工具或任何构建工具。

  2. 永不为设备重排

    1920x1080 的舞台整体缩放，在手机上可能出现黑边；不得使用响应式断点来重新排列幻灯片内容。

  3. 用 Visibility 而非 Display 切换幻灯片

    幻灯片切换使用 .active / .visible，配合 visibility、opacity 和 pointer-events；禁止使用 display: none 和 display: block，因为后续的布局类可能覆盖它们，导致所有幻灯片同时显示。

  4. 用 Calc 抵消 CSS 函数

    直接对 clamp()、min() 或 max() 取负会被静默忽略，因此该 skill 必须将其包装为 calc(-1 * clamp(...))。

  5. 来自 Fontshare 或 Google Fonts 的字体

    从不使用系统字体，美学部分将 Inter、Roboto 和 Arial 列为应避免的过度使用字体家族。

  6. 幻灯片上不显示模板名称

    模板与 slug 名称仅出现在给用户的消息中，与其他内部工作流文本一样，从不渲染在预览或幻灯片本身上。

  7. 拆分而非压缩

    滚动、溢出、面板重叠以及低于舒适阅读大小的文本都是基本违规；超过密度上限的内容会拆成更多幻灯片。

  8. 先读 preview.md 再读 design.md

    醒目的模板会从选择索引中被列入候选名单，并在 preview.md 层级被读取；模板完整的 design.md 只在第三阶段用户选定后才加载。

04 投入使用

在 Claude Code 或 Codex 中安装 frontend-slides

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 frontend-slides 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

用于 SKILL.md 的通用 skills CLI 形式；仓库可能会记录自己的路径。

为 Skill 提供首个 PPT 和幻灯片任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • 每次修改之后，确认舞台仍是 16:9，没有文本溢出卡片，没有面板重叠，并且在 1280x720 及一个手机视口下截图效果正常。
  • 应根据渲染后的浏览器截图而非代码来判断溢出和重叠，因为网格面板可能在视觉上互相遮盖。
  • 打开每个预览前先阅读其可见文本，如果发现任何内部元数据泄漏到幻灯片上，就进行修改。
  • 部署之后，打开线上 URL，确认每一张引用的图片都能正常加载。

在 OpenDesign 中frontend-slides 已内置：Plugins → Skills，在顶部栏中选择它即可。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides 分支 main
Skill 文件
SKILL.md 验证时记录的内容校验和；提交 9906a34
License
MIT 来自 LICENSE。
仓库星标数
29,255 2026-09-14 对整个 zarazhangrui/frontend-slides 仓库拍摄的 GitHub 快照。不是 frontend-slides 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 核心原则零依赖、以展示而非说明为原则的预览、独特的设计、渐进式信息展开，以及不可妥协的固定 16:9 舞台。
  2. 设计美学关于字体、色彩、动效与背景的指导，旨在避免千篇一律的 AI 陈词滥调式排版与配色。
  3. 固定舞台规则CSS 不变量：1920x1080 画布、.active/.visible 切换、clamp 仅用于舞台之外、支持 reduced-motion。
  4. 阶段 0：检测模式将请求分类为新建演示、PPT 转换或增强，并针对现有文件给出修改规则。
  5. 阶段 1：内容发现（新建演示）一并询问用途、篇幅、内容是否就绪与密度，然后评估提供的任何图片文件夹。
  6. 阶段 2：风格发现在严格的预览真实性规则下，从安全预设、醒目模板与随机方案生成三个预览。
  7. 阶段 3：生成演示文稿应用所选密度与选定的风格方案，读取支持文件，输出一个固定舞台的 HTML 文件。
  8. 阶段 4：PPT 转换用 Python 脚本提取 .pptx 内容，向用户确认后，转换为所选风格。
  9. 阶段 5：交付删除预览，打开演示文稿，并总结文件详情、导航方式、可定制项与内联编辑方法。
  10. 阶段 6：分享与导出（选项
Skill 自身的描述
"从头创建或通过转换 PowerPoint 文件来制作精美、富含动画的 HTML 演示文稿。当用户想要制作演示文稿、将 PPT/PPTX 转为网页或为演讲/推介创建幻灯片时使用。通过视觉探索而非抽象选择，帮助非设计师发现自己的美学。"

SKILL.md 中的 front-matter 描述。完整文件约 28,057 个字符。在 GitHub 上阅读完整文件。

Frontend Slides

在真实的 PPT 和幻灯片任务上运行 frontend-slides。

frontend-slides skill 内置于 OpenDesign。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上述提示，并在结果前阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides