# Frontend Slides > 从零创建或转换 PowerPoint 文件，生成视觉效果惊艳、动画丰富的 HTML 演示文稿。适用于构建演示文稿、将 PPT/PPTX 转换为网页、或为演讲/路演创建幻灯片。帮助非设计人员通过视觉探索而非抽象选择来发现自己的审美偏好。当用户要求创建演示文稿、幻灯片、路演PPT、HTML presentation、presentation slides、web slides、PPT转HTML、slide deck、pitch deck时使用。 - Skill: `kscz0000/frontend-slides` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add kscz0000/frontend-slides` - Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/frontend-slides/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: kscz0000 (https://skillmd.com/u/kscz0000) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/kscz0000/frontend-slides --- # Frontend Slides 创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。 ## 何时使用此技能 - 用户要求从零创建演示文稿、幻灯片或路演材料时使用 - 用户想将现有 PPT 或 PPTX 文件转换为网页演示文稿时使用 - 设计视觉丰富、带动画的 HTML 内容，且需要精确适配视口时使用 ## 核心原则 1. **零依赖** — 单个 HTML 文件，内联 CSS/JS。无需 npm，无需构建工具。 2. **展示而非讲述** — 生成视觉预览，而非抽象选择。人们通过观看来发现自己想要什么。 3. **独特设计** — 拒绝通用的"AI 模板感"。每份演示文稿都必须感觉是精心定制的。 4. **视口适配（不可妥协）** — 每张幻灯片必须精确适配 100vh。幻灯片内永远不要滚动。内容溢出？拆分为多张幻灯片。 ## 设计美学 你倾向于收敛到通用的、"平庸"输出。在前端设计中，这会产生用户所说的"AI 模板感"美学。避免这种情况：做出有创意、独特的前端，让人惊喜和愉悦。 关注： - 排版：选择美观、独特、有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体。 - 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。主色调搭配锐利的强调色，胜过畏缩、均匀分布的调色板。从 IDE 主题和文化美学中汲取灵感。 - 动效：使用动画创造效果和微交互。HTML 优先使用纯 CSS 方案。React 可用时使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载配合交错显示（animation-delay），比分散的微交互更令人愉悦。 - 背景：创造氛围和深度，而非默认纯色。叠加 CSS 渐变，使用几何图案，或添加与整体美学匹配的情境效果。 避免通用 AI 生成美学： - 过度使用的字体系列（Inter、Roboto、Arial、系统字体） - 俗套的配色方案（尤其是白色背景上的紫色渐变） - 可预测的布局和组件模式 - 缺乏情境特色的千篇一律设计 创造性解读，做出真正为情境设计的意外选择。在浅色和深色主题、不同字体、不同美学之间变化。你仍然倾向于收敛到常见选择（例如 Space Grotesk）。避免这种情况：跳出思维框架至关重要！ ## 视口适配规则 这些不变量适用于每份演示文稿的每张幻灯片： - 每个 `.slide` 必须有 `height: 100vh; height: 100dvh; overflow: hidden;` - 所有字体大小和间距必须使用 `clamp(min, preferred, max)` — 绝不用固定的 px/rem - 内容容器需要 `max-height` 约束 - 图片：`max-height: min(50vh, 400px)` - 高度断点要求：700px、600px、500px - 包含 `prefers-reduced-motion` 支持 - 永远不要直接对 CSS 函数取反（`-clamp()`、`-min()`、`-max()` 会被静默忽略）— 改用 `calc(-1 * clamp(...))` **生成时，读取 `viewport-base.css` 并将其完整内容包含在每份演示文稿中。** ### 每张幻灯片的内容密度限制 | 幻灯片类型 | 最大内容 | | ---------- | -------- | | 标题幻灯片 | 1 个标题 + 1 个副标题 + 可选标语 | | 内容幻灯片 | 1 个标题 + 4-6 个要点 或 1 个标题 + 2 个段落 | | 功能网格 | 1 个标题 + 最多 6 张卡片（2x3 或 3x2） | | 代码幻灯片 | 1 个标题 + 8-10 行代码 | | 引用幻灯片 | 1 条引用（最多 3 行）+ 署名 | | 图片幻灯片 | 1 个标题 + 1 张图片（最高 60vh） | **内容超出限制？拆分为多张幻灯片。永远不要硬塞，永远不要滚动。** --- ## 阶段 0：检测模式 确定用户想要什么： - **模式 A：新建演示文稿** — 从零创建。进入阶段 1。 - **模式 B：PPT 转换** — 转换 .pptx 文件。进入阶段 4。 - **模式 C：增强** — 改进现有 HTML 演示文稿。阅读、理解、增强。**遵循下方模式 C 修改规则。** ### 模式 C：修改规则 增强现有演示文稿时，视口适配是最大风险： 1. **添加内容前：** 统计现有元素，对照密度限制检查 2. **添加图片：** 必须有 `max-height: min(50vh, 400px)`。如果幻灯片已达最大内容量，拆分为两张幻灯片 3. **添加文字：** 每张幻灯片最多 4-6 个要点。超出限制？拆分为续接幻灯片 4. **任何修改后，验证：** `.slide` 有 `overflow: hidden`，新元素使用 `clamp()`，图片有视口相对最大高度，内容在 1280x720 下适配 5. **主动重组：** 如果修改会导致溢出，自动拆分内容并告知用户。不要等用户要求 **向现有幻灯片添加图片时：** 先将图片移到新幻灯片或减少其他内容。永远不要在未检查现有内容是否已填满视口的情况下添加图片。 --- ## 阶段 1：内容发现（新建演示文稿） **在单次 AskUserQuestion 调用中询问所有问题**，让用户一次性填写所有内容： **问题 1 — 用途**（标题："用途"）： 这份演示文稿用于什么？选项：路演文稿 / 教学教程 / 会议演讲 / 内部汇报 **问题 2 — 长度**（标题："长度"）： 大约多少张幻灯片？选项：短篇 5-10 / 中篇 10-20 / 长篇 20+ **问题 3 — 内容**（标题："内容"）： 你有现成的内容吗？选项：内容已备好 / 粗略笔记 / 仅主题 **问题 4 — 内联编辑**（标题："编辑"）： 生成后需要在浏览器中直接编辑文字吗？选项： - "是（推荐）" — 可在浏览器中编辑文字，自动保存到 localStorage，导出文件 - "否" — 仅演示文稿，文件更小 **记住用户的编辑选择 — 这决定阶段 3 是否包含编辑相关代码。** 如果用户有内容，请他们分享。 ### 步骤 1.2：图片评估（如果提供了图片） 如果用户选择"无图片" → 跳至阶段 2。 如果用户提供图片文件夹： 1. **扫描** — 列出所有图片文件（.png、.jpg、.svg、.webp 等） 2. **查看每张图片** — 使用 Read 工具（Claude 是多模态的） 3. **评估** — 每张图片：展示什么、可用或不可用（附原因）、代表什么概念、主色调 4. **共同设计大纲** — 精选图片与文字共同决定幻灯片结构。这不是"先规划幻灯片再添加图片"—— 从一开始就围绕两者设计（例如，3 张截图 → 3 张功能幻灯片，1 个 logo → 标题/结尾幻灯片） 5. **通过 AskUserQuestion 确认**（标题："大纲"）："这个幻灯片大纲和图片选择看起来对吗？"选项：看起来不错 / 调整图片 / 调整大纲 **预览中的 Logo：** 如果识别到可用的 logo，将其（base64）嵌入阶段 2 的每个样式预览中 — 用户看到他们的品牌以三种不同方式呈现。 --- ## 阶段 2：样式发现 **这是"展示而非讲述"阶段。** 大多数人无法用语言表达设计偏好。 ### 步骤 2.0：样式路径 询问他们想如何选择（标题："样式"）： - "给我看选项"（推荐）— 根据氛围生成 3 个预览 - "我知道我要什么"— 直接从预设列表选择 **如果直接选择：** 显示预设选择器并跳至阶段 3。可用预设定义在 [STYLE_PRESETS.md](STYLE_PRESETS.md) 中。 ### 步骤 2.1：氛围选择（引导式发现） 询问（标题："氛围"，多选：true，最多 2 项）： 观众应该有什么感觉？选项： - 印象深刻/自信 — 专业、值得信赖 - 兴奋/充满活力 — 创新、大胆 - 平静/专注 — 清晰、深思熟虑 - 受到启发/感动 — 情感、难忘 ### 步骤 2.2：生成 3 个样式预览 根据氛围，生成 3 个独特的单页 HTML 预览，展示排版、颜色、动画和整体美学。阅读 [STYLE_PRESETS.md](STYLE_PRESETS.md) 了解可用预设及其规格。 | 氛围 | 建议预设 | | ---- | -------- | | 印象深刻/自信 | Bold Signal、Electric Studio、Dark Botanical | | 兴奋/充满活力 | Creative Voltage、Neon Cyber、Split Pastel | | 平静/专注 | Notebook Tabs、Paper & Ink、Swiss Modern | | 受到启发/感动 | Dark Botanical、Vintage Editorial、Pastel Geometry | 将预览保存到 `.claude-design/slide-previews/`（style-a.html、style-b.html、style-c.html）。每个应该是自包含的，约 50-100 行，展示一张带动画的标题幻灯片。 自动为用户打开每个预览。 ### 步骤 2.3：用户选择 询问（标题："样式"）： 你更喜欢哪个样式预览？选项：样式 A: [名称] / 样式 B: [名称] / 样式 C: [名称] / 混合元素 如果"混合元素"，询问具体细节。 --- ## 阶段 3：生成演示文稿 使用阶段 1 的内容（文字，或文字 + 精选图片）和阶段 2 的样式生成完整演示文稿。 如果提供了图片，幻灯片大纲已从步骤 1.2 整合它们。如果没有，CSS 生成的视觉效果（渐变、形状、图案）提供视觉趣味 — 这是完全支持的一流路径。 **生成前，阅读这些支持文件：** - [html-template.md](html-template.md) — HTML 架构和 JS 功能 - [viewport-base.css](viewport-base.css) — 必需 CSS（完整包含） - [animation-patterns.md](animation-patterns.md) — 所选感觉的动画参考 **关键要求：** - 单个自包含 HTML 文件，所有 CSS/JS 内联 - 在 `