Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Core Principles

1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
Show, Don't Tell — Generate visual previews, not abstract choices. People discover what they want by seeing it.
Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides.

Design Aesthetics

You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.

Focus on:

- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:

- Overused font families (Inter, Roboto, Arial, system fonts)
Cliched color schemes (particularly purple gradients on white backgrounds)
Predictable layouts and component patterns
Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!

Viewport Fitting Rules

These invariants apply to EVERY slide in EVERY presentation:

- Every .slide must have INLINECODE1
ALL font sizes and spacing must use clamp(min, preferred, max) — never fixed px/rem
Content containers need max-height constraints
Images: INLINECODE4
Breakpoints required for heights: 700px, 600px, 500px
Include prefers-reduced-motion support
Never negate CSS functions directly (-clamp(), -min(), -max() are silently ignored) — use calc(-1 * clamp(...)) instead

When generating, read viewport-base.css and include its full contents in every presentation.

Content Density Limits Per Slide

Slide Type	Maximum Content
Title slide	1 heading + 1 subtitle + optional tagline
Content slide

Content exceeds limits? Split into multiple slides. Never cram, never scroll.

Phase 0: Detect Mode

Determine what the user wants:

- Mode A: New Presentation — Create from scratch. Go to Phase 1.
Mode B: PPT Conversion — Convert a .pptx file. Go to Phase 4.
Mode C: Enhancement — Improve an existing HTML presentation. Read it, understand it, enhance. Follow Mode C modification rules below.

Mode C: Modification Rules

When enhancing existing presentations, viewport fitting is the biggest risk:

1. Before adding content: Count existing elements, check against density limits
Adding images: Must have max-height: min(50vh, 400px). If slide already has max content, split into two slides
Adding text: Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
After ANY modification, verify: .slide has overflow: hidden, new elements use clamp(), images have viewport-relative max-height, content fits at 1280x720
Proactively reorganize: If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked

When adding images to existing slides: Move image to new slide or reduce other content first. Never add images without checking if existing content already fills the viewport.

Phase 1: Content Discovery (New Presentations)

Ask ALL questions in a single AskUserQuestion call so the user fills everything out at once:

Question 1 — Purpose (header: "Purpose"):
What is this presentation for? Options: Pitch deck / Teaching-Tutorial / Conference talk / Internal presentation

Question 2 — Length (header: "Length"):
Approximately how many slides? Options: Short 5-10 / Medium 10-20 / Long 20+

Question 3 — Content (header: "Content"):
Do you have content ready? Options: All content ready / Rough notes / Topic only

Question 4 — Inline Editing (header: "Editing"):
Do you need to edit text directly in the browser after generation? Options:

- "Yes (Recommended)" — Can edit text in-browser, auto-save to localStorage, export file
"No" — Presentation only, keeps file smaller

Remember the user's editing choice — it determines whether edit-related code is included in Phase 3.

If user has content, ask them to share it.

Step 1.2: Image Evaluation (if images provided)

If user selected "No images" → skip to Phase 2.

If user provides an image folder:

1. Scan — List all image files (.png, .jpg, .svg, .webp, etc.)
View each image — Use the Read tool (Claude is multimodal)
Evaluate — For each: what it shows, USABLE or NOT USABLE (with reason), what concept it represents, dominant colors
Co-design the outline — Curated images inform slide structure alongside text. This is NOT "plan slides then add images" — design around both from the start (e.g., 3 screenshots → 3 feature slides, 1 logo → title/closing slide)
Confirm via AskUserQuestion (header: "Outline"): "Does this slide outline and image selection look right?" Options: Looks good / Adjust images / Adjust outline

Logo in previews: If a usable logo was identified, embed it (base64) into each style preview in Phase 2 — the user sees their brand styled three different ways.

Phase 2: Style Discovery

This is the "show, don't tell" phase. Most people can't articulate design preferences in words.

Step 2.0: Style Path

Ask how they want to choose (header: "Style"):

- "Show me options" (recommended) — Generate 3 previews based on mood
"I know what I want" — Pick from preset list directly

If direct selection: Show preset picker and skip to Phase 3. Available presets are defined in STYLE_PRESETS.md.

Step 2.1: Mood Selection (Guided Discovery)

Ask (header: "Vibe", multiSelect: true, max 2):
What feeling should the audience have? Options:

- Impressed/Confident — Professional, trustworthy
Excited/Energized — Innovative, bold
Calm/Focused — Clear, thoughtful
Inspired/Moved — Emotional, memorable

Step 2.2: Generate 3 Style Previews

Based on mood, generate 3 distinct single-slide HTML previews showing typography, colors, animation, and overall aesthetic. Read STYLE_PRESETS.md for available presets and their specifications.

Mood	Suggested Presets
Impressed/Confident	Bold Signal, Electric Studio, Dark Botanical
Excited/Energized

