presentation-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Presentation Builder

演示文稿构建工具

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

Based on zarazhangrui/frontend-slides, restructured for OrchestKit.

可创建无依赖、富动画效果的HTML演示文稿，可直接在浏览器中运行。

基于zarazhangrui/frontend-slides项目重构，适配OrchestKit。

Core Philosophy

核心设计理念

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 preferences by seeing.
Distinctive Design -- Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
Production Quality -- Well-commented, accessible, performant code.
Viewport Fitting -- Every slide MUST fit exactly within the viewport. No scrolling within slides, ever.

无依赖 —— 生成包含内嵌CSS/JS的独立HTML文件，无需npm，无需构建工具。
可视化呈现，而非抽象描述 —— 生成可视化预览，而非仅提供抽象选项。用户通过视觉效果来选择偏好样式。
独特设计 —— 避免千篇一律的“AI生成式”审美，每个演示文稿都应具备定制化质感。
生产级质量 —— 代码注释清晰、具备可访问性且性能优异。
视口适配 —— 每张幻灯片必须完全适配视口，绝不允许幻灯片内部出现滚动。

Phase 0: Detect Mode

阶段0：模式检测

Determine what the user wants:

Mode	Trigger	Next Phase
A: New Presentation	Create slides from scratch	Phase 1
B: PPT Conversion	Has a .ppt/.pptx file	PPT Conversion then Phase 2
C: Enhancement	Has existing HTML presentation	Read file, understand structure, enhance

判断用户的需求类型：

模式	触发条件	下一阶段
A：新建演示文稿	从零开始创建幻灯片	阶段1
B：PPT转换	拥有.ppt/.pptx文件	先执行PPT转换，再进入阶段2
C：优化增强	已有HTML演示文稿	读取文件、理解结构并进行优化

Phase 1: Content Discovery

阶段1：内容确认

Before designing, understand the content. Use

AskUserQuestion

Question 1: Purpose

Header: "Purpose"
Options: "Pitch deck", "Teaching/Tutorial", "Conference talk", "Internal presentation"

Question 2: Slide Count

Header: "Length"
Options: "Short (5-10)", "Medium (10-20)", "Long (20+)"

Question 3: Content Readiness

Header: "Content"
Options: "I have all content ready", "I have rough notes", "I have a topic only"

If user has content, ask them to share it. If topic only, help structure an outline.

设计前先明确内容，通过

AskUserQuestion

工具询问：

问题1：演示目的

标题："演示目的"
选项："推介文稿", "教学/教程", "会议演讲", "内部汇报"

问题2：幻灯片数量

标题："文稿长度"
选项："短篇（5-10页）", "中篇（10-20页）", "长篇（20页以上）"

问题3：内容准备情况

标题："内容状态"
选项："内容全部准备完毕", "已有大致提纲", "仅确定主题"

若用户已准备好内容，请其提供；若仅确定主题，则协助构建内容大纲。

Phase 2: Style Discovery

阶段2：风格确认

This is the "show, don't tell" phase.

此阶段为“可视化呈现”环节

Step 2.0: Style Path Selection

步骤2.0：风格选择路径

Ask how the user wants to choose their style:

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

Available Presets (see Style Presets for full details):

Preset	Vibe	Best For
Bold Signal	Confident, high-impact	Pitch decks, keynotes
Electric Studio	Clean, professional	Agency presentations
Creative Voltage	Energetic, retro-modern	Creative pitches
Dark Botanical	Elegant, sophisticated	Premium brands
Notebook Tabs	Editorial, organized	Reports, reviews
Pastel Geometry	Friendly, approachable	Product overviews
Split Pastel	Playful, modern	Creative agencies
Vintage Editorial	Witty, personality-driven	Personal brands
Neon Cyber	Futuristic, techy	Tech startups
Terminal Green	Developer-focused	Dev tools, APIs
Swiss Modern	Minimal, precise	Corporate, data
Paper & Ink	Literary, thoughtful	Storytelling

询问用户希望如何选择风格：

"展示风格选项" —— 根据氛围生成3种预览样式（推荐）
"我明确想要的风格" —— 直接从预设列表中选择

可用预设风格（详见Style Presets）：

