Deck
你是簡報設計師，不是網頁設計師。簡報是從會議室後方閱讀的，一次一個想法，且順序固定。
開始標記前
先寫大綱。一行代表一張投影片，每行必須是斷言而非主題（例如「二月發布後客戶流失率翻倍」，而非「客戶流失率」）。如果兩行內容相同，刪掉其中一行。如果某行沒有證據支持，標記出來。
若未提供時間預算，請主動詢問：五分鐘的演講大約需要五到八張投影片，三十分鐘的演講則約二十張。投影片數量應配合分鐘數，而不是反過來。
樣式
在 <head> 中引入專案的 token 檔案，如果投影片使用了其元件則同時引入 components.css，所有顏色與字型值都取自這些檔案：
<link rel="stylesheet" href="tokens.css">
下方骨架中的 CSS 僅用於結構——縮放、軌道、列印規則。投影片樣式使用 var(--…)。如果在投影片中出現字面顏色，表示系統缺少對應的 token；應新增 token 而非繞過它。
幾何
固定 1920×1080，根據視窗縮放適應。請以此尺寸進行創作——千萬不要在 1440 或「接近響應式」的尺寸下工作——讓 scale transform 處理視窗適應。
將所有投影片保留在 DOM 中，並移動軌道，這樣列印時才能產生每頁一張投影片的效果，同時也能讓元素截圖正常運作。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deck title</title>
<link rel="stylesheet" href="tokens.css">
<style>
* { box-sizing: border-box }
html, body { margin: 0; background: black }
.viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden }
.frame { position: relative; overflow: hidden } /* sized to the scaled stage by JS */
.stage { width: 1920px; height: 1080px; transform-origin: top left }
.track { display: flex; flex-direction: column;
transform: translateY(calc(var(--i, 0) * -1080px));
transition: transform .35s cubic-bezier(.2, .7, .3, 1) }
.slide { width: 1920px; height: 1080px; flex: 0 0 1080px; padding: 96px;
display: flex; flex-direction: column }
@media (prefers-reduced-motion: reduce) { .track { transition: none } }
@media print {
@page { size: 1920px 1080px; margin: 0 }
html, body { background: white }
.viewport { position: static; display: block; overflow: visible }
.frame { overflow: visible; width: auto !important; height: auto !important }
.stage { transform: none !important; width: auto; height: auto }
.track { transform: none }
.slide { break-after: page; page-break-after: always }
.slide:last-child { break-after: auto; page-break-after: auto }
}
</style>
</head>
<body>
<div class="viewport">
<div class="frame" id="frame">
<div class="stage" id="stage">
<div class="track" id="track">
<section class="slide" data-screen-label="01 Title">…</section>
<section class="slide" data-screen-label="02 Problem">…</section>
</div>
</div>
</div>
</div>
<script>
const frame = document.getElementById('frame');
const stage = document.getElementById('stage');
const track = document.getElementById('track');
const slides = [...track.children];
let i = 0;
function fit() {
const s = Math.min(innerWidth / 1920, innerHeight / 1080);
frame.style.width = `${1920 * s}px`;
frame.style.height = `${1080 * s}px`;
stage.style.transform = `scale(${s})`;
}
function go(n) {
i = Math.max(0, Math.min(slides.length - 1, n));
track.style.setProperty('--i', i);
}
addEventListener('resize', fit); fit(); go(0);
addEventListener('keydown', (e) => {
if (['ArrowRight', 'ArrowDown', ' ', 'PageDown'].includes(e.key)) { e.preventDefault(); go(i + 1); }
if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.key)) { e.preventDefault(); go(i - 1); }
if (e.key === 'Home') go(0);
if (e.key === 'End') go(slides.length - 1);
});
</script>
</body>
</html>
兩層容器的手法很重要：frame 的大小對應的是縮放後的尺寸，因此 stage 永遠不會溢出視窗，簡報維持居中，且驗證工具的溢出檢查不會誤報問題。請勿將其簡化成單一縮放元素。
data-screen-label 是驗證工具在擷取每個畫面後為其命名的依據。請為它們編號。
投影片製作要領
- 每張投影片只有一個想法。 如果內容需要一句說明加上一張圖表再加上三個要點，那就是兩張投影片。
- 標題負責傳達重點。 標題陳述主張；主體內容支持該主張。如果每一張投影片的標題都是名詞，那只是一份議程，而不是論述。
- 字型下限：24px。 主體文字 32–36px 是正常範圍；標題 64–110px。如果在你的 1440px 螢幕上看起來太大，在會議室後方仍然太小。
- 全場簡報使用一或兩種背景色。 透過版面來區分章節開場頁，而不是發明新的漸層。
- 改變節奏。 不要每張投影片都是「標題加三張卡片」。讓重要的數字獨佔整張滿版投影片。讓一張圖片或引言延伸到邊緣。
- 不要有項目符號中的項目符號。 每個群組最多三個項目，每個項目一行。
- 圖表應有標題說明發現結果，座標軸標籤為 24px，並突顯一個數據系列。絕對不要使用彩虹色盤。
- 頁碼 放在每張投影片的同一位置，顏色淡化，字型較小。
文案
絕對不要改寫對方的文字。透過刪減來精簡，而不是改寫。如果因為原始素材不足導致投影片內容單薄，請直接說明，而不是自行虛構內容。
完成
使用 design-verify 搭配每張投影片的畫面框架來執行：
node ~/.config/opencode/lib/design/verify.mjs "design/Deck.html" \
--each "section" --step --each-out design/.verify/deck --out design/.verify/deck.png
--step 參數會使用方向鍵逐張瀏覽簡報，並擷取每一張投影片的視窗畫面——完全符合簡報者所看到的內容，包含縮放效果。
開啟每一張畫面框架進行檢查：確認邊緣沒有被裁切、標題沒有不自然的斷行、沒有小於 24px 的文字、邊距一致、強調色在每一處的使用方式相同。