Back to Details

slide-deck

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Slide Deck Builder — Technical Instructions

幻灯片构建器——技术说明

You are building a browser-based presentation slide deck as a React + Vite app. Your job is to produce slides that feel handcrafted and intentional — never generic or AI-generated looking.
Before you begin coding any slides, you MUST ask the user for the presentation content/topic if it has not been provided. Do not invent content. You may scaffold the app shell and styling system first, but all actual slide content must come from the user or from 
slide-guidelines.md
in this directory.
你将以React + Vite应用的形式构建基于浏览器的演示幻灯片。你的任务是制作出看起来像是手工精心设计的幻灯片——绝对不能有通用或AI生成的廉价感。
在开始编写任何幻灯片代码之前，如果用户尚未提供演示内容/主题，你必须先向用户询问。 不要自行编造内容。你可以先搭建应用框架和样式系统，但所有实际的幻灯片内容必须来自用户或此目录下的
slide-guidelines.md
文件。

1. Tech Stack

1. 技术栈

LayerChoice
BuildVite
FrameworkReact 18+ with TypeScript
AnimationFramer Motion (motion/react)
StylingTailwind CSS v4
ChartsRecharts
IconsLucide React
RoutingKeyboard/click navigation (no router needed)
Code highlighting(only if needed) Prism React Renderer
Install only what you need. Do not add libraries speculatively.
层级选择
构建工具Vite
框架React 18+ 搭配 TypeScript
动画Framer Motion (motion/react)
样式Tailwind CSS v4
图表Recharts
图标Lucide React
路由键盘/点击导航（无需路由器）
代码高亮（仅在需要时使用）Prism React Renderer
仅安装所需的依赖，不要随意添加库。

2. Project Structure

2. 项目结构

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
slides/
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── public/
│   └── images/          # 所有幻灯片图片存放于此
├── src/
│   ├── main.tsx
│   ├── App.tsx          # 幻灯片框架、导航、键盘控制
│   ├── index.css        # Tailwind 导入 + 自定义字体 + 基础样式
│   ├── slides/
│   │   ├── index.ts     # 导出所有幻灯片的有序数组
│   │   ├── 01-intro.tsx
│   │   ├── 02-problem.tsx
│   │   └── ...          # 每个幻灯片或相关小分组对应一个文件
│   ├── components/
│   │   ├── SlideLayout.tsx      # 共享幻灯片包装器（缩放、内边距、背景）
│   │   ├── AnimatedText.tsx     # 可复用的文本入场动画
│   │   ├── Chart.tsx            # Recharts 包装器
│   │   ├── ImageSlide.tsx       # 图片展示组件
│   │   ├── InteractiveBlock.tsx # 用于单张幻灯片的自定义交互UI
│   │   └── ...
│   └── lib/
│       ├── animations.ts    # 共享的 Framer Motion 变体和过渡效果
│       ├── theme.ts         # 调色板、字体大小、间距令牌
│       └── useSlideScale.ts # 适配视口缩放的 Hook

3. Style Discovery — Mood & Presets

3. 风格探索——氛围与预设

Step 1: Ask the User for Mood

步骤1：询问用户期望的氛围

Before choosing colors and fonts, ask the user what feeling the audience should have:
MoodDescription
Impressed / ConfidentProfessional, trustworthy, bold
Excited / EnergizedInnovative, bold, creative
Calm / FocusedClear, thoughtful, minimal
Inspired / MovedEmotional, memorable, elegant
在选择颜色和字体之前，询问用户希望给观众带来什么样的感受：
氛围描述
印象深刻 / 自信专业、可靠、大胆
兴奋 / 充满活力创新、大胆、有创意
平静 / 专注清晰、深思熟虑、极简
受启发 / 被打动富有情感、令人难忘、优雅

Step 2: Pick a Style Preset

步骤2：选择风格预设

Based on mood, suggest 2-3 presets from the table below. Each preset defines fonts, colors, and signature visual elements. Do NOT mix and match randomly — commit to one preset fully.
根据氛围，从下表中推荐2-3个预设。每个预设定义了字体、颜色和标志性视觉元素。不要随意混搭——完全遵循一个预设。

Dark Presets

深色预设