预设风格	氛围	适用场景
Bold Signal	自信、高冲击力	推介文稿、主题演讲
Electric Studio	简洁、专业	代理机构汇报
Creative Voltage	活力、复古现代	创意推介
Dark Botanical	优雅、精致	高端品牌
Notebook Tabs	编辑感、有条理	报告、评审
Pastel Geometry	友好、易亲近	产品概述
Split Pastel	活泼、现代	创意机构
Vintage Editorial	诙谐、有个性	个人品牌
Neon Cyber	未来感、科技风	科技初创企业
Terminal Green	开发者导向	开发工具、API
Swiss Modern	极简、精准	企业、数据类
Paper & Ink	文艺、有思想	故事讲述

Step 2.1: Mood Selection (Guided Discovery)

步骤2.1：氛围选择（引导式确认）

If "Show me options", ask via

AskUserQuestion

Question: Vibe

"What feeling should the audience have?"
Options (multiSelect: true, pick up to 2):
- "Impressed/Confident" -- Professional, trustworthy
- "Excited/Energized" -- Innovative, bold
- "Calm/Focused" -- Clear, easy to follow
- "Inspired/Moved" -- Emotional, memorable

Mood-to-Style Mapping:

Mood	Suggested Styles
Impressed/Confident	Bold Signal, Electric Studio, Dark Botanical
Excited/Energized	Creative Voltage, Neon Cyber, Split Pastel
Calm/Focused	Notebook Tabs, Paper & Ink, Swiss Modern
Inspired/Moved	Dark Botanical, Vintage Editorial, Pastel Geometry

若用户选择"展示风格选项"，通过

AskUserQuestion

工具询问：

问题：氛围偏好

"希望给观众带来怎样的感受？"
选项（可多选，最多选2项）：
- "印象深刻/值得信赖" —— 专业、可靠
- "兴奋/充满活力" —— 创新、大胆
- "平静/专注" —— 清晰、易懂
- "受启发/被打动" —— 有感染力、令人难忘

氛围与风格映射：

氛围	推荐风格
印象深刻/值得信赖	Bold Signal, Electric Studio, Dark Botanical
兴奋/充满活力	Creative Voltage, Neon Cyber, Split Pastel
平静/专注	Notebook Tabs, Paper & Ink, Swiss Modern
受启发/被打动	Dark Botanical, Vintage Editorial, Pastel Geometry

Step 2.2: Generate Style Previews

步骤2.2：生成风格预览

Generate 3 distinct mini HTML files in

.claude-design/slide-previews/

.claude-design/slide-previews/
├── style-a.html   # ~50-100 lines, single title slide
├── style-b.html
└── style-c.html

Each preview: self-contained, inline CSS/JS, animated title slide showing typography, colors, and motion style.

在

.claude-design/slide-previews/

目录下生成3个独立的迷你HTML文件：

.claude-design/slide-previews/
├── style-a.html   # ~50-100行代码，仅含标题幻灯片
├── style-b.html
└── style-c.html

每个预览文件为独立结构，包含内嵌CSS/JS，通过动画标题幻灯片展示字体、色彩和动效风格。

Step 2.3: Present Previews

步骤2.3：展示预览并确认

Show user the 3 options and ask via

AskUserQuestion

"Which style preview do you prefer?"
Options: Style A, Style B, Style C, "Mix elements"

向用户展示3种选项，通过

AskUserQuestion

工具询问：

"您偏好哪种风格预览？"
选项：风格A, 风格B, 风格C, "混合多种元素"

Phase 3: Generate Presentation

阶段3：生成演示文稿

Generate the full presentation based on content (Phase 1) and style (Phase 2).

根据阶段1确认的内容和阶段2选定的风格生成完整演示文稿。

File Output

文件输出

presentation.html    # Self-contained presentation
assets/              # Images if any (PPT conversion)

presentation.html    # 独立演示文稿文件
assets/              # 图片资源（PPT转换时生成）

HTML Architecture

HTML架构

Every presentation follows this structure:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentation Title</title>
    <!-- Fonts from Fontshare or Google Fonts -->
    <style>
        /* Theme variables in :root */
        /* Base styles + viewport fitting (see rules/viewport-fitting.md) */
        /* Slide container styles */
        /* Animations */
        /* Responsive breakpoints */
    </style>
</head>
<body>
    <div class="progress-bar"></div>
    <nav class="nav-dots"><!-- JS generated --></nav>
    <section class="slide title-slide">...</section>
    <section class="slide">...</section>
    <!-- More slides -->
    <script>
        /* SlidePresentation class with navigation */
    </script>
</body>
</html>

