slides-generator

幻灯片生成器

使用 React + Tailwind 生成专业、交互式的演示文稿幻灯片。

项目结构

每个幻灯片项目都组织在一个专属文件夹中：

<project-folder>/
├── context.md          ← Collected knowledge and context from user
├── researches/         ← Research documents (when topic requires research)
│   └── YYYY-MM-DD-topic.md
├── slides.md           ← Markdown slides for preview/discussion
├── source/             ← React source code (from template)
│   ├── package.json
│   ├── vite.config.js
│   ├── vite.standalone.config.js
│   ├── tailwind.config.js
│   ├── index.html
│   └── src/
│       ├── App.jsx
│       ├── index.css
│       └── slides/
│           ├── 01-hero.jsx
│           ├── 02-content.jsx
│           └── ...
├── verify/             ← Verification screenshots (from browser testing)
└── slide.html          ← Final standalone HTML (auto-generated)

工作流概览

Step 1: Initialize Project Folder
    ↓
Step 2: Collect Requirements (Progressive Disclosure)
    Phase 1: Topic → Phase 2: Audience → Phase 3: Style → Phase 4: Content
    ↓
Step 2.5: Research Checkpoint
    "Would you like me to research [topic]?" → User confirms
    ↓
Step 3: Create context.md + slides.md
    ↓
Step 4: Confirm Outline with User
    ↓
Step 5: Create Source Code → source/
    ↓
Step 6: Generate Slides (parallel subagents)
    ↓
Step 7: Dev Mode + Browser Verification (REQUIRED)
    ↓
Step 8: Build & Export → slide.html

步骤 1：初始化项目文件夹

如果用户未提供项目文件夹，请向其询问：

Where would you like to save this presentation?
Default: ./presentation-name

创建文件夹结构：

mkdir -p <project-folder>/source <project-folder>/researches <project-folder>/verify

步骤 2：收集需求（渐进式披露）

采用渐进式披露：每次提问 3-5 个问题，并根据回答逐步提供更多信息。

详细提问流程请参阅 context-guide.md。

提问流程

阶段 1 - 快速开始（始终进行）：

"What's the presentation about?"
"Any content or notes to include?" (optional)

阶段 2 - 受众与目的（始终进行）：

"Who will view this?"
  - Executives / Decision makers
  - Technical team / Developers
  - General audience / Mixed
  - Customers / External

"What's the goal?"
  - Inform / Persuade / Demo / Report

阶段 3 - 探索风格（始终进行）：

步骤 1：向用户询问关键词

"Describe the vibe in a few words"
  Examples: "tech, modern, dark" or "professional, clean, corporate"

步骤 2：使用 ui-ux-pro-max 技能获取全面的设计建议

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<topic> <keywords> presentation" --design-system -p "<Presentation Name>"

这将提供：

• 风格建议及原因
• 配色方案建议
• 字体搭配
• 动画指南

步骤 3：结合 palettes.md 提供 5 个选项 向用户提问的示例：

Based on your description and design analysis, here are 5 style options:

1. **Dark Sapphire Blue** (glass) - Recommended by ui-ux-pro-max
   Dark tech with blue accents, gradient glows
   Typography: Sora + Source Sans 3
   Best for: Tech products, developer tools

2. **Electric City Nights** (glass)
   Urban dark with vibrant blue highlights
   Typography: DM Sans + Work Sans
   Best for: Modern SaaS, tech startups

3. **Cyberpunk** (glass)
   Neon colors, futuristic sci-fi feel
   Typography: Outfit + Nunito Sans
   Best for: Gaming, AI/ML, futuristic topics

4. **Minimal Modern Light** (flat)
   Clean light theme with blue accents
   Typography: DM Sans + Work Sans
   Best for: Corporate, professional presentations

5. **Hacker News** (glass)
   Dark with orange accents, geek aesthetic
   Typography: Sora + Source Sans 3
   Best for: Developer content, technical demos

Which style? (1-5)

