html-presentation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTML Presentation Skill

HTML 演示文稿制作技能

Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.

将文档、大纲或自由格式内容转换为支持键盘和滚动导航的精美独立HTML幻灯片演示文稿。

When This Skill Triggers

技能触发场景

User provides a document and asks for a "presentation", "slides", or "deck" as HTML
User asks to convert notes/outline/content into browser-presentable slides
User wants a Reveal.js or scroll-based HTML presentation
User references wanting to present from a browser rather than PowerPoint

用户提供文档，并要求制作HTML格式的“演示文稿”、“幻灯片”或“演示文稿组”
用户要求将笔记/大纲/内容转换为可在浏览器中展示的幻灯片
用户需要基于Reveal.js或滚动模式的HTML演示文稿
用户明确希望在浏览器中进行演示，而非使用PowerPoint

Step 0: Gather Requirements

步骤0：收集需求

Before generating anything, check whether the user has specified the following. If any are missing, ask for clarification in a single concise message. Do NOT ask more than once — use sensible defaults for anything the user declines to specify.

Required context (ask if missing):

Parameter	What to ask	Default if not specified
Navigation mode	"Should slides go left-to-right (horizontal) or top-to-bottom (vertical scroll)?"	`horizontal`
Theme	"Which visual style? Options: `dark-editorial` (dark bg, serif headlines, editorial feel), `light-minimal` (clean white, sans-serif), `corporate` (navy/white, professional), `hacker` (terminal green-on-black, monospace)"	`dark-editorial`
Audience & tone	"Who is this for? (e.g., investors, engineers, conference talk, internal team)"	Infer from content
Slide count preference	"Roughly how many slides?"	Auto-determine from content density
Branding	"Any logo text, tagline, or accent color to use in the header?"	None
CTA / closing	"Any call-to-action, links, or contact info for the final slide?"	None

If the user provides a document and says something like "make this a presentation", ask all missing parameters in one shot. If they say "just make it look good", use defaults and proceed.

在生成演示文稿前，先确认用户是否已指定以下信息。若有缺失，用一条简洁的消息询问用户。请勿多次询问——对于用户不愿指定的内容，使用合理默认值。

需确认的信息（缺失时询问）：

参数	询问内容	未指定时的默认值
导航模式	“幻灯片应采用左右切换（横向）还是上下滚动（垂直）？”	`horizontal`
主题	“需要哪种视觉风格？可选： `dark-editorial` （深色背景，衬线标题，编辑风）、 `light-minimal` （简洁白色，无衬线字体）、 `corporate` （深蓝/白色，专业风）、 `hacker` （终端绿黑配色等宽字体）”	`dark-editorial`
受众与语气	“演示面向的受众是？（例如：投资者、工程师、会议演讲、内部团队）”	根据内容推断
幻灯片数量偏好	“大致需要多少张幻灯片？”	根据内容密度自动确定
品牌标识	“是否需要在页眉中添加标志文字、标语或强调色？”	无
行动号召/收尾	“最后一张幻灯片是否需要添加行动号召、链接或联系信息？”	无

若用户提供文档并表示“把这个做成演示文稿”，一次性询问所有缺失的参数。若用户表示“只要做得好看就行”，则使用默认值继续操作。

Step 1: Analyze the Source Document

步骤1：分析源文档

Read the uploaded document or provided content. Identify:

Logical sections — these become slides or slide groups
Key data points — numbers, metrics, percentages → use metric/stat slide layouts
Lists and comparisons — feature lists, pros/cons → use card grids or comparison tables
Quotes or testimonials — use quote-block layouts
Sequential processes — workflows, timelines → use workflow/timeline slide layouts
Title and conclusion — first and last slides get special treatment

Create a mental outline mapping content sections to slide types before writing any HTML.

阅读用户上传的文档或提供的内容，确定：

逻辑章节——这些将成为单张幻灯片或幻灯片组
关键数据点——数字、指标、百分比→使用指标/统计幻灯片布局
列表与对比内容——功能列表、优缺点→使用卡片网格或对比表格
引用或推荐语——使用引用块布局
流程步骤——工作流、时间线→使用工作流/时间线幻灯片布局
标题与结论——第一张和最后一张幻灯片采用特殊样式

在编写HTML前，先在脑中规划好内容章节与幻灯片类型的对应关系。

Step 2: Select Slide Layouts

步骤2：选择幻灯片布局

Each slide should use one of these layout patterns. Mix them for visual variety — never use the same layout for more than 2 consecutive slides.