PresetMoodDisplay FontBody FontColorsSignature
Bold SignalConfidentArchivo Black (900)Space Grotesk (400)
#1a1a1a
bg, 
#FF5722
accent card, white text		Colored card as focal, large section numbers, grid layout
Electric StudioConfidentManrope (800)Manrope (400)
#0a0a0a
bg, 
#4361ee
accent blue, white text		Two-panel vertical split, accent bar on edge
Creative VoltageEnergizedSyne (700)Space Mono (400)
#0066ff
primary, 
#1a1a2e
dark, 
#d4ff00
neon		Electric blue + neon yellow, halftone textures
Dark BotanicalInspiredCormorant (400) serifIBM Plex Sans (300)
#0f0f0f
bg, 
#d4a574
warm accent, 
#e8b4b8
pink		Abstract blurred gradient circles, thin accent lines
预设氛围标题字体正文字体颜色标志性元素
Bold Signal自信Archivo Black (900)Space Grotesk (400)
#1a1a1a
背景，
#FF5722
强调卡片，白色文本		彩色卡片作为焦点，大尺寸章节编号，网格布局
Electric Studio自信Manrope (800)Manrope (400)
#0a0a0a
背景，
#4361ee
蓝色强调，白色文本		垂直双面板布局，边缘强调条
Creative Voltage充满活力Syne (700)Space Mono (400)
#0066ff
主色，
#1a1a2e
深色，
#d4ff00
霓虹色		电光蓝+霓虹黄，半色调纹理
Dark Botanical受启发Cormorant (400) 衬线字体IBM Plex Sans (300)
#0f0f0f
背景，
#d4a574
暖色调强调，
#e8b4b8
粉色		抽象模糊渐变圆形，细强调线

Light Presets

浅色预设

PresetMoodDisplay FontBody FontColorsSignature
Notebook TabsOrganizedBodoni Moda (700) serifDM Sans (400)
#f8f6f1
page, 
#2d2d2d
outer, colorful tabs		Paper card on dark bg, colored section tabs
Pastel GeometryFriendlyPlus Jakarta Sans (700)Plus Jakarta Sans (400)
#c8d9e6
bg, 
#faf9f7
card, pastel pills		Rounded card, vertical pills, soft shadow
Vintage EditorialInspiredFraunces (700) serifWork Sans (400)
#f5f3ee
cream, 
#1a1a1a
text, 
#e8d4c0
warm		Geometric shapes (circle + line + dot), bold borders
Swiss ModernFocusedArchivo (800)Nunito (400)Pure white, pure black, 
#ff3300
red accent		Visible grid, asymmetric layouts, geometric shapes
预设氛围标题字体正文字体颜色标志性元素
Notebook Tabs有条理Bodoni Moda (700) 衬线字体DM Sans (400)
#f8f6f1
页面色，
#2d2d2d
外部色，彩色标签		深色背景上的纸质卡片，彩色章节标签
Pastel Geometry友好Plus Jakarta Sans (700)Plus Jakarta Sans (400)
#c8d9e6
背景，
#faf9f7
卡片，柔和色块		圆角卡片，垂直色块，柔和阴影
Vintage Editorial受启发Fraunces (700) 衬线字体Work Sans (400)
#f5f3ee
米白色，
#1a1a1a
文本，
#e8d4c0
暖色调		几何形状（圆形+线条+点），粗边框
Swiss Modern专注Archivo (800)Nunito (400)纯白、纯黑，
#ff3300
红色强调		可见网格，不对称布局，几何形状

Specialty Presets

特殊预设

PresetMoodFontColorsSignature
Neon CyberTechyClash Display + Satoshi
#0a0f1c
navy, 
#00ffcc
cyan, 
#ff00aa
magenta		Neon glow, grid patterns, particle-like effects
Terminal GreenHackerJetBrains Mono
#0d1117
dark, 
#39d353
green		Scan lines, blinking cursor, code aesthetic
Paper & InkEditorialCormorant Garamond + Source Serif 4
#faf9f7
cream, 
#1a1a1a
charcoal, 
#c41e3a
crimson		Drop caps, pull quotes, elegant horizontal rules
预设氛围字体颜色标志性元素
Neon Cyber科技感Clash Display + Satoshi
#0a0f1c
藏青，
#00ffcc
青色，
#ff00aa
品红		霓虹发光效果，网格图案，粒子状效果
Terminal Green极客风JetBrains Mono
#0d1117
深色，
#39d353
绿色		扫描线，闪烁光标，代码美学
Paper & Ink编辑风Cormorant Garamond + Source Serif 4
#faf9f7
米白，
#1a1a1a
炭黑，
#c41e3a
深红		首字下沉，引语，优雅的水平分隔线

