AI Vibe Slides 是一个用于创建可直接全屏演示的 HTML 或 React 幻灯片文件的技能。其目标是产出一个包含完整幻灯片的单一 HTML 或 React 文件，能够直接在浏览器中全屏演示，通过方向键、空格键或点击进行导航，外观专业、精致且风格一致，并可在需要时打印或导出为 PDF。该技能受 banana-slides 启发，采用“想法 → 大纲 → 成品幻灯片”的三步流程，但输出的是自包含的 HTML 文件，而非全栈应用。
【用途】 当用户希望创建演示幻灯片时使用该技能。它适合需要快速生成专业幻灯片、并直接在浏览器中全屏展示的场景。
【主要能力】
-
幻灯片创建流程：
- 第一步：理解请求并构建大纲。识别主题和目标受众（学生、商务、技术演讲等），拆分为逻辑章节，包括封面、介绍/背景、核心内容（每页一个关键想法）、结论/行动号召/致谢。每页包含标题、2-5 个要点或视觉内容以及版式类型。若用户只给出一句话，会自动扩展为 8-12 页并具备逻辑结构。
- 第二步：选择设计方向。根据场景选择风格，例如创业路演用大胆深色主题、渐变强调、强无衬线字体；学术教育用干净浅色、图表丰富、易读字体；技术演讲用现代深色、代码风格排版、霓虹强调；企业报告用极简专业、海军蓝/白色、衬线标题；创意营销用多彩、非对称布局、粗体排版；儿童教育用柔和色彩、圆角、趣味图标、大号文字。通用规则包括：选择 2-3 种主色并全篇一致；1 种标题字体 + 1 种正文字体（使用 Google Fonts）；文字精简、留白充足，每页最多 5-6 行；清晰的视觉层级。
- 第三步：生成 HTML/React 幻灯片。创建包含所有内容的单一文件（.html 或 .jsx）。
-
幻灯片版式类型：
- 封面页：居中、超大字体、渐变背景，包含主题徽章、主标题、副标题、作者。
- 章节分隔页：仅章节标题 + 编号，强调色背景，用于分隔主要章节。
- 内容 + 要点：左对齐标题 + 关键点列表，每个要点前使用图标/emoji 而非普通圆点。
- 双栏：左侧文字，右侧视觉/列表/卡片，适合对比、前后对照、文字+插图。
- 卡片网格：2-3 列网格，每张卡片包含图标 + 标题 + 简短描述，适合功能、优势、团队成员。
- 大数字/统计：居中巨大数字（font-size: 5rem+）+ 下方小标签，适合数据点、KPI、影响力数字。
- 引用/高亮：大号文字居中，带装饰性引号，使用不同背景（浅强调色）。
- 时间线/步骤：水平或垂直 flexbox，圆点连接各步骤，适合流程、路线图、历史。
- 致谢/CTA：居中、简洁，包含联系信息或行动号召。
-
强制设计规则：
- 16:9 宽高比：始终使用 width: 100vw; height: 100vh，每页填满整个屏幕。
- 文字精简：每页最多 6 行，内容过长则拆分为多页。
- 大字号：标题 ≥ 2.4rem，正文 ≥ 1.3rem，确保投影仪上可读。
- 高对比度：文字在背景上必须清晰可读。
- 一致性：全篇使用相同字体、相同配色、相同间距。
- 不使用占位图片：绝不使用 <img src="placeholder">，改用 CSS 形状、渐变、图标（emoji 或 React 的 Lucide）或内联 SVG。
- 细微动画：仅在幻灯片切换时使用 fadeIn，不使用分散注意力的复杂动画。
- 响应式全屏：必须在所有屏幕尺寸下表现良好。
- 打印就绪：包含 @media print 规则，使每页幻灯片成为一页打印页。
-
React 版本： 若创建 React 产物，可使用 Tailwind CSS 工具类、Lucide 图标、更复杂的逻辑以及 recharts 图表。示例模式使用 useState、useEffect、useCallback 管理当前页，支持方向键、空格键、F 键全屏，点击左右半屏翻页。
-
交付前检查清单： 幻灯片数量正确（封面 + 内容 + 结尾）；方向键 ← → 可用，点击可导航；计数器显示正确的“X / N”；按 F 全屏；所有文字对比度足够可读；无损坏图片或占位符；Google Fonts 正确加载（或有良好回退）；打印/PDF 导出正常（@media print）；全篇风格一致；每页恰好一个关键想法，不过度堆砌文字。
-
自然语言编辑： 初始创建后，用户可请求修改，例如“切换为浅色主题”更新 CSS 变量；“添加 2 页关于案例研究”插入幻灯片；“第 3 页文字太多，拆分它”重构内容；“将字体改为 Playfair Display”更新 Google Fonts 链接 + CSS；“在第 5 页添加图表”使用 CSS 图表或 recharts（React）。每次编辑时，保持未更改的幻灯片不变，仅更新用户要求的部分。
【使用方式】 该技能以自然语言请求触发，用户描述演示主题或需求后，技能自动完成大纲、设计方向选择和文件生成。生成的文件为单一 HTML 或 .jsx，可直接在浏览器打开全屏演示。
【适用场景】 适合创业路演、学术教育、技术演讲、企业报告、创意营销、儿童教育等需要快速生成专业幻灯片的场景。
【限制】 资料未提供该技能的收费、价格、平台支持范围等具体信息。