Layout	When to Use	CSS Class
Title	Opening slide, section dividers	`slide--section slide--center`
Split	Text + supporting content side-by-side	`split` or `split--60-40`
Grid Cards	3-6 related items (features, risks, components)	`grid-2` , `grid-3` , `grid-4`
Metrics	Key numbers/stats to emphasize	`metrics` with `metric` items
Quote	Expert quotes, testimonials, key statements	`quote-block`
Workflow	Sequential process, pipeline, architecture	`workflow` with arrow connectors
Comparison Table	Feature comparison, before/after	`comparison-table`
Timeline	Chronological events, roadmap phases	`timeline`
List	Ordered or unordered key points	`list` , `list--check` , `list--numbered`
CTA / Closing	Final slide with links and contact	`slide--section slide--center` + `contact-grid`

每张幻灯片应使用以下布局模式之一。混合使用多种布局以增加视觉多样性——连续两张幻灯片不得使用相同布局。

布局	使用场景	CSS 类
标题页	开场幻灯片、章节分隔页	`slide--section slide--center`
分栏布局	文本+辅助内容左右分栏	`split` 或 `split--60-40`
网格卡片	3-6个相关条目（功能、风险、组件）	`grid-2` , `grid-3` , `grid-4`
指标页	需要突出展示的关键数字/统计	`metrics` 搭配 `metric` 条目
引用页	专家引用、推荐语、关键声明	`quote-block`
工作流	流程步骤、管道、架构	`workflow` 搭配箭头连接器
对比表格	功能对比、前后对比	`comparison-table`
时间线	时间顺序事件、路线图阶段	`timeline`
列表页	有序或无序关键点	`list` , `list--check` , `list--numbered`
行动号召/收尾页	包含链接和联系信息的最后一张幻灯片	`slide--section slide--center` + `contact-grid`

Step 3: Generate the HTML

步骤3：生成HTML

Read the appropriate theme and template files from this skill's references directory before writing code:

Always read
```
references/THEMES.md
```
to get the CSS variables and styles for the selected theme
Always read
```
references/TEMPLATES.md
```
to get the HTML patterns for each slide layout
Always read
```
references/NAVIGATION.md
```
to get the correct JS initialization for the selected navigation mode

Then assemble the presentation as a single self-contained HTML file:

编写代码前，先从技能的参考目录中读取对应的主题和模板文件：

务必阅读
```
references/THEMES.md
```
，获取所选主题的CSS变量和样式
务必阅读
```
references/TEMPLATES.md
```
，获取每种幻灯片布局的HTML模板
务必阅读
```
references/NAVIGATION.md
```
，获取所选导航模式的正确JS初始化代码

随后将演示文稿组装为单个独立HTML文件：

File Structure

文件结构

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->
    <!-- All styles inline in <style> block -->
  </head>
  <body>
    <!-- Slides markup -->
    <!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->
  </body>
</html>

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, fonts, Reveal.js CDN (horizontal) or custom CSS (vertical) -->
    <!-- All styles inline in <style> block -->
  </head>
  <body>
    <!-- Slides markup -->
    <!-- Scripts: Reveal.js init (horizontal) or custom scroll handler (vertical) -->
  </body>
</html>

Key Rules

核心规则

Single file — everything inline. No external CSS/JS files except CDN resources (Google Fonts, Reveal.js, Lucide icons).

CDN dependencies (horizontal mode):

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js

(if code blocks present)

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css

(if code blocks present)

```
https://unpkg.com/lucide@latest
```
(for icons)

Vertical scroll mode — zero CDN dependencies for Reveal.js. Uses custom CSS scroll-snap and vanilla JS for keyboard/scroll navigation.
Google Fonts — load fonts matching the theme. Always use
```
<link rel="preconnect">
```
for performance.
Responsive — include media queries for 1400px, 1024px, and 768px breakpoints.
Fragment animations — use
```
class="fragment"
```
for progressive reveal in horizontal mode. For vertical mode, use intersection observer fade-in animations.
Slide numbers — always show current slide number.
Kicker text — each content slide gets a numbered kicker like
```
01 // Section Name
```
for editorial feel.
Header bar — each content slide (not title/section slides) gets a header with an icon and section label.

单文件——所有内容内联。除CDN资源（Google Fonts、Reveal.js、Lucide图标）外，无外部CSS/JS文件。

CDN依赖（横向模式）：

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js

（若包含代码块）

https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css

（若包含代码块）

```
https://unpkg.com/lucide@latest
```
（用于图标）

垂直滚动模式——无需Reveal.js的CDN依赖。使用自定义CSS滚动吸附和原生JS实现键盘/滚动导航。
Google Fonts——加载与主题匹配的字体。为提升性能，务必使用
```
<link rel="preconnect">
```
。
响应式——包含针对1400px、1024px和768px断点的媒体查询。
分段动画——横向模式使用
```
class="fragment"
```
实现逐步展示。垂直模式使用交叉观察器实现淡入动画。
幻灯片编号——始终显示当前幻灯片编号。
小标题文本——每张内容幻灯片添加编号小标题，如
```
01 // 章节名称
```
，增强编辑风质感。
页眉栏——每张内容幻灯片（非标题/章节页）添加带图标和章节标签的页眉。