所选风格将记录在 context.md 的 Style 部分。

阶段 4 - 内容深度（有条件进行）：

"What are 3-5 key points to cover?"
"Any specific data to include?"
  - Yes, I have data → [Get details]
  - Research needed → [Trigger Step 2.5]
  - No data needed → [Skip]

对抽象术语进行追问

用户给出的术语较为模糊时，请进一步确认：

用户说	询问
“专业”	“简洁/极简，还是丰富/详尽？”
“现代”	“能举一个例子吗？”
“引人入胜”	“是指动画，还是有说服力的内容？”

保存到 context.md

提问后，创建 context.md，记录：

• 阶段 1-2 中确定的主题、目的和受众
• 阶段 3 中的所选风格（配色方案 ID、名称、风格类型）
• 阶段 4 中的要点和数据需求

## Style (User Selected)
- **Palette ID**: dark-sapphire-blue
- **Palette Name**: Dark Sapphire Blue
- **Mode**: dark
- **Style**: glass
- **Typography**:
  - Display: Sora
  - Body: Source Sans 3
- **User Keywords**: "tech, modern, dark"
- **Design Source**: ui-ux-pro-max + palettes.md

步骤 2.5：研究确认

研究前务必先询问——采用即时研究模式。

何时提供研究选项

以下情况提供研究选项：

• 主题涉及比较（A 与 B）
• 用户提及数据/统计信息/基准测试
• 主题涉及时事或新技术
• 用户需要自己没有的事实

以下情况跳过研究：

• 用户提供了自己的数据
• 主题属于个人/内部内容
• 用户明确拒绝

研究提示词

"This topic would benefit from research. Would you like me to:

[ ] Research current data/statistics
[ ] Find competitive comparisons
[ ] Gather industry trends
[ ] Skip research - I'll provide content"

研究工作流

1. User confirms research needed
    ↓
2. Conduct targeted web search
    ↓
3. Document in researches/ folder
    ↓
4. Present summary to user:
   "I found: [key findings]. Does this look accurate?"
    ↓
5. User confirms → Update context.md

研究模板

统计数据与信息请参阅 research-templates.md：

• 统计数据与数据 - 指标、基准测试、数字
• 竞争分析 - A 与 B 的比较
• 趋势与预测 - 行业展望
• 快速事实 - 简单事实查询

文件组织

researches/
├── YYYY-MM-DD-statistics.md    # Data and numbers
├── YYYY-MM-DD-comparison.md    # A vs B analysis
└── YYYY-MM-DD-trends.md        # Industry trends

质量检查清单

使用研究数据前：

• 来源权威可靠
• 数据是近期的（快速变化的领域需在 6 个月以内）
• 已与另一个来源交叉核实
• 用户已确认准确性

研究完成后，使用已核实的数据和来源更新 context.md。

步骤 3：创建 Markdown 幻灯片

创建 slides.md，其中包含完整的设计系统和内容结构。详细模式请参阅 slides-design.md。

3.1 生成设计系统（可选，但建议）

使用 ui-ux-pro-max 技能获取全面的设计建议：

python3 skills/ui-ux-pro-max/scripts/search.py "<topic> <style keywords>" --design-system -p "<Presentation Name>"

示例：

python3 skills/ui-ux-pro-max/scripts/search.py "tech benchmark modern dark glass" --design-system -p "Claude Benchmark"

3.2 slides.md 模板

# [Presentation Title]

## Design System

### Theme
- **Palette**: [theme-id from palettes.md]
- **Mode**: dark / light
- **Style**: glass / flat

### Colors
| Token | Hex | Usage |
|-------|-----|-------|
| bg-base | #0f1c2e | Main background |
| primary-500 | #4d648d | Primary accent |
| accent-500 | #3d5a80 | Contrast accent |
| text-primary | #ffffff | Main text |
| text-secondary | #cee8ff | Secondary text |

### Typography
- **Display**: Sora (headings)
- **Body**: Source Sans 3 (content)