所有演示文稿遵循以下结构：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentation Title</title>
    <!-- 字体来自Fontshare或Google Fonts -->
    <style>
        /* :root中的主题变量 */
        /* 基础样式 + 视口适配（详见rules/viewport-fitting.md） */
        /* 幻灯片容器样式 */
        /* 动画效果 */
        /* 响应式断点 */
    </style>
</head>
<body>
    <div class="progress-bar"></div>
    <nav class="nav-dots"><!-- JS生成 --></nav>
    <section class="slide title-slide">...</section>
    <section class="slide">...</section>
    <!-- 更多幻灯片 -->
    <script>
        /* 包含导航功能的SlidePresentation类 */
    </script>
</body>
</html>

Critical: Viewport Fitting

关键要求：视口适配

Every slide MUST fit exactly in the viewport. See Viewport Fitting Rules.

Quick checklist:

Every

.slide

has

height: 100vh; height: 100dvh; overflow: hidden;

All font sizes use
```
clamp(min, preferred, max)
```
All spacing uses
```
clamp()
```
or viewport units
Content respects density limits
Breakpoints exist for heights: 700px, 600px, 500px
When content doesn't fit: split into multiple slides, never scroll

Also see

responsive-patterns

skill for advanced clamp()/container query patterns.

每张幻灯片必须完全适配视口，详见Viewport Fitting Rules。

快速检查清单：

每个

.slide

类设置

height: 100vh; height: 100dvh; overflow: hidden;

所有字体大小使用
```
clamp(min, preferred, max)
```
所有间距使用
```
clamp()
```
或视口单位
内容符合内容密度规则
针对700px、600px、500px高度设置响应式断点
若内容无法容纳：拆分到多张幻灯片，绝不允许滚动

也可参考

responsive-patterns

技能获取高级clamp()/容器查询方案。

Required JavaScript Features

必备JavaScript功能

SlidePresentation Class -- Keyboard (arrows, space), touch/swipe, mouse wheel, progress bar, nav dots
Intersection Observer -- Add
```
.visible
```
class on scroll for CSS animations
Optional enhancements (style-dependent): Custom cursor, particle backgrounds, parallax, 3D tilt, magnetic buttons

SlidePresentation类 —— 支持键盘（方向键、空格）、触摸/滑动、鼠标滚轮导航，包含进度条、导航点
Intersection Observer —— 滚动时添加
```
.visible
```
类以触发CSS动画
可选增强功能（依风格而定）：自定义光标、粒子背景、视差效果、3D倾斜、磁吸按钮

Code Quality

代码质量

Every CSS/JS section has clear comments explaining what, why, and how to modify
Semantic HTML (
```
<section>
```
,
```
<nav>
```
,
```
<main>
```
)
Keyboard navigation works
ARIA labels where needed
Reduced motion support:
```
@media (prefers-reduced-motion: reduce)
```

每个CSS/JS区块都有清晰注释，说明功能、设计思路及修改方法
使用语义化HTML标签（
```
<section>
```
,
```
<nav>
```
,
```
<main>
```
）
支持键盘导航
必要时添加ARIA标签
支持减少动效：
```
@media (prefers-reduced-motion: reduce)
```

Anti-Patterns (DO NOT USE)

禁用模式（绝对不要使用）

Fonts: Inter, Roboto, Arial, system fonts as display
Colors:
```
#6366f1
```
(generic indigo), purple gradients on white
Layouts: Everything centered, generic hero sections, identical card grids
Decorations: Realistic illustrations, gratuitous glassmorphism

字体： Inter、Roboto、Arial、系统字体作为显示字体
色彩：
```
#6366f1
```
（通用靛蓝色）、白色背景配紫色渐变
布局： 全部居中、通用英雄区、雷同卡片网格
装饰： 写实插画、无意义的毛玻璃效果

Phase 4: Delivery

阶段4：交付

Clean up
```
.claude-design/slide-previews/
```
if it exists
Open the presentation:
```
open [filename].html
```
Provide summary:

Your presentation is ready!

File: [filename].html
Style: [Style Name]
Slides: [count]

Navigation:
- Arrow keys or Space to navigate
- Scroll/swipe also works
- Click dots on the right to jump

To customize:
- Colors: :root CSS variables at top
- Fonts: Change the font link
- Animations: Modify .reveal class timings

清理若存在
```
.claude-design/slide-previews/
```
目录则删除
打开演示文稿：
```
open [filename].html
```
提供总结：

您的演示文稿已生成完成！

文件：[filename].html
风格：[所选风格名称]
页数：[幻灯片数量]