Horizontal Mode: Reveal.js Config

横向模式：Reveal.js 配置

javascript

Reveal.initialize({
  hash: true,
  slideNumber: true,
  controls: true,
  controlsLayout: "bottom-right",
  progress: true,
  center: false,
  transition: "slide",
  width: "100%",
  height: "100%",
  margin: 0.04,
  navigationMode: "linear",
  autoAnimate: true,
  autoAnimateDuration: 0.7,
  plugins: [RevealHighlight], // only if code blocks present
});

javascript

Reveal.initialize({
  hash: true,
  slideNumber: true,
  controls: true,
  controlsLayout: "bottom-right",
  progress: true,
  center: false,
  transition: "slide",
  width: "100%",
  height: "100%",
  margin: 0.04,
  navigationMode: "linear",
  autoAnimate: true,
  autoAnimateDuration: 0.7,
  plugins: [RevealHighlight], // only if code blocks present
});

Vertical Scroll Mode: Navigation Behavior

垂直滚动模式：导航行为

Each slide is a full-viewport section with
```
scroll-snap-align: start
```
Arrow keys (Up/Down/Left/Right) all navigate between slides
Mouse wheel scrolls between slides (debounced)
Page Up/Down, Home/End supported
Progress bar at bottom shows position
Smooth scroll transitions between slides
Touch swipe support for mobile

每张幻灯片为全屏视口区域，设置
```
scroll-snap-align: start
```
方向键（上/下/左/右）均可切换幻灯片
鼠标滚轮可切换幻灯片（防抖处理）
支持Page Up/Down、Home/End键
底部进度条显示当前位置
幻灯片间平滑滚动过渡
移动端支持触摸滑动

Step 4: Write to Output

步骤4：输出文件

Create the HTML file at an appropriate output path (e.g.,
```
./presentation.html
```
or a user-specified location)
Present the file to the user

If the content is large (>15 slides), build iteratively — write the skeleton first, then append slide content in chunks.

在合适的输出路径创建HTML文件（例如：
```
./presentation.html
```
或用户指定的位置）
将文件交付给用户

若内容较多（超过15张幻灯片），可分步骤生成——先编写框架，再批量添加幻灯片内容。

Error Handling

错误处理

Problem	Cause	Fix
CDN fails to load (Reveal.js, Lucide, Google Fonts)	Network unavailable or CDN outage	Switch to inline styles/scripts: embed Reveal.js core inline, replace Lucide icons with inline SVG paths, use system font stack ( `system-ui, -apple-system, sans-serif` )
Content overflows slide viewport	Too much text or too many elements per slide	Split the slide into two: move supporting detail to a follow-up slide or convert prose to a bullet list
Fonts render incorrectly or fail to load	Google Fonts CDN blocked or slow	Add system font fallback in the font-family stack: `'Font Name', system-ui, Georgia, serif`
Reveal.js fails to initialize	Script load order issue or missing plugin	Verify CDN script tags appear before `Reveal.initialize()` ; check browser console for 404s

问题	原因	解决方法
CDN加载失败（Reveal.js、Lucide、Google Fonts）	网络不可用或CDN故障	切换为内联样式/脚本：将Reveal.js核心代码内联，用内联SVG路径替换Lucide图标，使用系统字体栈（ `system-ui, -apple-system, sans-serif` ）
内容超出幻灯片视口	单张幻灯片文本过多或元素过多	将幻灯片拆分为两张：将次要内容移至后续幻灯片，或将散文转换为项目符号列表
字体渲染异常或加载失败	Google Fonts CDN被屏蔽或加载缓慢	在字体栈中添加系统字体备选： `'Font Name', system-ui, Georgia, serif`
Reveal.js初始化失败	脚本加载顺序错误或插件缺失	确认CDN脚本标签在 `Reveal.initialize()` 之前；检查浏览器控制台是否有404错误

Quality Checklist

质量检查清单

Before delivering, verify:

All slides render without overflow (content fits viewport)
Navigation works with arrow keys AND mouse scroll
Slide numbers are visible
Fragment animations work (horizontal) or fade-in works (vertical)
Links are clickable (
```
pointer-events: auto
```
in Reveal.js)
Code blocks have syntax highlighting (if present)
Responsive at all three breakpoints
No broken icon references (Lucide icons initialized)
Consistent kicker numbering across all slides
Title slide and closing slide have distinct visual treatment

交付前，请验证：

所有幻灯片内容均在视口内，无溢出
导航支持方向键和鼠标滚动
幻灯片编号可见
分段动画（横向模式）或淡入效果（垂直模式）正常工作
链接可点击（Reveal.js中需设置
```
pointer-events: auto
```
）
代码块（若有）支持语法高亮
在三个断点下均为响应式
无无效图标引用（Lucide图标已初始化）
所有幻灯片的小标题编号保持一致
标题页和收尾页有独特的视觉样式