### Effects
- **Cards**: glass with border-white/20
- **Animations**: stagger reveal (0.1s delay)
- **Background**: gradient glow + grid pattern

---

## Slide 1: Hero
**Type**: Hero
**Layout**: centered
**Title**: Main Title Here
**Subtitle**: Supporting tagline
**Background**: gradient glow (primary top-left, accent bottom-right)
**Animation**: fade-in + scale (0.6s)

---

## Slide 2: Overview
**Type**: Content
**Layout**: three-column
**Title**: What We'll Cover
**Cards**: 3 cards, glass style
**Points**:
- [icon: Zap] First key point
- [icon: Shield] Second key point
- [icon: Rocket] Third key point
**Animation**: stagger reveal (0.1s)

---

## Slide 3: Details
**Type**: Data
**Layout**: stat-cards
**Title**: Key Metrics
**Stats**:
| Metric | Value | Trend | Context |
|--------|-------|-------|---------|
| Users | 10K+ | +25% | Monthly active |
| Growth | 40% | +15% | Year over year |
| NPS | 72 | +8 | Industry avg: 45 |
**Animation**: count-up numbers

---

## Slide 4: Comparison
**Type**: Comparison
**Layout**: versus
**Title**: Head to Head
**Comparison**:
| Feature | Option A | Option B |
|---------|----------|----------|
| Speed | ✓ Fast | ○ Medium |
| Cost | $99/mo | $149/mo |
| Support | 24/7 | Business |
**Highlight**: Option A for performance

---

## Slide 5: Summary
**Type**: Summary
**Layout**: takeaways
**Title**: Key Takeaways
**Takeaways**:
1. First key insight
2. Second key insight
3. Third key insight
**CTA**: "Get Started" → [link]
**Animation**: fade-in sequential

3.3 幻灯片类型参考

类型	用途	布局
主视觉	开场幻灯片	居中、分栏、不对称
内容	信息、要点	单栏、双栏、图标列表
数据	统计数据、指标	统计卡片、图表聚焦、仪表板
比较	并列分析	对比、功能矩阵、排名
时间线	流程、路线图	横向、纵向、里程碑
网格	多张卡片	2x2、2x3、便当盒布局
引言	证言	居中、带头像
总结	结尾、行动号召	要点总结、聚焦行动号召

3.4 按场景选择设计模式

场景	主题	风格	字体
科技/产品	dark-sapphire-blue	glass	Sora + Source Sans 3
专业	banking-website	flat	DM Sans + Work Sans
创意	cyberpunk or neon	glass	Outfit + Nunito Sans
自然	summer-meadow	flat	Manrope + Source Sans 3
极简	black-and-white	flat	DM Sans + Work Sans

第 4 步：与用户确认

提交大纲供用户确认：

## Presentation Outline

**Title**: [Title]
**Theme**: [theme-id] ([glass/flat] style)
**Folder**: [project-folder]

**Slides**:
1. Hero - Title and overview
2. Content - Key points
3. Data - Metrics/charts
4. Summary - Conclusions

**Files to create:**
- context.md ✓
- slides.md ✓
- source/ (React project)
- slide.html (final output)

**Confirm to generate?**

第 5 步：创建源代码

复制模板并进行配置：

