Everything Claude Code 的 frontend-slides Skill 是一款专为开发者和非设计师打造的零依赖 HTML 演示文稿生成与 PowerPoint 转换工具。它可根据主题、草稿或现有 PPT 文件，自动生成动画丰富、风格多样、完全自包含的 HTML 演示文稿，无需任何第三方依赖或前端框架。通过视觉探索式预览、严格的视口适配和生产级代码规范，帮助用户快速获得高质量、可定制的演示体验，极大提升 AI 辅助内容展示与协作效率。

Everything Claude Code Frontend Slides Skill：零依赖 HTML 演示文稿构建与 PowerPoint 文件转换

在 AI 辅助编程时代，如何高效、专业地制作演示文稿，成为开发者、产品经理、技术布道师等角色的共性需求。传统做法通常依赖 PowerPoint、Keynote、Google Slides 等工具，或手动搭建前端幻灯片框架（如 Reveal.js），但这些方式存在依赖重、样式模板化、协作不便等痛点。

frontend-slides Skill 正是为此场景而生：它让你无需任何前端依赖或设计基础，只需给出主题、草稿或 PPT 文件，即可由 Claude Code/AI 编程助手自动生成动画丰富、风格鲜明、100% 浏览器本地运行的 HTML 演示文稿。并且，Skill 支持一键将 PowerPoint (.ppt/.pptx) 文件转换为同样高质量的网页端演示，保留内容、顺序与备注，彻底告别格式兼容与样式单一问题。

1. 解决什么问题？对比传统做法

零依赖，无需安装任何前端库或构建工具：生成的 HTML 文件自带 CSS/JS，直接本地打开即可展示，适合内网分享、会议演示、代码评审等场景。
PPT/PPTX 一键转网页：自动提取文字、图片、备注，转换为响应式 HTML 幻灯片，适配多设备，彻底摆脱格式兼容烦恼。
风格探索，非模板化：通过视觉预览引导，帮不会设计的用户探索适合自己的风格，避免千篇一律的“紫色渐变+Inter”模板脸。
严格视口适配，内容永不溢出：每页幻灯片都保证一屏显示，无需滚动，自动分割超长内容，字体/间距自适应不同屏幕。
生产级代码规范：注重可访问性（a11y）、响应式、性能、可维护性，所有代码结构清晰、注释完整，便于二次定制。

想了解更多 Everything Claude Code 的整体架构与 Skill 体系，推荐阅读 Everything Claude Code 完全指南。

2. 触发条件：什么时候会自动激活 frontend-slides Skill？

你在 Claude Code/Codex/Cursor 等 AI 编程助手中输入如下需求时自动触发：
- “帮我做一个产品发布演讲的幻灯片”
- “把这个 PPT 转成网页版本”
- “我有一份讲稿，生成一套风格独特的 HTML 演示文稿”
- “现有 HTML 幻灯片排版太模板了，帮我优化成更有辨识度的风格”
Skill 也可被其他 Agent（如文档自动化、产品演示、开源 README 生成等）调用，作为内容输出环节的标准组件。

3. 使用流程 Step by Step

Step 1：选择模式（新建/转换/增强）

新建演示文稿：你有主题、讲稿、提纲，Skill 会引导你补充用途（如 pitch/教学/大会）、页数预期、内容成熟度（成稿/草稿/仅主题）。
PPT 转换：上传 .ppt 或 .pptx 文件，Skill 自动提取所有文本、图片、备注，转换为 HTML 幻灯片。
已有 HTML 优化：粘贴现有 HTML 幻灯片代码，Skill 会智能分析排版、动效、字体等，提出并实现风格/可访问性/动画等多维改进。

Step 2：内容收集与确认

Skill 只会询问最少必要的问题（用途、长度、内容状态），避免打扰。
如果已有内容，直接粘贴即可；如无，则引导你补充主题或大纲。

Step 3：风格探索与预览选择

默认采用“视觉探索”模式，不让你陷入抽象的“你喜欢什么风格”问卷。
Skill 会根据你的用途和期望氛围（如“希望观众被打动/印象深刻/专注/充满活力”），自动生成 3 个单页风格预览（保存在 .ecc-design/slide-previews/）。
每个预览都自包含 CSS/JS，展示不同的字体、配色、动画、布局等风格特征（如“Bold Signal”、“Dark Botanical”、“Neon Cyber”等）。
你可选择最喜欢的预览，或让 Skill混合某些元素后再生成最终版本。

这些风格预设与氛围映射详见 STYLE_PRESETS.md，Skill 会自动匹配，无需你手动查阅。

Step 4：生成完整演示文稿

Skill 输出 presentation.html 或 [自定义名称].html，如有图片则自动生成 assets/ 目录。
结构要求：
- 语义化 slide 分区（<section class="slide">）
- 引入强制视口适配的 CSS 基础（所有字体/间距/图片都用 clamp()、vw、vh 等单位）
- 主题色、字体等用 CSS 变量集中管理
- 内置 JS 控制键盘/鼠标/触摸滑动切换、进度指示、动画触发
- 支持 prefers-reduced-motion，减少动画以照顾易感人群
- 可访问性友好（语义标签、对比度、键盘导航）