Step 3: Apply the Preset

步骤3：应用预设

Once chosen, define the full theme in 
src/lib/theme.ts
and as CSS custom properties in 
src/index.css
:
  • All colors from the preset
  • Font families loaded from Google Fonts or Fontshare
  • CSS variables for backgrounds, accents, text colors
  • Use the preset's signature elements in at least the title slide and section transitions
一旦选定预设，在
src/lib/theme.ts
中定义完整主题，并在
src/index.css
中作为CSS自定义属性：
  • 预设中的所有颜色
  • 从Google Fonts或Fontshare加载的字体族
  • 背景、强调色、文本颜色的CSS变量
  • 在标题幻灯片和章节过渡中至少使用预设的标志性元素

4. Design System — Anti AI-Slop Rules

4. 设计系统——反AI廉价感规则

Typography

排版

  • Use the font pairing from your chosen preset. Load from Google Fonts or Fontshare via 
    @import
    in CSS.
  • No more than 2 font families.
  • Headlines: large and bold. Body text: scarce.
  • Never center-align body paragraphs. Left-align or use deliberate layout.
  • ALL font sizes must use 
    clamp(min, preferred, max)
     — never fixed px/rem for text. This ensures readability across viewport sizes.
css
/* Example clamp values */
--title-size: clamp(2rem, 6vw, 5rem);
--subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
--body-size: clamp(0.75rem, 1.2vw, 1rem);
  • 使用所选预设的字体配对。通过CSS中的
    @import
    从Google Fonts或Fontshare加载。
  • 字体族不超过2种。
  • 标题：大字号、粗体。正文：精简。
  • 绝对不要居中对齐正文段落。左对齐或使用精心设计的布局。
  • 所有字体大小必须使用
    clamp(min, preferred, max)
    ——文本绝对不要使用固定的px/rem单位。这确保在不同视口尺寸下都能清晰可读。
css
/* 示例clamp值 */
--title-size: clamp(2rem, 6vw, 5rem);
--subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
--body-size: clamp(0.75rem, 1.2vw, 1rem);

Color & Backgrounds

颜色与背景

  • Commit fully to your preset's palette. Define as CSS custom properties.
  • Create atmosphere, not flat colors. Layer CSS gradients for depth instead of a single solid background color:
css
/* Layered gradient for depth */
background:
  radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
  var(--bg-primary);

/* Subtle grid pattern for structure */
background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
  • Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • 完全遵循预设的调色板。定义为CSS自定义属性。
  • 营造氛围，而非平淡的颜色。使用CSS渐变分层来增加深度，而不是单一的纯色背景：
css
/* 分层渐变增加深度 */
background:
  radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
  var(--bg-primary);

/* 微妙的网格图案增加结构感 */
background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
  • 主色调搭配鲜明的强调色比平淡、均匀分布的调色板效果更好。

Layout — Scaled Slide Container

布局——缩放的幻灯片容器

  • The slide is a fixed 1280×720px container scaled via CSS 
    transform: scale()
    to fit the viewport (like reveal.js). All content is authored at 1280×720 and uniformly scaled.
  • Because of transform scaling, Tailwind's rem-based spacing appears smaller on screen. For any element that needs visible padding (cards, chips, buttons with backgrounds), use inline 
    style={{}}
    with px values     instead of Tailwind padding classes.
  • Minimum padding for elements with a background: 
    style={{ padding: '20px 48px' }}
    for horizontal chips, 
    style={{ padding: '24px 32px' }}
    for content cards, 
    style={{ padding: '16px 32px' }}
    for buttons.
  • Generous whitespace. Content should breathe.
  • Max 60% of the slide area should contain content. The rest is intentional empty space.
  • Use CSS Grid or Flexbox. Avoid absolute positioning unless for decorative elements.
  • The 
    SlideLayout
    component handles the scaling + centering.
  • 幻灯片是一个固定1280×720px的容器，通过CSS 
    transform: scale()
    缩放以适配视口（类似reveal.js）。所有内容都以1280×720为基准创作，然后统一缩放。
  • 由于使用了transform缩放，Tailwind基于rem的间距在屏幕上会显得更小。对于任何需要可见内边距的元素（卡片、色块、带背景的按钮），使用内联
    style={{}}
    并设置px值    ，而不是Tailwind的内边距类。
  • 带背景元素的最小内边距：水平色块使用
    style={{ padding: '20px 48px' }}
    ，内容卡片使用
    style={{ padding: '24px 32px' }}
    ，按钮使用
    style={{ padding: '16px 32px' }}
    。
  • 充足的留白。内容需要呼吸空间。
  • 幻灯片区域最多60%用于放置内容。其余部分是刻意留出的空白。
  • 使用CSS Grid或Flexbox。除非是装饰元素，否则避免绝对定位。
  • SlideLayout
    组件负责处理缩放和居中。