# 1. Copy template
cp -r <skill-path>/assets/template/* <project-folder>/source/

# 2. Update tailwind.config.js with theme colors
# 3. Update index.html title
# 4. Update App.jsx with presentation name

第 6 步：生成幻灯片

根据 slides.md 的内容生成每张幻灯片的 JSX 文件。

生成前请阅读：

• aesthetics.md - 设计理念
• principles.md - 技术原则

使用 vercel-react-best-practices skill 生成 React 代码，确保：

• 正确的组件组合与模式
• 渲染性能经过优化
• 代码结构清晰、易于维护

技术要求：

• 框架：React 函数组件
• 样式：Tailwind CSS
• 图标：lucide-react
• 动画：framer-motion
• 导出：默认函数组件

主题颜色（使用变量，不要硬编码）：

• primary-50 至 primary-950
• accent-50 至 accent-950
• bg-base、bg-card、bg-elevated
• text-primary、text-secondary、text-muted
• border-default、border-subtle

风格选项：

• Glass：glass class 或 bg-white/10 backdrop-blur-md border-white/20
• Flat：bg-bg-card shadow-sm border-border-default

布局规则（重要）：

⛔ 禁止：

• h-screen、min-h-screen——会破坏布局
• 在内容容器上使用 h-full
• 在 slide-page 上添加额外内边距

✅ 必须使用以下结构：

<div className="slide-page">
  {/* Background - absolute positioning */}
  <div className="absolute inset-0 pointer-events-none">...</div>

  {/* Header */}
  <header className="relative z-10 mb-6 shrink-0">
    <h1>Title</h1>
  </header>

  {/* Content - auto-fills remaining space */}
  <div className="slide-content relative z-10">
    {/* Grid/cards here */}
  </div>
</div>

网格布局：

• 2 张卡片：grid-auto-fit grid-cols-2
• 3 张卡片：grid-auto-fit grid-1x3
• 4 张卡片（2x2）：grid-auto-fit grid-2x2
• 6 张卡片（2x3）：grid-auto-fit grid-2x3

动画模式：

import { motion } from 'framer-motion';

// Stagger container
const container = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.1 } }
};

// Child item
const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

// Hover effect
<motion.div whileHover={{ scale: 1.02 }}>...</motion.div>

文件命名： 01-hero.jsx、02-overview.jsx 等。

生成所有幻灯片后更新 App.jsx：

// Add imports at top
import Slide01 from './slides/01-hero';
import Slide02 from './slides/02-content';
// ...

// Update SLIDES array
const SLIDES = [Slide01, Slide02, ...];

// Update NAV_ITEMS array (used for navigation labels)
const NAV_ITEMS = [
  { slideIndex: 0, label: 'Hero' },
  { slideIndex: 1, label: 'Content' },
  // ...
];

// Update PRESENTATION_NAME
const PRESENTATION_NAME = 'Your Presentation Title';

导航功能：

模板包含快速跳转导航：

功能	使用方法
幻灯片圆点	点击底部中央的圆点（≤12 张幻灯片）
数字键	按 1-9 跳转到第 1-9 张幻灯片
快速导航	按 G 或点击进度条打开网格选择器
菜单	点击汉堡菜单，查看带标签的完整幻灯片列表
方向键	按 ← → 键或点击箭头按钮

第 7 步：开发模式与浏览器验证（必需）

重要：在构建独立导出版本之前，务必在开发模式下验证幻灯片。这样可以及早发现 UI、动画和交互问题。

详细验证流程请参阅 browser-verification.md。

7.1 启动开发服务器

cd <project-folder>/source
npm install
npm run dev
# Server runs at http://localhost:5173

7.2 使用 agent-browser 进行浏览器验证

检查 agent-browser 是否可用：

# Try to run agent-browser
agent-browser --version

如果尚未安装，请提示用户：

Browser verification requires agent-browser skill.

Install with:
npx skills add vercel-labs/agent-browser

Then restart Claude Code and retry.

7.3 验证工作流

# Open presentation in browser
agent-browser open http://localhost:5173
agent-browser set viewport 1920 1080

# Create verify folder
mkdir -p <project-folder>/verify

# Capture first slide
agent-browser wait 2000
agent-browser screenshot <project-folder>/verify/slide-01.png

# Navigate and capture each slide
agent-browser press ArrowRight
agent-browser wait 1000
agent-browser screenshot <project-folder>/verify/slide-02.png
# ... repeat for all slides

7.4 验证清单

