presentation-design

演示文稿设计

使用 HTML 和 CSS 创建视觉效果惊艳的幻灯片。

前提条件

• 阅读 .agents/design-context.md（参见 design-context），了解品牌色、标题和正文字体以及风格原型；将它们映射到 --slide-* 变量（第 9 步）。使用 color-palette 中共享的 --brand-* / --gray-* 色阶。
• 确定演示文稿的受众、目的和篇幅，以及演示文稿将通过投影、屏幕共享还是 PDF 发送。
• 对于摄影背景或插图，请使用 image-generation 技能（--aspect-ratio 16:9）生成，并将文字放在纯色或叠加色区域上，而不要直接放在内容繁杂的图像区域上。

---

第 1 步：幻灯片布局模板

标题幻灯片

.slide-title {
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--brand-500); color: white;
}
.slide-title .slide-headline { font-size: 4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1rem; }
.slide-title .slide-subtitle { font-size: 1.5rem; opacity: 0.85; margin-bottom: 2rem; }
.slide-title .slide-meta { display: flex; gap: 2rem; font-size: 1rem; opacity: 0.7; }

内容幻灯片（文字 + 项目符号）

.slide-content-layout { display: flex; flex-direction: column; justify-content: center; padding: 4rem 6rem; }
.slide-heading { font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; color: var(--gray-900); }
.slide-bullets { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.slide-bullets li { font-size: 1.5rem; line-height: 1.4; color: var(--gray-700); padding-left: 2rem; position: relative; }
.slide-bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--brand-500); border-radius: 50%; }

双栏对比

.slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
.slide-col h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--brand-500); }

引言幻灯片

.slide-quote { display: grid; place-items: center; padding: 4rem 8rem; background: var(--gray-50); }
.slide-blockquote p { font-size: 2.5rem; font-weight: 500; font-style: italic; line-height: 1.3; text-align: center; margin-bottom: 1.5rem; }
.slide-blockquote cite { display: block; font-size: 1.125rem; font-style: normal; color: var(--brand-500); font-weight: 600; text-align: center; }

数据／统计幻灯片

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; text-align: center; }
.stat-number { display: block; font-size: 4rem; font-weight: 800; color: var(--brand-500); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { font-size: 1.125rem; color: var(--gray-500); }

图像 + 文字幻灯片

.slide-image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.slide-image-text .slide-image { background-size: cover; background-position: center; }
.slide-image-text .slide-text { display: flex; flex-direction: column; justify-content: center; padding: 4rem; }

---

第 2 步：幻灯片容器（固定 16:9 画布）

在固定的 1280x720 画布上设计每张幻灯片，并将整个画布缩放至屏幕大小。本技能中的所有 rem/px 尺寸均以该画布为基准，因此无论在笔记本电脑、投影仪还是 PDF 页面上，文字比例都能保持一致。

html, body { margin: 0; height: 100%; background: black; overflow: hidden; }
.deck { position: fixed; inset: 0; }
.slide {
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px;
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
  overflow: hidden; font-family: var(--font-body); background: var(--slide-bg, white);
}
.slide-content { padding: 4rem 6rem; } /* Safe margins: keep text out of the outer ~5% */

const fit = () => document.documentElement.style.setProperty(
  '--deck-scale', Math.min(innerWidth / 1280, innerHeight / 720));
addEventListener('resize', fit); fit();

---

第 3 步：每张幻灯片只讲一个观点

每张幻灯片准确传达一个概念。结构：

1. 标题：核心要点（1 行，最多 6-8 个词）
2. 辅助内容：强化标题的视觉元素或 3-4 个项目符号
3. 视觉锚点：图像、图表、图标或数字

删去：长段文字、超过 4-5 个项目符号、繁杂的示意图。拆分或简化内容。

---

第 4 步：演示文稿排版

元素	大小	字重	备注
标题	3-4.5rem	700-800	1 行，最多 2 行
副标题	1.5-2rem	500	补充背景信息
正文	1.25-1.5rem	400	项目符号、描述
说明文字	1-1.125rem	400	署名、细则
统计数字	4-6rem	800	关键指标、大数字

深色背景对比度

.slide-dark { background: var(--gray-900); color: var(--gray-50); }
.slide-dark .slide-heading { color: white; }
.slide-dark .slide-body { color: var(--gray-300); }

演示文稿字体使用 font-display: block，避免现场演示时出现 FOUT。

---

第 5 步：幻灯片数据可视化

CSS 柱状图

.chart-bars { display: flex; align-items: flex-end; gap: 2rem; height: 300px; padding-top: 2rem; margin-bottom: 2.5rem; /* room for .bar-label */ }
.bar { flex: 1; height: calc(var(--value) * 1%); background: var(--brand-500); border-radius: 0.5rem 0.5rem 0 0; position: relative; transition: height 0.6s var(--ease-out); }
.bar-value, .bar-label { position: absolute; left: 0; right: 0; text-align: center; }
.bar-value { top: -2rem; font-weight: 700; font-size: 1.25rem; }
.bar-label { bottom: -2rem; font-size: 1rem; color: var(--gray-600); }

<div class="chart-bars" role="img" aria-label="Revenue by quarter: Q1 40%, Q2 55%, Q3 70%, Q4 90%">
  <div class="bar" style="--value: 40"><span class="bar-value">40%</span><span class="bar-label">Q1</span></div>
  
</div>

CSS 环形图

.donut { --pct: 65%; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--brand-500) 0 var(--pct), var(--gray-200) var(--pct) 100%); display: grid; place-items: center; }
.donut-label { width: 140px; height: 140px; background: var(--slide-bg, white); border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800; }

