簡報投影片組（Slide deck）
一份 deck 是一個小型的 React 專案，用於呈現 1920x1080 的投影片，並搭配一條管線將它們轉換為原生的 PowerPoint（可編輯文字、備忘稿）、PDF 及講稿。starter/ 是一個完整可運作的範例（12 張越南語投影片、藍色主題、每種構圖各一例）。複製它、替換內容、維持系統結構。
開始之前，請先從簡報中讀取三項資訊：聽眾是誰（除非另有說明，否則假設沒有先備知識）、簡報時間長度、以及講者自己的綱要內容。講者的綱要決定順序與內容。你的任務是清晰與美觀，而非提出新的主張。
1. 開始
cp -R "<此技能資料夾>/starter" "<專案>/<deck-name>"
cd "<專案>/<deck-name>/deck" && npm install && npx playwright install chromium
npx vite # 開發伺服器，埠號在 vite.config.ts 中
然後設定名稱：tools/deck-name.txt（PPTX 與 PDF 的檔名）、deck/index.html 的標題、deck/script-doc.mjs 的標題、deck/src/deck/types.ts 中的章節名稱（ACTS），以及 Chrome 組件（deck/src/deck/Deck.tsx）中的頁尾文字與標誌。如果另一個 deck 正在執行，請在 deck/vite.config.ts 中選用一個空閒的埠號。
專案佈局：
deck/src/slides/*.tsx：每張投影片或群組一個檔案，順序由index.ts決定。每個檔案匯出一個SlideDef（id、title、act、minutes、notes、Component）。deck/src/ui/atoms.tsx：共用元件：Bg、Header、HaloArt/Art、Feature（高亮面板）、IconTile、Stat、Source、LogoTile、AppIcon。Links.tsx繪製帶有緩慢移動的點的連線。World.tsx是使用真實國家形狀的點狀世界地圖。deck/src/index.css：存放顏色代碼。透過更改--accent、--accent-ink、背景值及 rgba 色調來重新佈置主題，而不是新增第二個主題。tools/：藝術生成、建置、發布。
2. 內容規則（依業主修正頻率排列）
- 遵循講者的文件。 章節順序、定義的措辭以及每個數字都來自於它。如果綱要只有標題，請從主要來源添加最少內容，在
Source中連結它，並告知業主你填補了哪些投影片。切勿呈現清單中不支援的數量（例如一個清單宣稱有 30 個名字，但實際上只有 28 個：顯示清單、省略數字、回報狀況）。 - 標題極簡單。 標題要以聽眾已經使用的詞彙來命名投影片："5 cách thu thập dữ liệu xuyên biên giới"、"Yêu cầu trong tình huống khẩn cấp"。巧妙或壓縮的句子會被退回。一行，大約 66 像素時不超過 40 個字元；後半部分使用強調色。
- 最少文字，白話語言。 每張卡片一個想法，幾行簡短的句子。常見的英文術語放在括號中或作為小的第二行（"service provider"）。使用數字，而非數字文字。標題上方沒有小標籤，沒有冒號或中間點作為裝飾，沒有促銷用語。
- 翻譯所有內容 從來源 deck 翻譯成聽眾的語言；保留專有名詞和官員會遇到的英文術語。
- 講者備忘稿承載完整文字。 投影片保留簡短形式；備忘稿保留綱要中的講者完整句子，確保不遺漏任何內容。將
minutes加總並與時間段比對，報告超時情況。 - 真實組織的真實標誌（官方檔案，絕不生成仿製品）；在
assets/logos-src/SOURCES.md中記錄每個標誌的來源。業主要求的組織標誌要放在每張投影片的Chrome中，在標題與結尾投影片上放大顯示。 - 背景事實查核。 派送一個研究 agent 來查核你添加的事實（日期、條文編號、法律編號、計數），並將結果寫入
docs/facts.md，每項附上 URL。如果講者自己的數據與公開來源不同，保留講者的數據並回報差異。
3. 圖像
每張內容投影片都有插圖。僅圖標的投影片曾被認為無趣。小型 lucide 圖標僅在投影片同時有插圖時，可作為行標記使用。
- 單一系列：由扁平色面構成的緊湊偽 3D 物件，無漸層或發光效果，單一色系加上一個小小的黃色標記。樣式參考圖表為
assets/ref/blue-indicators.png和green-indicators.png。圖表上的每個圖塊本身必須是扁平的：一個有光澤的圖塊會引導新圖像走向漸層。若要換色，重新給圖表上色作為起點（tools/blue_ref.py），更改tools/art.mjs中的色盤行，生成第一批圖像，然後從你自己最好的 16 個結果重建圖表，之後就使用這個新圖表（藍色圖表就是這樣製作的）。 - 每張圖片在
tools/art-list.tsv中添加一行（name<TAB>concept）。一個 concept 是一個清晰的物件，最多兩個輔助細節，不含文字："a sealed envelope with a padlock on its flap and a small crossed-out eye badge"。 P=4 bash tools/art-batch.sh使用 Codex CLI 的圖像工具生成缺少的圖片（每張約 80 秒；需要安裝並登入codex，模型在tools/art.mjs中設定）。在背景執行它並繼續撰寫投影片。有些執行會靜默失敗：完成時，檢查每個名稱是否存在，並為缺少的名稱再次執行。docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py將它們裁剪成deck/public/art/*.webp。使用<HaloArt name="..." size={...} />。- 敏感主題（兒童傷害、自殺、恐怖主義）使用保護性符號：雨傘、盾牌、救生圈、警告標誌。
- 地圖來自
World.tsx（真實形狀），絕不使用圖像模型。圖表（維恩圖、流程圖、中樞圖）使用 SVG 寫在投影片中。
4. 構圖：相鄰兩張不相似
一個所有投影片都是等寬卡片行列的 deck 曾被退回（"每張投影片佈局過於相似"）。給予每張投影片與其內容相符的形狀。starter 中有每種構圖的一個範例：
| 內容 | 構圖 | Starter 投影片 |
|---|---|---|
| 少數依序的部分 | 沿著一條路徑上升的步驟，大型模糊數字 | s02-agenda.tsx |
| 一個統括概念加上其他幾個 | Bento：一個高大的高亮圖塊加上 2x2 | Terms in s03-terms.tsx |
| 一個流程 | 管線：在一條線上的編號站點，流入結果面板 | s05-preserve.tsx |
| 通往同一事物的多種方式 | 中樞與輻條 | s06-channels.tsx |
| 具有相同屬性的平行種類 | 全寬行：圖片、問題、名稱、內容 | DataTypes in s03-terms.tsx |
| 帶有一個警告的選項 | 圖塊網格加上一個 Feature 面板 | Emergency in s08-requests.tsx |
| 一連串的交接 | 帶有箭頭的節點流程（Link from ui/Links.tsx） | starter 中無 |
| 兩種替代方案 | 兩個寬面板 | starter 中無 |
| 具有共享核心的重疊區域 | 維恩圖，引導線上的標籤 | Directorate in s11-venn.tsx |
| 地點 | 帶有圖釘或亮起國家的點狀地圖，旁邊有清單 | s17b-map-list.tsx |
| 一個中心加上四個功能 | 中央的圓盤，角落的項目 | AspDesk in s14-corners-bridge.tsx |
| 兩側及其間傳遞的內容 | 橋：兩岸，之間的車道 | Gateway in s14-corners-bridge.tsx |
| 證明一個觀點的數字 | 帶有 Stat 的 Feature 面板 | starter 中無 |
當講者自己的投影片有圖表構想（維恩圖、地圖旁的清單）時，保留意圖與內容並重新繪製；不要保留她的樣式。
5. 文字工藝（以下每一項都曾是遭退回的螢幕截圖）
- 沒有文字跳動。 在一組卡片中，相同元素在每張卡片中從相同高度開始。讓標題行數相同（改寫，或給予每個標題兩行），然後將其餘內容直接堆疊在其下方。無空槽位，無
margin-top: auto在標題與其文字之間產生空隙。 - 按意義斷行。
.slide設定為white-space: pre-line；在短語末尾寫入\n："Chuỗi bảo quản\nchứng cứ"，絕不寫成 "Chuỗi bảo\nquản chứng cứ"。保持每個手動斷行夠短，使瀏覽器不再對其換行；如果換行，則縮短該行或加寬方塊。名稱清單也需手動斷行（非斷行空格破壞了 PowerPoint 的相容性）。 - 每行一個尺寸。 一個大數字及其單位是兩個區塊（
Stat）；引導描述的重點詞自成一行。 - 邊距。 內容保持在左、右 120 px 內，並避開標誌條（頂部 30 到 98 px）。檢查地圖和圖表上的標籤是否與右邊緣接觸。
- 投影片完全開啟。 無入場動畫；最多一次點擊揭示，僅在揭示是重點時使用。環境動態（流動的點、標題背景）是可以的。
- 除非要求，否則投影片上不顯示進度或章節編號小工具；頁尾欄位就足夠了。
6. 建置與檢查
zsh tools/release.sh # 約 5 分鐘：release/ 中會產生 Deck/（網頁版）、.pptx、.pdf、Kich-ban-trinh-bay.pdf
發布流程會透過 Microsoft PowerPoint 重新儲存檔案，以便嵌入字型。它會先關閉 PowerPoint：檢查是否有未儲存的內容，並且它在 /tmp 中取得一個鎖定資料夾，以避免兩個工作階段同時重新儲存。在沒有 PowerPoint 的 Mac 上，跳過 tools/release.sh 中的該步驟；deck 仍然可以開啟，但字型必須安裝在簡報用的電腦上。
檢查是每輪工作的必要部分：
cd deck && npx vite build && node export.mjs ../tmp/export將每張投影片渲染到tmp/export/sNN.png。- 以全尺寸檢視每張投影片，一次一張（縮小到 1600 px 寬）。縮圖會隱藏換行、觸碰邊界的文字以及未對齊的行列。檢查內容：你是否未手動斷行卻發生換行、文字靠近或超出邊緣、標題觸碰標誌、卡片間起始位置不一致、缺少圖片（空的輪廓方塊）、重疊的標籤。
- 發布後，檢視
tmp/lo/p-NN.png（由 LibreOffice 佈局的 PowerPoint）中你更改的投影片。這是溢出文字方塊顯現的地方。LibreOffice 渲染的字型寬度略大於 PowerPoint，因此那裡的接近失誤是真正的風險。 - 修正、重建、再次檢視。清楚說明你檢查了什麼以及你沒有檢查什麼。
然後將 release/ 複製到桌面上一個命名的資料夾中，在 localhost 上提供 release/Deck 服務（docker run -d -p 127.0.0.1:<port>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine），並在被要求時開啟該資料夾。
7. 報告
首先說明哪些部分已準備就緒及其位置。然後列出需要業主或講者決策的事項：任何你在綱要之外添加的內容、你保留但與來源矛盾的數據、任何加總不起來的計數、以及與時間段相比的實際時間。使用平實的語言，不要使用檔案或函式名稱。