检查项	方法	通过标准
布局	对每张幻灯片截图	内容未溢出，间距恰当
导航	按 ArrowRight/Left	幻灯片平滑切换
快速跳转	按 1-5 或 G 键	跳转到正确的幻灯片
幻灯片圆点	点击底部的圆点	正确跳转（≤12 张幻灯片）
动画	观察过渡效果	无卡顿，元素能正常显示动画
交互	将鼠标悬停在元素上	能正常显示视觉反馈
响应式	更改视口	布局能正确适配

7.5 需要检查的常见问题

布局问题：

• 内容超出视口
• 导航栏被隐藏或遮挡
• 卡片拥挤或溢出

动画问题：

• 过渡卡顿
• 元素未播放动画
• 未设置样式的内容闪现

交互问题：

• 键盘导航不起作用
• 点击区域无响应
• 缺少悬停状态

7.6 修复并重新验证

如果发现问题：

1. 修复有问题的幻灯片 JSX
2. 浏览器自动重新加载（热重载）
3. 重新验证相关幻灯片
4. 截取新屏幕截图，确认修复有效

第 8 步：构建并导出

仅在验证通过后，构建独立 HTML：

cd <project-folder>/source

# Build standalone HTML
npm run build:standalone

# Copy to project root
cp dist-standalone/index.html ../slide.html

8.1 最终验证

验证独立文件是否正常工作：

# Test standalone file
agent-browser open file://<absolute-path>/slide.html
agent-browser set viewport 1920 1080
agent-browser screenshot <project-folder>/verify/final-standalone.png

# Quick navigation test
agent-browser press ArrowRight
agent-browser wait 500
agent-browser press ArrowLeft

最终输出：<project-folder>/slide.html

此单个 HTML 文件：

• 内嵌所有 JS、CSS 和字体
• 可离线工作（无需服务器）
• 可在任何浏览器中直接打开（file://）
• 支持完整的 React 交互和动画

8.2 关闭浏览器

agent-browser close

第 5.5 步：生成图片（需要时）

如果幻灯片需要自定义图片、图表或插图，请使用 ai-multimodal 技能。

使用场景：

• 需要背景插图的主视觉幻灯片
• 图表（架构图、流程图、流程）
• 产品模型或屏幕截图
• 自定义图标或插图

工作流：

1. 在第 3 步期间确定需要图片的幻灯片
2. 生成幻灯片 JSX 后，调用 ai-multimodal
3. 将图片保存到 source/public/images/
4. 在幻灯片中引用：<img src="/images/generated-image.png" />

主题系统

主题定义在 palettes.md 中。

快速建议：

用户说	建议
"Tech", "Modern"	dark-sapphire-blue（玻璃质感）
"Professional", "Business"	banking-website（扁平风格）
"Cyberpunk", "Neon"	cyberpunk（玻璃质感）
"Natural", "Organic"	summer-meadow（扁平风格）
"Minimal", "Clean"	black-and-white（扁平风格）

设计原则

参见 principles.md，了解：

• 颜色变量的使用
• 字体排印比例
• 间距规范
• 组件结构

交互示例

User: "Create a benchmark presentation for Claude vs GPT"

Claude: "I'll help create benchmark slides.

Where would you like to save this presentation?
Default: ./claude-benchmark"

User: "OK"

Claude: "What's this presentation about? Give me a brief description."

User: "Comparing Claude and GPT coding abilities for our dev team"

Claude: "Who will view this?
  - Executives / Decision makers
  - Technical team / Developers ←
  - General audience
  - Customers"

User: "Technical team"

Claude: "What's the goal?
  - Inform - Share findings
  - Persuade - Recommend one model
  - Demo - Show capabilities
  - Report - Present data"

User: "Inform"

Claude: "Describe the vibe in a few words (e.g., tech, modern, professional)"

User: "tech, modern, dark, sleek"

Claude: [Runs ui-ux-pro-max: python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "AI benchmark tech modern dark presentation" --design-system]

Claude: "Based on design analysis, here are 5 style options:

1. **Dark Sapphire Blue** (glass) - Recommended
   Dark tech with blue accents, gradient glows
   Typography: Sora + Source Sans 3
   Best for: Tech products, developer tools