代码示例片段（结构简化版）

html

<!-- presentation.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>产品发布会演示</title>
  <style>
    /* 强制视口适配的 CSS 片段 */
    html, body { height: 100%; overflow-x: hidden; }
    .slide { width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    /* ...其余 CSS 见 STYLE_PRESETS.md */
  </style>
</head>
<body>
  <main>
    <section class="slide">
      <div class="slide-content">
        <h1>新一代产品发布</h1>
        <p>让创新触手可及</p>
      </div>
    </section>
    <!-- ...更多 slide ... -->
  </main>
  <script>
    // 键盘/滑动/进度指示/动画控制
    // ...省略实现...
  </script>
</body>
</html>

Step 5：严格视口适配与内容分割

Skill 会自动检测每页内容是否超出一屏，超出则自动分割为多页，绝不通过缩小字体或出现滚动条来“凑合”。
字体、间距、图片等全部用 clamp()、vw、vh 等单位自适应，确保在 1920x1080、1280x720、768x1024、375x667、667x375 等主流尺寸下无溢出。

Step 6：自动验证与交付

Skill 会模拟不同屏幕尺寸自动检查每页是否溢出、导航是否流畅。
交付时自动删除临时预览文件，输出文件路径、所用风格、总页数、可自定义点说明。
支持一键本地打开（macOS: open file.html，Linux: xdg-open file.html，Windows: start "" file.html）。

Step 7：PPT/PPTX 转换细节

优先用 python3 + python-pptx 提取文本、图片、备注，保留原顺序与内容结构。
若本地无 python-pptx，Skill 会提示你安装，或降级为导出图片/手动复制。
转换后走同样的风格探索与 HTML 生成流程，确保网页端体验一致。

4. 输出示例

输入：

“请帮我把这份产品发布会的 PPT 转成动画丰富的 HTML 演示文稿，风格要有辨识度，适合技术观众。”

Skill 输出：

3 个风格预览（如 Neon Cyber、Bold Signal、Swiss Modern），你选择其中一个
自动生成 product-launch.html，结构如上，动画流畅、支持键盘/滑动切换、进度指示、无滚动条
交付说明：“已生成 product-launch.html，采用 Neon Cyber 风格，共 12 页。主题色/字体可在文件顶部 CSS 变量自定义。所有图片已放入 assets/。”

5. 常见配套 Agent 与 Skill 协作

与 frontend-patterns Skill 配合：可为演示文稿添加交互组件、表单、实时数据展示等高级前端能力
与 liquid-glass-design Skill 协作：打造类似 Apple Keynote 的玻璃拟态视觉风格
与 e2e-testing Skill 集成：自动化验证生成的 HTML 幻灯片在不同浏览器和设备下的表现，保障交付质量
可被 doc-updater、content-engine 等 Agent 调用：用于自动生成产品介绍、开源文档、市场材料等多场景内容

进阶用法、自动化 Hook 配置等可参考 Claude Code 快速上手指南。

6. 注意事项与反模式

严禁生成模板脸（如紫色渐变+Inter）、长段落/滚动代码块、低对比度配色
每页内容密度有硬性上限（如最多 6 个要点/10 行代码/1 张图片），超出需自动分页
所有动画都需支持“减少动态”系统设置，避免影响敏感用户
如需多文件结构（如需自定义 JS/CSS），需明确告知 Skill，否则始终输出单文件自包含 HTML

FAQ

Q: 生成的 HTML 演示文稿可以直接在本地浏览器打开吗？
A: 可以，所有 CSS/JS 都已内嵌，无需任何依赖，直接双击或用命令行打开即可。

Q: PowerPoint 转换会丢失动画或备注吗？
A: Skill 会完整提取文本、图片、备注内容，并用网页动画还原主要动效，但复杂的 PPT 动画需手动适配。

Q: 我能自定义配色、字体或动画风格吗？
A: 可以，Skill 会在交付时标注 CSS 变量和可自定义点，直接修改 HTML 文件顶部即可调整主题风格。

Everything Claude Code Frontend Slides Skill：零依赖 HTML 演示文稿构建与 PowerPoint 文件转换 ​

1. 解决什么问题？对比传统做法 ​

2. 触发条件：什么时候会自动激活 frontend-slides Skill？ ​

3. 使用流程 Step by Step ​

Step 1：选择模式（新建/转换/增强） ​

Step 2：内容收集与确认 ​

Step 3：风格探索与预览选择 ​

Step 4：生成完整演示文稿 ​

代码示例片段（结构简化版） ​

Step 5：严格视口适配与内容分割 ​

Step 6：自动验证与交付 ​

Step 7：PPT/PPTX 转换细节 ​

4. 输出示例 ​

5. 常见配套 Agent 与 Skill 协作 ​

6. 注意事项与反模式 ​

FAQ ​