Save previews to .claude-design/slide-previews/ (style-a.html, style-b.html, style-c.html). Each should be self-contained, ~50-100 lines, showing one animated title slide.

Open each preview automatically for the user.

Step 2.3: User Picks

Ask (header: "Style"):
Which style preview do you prefer? Options: Style A: [Name] / Style B: [Name] / Style C: [Name] / Mix elements

If "Mix elements", ask for specifics.

Phase 3: Generate Presentation

Generate the full presentation using content from Phase 1 (text, or text + curated images) and style from Phase 2.

If images were provided, the slide outline already incorporates them from Step 1.2. If not, CSS-generated visuals (gradients, shapes, patterns) provide visual interest — this is a fully supported first-class path.

Before generating, read these supporting files:

- html-template.md — HTML architecture and JS features
viewport-base.css — Mandatory CSS (include in full)
animation-patterns.md — Animation reference for the chosen feeling

Key requirements:

- Single self-contained HTML file, all CSS/JS inline
Include the FULL contents of viewport-base.css in the <style> block
Use fonts from Fontshare or Google Fonts — never system fonts
Add detailed comments explaining each section
Every section needs a clear /* === SECTION NAME === */ comment block

Phase 4: PPT Conversion

When converting PowerPoint files:

1. Extract content — Run python scripts/extract-pptx.py <input.pptx> <output_dir> (install python-pptx if needed: pip install python-pptx)
Confirm with user — Present extracted slide titles, content summaries, and image counts
Style selection — Proceed to Phase 2 for style discovery
Generate HTML — Convert to chosen style, preserving all text, images (from assets/), slide order, and speaker notes (as HTML comments)

Phase 5: Delivery

1. Clean up — Delete .claude-design/slide-previews/ if it exists
Open — Use open [filename].html to launch in browser
Summarize — Tell the user:

- File location, style name, slide count - Navigation: Arrow keys, Space, scroll/swipe, click nav dots - How to customize: :root CSS variables for colors, font link for typography, .reveal class for animations - If inline editing was enabled: Hover top-left corner or press E to enter edit mode, click any text to edit, Ctrl+S to save

Supporting Files

File	Purpose	When to Read
STYLEPRESETS.md	12 curated visual presets with colors, fonts, and signature elements	Phase 2 (style selection)
viewport-base.css

前端幻灯片

创建零依赖、动画丰富的HTML演示文稿，完全在浏览器中运行。

核心原则

1. 零依赖 — 单个HTML文件，内联CSS/JS。无需npm，无需构建工具。
展示而非告知 — 生成视觉预览，而非抽象选择。人们通过看到来发现他们想要的东西。
独特设计 — 拒绝通用的AI垃圾。每份演示文稿都必须感觉是定制打造的。
视口适配（不可协商） — 每张幻灯片必须完全适配在100vh内。幻灯片内绝对不允许滚动。内容溢出？拆分为多张幻灯片。

设计美学

你倾向于趋同于通用的、分发式输出。在前端设计中，这会产生用户所说的AI垃圾美学。避免这种情况：创造有创意、独特的前端，令人惊喜和愉悦。

重点关注：

- 字体排印：选择美观、独特且有趣的字体。避免使用Arial和Inter等通用字体；选择能够提升前端美感的独特字体。
色彩与主题：坚持统一的美学风格。使用CSS变量保持一致性。大胆使用主色调搭配鲜明强调色，优于畏手畏脚的平均分配调色板。从IDE主题和文化美学中汲取灵感。
动效：使用动画实现效果和微交互。优先使用纯CSS方案。在React中可用时使用Motion库。聚焦高冲击时刻：一次精心编排的页面加载，配合交错显示（animation-delay），比零散的微交互更能带来愉悦感。
背景：营造氛围和深度，而非默认使用纯色。叠加CSS渐变，使用几何图案，或添加与整体美学相匹配的上下文相关效果。

避免通用的AI生成美学：

- 过度使用的字体家族（Inter、Roboto、Arial、系统字体）
陈词滥调的配色方案（特别是白色背景上的紫色渐变）
可预测的布局和组件模式
缺乏上下文特定特色的千篇一律设计

创造性地诠释，做出意想不到的选择，让人感觉是为上下文真正设计的。在不同主题（浅色/深色）、不同字体、不同美学风格之间变化。你仍然倾向于在不同代际中趋同于常见选择（例如Space Grotesk）。避免这种情况：跳出固有思维模式至关重要！

视口适配规则

这些不变规则适用于每份演示文稿中的每张幻灯片：

- 每个 .slide 必须设置 height: 100vh; height: 100dvh; overflow: hidden;
所有字体大小和间距必须使用 clamp(min, preferred, max) — 绝不使用固定px/rem
内容容器需要 max-height 约束
图片：max-height: min(50vh, 400px)
高度断点要求：700px、600px、500px
包含 prefers-reduced-motion 支持
绝不直接否定CSS函数（-clamp()、-min()、-max() 会被静默忽略）— 改用 calc(-1 * clamp(...))

