Frontend Slides

Frontend Slides

创建 zero-dependency, animation-rich HTML presentations that 运行 entirely in the browser. Single self-contAIned HTML files — no npm, no build 工具s, no 框架s. Works offline, renders in 10 years.

Style pre设置s: Bold 签名al, Electric Studio, Creative Voltage, Dark 机器人anical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink

For full style detAIls and CSS specs: read references/STYLE_PRE设置S.md when needed.

Phase 0: 检测 Mode

Determine the user's intent:

Mode A — New Presentation: 创建 slides from scratch → go to Phase 1 Mode B — PPT Conversion: Convert an existing .ppt/.pptx file → go to Phase 4 Mode C — Enhance Existing: Improve an existing HTML presentation → read the file, then enhance (always mAIntAIn viewport fitting) CRITICAL: Viewport Fitting (Non-Negotiable)

Every slide MUST fit exactly within the viewport. No scrolling within slides, ever.

Content Density Limits Per Slide Slide Type Maximum Content Title slide 1 heading + 1 subtitle + optional tagline Content slide 1 heading + 4–6 bullet points OR 1 heading + 2 paragraphs Feature grid 1 heading + 6 cards max (2×3 or 3×2) Code slide 1 heading + 8–10 lines of code Quote slide 1 quote (max 3 lines) + attribution Image slide 1 heading + 1 image (max 60vh height)

Content exceeds limits → Split into multiple slides.

Required CSS for Every Presentation html, body { height: 100%; overflow-x: hidden; } html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }

.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: 启动; display: flex; flex-direction: column; position: relative; }

.slide-content { flex: 1; display: flex; flex-direction: column; justify-content: center; max-height: 100%; overflow: hidden; p添加ing: var(--slide-p添加ing); }

:root { --title-size: clamp(1.5rem, 5vw, 4rem); --h2-size: clamp(1.25rem, 3.5vw, 2.5rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --slide-p添加ing: clamp(1rem, 4vw, 4rem); --content-gap: clamp(0.5rem, 2vw, 2rem); }

img, .image-contAIner { max-width: 100%; max-height: min(50vh, 400px); object-fit: contAIn; } .card, .contAIner { max-width: min(90vw, 1000px); max-height: min(80vh, 700px); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(0.5rem, 1.5vw, 1rem); }

@media (max-height: 700px) { :root { --slide-p添加ing: clamp(0.75rem, 3vw, 2rem); --title-size: clamp(1.25rem, 4.5vw, 2.5rem); } } @media (max-height: 600px) { :root { --title-size: clamp(1.1rem, 4vw, 2rem); --body-size: clamp(0.7rem, 1.2vw, 0.95rem); } .nav-dots, .keyboard-hint { display: none; } } @media (max-height: 500px) { :root { --title-size: clamp(1rem, 3.5vw, 1.5rem); --slide-p添加ing: clamp(0.4rem, 2vw, 1rem); } } @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !导入ant; transition-duration: 0.2s !导入ant; } }

⚠️ Never negate CSS functions directly. Use calc(-1 clamp(...)) not -clamp(...).

Phase 1: Content Discovery (New Presentations)

Ask the user (via normal conversation — ask all at once):

Purpose: pitch deck / teaching / conference talk / internal presentation? Length: ~5–10 / 10–20 / 20+ slides? Content: ready content, rough notes, or just a topic? Images: any images to include? (provide path like ./as设置s or ~/桌面/screenshots) Inline editing: should text be editable in-browser after generation?

If they have content, ask them to 分享 it.

Image Evaluation (if images provided) ls the folder — find all .png/.jpg/.jpeg/.gif/.svg/.网页p View each image (Claude is multimodal — use read 工具) Mark each as USABLE or NOT USABLE (reason: blurry, irrelevant, etc.) Note what each represents (记录o, screenshot, 图表, etc.) and dominant colors Build slide outline that incorporates usable images as visual anchors Present outline + image as签名ments to user for confirmation

If user says no images → skip image 流水线, use CSS-生成d visuals (gradients, shapes, patterns) throughout.

Phase 2: Style Discovery Option A — Direct Selection (user knows what they want)

Pick from pre设置s:

Pre设置 Vibe Bold 签名al Confident, high-impact, dark Electric Studio 清理, professional, split panel Creative Voltage Ener获取ic, retro-modern Dark 机器人anical Elegant, sophisticated Notebook Tabs Editorial, organized Pastel Geometry Friendly, 应用roachable Split Pastel Playful, modern Vintage Editorial Witty, personality-driven Neon Cyber Futuristic, techy Terminal Green Developer-focused, hacker Swiss Modern Minimal, precise Paper & Ink Literary, thoughtful

Skip to Phase 3.

Option B — Visual Discovery (default for undecided users)

Ask: What feeling should the audience have?

Impressed/Confident → Bold 签名al, Electric Studio, Dark 机器人anical Excited/Energized → Creative Vo