<div class="donut" style="--pct: 65%" role="img" aria-label="65% of customers renewed"><span class="donut-label" aria-hidden="true">65%</span></div>

如果数据超过一两个系列，请使用真正的图表库（如有，请参阅 dataviz 指南），而不要使用 CSS 图形。

幻灯片图表规则

1. 尽量减少网格线和标签——传达趋势，而非精确数据
2. 突出显示关键数据点（尺寸更大、使用不同颜色并添加标签）
3. 图表标记与幻灯片背景的对比度需达到 3:1（WCAG 1.4.11）；直接标注数值，不要依赖颜色图例
4. 幻灯片进入时为图表元素添加动画效果

---

第 6 步：切换和逐步呈现动画

幻灯片切换效果

.slide { opacity: 0; transition: opacity 0.4s ease; }
.slide.is-active { opacity: 1; }

逐步呈现（项目符号依次显示）

.slide-bullets li { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.slide-bullets li.is-revealed { opacity: 1; transform: translateX(0); }

数字递增动画

@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
.stat-countup { --target: 65; animation: count-up 2s var(--ease-out) forwards; counter-reset: num var(--num); }
.stat-countup::after { content: counter(num) '%'; }
@keyframes count-up { from { --num: 0; } to { --num: var(--target); } }
@media (prefers-reduced-motion: reduce) { .stat-countup { animation: none; --num: var(--target); } }

保持元素为空（数字会自动生成），并设置 aria-label="65%"，因为屏幕阅读器可能会跳过生成的内容，或播报每一帧。

---

第 7 步：演讲者备注

在每张幻灯片内使用 <aside class="notes"> 放置备注——这与 reveal.js 使用的标记相同，因此演示文稿可以在自定义系统和 reveal.js 之间切换。

<section class="slide">
  
  <aside class="notes">Explain the key metric here. Pause for questions.</aside>
</section>

.notes { display: none; }
/* Press N (see Step 8 JS) to show notes as an overlay while rehearsing */
.show-notes .slide.is-active .notes {
  display: block; position: absolute; inset: auto 0 0 0; max-height: 35%; overflow: auto;
  padding: 1.5rem 2rem; background: oklch(0.2 0 0 / 0.92); color: white; font-size: 1.25rem; line-height: 1.5;
}

如需在第二个屏幕上显示真正的演讲者视图，请使用 reveal.js（按 S）。

---

第 8 步：幻灯片框架设置

自定义幻灯片系统（无框架）

使用第 2 步中的画布；非活动幻灯片会通过 inert 隐藏，因此其中的链接无法通过 Tab 键聚焦，屏幕阅读器也只会读取当前幻灯片。

.slide { display: flex; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.slide.is-active { opacity: 1; pointer-events: auto; }

let current = 0;
const slides = document.querySelectorAll('.slide');
function goTo(index) {
  current = Math.max(0, Math.min(index, slides.length - 1));
  slides.forEach((s, i) => { s.classList.toggle('is-active', i === current); s.inert = i !== current; });
  history.replaceState(null, '', '#' + (current + 1)); // deep-linkable
}
document.addEventListener('keydown', (e) => {
  if (['ArrowRight', 'PageDown', ' '].includes(e.key)) { e.preventDefault(); goTo(current + 1); }
  if (['ArrowLeft', 'PageUp'].includes(e.key)) goTo(current - 1);
  if (e.key.toLowerCase() === 'n') document.body.classList.toggle('show-notes');
});
goTo((parseInt(location.hash.slice(1), 10) || 1) - 1);

对于 Reveal.js，请从 CDN 加载，并使用 CSS 变量（--r-heading-font、--r-main-color、--r-link-color）进行自定义。

---

第 9 步：保持品牌一致的模板

.deck {
  --slide-bg: white; --slide-heading-color: var(--gray-900);
  --slide-text-color: var(--gray-600); --slide-accent: var(--brand-500);
  font-family: var(--font-body); /* design-context Body Font; headings use --font-heading */
}
.slide::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--slide-accent); }
.slide-number { position: absolute; bottom: 1.5rem; right: 2rem; font-size: 0.875rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.slide-logo { position: absolute; bottom: 1.5rem; left: 2rem; width: 80px; opacity: 0.3; }

---

第 10 步：结束页 / 行动号召页

问答环节中，最后一张幻灯片停留时间最长。请包含：

1. 明确的下一步 / 行动号召（URL、二维码）
2. 联系方式
3. 可选：用一句话总结关键要点

.slide-closing { display: grid; place-items: center; text-align: center; background: var(--gray-900); color: white; }
.closing-headline { font-size: 4rem; font-weight: 800; margin-bottom: 2rem; }
.closing-link { font-size: 2rem; color: var(--brand-300); font-weight: 600; }
.closing-contact { font-size: 1.125rem; opacity: 0.6; display: flex; gap: 2rem; }

---

快速参考

1. 使用 16:9 宽高比，并留出充足边距（4-6rem）。
2. 每张幻灯片只讲一个观点。将复杂内容拆分成多张幻灯片。
3. 标题：3-4.5rem，最多 8 个词。
4. 正文：至少 1.25-1.5rem（确保坐在教室后排也能看清）。
5. 始终一致地使用品牌色。每张幻灯片最多使用 3 种颜色。
6. 逐步播放动画。不要让所有内容都动起来。
7. 数据可视化：简化内容，突出关键要点。
8. 为每张内容幻灯片添加演讲者备注。
9. 结束页：行动号召 + 联系方式。问答期间保持显示。
10. 在投影仪或大屏幕上进行测试——颜色显示会变淡。

验证和导出

1. 使用 Playwright 以 1920x1080 的分辨率为每张幻灯片截图（遍历 #1…#N，执行 page.goto(url + '#' + n) 和 page.screenshot({ path: 'slide-' + n + '.png' })），并用 Read 查看每张图片。检查：没有文本溢出或被 overflow: hidden 裁切；每张幻灯片只讲一个观点；缩略图尺寸下标题清晰可读；边距和页码位置一致；品牌色正确。
2. 对比度：品牌色和图片背景上的文字必须达到 4.5:1（≥24px 的文字为 3:1）；投影仪会进一步降低对比度，因此目标值应更高。
3. PDF：对于自定义系统，添加 @media print { .slide { position: relative; transform: none; left: 0; top: 0; break-after: page; opacity: 1; } } 和 @page { size: 1280px 720px; margin: 0; }，然后执行 page.pdf({ path: 'deck.pdf', preferCSSPageSize: true, printBackground: true })。对于 reveal.js，先用 ?print-pdf 打开。