生成时，读取 viewport-base.css 并将其完整内容包含在每份演示文稿中。

每张幻灯片的内容密度限制

幻灯片类型	最大内容量
标题幻灯片	1个标题 + 1个副标题 + 可选标语
内容幻灯片

内容超出限制？拆分为多张幻灯片。绝不硬塞，绝不滚动。

阶段0：检测模式

确定用户想要什么：

- 模式A：新建演示文稿 — 从头创建。进入阶段1。
模式B：PPT转换 — 转换.pptx文件。进入阶段4。
模式C：增强 — 改进现有HTML演示文稿。读取它，理解它，增强它。遵循下面的模式C修改规则。

模式C：修改规则

在增强现有演示文稿时，视口适配是最大的风险：

1. 添加内容前： 统计现有元素，对照密度限制进行检查
添加图片： 必须设置 max-height: min(50vh, 400px)。如果幻灯片已有最大内容量，则拆分为两张幻灯片
添加文本： 每张幻灯片最多4-6个要点。超出限制？拆分为续接幻灯片
进行任何修改后，验证： .slide 有 overflow: hidden，新元素使用 clamp()，图片有视口相关的最大高度，内容在1280x720下适配
主动重组： 如果修改会导致溢出，自动拆分内容并告知用户。不要等待被要求

在现有幻灯片中添加图片时： 先将图片移至新幻灯片或减少其他内容。在未检查现有内容是否已填满视口之前，绝不添加图片。

阶段1：内容发现（新建演示文稿）

在单个 AskUserQuestion 调用中提出所有问题，以便用户一次性填写完毕：

问题1 — 目的（标题：目的）：
这份演示文稿的用途是什么？选项：融资路演 / 教学教程 / 会议演讲 / 内部演示

问题2 — 长度（标题：长度）：
大约需要多少张幻灯片？选项：短篇5-10 / 中篇10-20 / 长篇20+

问题3 — 内容（标题：内容）：
你准备好内容了吗？选项：所有内容已准备好 / 粗略笔记 / 仅有主题

问题4 — 内联编辑（标题：编辑）：
你需要在生成后直接在浏览器中编辑文本吗？选项：

- 是（推荐） — 可在浏览器中编辑文本，自动保存到localStorage，导出文件
否 — 仅演示文稿，保持文件更小

记住用户的编辑选择 — 它决定阶段3中是否包含编辑相关代码。

如果用户有内容，请他们分享。

步骤1.2：图片评估（如果提供了图片）

如果用户选择无图片 → 跳至阶段2。

如果用户提供图片文件夹：

1. 扫描 — 列出所有图片文件（.png、.jpg、.svg、.webp等）
查看每张图片 — 使用Read工具（Claude是多模态的）
评估 — 对每张图片：显示内容，可用或不可用（附原因），代表什么概念，主色调
共同设计大纲 — 精选图片与文本一起指导幻灯片结构。这不是先规划幻灯片再添加图片 — 从一开始就围绕两者进行设计（例如，3张截图 → 3张功能幻灯片，1个Logo → 标题/结束幻灯片）
通过 AskUserQuestion 确认（标题：大纲）：这个幻灯片大纲和图片选择看起来对吗？选项：看起来不错 / 调整图片 / 调整大纲

预览中的Logo： 如果识别出可用的Logo，将其（base64）嵌入阶段2的每个样式预览中 — 用户可以看到他们的品牌以三种不同方式呈现。

阶段2：样式发现

这是展示而非告知阶段。 大多数人无法用语言表达设计偏好。

步骤2.0：样式路径

询问他们如何选择（标题：样式）：

- 给我看选项（推荐） — 基于情绪生成3个预览
我知道我想要什么 — 直接从预设列表中选择

如果直接选择： 显示预设选择器并跳至阶段3。可用预设定义在 STYLE_PRESETS.md 中。

步骤2.1：情绪选择（引导式发现）

询问（标题：氛围，多选：true，最多2个）：
观众应该有什么感受？选项：

- 印象深刻/自信 — 专业、值得信赖
兴奋/充满活力 — 创新、大胆
平静/专注 — 清晰、深思熟虑
受到启发/感动 — 情感化、令人难忘

步骤2.2：生成3个样式预览

基于情绪，生成3个不同的单张幻灯片HTML预览，展示字体排印、色彩、动画和整体美学。阅读 STYLE_PRESETS.md 了解可用预设及其规格。

情绪	建议预设
印象深刻/自信	大胆信号、电子工作室、暗色植物
兴奋/充满活力

将预览保存到

frontend-slides 前端幻灯片

frontend-slides

Frontend Slides

Core Principles

Design Aesthetics