Content Density Limits (NON-NEGOTIABLE)

内容密度限制（必须遵守）

Every slide MUST fit within the 1280×720 container. Content overflows? Split into multiple slides. Never cram, never scroll.
Slide TypeMaximum Content
Title slide1 heading + 1 subtitle + optional tagline
Content slide1 heading + 4-6 bullet points OR 1 heading + 2 short paragraphs
Feature grid1 heading + 6 cards maximum (2×3 or 3×2)
Chart slide1 heading + 1 chart
Quote slide1 quote (max 3 lines) + attribution
Image slide1 heading + 1 image (max 60% slide height)
Interactive slide1 heading + interactive element (keep controls minimal)
每张幻灯片必须适配1280×720的容器。内容溢出？拆分成多张幻灯片。绝对不要拥挤，不要滚动。
幻灯片类型最大内容量
标题幻灯片1个标题 + 1个副标题 + 可选标语
内容幻灯片1个标题 + 4-6个项目符号 或 1个标题 + 2段短文本
功能网格幻灯片1个标题 + 最多6个卡片（2×3或3×2布局）
图表幻灯片1个标题 + 1个图表
引语幻灯片1条引语（最多3行） + 署名
图片幻灯片1个标题 + 1张图片（最大占幻灯片高度的60%）
交互幻灯片1个标题 + 交互元素（控制项尽量精简）

Visual Rules — Backgrounds & Borders

视觉规则——背景与边框

  • Do NOT wrap text content in background cards. Let text sit directly on the slide background. Use spacing and typography for hierarchy, not boxes.
  • No nested backgrounds. Never put one colored box inside another.
  • When an element MUST have a background (interactive buttons, chips, tags): use 
    bg-white/5
    with 
    border border-white/10
    — never solid surface colors.
  • Borders must be subtle. Use 
    border-l border-muted/20
    for left accents, never 
    border-l-2
    . Use 
    border border-white/10
    for containers.
  • No drop shadows unless it's a hard shadow (offset, no blur) as a specific design choice.
  • No rounded-full badges with gradient backgrounds.
  • No decorative blobs, waves, or mesh gradients.
  • Geometric accents are OK: lines, dots, simple shapes.
  • 不要将文本内容包裹在背景卡片中。让文本直接放在幻灯片背景上。使用间距和排版来体现层级，而不是盒子。
  • 不要嵌套背景。绝对不要在一个彩色盒子里再放另一个彩色盒子。
  • 当元素必须有背景时（交互按钮、色块、标签）：使用
    bg-white/5
    搭配
    border border-white/10
    ——绝对不要使用纯色背景。
  • 边框必须微妙。使用
    border-l border-muted/20
    作为左侧强调线，绝对不要使用
    border-l-2
    。容器使用
    border border-white/10
    。
  • 除非是特定设计选择的硬阴影（有偏移、无模糊），否则不要使用投影。
  • 不要使用带渐变背景的全圆角徽章。
  • 不要使用装饰性的 blob、波浪或网格渐变。
  • 几何强调元素是允许的：线条、点、简单形状。

DO NOT USE — Banned AI Patterns

禁止使用——AI常见烂俗模式

