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 并将其完整内容包含在每份演示文稿中。

每张幻灯片的内容密度限制

内容超出限制？拆分为多张幻灯片。永远不要硬塞，永远不要滚动。

阶段 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 中。

步骤 2.1：氛围选择（引导式发现）

询问（标题："氛围"，多选：true，最多 2 项）： 观众应该有什么感觉？选项：

• 印象深刻/自信 — 专业、值得信赖
• 兴奋/充满活力 — 创新、大胆
• 平静/专注 — 清晰、深思熟虑
• 受到启发/感动 — 情感、难忘

步骤 2.2：生成 3 个样式预览

根据氛围，生成 3 个独特的单页 HTML 预览，展示排版、颜色、动画和整体美学。阅读 STYLE_PRESETS.md 了解可用预设及其规格。

将预览保存到 .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 架构和 JS 功能
• viewport-base.css — 必需 CSS（完整包含）
• animation-patterns.md — 所选感觉的动画参考

关键要求：

• 单个自包含 HTML 文件，所有 CSS/JS 内联
• 在 <style> 块中包含 viewport-base.css 的完整内容
• 使用 Fontshare 或 Google Fonts 的字体 — 绝不用系统字体
• 添加详细注释解释每个部分
• 每个部分需要清晰的 /* === 部分名称 === */ 注释块

阶段 4：PPT 转换

转换 PowerPoint 文件时：

1. 提取内容 — 运行 python scripts/extract-pptx.py <input.pptx> <output_dir>（如需要安装 python-pptx：pip install python-pptx）
2. 与用户确认 — 展示提取的幻灯片标题、内容摘要和图片数量
3. 样式选择 — 进入阶段 2 进行样式发现
4. 生成 HTML — 转换为所选样式，保留所有文字、图片（来自 assets/）、幻灯片顺序和演讲者备注（作为 HTML 注释）

阶段 5：交付

1. 清理 — 删除 .claude-design/slide-previews/（如果存在）
2. 打开 — 使用 open [filename].html 在浏览器中启动
3. 总结 — 告知用户：
   • 文件位置、样式名称、幻灯片数量
   • 导航：方向键、空格、滚动/滑动、点击导航点
   • 如何自定义：:root CSS 变量改颜色，字体链接改排版，.reveal 类改动画
   • 如果启用了内联编辑：悬停左上角或按 E 进入编辑模式，点击任意文字编辑，Ctrl+S 保存

支持文件

限制

• 仅当任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，停下来请求澄清。