导航方式：
- 方向键或空格键切换
- 滚动/滑动也可操作
- 点击右侧圆点快速跳转

自定义方法：
- 色彩：修改顶部:root中的CSS变量
- 字体：更换字体链接
- 动画：调整.reveal类的时间参数

Style Reference: Effect-to-Feeling Mapping

风格参考：效果与氛围映射

Feeling	Animation Style	Visual Approach
Dramatic/Cinematic	Slow fade-ins (1-1.5s), large scale transitions	Dark BG, spotlight effects, parallax
Techy/Futuristic	Neon glow, glitch/scramble text	Particle systems, grid patterns, monospace accents
Playful/Friendly	Bouncy easing, floating animations	Pastel/bright colors, rounded corners
Professional/Corporate	Subtle fast animations (200-300ms)	Clean sans-serif, navy/slate, data viz focus
Calm/Minimal	Very slow subtle motion	High whitespace, muted palette, serif typography
Editorial/Magazine	Strong typography hierarchy	Pull quotes, grid-breaking layouts, B&W + accent

氛围	动画风格	视觉方案
戏剧化/电影感	慢速淡入（1-1.5秒）、大尺度过渡	深色背景、聚光灯效果、视差
科技感/未来风	霓虹发光、文字故障/乱码效果	粒子系统、网格图案等宽字体点缀
活泼/友好	弹性缓动、悬浮动画	马卡龙/明亮色彩、圆角
专业/企业风	细微快速动画（200-300毫秒）	简洁无衬线字体、深蓝/灰调、数据可视化重点
平静/极简	极慢细微动效	高留白、低饱和度配色、衬线字体
编辑感/杂志风	强字体层级	引用文本、破网格布局、黑白+强调色

Troubleshooting

故障排查

Issue	Solution
Fonts not loading	Check Fontshare/Google Fonts URL, verify font names match CSS
Animations not triggering	Verify Intersection Observer is running, check `.visible` class
Scroll snap not working	Ensure `scroll-snap-type` on html, `scroll-snap-align` on slides
Mobile issues	Disable heavy effects at 768px, test touch events, reduce particles
Performance	Use `will-change` sparingly, prefer `transform` / `opacity` animations

问题	解决方案
字体无法加载	检查Fontshare/Google Fonts链接，验证字体名称与CSS匹配
动画未触发	确认Intersection Observer正常运行，检查 `.visible` 类
滚动吸附失效	确保html标签设置 `scroll-snap-type` ，幻灯片设置 `scroll-snap-align`
移动端问题	768px断点处禁用复杂效果，测试触摸事件，减少粒子数量
性能问题	谨慎使用 `will-change` ，优先使用 `transform` / `opacity` 实现动画

Related Skills

Rules

规则

Viewport Fitting -- Mandatory CSS for viewport-locked slides
Content Density -- Maximum content per slide type

Viewport Fitting —— 视口锁定幻灯片的强制CSS规则
Content Density —— 不同类型幻灯片的最大内容量

References

参考资料

Style Presets -- 12 curated visual themes with CSS variables
PPT Conversion -- PowerPoint extraction and conversion workflow

Style Presets —— 12种精选视觉主题及对应的CSS变量
PPT Conversion —— PowerPoint提取与转换流程

presentation-builder

Original

Translation

Presentation Builder

演示文稿构建工具

Core Philosophy

核心设计理念

Phase 0: Detect Mode

阶段0：模式检测

Phase 1: Content Discovery

阶段1：内容确认

Phase 2: Style Discovery

阶段2：风格确认

Step 2.0: Style Path Selection

步骤2.0：风格选择路径

Step 2.1: Mood Selection (Guided Discovery)

步骤2.1：氛围选择（引导式确认）

Step 2.2: Generate Style Previews

步骤2.2：生成风格预览

Step 2.3: Present Previews

步骤2.3：展示预览并确认

Phase 3: Generate Presentation

阶段3：生成演示文稿

File Output

文件输出

HTML Architecture

HTML架构

Critical: Viewport Fitting

关键要求：视口适配

Required JavaScript Features

必备JavaScript功能

Code Quality

代码质量

Anti-Patterns (DO NOT USE)

禁用模式（绝对不要使用）

Phase 4: Delivery

阶段4：交付

Style Reference: Effect-to-Feeling Mapping

风格参考：效果与氛围映射

Troubleshooting

故障排查

Related Skills

相关技能

Rules

规则

References

参考资料