CategoryBanned
FontsInter, Roboto, Arial, system fonts as display. Also avoid converging on Space Grotesk for every deck — vary your choices.
Colors
#6366f1
(generic indigo), purple-on-white gradients, pastel rainbow, evenly-distributed "safe" palettes
LayoutsEverything centered in a vertical stack, identical card grids, generic hero sections
DecorationsRealistic illustrations, gratuitous glassmorphism, drop shadows without purpose, gradient mesh backgrounds
类别禁止内容
字体Inter、Roboto、Arial、系统字体作为标题字体。还要避免所有幻灯片都使用Space Grotesk——要多样化选择。
颜色
#6366f1
（通用靛蓝）、白紫渐变、柔和彩虹色、均匀分布的“安全”调色板
布局所有内容垂直居中堆叠、相同的卡片网格、通用的 hero 区域
装饰写实插图、无意义的毛玻璃效果、无目的的投影、网格渐变背景

What Makes It NOT Feel AI-Slop

如何避免AI廉价感

  • Asymmetric layouts (not everything centered in a stack)
  • Oversized typography for emphasis
  • Deliberate use of negative space
  • Content that has opinion and edge, not generic filler
  • Consistent but not monotonous — vary slide layouts across the deck
  • Real images and data, not placeholder illustrations
  • Surprise the viewer — make at least 1-2 unexpected layout choices per deck
  • 不对称布局（不要所有内容都垂直居中堆叠）
  • 超大号排版以强调重点
  • 刻意使用负空间
  • 有观点和棱角的内容，而非通用填充内容
  • 一致但不单调——整个幻灯片的布局要多样化
  • 真实的图片和数据，而非占位插图
  • 给观众惊喜——每套幻灯片至少要有1-2个出乎意料的布局选择

5. Animation — Feeling-Driven Motion

5. 动画——基于感受的动效

Match Animation to Mood

动画风格匹配氛围

FeelingAnimation StyleVisual Cues
Dramatic / CinematicSlow fade-ins (0.8-1.2s), large scale transitions (0.9→1)Dark backgrounds, spotlight effects
Techy / FuturisticNeon glow, text scramble/reveal effectsGrid patterns, monospace accents, cyan/magenta
Playful / FriendlyBouncy easing (gentle spring), floating motionRounded corners, bright colors
ProfessionalSubtle fast animations (200-300ms), clean slidesPrecise spacing, data visualization focus
Calm / MinimalVery slow subtle motion, gentle fadesHigh whitespace, muted palette, serif type
EditorialStaggered text reveals, image-text interplayStrong type hierarchy, pull quotes, grid-breaking
感受动画风格视觉线索
戏剧性 / 电影感缓慢淡入（0.8-1.2秒）、大尺度过渡（0.9→1）深色背景、聚光灯效果
科技感 / 未来感霓虹发光、文本打乱/揭示效果网格图案等宽字体、青色/品红色
活泼 / 友好弹性缓动（柔和弹簧效果）、浮动动效圆角、明亮颜色
专业微妙的快速动画（200-300毫秒）、简洁幻灯片精确间距、数据可视化重点
平静 / 极简非常缓慢的微妙动效、柔和淡入大量留白、柔和调色板、衬线字体
编辑风文本 stagger 揭示、图文互动强烈的排版层级、引语、打破网格布局

Framer Motion Defaults

Framer Motion 默认设置

  • Default duration: 0.4–0.6s. Avoid animations longer than 0.8s (unless cinematic mood).
  • Default easing: 
    [0.25, 0.1, 0.25, 1]
     (smooth deceleration, equivalent to 
    ease-out-expo
    )
  • Stagger children by 0.08–0.12s, not more
  • 默认时长：0.4–0.6秒。避免动画时长超过0.8秒（除非是电影感氛围）。
  • 默认缓动：
    [0.25, 0.1, 0.25, 1]
    （平滑减速，等效于
    ease-out-expo
    ）
  • 子元素 stagger 间隔为0.08–0.12秒，不要更长

Slide Transitions

幻灯片过渡

  • Use 
    AnimatePresence
    with 
    mode="wait"
    for slide changes
  • Slide enter: fade in + subtle translateY (20px) or translateX (30px)
  • Slide exit: fade out quickly (0.2s)
  • Do not use 3D transforms, rotations, or scale bounces for slide transitions
  • 使用
    AnimatePresence
    并设置
    mode="wait"
    来处理幻灯片切换
  • 幻灯片入场：淡入 + 微妙的 translateY（20px）或 translateX（30px）
  • 幻灯片退场：快速淡出（0.2秒）
  • 幻灯片过渡不要使用3D变换、旋转或缩放弹跳效果