2. **Electric City Nights** (glass)
   Urban dark with vibrant blue highlights
   Typography: DM Sans + Work Sans
   Best for: Modern SaaS, tech startups

3. **Purple Dark Black Blue** (glass)
   Deep purple-blue, cyberpunk undertones
   Typography: Outfit + Nunito Sans
   Best for: AI/ML, futuristic topics

4. **Hacker News** (glass)
   Dark with orange accents, geek aesthetic
   Typography: Sora + Source Sans 3
   Best for: Developer content, technical demos

5. **Space** (glass)
   Deep space theme with gold accents
   Typography: Manrope + Source Sans 3
   Best for: Innovation, visionary topics

Which style? (1-5)"

User: "1"

Claude: "Selected: Dark Sapphire Blue (glass) with Sora + Source Sans 3"

Claude: "What are 3-5 key points to cover?"

User: "Coding ability, reasoning, context window, speed"

Claude: "This topic would benefit from current benchmark data.
Would you like me to research:
  [ ] Current benchmark statistics
  [ ] Model comparison data
  [ ] Skip research"

User: "Yes, research current benchmarks"

Claude: [Conducts web search for current AI benchmarks]
Claude: "I found the following data:
- Claude scores 92% on HumanEval (coding)
- GPT-4 scores 87% on HumanEval
- Claude has 200K context, GPT-4 has 128K
[Sources: official docs, research papers]

Does this look accurate?"

User: "Yes, use that"

Claude: [Creates ./claude-benchmark/ folder structure]
Claude: [Saves research to ./claude-benchmark/researches/2026-01-29-benchmark-data.md]
Claude: [Creates ./claude-benchmark/context.md with verified data]
Claude: [Creates ./claude-benchmark/slides.md]
Claude: "Here's the outline:

## Presentation Outline

**Title**: Claude vs GPT Coding Benchmark
**Theme**: dark-sapphire-blue (glass)

**Slides**:
1. Hero - Title and model overview
2. Framework - Evaluation methodology
3. Task 1 - API development
4. Task 2 - React components
5. Task 3 - CLI tools
6. Summary - Results and recommendations

Confirm to generate?"

User: "OK"

Claude: [Creates source/ from template]
Claude: [Generates 6 slide JSX files]
Claude: [Updates App.jsx with imports]
Claude: [Starts dev server: npm run dev]
Claude: [Opens browser: agent-browser open http://localhost:5173]
Claude: [Verifies each slide, takes screenshots]
Claude: "Verification complete. All slides look good:
- Layout: ✓ No overflow issues
- Navigation: ✓ Arrow keys work
- Animations: ✓ Smooth transitions

Building standalone export..."

Claude: [Runs npm run build:standalone]
Claude: [Copies to slide.html]
Claude: [Final verification of slide.html]
Claude: [Closes browser]
Claude: "Presentation complete!

Files created:
- ./claude-benchmark/context.md
- ./claude-benchmark/researches/2026-01-29-benchmark-data.md
- ./claude-benchmark/slides.md
- ./claude-benchmark/source/ (React project)
- ./claude-benchmark/verify/ (verification screenshots)
- ./claude-benchmark/slide.html ← Open this in browser

Open slide.html to view your presentation."

参考文档

参考资料	说明
context-guide.md	用于收集需求的渐进式披露提问流程
research-templates.md	统计数据、比较和趋势研究的模板
slides-design.md	设计系统模式、幻灯片类型、布局和动画
browser-verification.md	使用 agent-browser 进行浏览器测试
aesthetics.md	设计理念和视觉指南
principles.md	技术布局和组件规则
palettes.md	76 种配色主题及使用指南

外部技能集成

技能	用途
vercel-react-best-practices	React 代码生成最佳实践（幻灯片 JSX 必须使用）
ui-ux-pro-max	设计系统生成、字体排印和配色方案
agent-browser	导出前进行浏览器验证
ai-multimodal	自定义图片／图表生成