用途
Slide Deck 用于构建浏览器端的演示幻灯片，适用于创建培训演示、带 React+Vite 的动画幻灯片，或制作基于网页的演示文稿。其技术定位是一个 React 18 + TypeScript + Vite 应用，目标是让幻灯片呈现出精心手工设计、风格一致的效果，而不是通用或明显由 AI 生成的观感。
技术栈
- 构建：Vite
- 框架：React 18+ 与 TypeScript
- 动画：Framer Motion (motion/react)
- 样式：Tailwind CSS v4
- 图表：Recharts
- 图标：Lucide React
- 路由：键盘/点击导航，无需路由库
- 代码高亮（仅在需要时）：Prism React Renderer
安装命令：
npm create vite@latest . -- --template react-ts
npm install
npm run dev
项目结构
slides/
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── public/
│ └── images/ # All slide images go here
├── src/
│ ├── main.tsx
│ ├── App.tsx # Slide deck shell, navigation, keyboard controls
│ ├── index.css # Tailwind imports + custom fonts + base styles
│ ├── slides/
│ │ ├── index.ts # Export ordered array of all slides
│ │ ├── 01-intro.tsx
│ │ ├── 02-problem.tsx
│ │ └── ... # One file per slide or small group of related slides
│ ├── components/
│ │ ├── SlideLayout.tsx # Shared slide wrapper (scaling, padding, background)
│ │ ├── AnimatedText.tsx # Reusable text entrance animations
│ │ ├── Chart.tsx # Recharts wrapper
│ │ ├── ImageSlide.tsx # Image display component
│ │ ├── InteractiveBlock.tsx # For custom interactive UI per slide
│ │ └── ...
│ └── lib/
│ ├── animations.ts # Shared Framer Motion variants and transitions
│ ├── theme.ts # Color palette, font sizes, spacing tokens
│ └── useSlideScale.ts # Hook for viewport-fitting scale
使用方式
1. 内容确认（强制）
在开始编写任何幻灯片代码之前，如果没有提供演示内容/主题，必须向用户询问。不得自行编造内容。可以先搭建应用外壳和样式系统，但所有实际幻灯片内容必须来自用户或本目录中的 slide-guidelines.md。
2. 风格发现
先询问用户希望观众产生何种感受（印象深刻的自信、兴奋有活力、平静专注、受启发感动）。再根据情绪从预设中选择 2-3 个推荐，每个预设定义字体、颜色和标志性视觉元素，不得随机混合，须完整贯彻一个预设。
深色预设包括：Bold Signal、Electric Studio、Creative Voltage、Dark Botanical。 浅色预设包括：Notebook Tabs、Pastel Geometry、Vintage Editorial、Swiss Modern。 特色预设包括：Neon Cyber、Terminal Green、Paper & Ink。
3. 设计规则
- 字体不超过 2 个家族，标题大而粗，正文稀少，正文段落绝不居中。
- 所有字号必须使用 clamp(min, preferred, max)。
- 颜色须完整贯彻预设调色板，使用层叠渐变营造氛围而非纯色。
- 幻灯片为固定 1280×720 容器，通过 CSS transform: scale() 缩放适配视口。
- 最多 60% 面积承载内容，其余为有意留白。
- 不得将文字内容包裹在背景卡片中，不得嵌套背景。
- 禁止使用的 AI 套路：Inter、Roboto、Arial 等字体作为展示字体，#6366f1 通用靛蓝、白底紫色渐变、均匀分布的“安全”配色、所有元素居中堆叠的布局、装饰性色块/波浪/网格渐变等。
4. 内容密度上限（不可协商）
- 标题幻灯片：1 标题 + 1 副标题 + 可选标语
- 内容幻灯片：1 标题 + 4-6 个要点，或 1 标题 + 2 个短段落
- 功能网格：1 标题 + 最多 6 张卡片
- 图表幻灯片：1 标题 + 1 图表
- 引用幻灯片：1 条引用（最多 3 行）+ 出处
- 图片幻灯片：1 标题 + 1 图片（最高占幻灯片高度 60%）
- 交互幻灯片：1 标题 + 交互元素
内容溢出必须拆分为多张幻灯片，绝不堆砌或滚动。
5. 动画
动画须与情绪匹配，默认时长 0.4–0.6 秒，避免超过 0.8 秒（电影感除外），默认缓动 [0.25, 0.1, 0.25, 1]，子元素错开 0.08–0.12 秒。幻灯片切换使用 AnimatePresence mode="wait"，进入为淡入 + 轻微位移，退出快速淡出 0.2 秒。不使用 3D 变换、旋转或缩放弹跳。必须支持 prefers-reduced-motion。
6. 幻灯片类型
包括标题、内容（文字）、图片、图表、对比、引用/标注、交互等类型。图片放置于 public/images/，引用路径为 /images/filename.ext。图表使用 Recharts 并按主题定制颜色。交互元素需添加 data-interactive 属性以防误触翻页。
7. 导航与控件
键盘：右箭头/空格/回车下一页，左箭头上一页。点击/触摸：右半区下一页，左半区上一页（跳过 data-interactive、button、input 元素）。底部细进度条，右下角幻灯片计数“3 / 28”。支持幻灯片内分步导航。Escape 键切换概览模式（可选）。
8. 内容指南
遵循 slide-guidelines.md 中的教学结构：问题 → 讨论 → 概念 → 示例 → 要点循环。一页一个想法，视觉优先，文字精简，标题 6–8 词，复杂信息渐进揭示，60-70% 视觉幻灯片、10-15% 图表/示意图、15-20% 文字解释。
9. 质量检查清单
交付前须验证：npm run dev 无错误启动、TypeScript 干净编译（npx tsc --noEmit）、npx vite build 成功、动画 60fps 流畅、幻灯片适配 1280×720 无溢出无滚动、内容密度符合上限、无“Lorem ipsum”等占位文本、配色一致、字体正确加载、引用的图片存在于 public/images/、交互元素有悬停/聚焦状态、导航同步、文字未包裹在背景卡片中。
适用场景
适用于浏览器演示文稿、培训演示、需要动画的 React+Vite 幻灯片。
限制
必须在开始前向用户索要实际内容与主题，不得编造。具体的收费、价格、平台支持范围等信息暂未提供。