Content Animations (within a slide)

内容动画（单张幻灯片内）

  • Headline: fade in + translateY, arrives first
  • Supporting content: staggered fade in after headline
  • Charts/images: fade in + subtle scale from 0.95 to 1
  • Use 
    variants
    pattern for orchestrated animations:
tsx
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
};
  • 标题：淡入 + translateY，最先出现
  • 辅助内容：在标题之后 stagger 淡入
  • 图表/图片：淡入 + 从0.95到1的微妙缩放
  • 使用
    variants
    模式来编排动画：
tsx
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
};

Progressive Reveal

渐进式揭示

  • Some slides should reveal content in steps (click to advance within a slide)
  • Track a 
    step
    state per slide when needed
  • Animate items in/out based on current step
  • Show a subtle progress indicator (dots or a thin bar) when a slide has multiple steps
  • 有些幻灯片应该分步骤揭示内容（点击在单张幻灯片内推进）
  • 必要时为每张幻灯片跟踪
    step
    状态
  • 根据当前步骤动画显示/隐藏项目
  • 当幻灯片有多个步骤时，显示微妙的进度指示器（圆点或细条）

What NOT to Do

禁止操作

  • No 
    spring
    with high bounce (underdamped springs look toyish)
  • No 
    rotate
    animations on text
  • No continuous looping animations (except very subtle pulsing on interactive elements)
  • No parallax scrolling within slides
  • No animation on every single element — some things should just be there
  • One well-orchestrated entrance per slide beats scattered micro-interactions
  • 不要使用高弹跳的
    spring
    （欠阻尼弹簧看起来像玩具）
  • 不要对文本使用
    rotate
    动画
  • 不要使用持续循环的动画（除了交互元素上非常微妙的脉动效果）
  • 不要在幻灯片内使用视差滚动
  • 不要给每个元素都添加动画——有些元素应该直接显示
  • 一次精心编排的入场动画胜过零散的微交互

prefers-reduced-motion
Support

prefers-reduced-motion
支持

Always include reduced-motion support. Wrap animation variants:
tsx
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const item = prefersReducedMotion
  ? { hidden: { opacity: 0 }, show: { opacity: 1 } }
  : { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } } };
始终包含减少动效的支持。包裹动画变体：
tsx
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const item = prefersReducedMotion
  ? { hidden: { opacity: 0 }, show: { opacity: 1 } }
  : { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } } };

6. Slide Types & Components

6. 幻灯片类型与组件

Title Slide

标题幻灯片

  • Oversized headline using 
    clamp(2.5rem, 6vw, 5rem)
  • Optional subtitle
  • Optional date or presenter name
  • Minimal, dramatic layout
  • Use preset's signature element (colored card, split panel, geometric shape, etc.)
  • 使用
    clamp(2.5rem, 6vw, 5rem)
    设置超大号标题
  • 可选副标题
  • 可选日期或演讲者姓名
  • 极简、戏剧性的布局
  • 使用预设的标志性元素（彩色卡片、分栏面板、几何形状等）

Content Slide (Text)

内容幻灯片（文本）

  • Headline + 2–5 short bullet points or a short paragraph
  • Bullets should animate in with stagger
  • Left-aligned text, right side can have supporting visual
  • Max 4-6 bullets. Exceeds? Split into two slides.
  • 标题 + 2–5个短项目符号或一段短文本
  • 项目符号 stagger 入场动画
  • 文本左对齐，右侧可放置辅助视觉元素
  • 最多4-6个项目符号。超过则拆分成两张幻灯片。

Image Slide

图片幻灯片

  • Full-bleed or large contained image
  • Images are placed in 
    public/images/
    by the user
  • Reference as 
    /images/filename.ext
  • Image max-height: 60% of slide height (432px at 720px)
  • Support caption text below or overlaid with semi-transparent background
  • Lazy load images
  • 全屏或大尺寸包含式图片
  • 用户将图片放置在
    public/images/
    中
  • 引用路径为
    /images/filename.ext
  • 图片最大高度：幻灯片高度的60%（720px时为432px）
  • 支持图片下方或半透明背景上的说明文字
  • 图片懒加载

Chart Slide

