Skip to content

SKILL.md

Latest commit

 

History

History
225 lines (153 loc) · 11.1 KB

SKILL.md

File metadata and controls

225 lines (153 loc) · 11.1 KB
name frontend-slides
description 创建零依赖、动画丰富的 HTML 演示文稿。支持从零创建、从 PowerPoint 转换，或增强现有 HTML 演示。帮助非设计师通过视觉探索发现美学偏好，而非抽象选择。

Frontend Slides - 前端幻灯片生成器

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。

核心原则

  1. 零依赖 — 单文件 HTML，内联 CSS/JS。无需 npm，无构建工具。
  2. 展示而非讲述 — 生成视觉预览，而非抽象选择。用户通过看见来发现他们想要的。
  3. 独特设计 — 拒绝通用"AI 生成"的平庸感。每个演示都必须感觉量身定制。
  4. 视口适配（不可妥协） — 每张幻灯片必须完全适配 100vh。幻灯片内永远不滚动。内容溢出？拆分成多张幻灯片。

设计美学

你倾向于收敛到通用的"正态分布"输出。在前端设计中，这创造了用户称为"AI 生成"的美学。避免这点：制作有创意、独特的前端，让人惊喜和愉悦。

专注于：

  • 字体：选择美观、独特、有趣的字体。避免通用字体如 Arial 和 Inter；选择能提升前端美学的独特选择。
  • 颜色和主题：坚持一致的美学。使用 CSS 变量保持一致性。主导色搭配锐利点缀胜过胆怯、均匀分布的调色板。从 IDE 主题和文化美学中汲取灵感。
  • 动效：使用动画实现效果和微交互。优先使用 CSS-only 方案。使用 Motion 库（React 可用时）。专注于高影响力时刻：一个精心编排的页面加载和交错揭示（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()，图片有视口相对的 max-height，内容在 1280x720 下适配
  5. 主动重组：如果修改会导致溢出，自动拆分内容并告知用户。不要等被要求

向现有幻灯片添加图片时：先将图片移至新幻灯片或减少其他内容。永远不要在不检查现有内容是否已填充视口的情况下添加图片。

阶段 1：内容发现（新建演示）

在单个 AskUserQuestion 调用中询问所有问题，以便用户一次性填写所有内容：

问题 1 — 目的（header: "Purpose"）： 这个演示用于什么？选项：Pitch deck / 教学-教程 / 会议演讲 / 内部演示

问题 2 — 长度（header: "Length"）： 大约多少张幻灯片？选项：短 5-10 / 中 10-20 / 长 20+

问题 3 — 内容（header: "Content"）： 你有内容准备好了吗？选项：所有内容已就绪 / 粗略笔记 / 仅主题

问题 4 — 行内编辑（header: "Editing"）： 生成后需要在浏览器中直接编辑文本吗？选项：

  • "是（推荐）" — 可在浏览器中编辑文本，自动保存到 localStorage，导出文件
  • "否" — 仅演示，保持文件更小

记住用户的编辑选择 — 它决定是否在阶段 3 中包含编辑相关代码。

如果用户有内容，要求他们分享。

步骤 1.2：图片评估（如果提供图片）

如果用户选择"无图片" → 跳到阶段 2。

如果用户提供图片文件夹：

  1. 扫描 — 列出所有图片文件（.png、.jpg、.svg、.webp 等）
  2. 查看每张图片 — 使用 Read 工具（Claude 是多模态的）
  3. 评估 — 对每张：它显示什么、可用或不可用（及原因）、代表什么概念、主导色
  4. 协同设计大纲 — 精选图片与文本一起为幻灯片结构提供信息。这不是"规划幻灯片然后添加图片" — 从一开始就围绕两者设计（例如 3 张截图 → 3 张功能幻灯片，1 个标志 → 标题/结束幻灯片）
  5. 通过 AskUserQuestion 确认（header: "Outline"）："这个幻灯片大纲和图片选择看起来对吗？" 选项：看起来不错 / 调整图片 / 调整大纲

预览中的标志：如果识别到可用标志，将其嵌入（base64）到阶段 2 中的每个样式预览中 — 用户看到他们的品牌以三种不同方式设计。

阶段 2：风格发现

这是"展示而非讲述"阶段。 大多数人无法用言语表达设计偏好。

步骤 2.0：风格路径

询问他们想如何选择（header: "Style"）：

  • "展示选项"（推荐） — 基于情绪生成 3 个预览
  • "我知道我想要的" — 直接从预设列表中选择

如果直接选择：显示预设选择器并跳到阶段 3。可用预设定义在 STYLE_PRESETS.md 中。

步骤 2.1：情绪选择（引导发现）

询问（header: "Vibe", multiSelect: true, max 2）： 观众应该有什么感觉？选项：

  • 印象深刻/自信 — 专业、可信
  • 兴奋/活力 — 创新、大胆
  • 冷静/专注 — 清晰、深思熟虑
  • 受启发/感动 — 情感化、难忘

步骤 2.2：生成 3 个风格预览

基于情绪，生成 3 个不同的单幻灯片 HTML 预览，展示字体、颜色、动画和整体美学。阅读 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：用户选择

询问（header: "Style"）： 你更喜欢哪个风格预览？选项：风格 A: [名称] / 风格 B: [名称] / 风格 C: [名称] / 混合元素

如果"混合元素"，询问具体细节。

阶段 3：生成演示

使用阶段 1 的内容（文本，或文本 + 精选图片）和阶段 2 的风格生成完整演示。

如果提供了图片，幻灯片大纲已从步骤 1.2 整合了它们。如果没有，CSS 生成的视觉效果（渐变、形状、图案）提供视觉趣味 — 这是完全支持的首选路径。

生成前，阅读这些支持文件：

关键要求：

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

阶段 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 保存

支持文件

文件 目的 何时读取
STYLE_PRESETS.md 12 个精选视觉预设，包含颜色、字体和签名元素 阶段 2（风格选择）
viewport-base.css 必需响应式 CSS — 复制到每个演示中 阶段 3（生成）
html-template.md HTML 结构、JS 特性、代码质量标准 阶段 3（生成）
animation-patterns.md CSS/JS 动画片段和效果-感觉指南 阶段 3（生成）
scripts/extract-pptx.py Python 脚本用于 PPT 内容提取 阶段 4（转换）