图表幻灯片

  • Use Recharts (BarChart, LineChart, PieChart, AreaChart)
  • Style charts to match the deck theme — custom colors from preset, no default Recharts styling
  • Animate chart entrance with Framer Motion wrapper
  • Include clear labels and a headline
  • 使用Recharts（BarChart、LineChart、PieChart、AreaChart）
  • 调整图表样式以匹配幻灯片主题——使用预设的自定义颜色，不要使用Recharts默认样式
  • 用Framer Motion包装器实现图表入场动画
  • 包含清晰的标签和标题

Comparison Slide

对比幻灯片

  • Side-by-side or before/after layout
  • Use a clear visual separator (accent line, not a heavy border)
  • Animate left then right panel
  • 并排或前后对比布局
  • 使用清晰的视觉分隔线（强调线，不要粗边框）
  • 先左面板后右面板的入场动画

Quote / Callout Slide

引语 / 提示幻灯片

  • Large text using 
    clamp(1.5rem, 3vw, 2.5rem)
    , centered or left-aligned
  • Accent color or background
  • Attribution below in smaller text
  • Max 3 lines for the quote.
  • 使用
    clamp(1.5rem, 3vw, 2.5rem)
    设置大字号文本，居中或左对齐
  • 强调色或背景
  • 下方用小字号文本署名
  • 引语最多3行

Interactive Slide

交互幻灯片

  • For slides that need custom UI (polls, toggles, demos, games)
  • Build as self-contained components with local state
  • Add 
    data-interactive
    attribute to prevent accidental slide navigation on click
  • Add clear visual affordance that something is interactive (hover states, cursor)
  • 用于需要自定义UI的幻灯片（投票、切换、演示、游戏）
  • 构建为带本地状态的独立组件
  • 添加
    data-interactive
    属性以防止点击时意外切换幻灯片
  • 添加清晰的视觉提示表明元素可交互（悬停状态、光标变化）

Link References

链接引用

  • External URLs: render as styled links that open in new tab (
    target="_blank"
    )
  • Local folder links: render as 
    file:///
    protocol links with a folder icon
  • Style links distinctly — underline + accent color, not default blue
  • 外部URL：渲染为在新标签页打开的样式化链接（
    target="_blank"
    ）
  • 本地文件夹链接：渲染为
    file:///
    协议链接并搭配文件夹图标
  • 链接样式要与众不同——下划线+强调色，不要默认蓝色

7. Navigation & Controls

7. 导航与控制

  • Keyboard: Right arrow / Space / Enter = next, Left arrow = previous
  • Click/Tap: Click right half = next, click left half = previous (skip elements with 
    data-interactive
    , 
    button
    , 
    input
    )
  • Progress bar: Thin bar at bottom showing position in deck
  • Slide counter: Small "3 / 28" indicator in bottom-right corner
  • Support 
    step
    sub-navigation within slides before advancing to next slide
  • Escape key: Toggle overview mode (grid of slide thumbnails) — nice to have, not required for v1
  • 键盘：右箭头 / 空格 / 回车 = 下一页，左箭头 = 上一页
  • 点击/触摸：点击右半部分 = 下一页，点击左半部分 = 上一页（跳过带有
    data-interactive
    、
    button
    、
    input
    的元素）
  • 进度条：底部的细条显示在幻灯片中的位置
  • 幻灯片计数器：右下角显示小的“3 / 28”指示器
  • 支持在单张幻灯片内通过
    step
    子导航，然后再切换到下一张幻灯片
  • ESC键：切换概览模式（幻灯片缩略图网格）——v1版本可选，非必须

8. Content Guidelines

8. 内容指南

Refer to 
slide-guidelines.md
in this directory for the pedagogical structure:
  • Problem → Discussion → Concept → Example → Takeaway cycle
  • One idea per slide
  • Visual-first, minimal text
  • Short headlines (6–8 words)
  • Progressive reveal for complex information
  • 60-70% visual slides, 10-15% charts/diagrams, 15-20% text explanation
You MUST ask the user for the actual content/topic before creating slides. The content guidelines above describe structure, not what goes in the slides.
参考此目录下的
slide-guidelines.md
了解教学结构：
  • 问题 → 讨论 → 概念 → 示例 → 总结 循环
  • 每张幻灯片一个核心观点
  • 视觉优先，文本极简
  • 短标题（6-8个单词）
  • 复杂信息渐进式揭示
  • 60-70% 视觉幻灯片，10-15% 图表/图表，15-20% 文字说明
在创建幻灯片之前，你必须向用户询问实际内容/主题。 上述内容指南描述的是结构，而非具体内容。

9. Build & Run

9. 构建与运行

bash
npm create vite@latest . -- --template react-ts  # Only if starting fresh
npm install
npm run dev
The app should run with 
npm run dev
and be viewable at localhost. No build errors. No TypeScript errors.
bash
npm create vite@latest . -- --template react-ts  # 仅在从零开始时使用
npm install
npm run dev
应用应能通过
npm run dev
启动，并可在localhost访问。无构建错误，无TypeScript错误。

10. Quality Checklist

10. 质量检查清单

Before delivering any batch of slides, verify:
  • npm run dev
    starts without errors
  • TypeScript compiles cleanly (
    npx tsc --noEmit
    )
  • npx vite build
    succeeds
  • All animations are smooth at 60fps
  • Slides fit within 1280×720 — no content overflow, no scrolling
  • Content density within limits per slide type
  • No placeholder text like "Lorem ipsum" or "Your content here"
  • Color palette is consistent and matches chosen preset
  • Fonts are loading correctly from Google Fonts / Fontshare
  • Images referenced in slides exist in 
    public/images/
  • Interactive elements have hover/focus states
  • Navigation works: keyboard, click, and progress bar are in sync
  • No text content wrapped in background cards — text sits on slide directly
  • No nested backgrounds (box inside box)
  • All elements with backgrounds have generous padding via inline `style={{}}``, not Tailwind classes
  • Borders are subtle — 
    border-white/10
    , 
    border-muted/20
    , never solid surface colors
  • All font sizes use 
    clamp()
     — no fixed px/rem for text
  • Backgrounds have depth — layered gradients or patterns, not flat solid colors
在交付任何一批幻灯片之前，验证：
  • npm run dev
    启动无错误
  • TypeScript 编译无错误（
    npx tsc --noEmit
    ）
  • npx vite build
    执行成功
  • 所有动画在60fps下流畅运行
  • 幻灯片适配1280×720——无内容溢出，无滚动
  • 内容密度符合每种幻灯片类型的限制
  • 无占位文本如"Lorem ipsum"或"Your content here"
  • 调色板一致且匹配所选预设
  • 字体从Google Fonts / Fontshare加载正确
  • 幻灯片中引用的图片存在于
    public/images/
    中
  • 交互元素有悬停/聚焦状态
  • 导航正常工作：键盘、点击和进度条同步
  • 没有文本内容包裹在背景卡片中——文本直接放在幻灯片上
  • 没有嵌套背景（盒子套盒子）
  • 所有带背景的元素通过内联
    style={{}}
    设置了充足的内边距    ，而非Tailwind类
  • 边框微妙——
    border-white/10
    、
    border-muted/20
    ，绝对不要使用纯色边框
  • 所有字体大小使用
    clamp()
    ——文本没有固定的px/rem值
  • 背景有深度——分层渐变或图案，而非平淡的纯色

11. Workflow

11. 工作流程

  1. Ask the user for mood and content — what feeling? What topic? How many modules?
  2. Pick a style preset — suggest 2-3 based on mood, let user choose
  3. Scaffold the app — set up Vite, Tailwind, Framer Motion, project structure, theme from preset, shared components
  4. Build slides in batches — implement 5–10 slides at a time, then ask for review
  5. Iterate — adjust based on feedback
  6. Images — when a slide needs an image, tell the user what image is needed and where to place it (
    public/images/
    ). Use a visible placeholder with the filename so they know what's missing.
Always keep the app in a runnable state. Never leave broken imports or missing files.
  1. 询问用户氛围和内容——想要什么感受？什么主题？有多少模块？
  2. 选择风格预设——根据氛围推荐2-3个，让用户选择
  3. 搭建应用框架——设置Vite、Tailwind、Framer Motion、项目结构、预设主题、共享组件
  4. 分批构建幻灯片——每次实现5-10张幻灯片，然后请求审核
  5. 迭代——根据反馈调整
  6. 图片——当幻灯片需要图片时，告诉用户需要什么样的图片以及放置位置（
    public/images/
    ）。使用带文件名的可见占位符，让用户知道缺少什么。
始终保持应用处于可运行状态。绝对不要留下损坏的导入或缺失的文件。