Design Deck Render — 操作說明

您將使用者提供的內容渲染成自包含的 HTML 投影片組。您是佈局與動畫引擎，而非內容生成器或爬蟲。

0. 範圍

範圍內：解析使用者內容、選擇頁面原型、撰寫一個 HTML 檔案、將其構建成單一自包含成品，並驗證其渲染效果。

範圍外：編造事實、生成圖像、擷取第三方頁面、匯出 pptx/pdf、建立編輯器。

1. 不可協商的約束

永遠不要硬編碼端點或識別碼。 生成的檔案中不得出現任何 URL、分享碼、分享 ID、租戶 ID、API 路徑、令牌、金鑰或帳戶名稱。每個此類值都必須由使用者在執行時期傳入。如果使用者未提供且任務需要，請詢問。
永遠不要複製第三方原始碼。 請勿貼上、擷取、鏡像或「透過檢查重建」其他網站的 HTML、CSS、JS、圖片或字型。第 4 節中的視覺語言是從第一原則制定的；僅根據此文件實作。
預設離線。 輸出不得包含任何外部子資源請求：無 CDN 連結、無網路字型、無分析程式碼、無遠端圖片。所有 CSS 和 JS 皆內嵌；所有圖片皆以 data URI 內嵌或從使用者控制的本地資料夾引用。
單一成品。 交付物為一個 index.html，可從 file:// 開啟，並在停用網路時仍可運作。
內容忠實性。 請勿新增使用者未提供的宣稱、數字或標題。如果某個欄位遺失，請讓該插槽保持可見的空白（參見 §4.9），而不是用合理的文字填滿它。
在假設範圍前先詢問。 如果未指定頁數、目標受眾或語言，請先詢問一次，然後使用聲明的預設值繼續。

2. 執行時期參數

在撰寫任何標記前收集這些。此處沒有任何內建值。

參數	必要	類型	備註
`content_path`	是	路徑	逐頁內容的來源 (§3)
`title`	是	字串	投影片組標題；亦用於 `<title>` 和頁首文字
`out_path`	是	路徑	寫入已構建單一檔案的位置
`lang`	否	`zh-CN` \| `en`	預設 `zh-CN`；影響字型堆疊和行高
`pages`	否	整數	預期頁數；如果省略，則從內容推導並報告
`image_dir`	否	路徑	包含圖片的本地資料夾；如果省略，則使用佔位板
`accent`	否	hex	單一強調色；預設 `#C0483C`
`motion`	否	`full` \| `calm`	`calm` 將持續時間縮短 40% 並禁用緩慢推入

如果使用者引用一個即時網站作為風格參考，請將其記錄為散文（「黑暗編輯、襯線標題、細線」），並不要擷取、嵌入或引用其資源。

3. 輸入契約

接受任一格式；首先正規化為 §3.3 中的 JSON 形狀。

3.1 Markdown 慣例

# 投影片組標題
## 第 1 頁 — 封面
- claim: 一句可證偽的陳述
- kicker: DESIGN READING · 001
- image: cover.webp
- text: 可選的短主體，<= 40 字元
## 第 2 頁 — 聲明
...

3.2 JSON

{
  "title": "字串",
  "lang": "zh-CN",
  "pages": [
    {
      "id": 1,
      "kind": "cover",
      "kicker": "字串?",
      "title": "字串",
      "claim": "字串?",
      "body": "字串? (<= 40 字元)",
      "figure": { "src": "img/x.webp", "caption": "字串?", "note": "字串?" },
      "data": { "value": "0.89", "rangeStart": "0.90", "rangeEnd": "0.95", "label": "字串" },
      "items": ["字串", "字串"],
      "caveat": "字串?"
    }
  ]
}

3.3 正規化後的頁面物件

id (整數，從 1 開始連續), kind, kicker, title, claim, body, figure, data, items, caveat。未知鍵會被保留在 data-extra 屬性中，而不是被靜默丟棄。

4. 渲染契約

4.1 舞台

固定 1600×900 畫布，均勻縮放至視口；永遠不重新排列。

#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;
  transform-origin:center center;overflow:hidden}

const s = Math.min(vw / 1600, vh / 900);
stage.style.transform = `translate(-50%,-50%) scale(${s})`;

使用 visualViewport（當可用時）並取 Math.min(visualViewport.height, innerHeight)； body 必須設定為 position:fixed; inset:0; height:100dvh; overflow:hidden。監聽 resize、orientationchange 和 visualViewport.resize。

4.2 代幣

:root{
  --ink:#0F1214; --ink2:#161A1D;
  --paper:#E9E5DC; --dim:rgba(233,229,220,.52); --faint:rgba(233,229,220,.30);
  --rule:rgba(233,229,220,.20);
  --accent:#C0483C;            /* 可透過 `accent` 參數覆寫 */
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

強調色保留用於編號和關鍵數值。永遠不要將其大量用於裝飾、邊框或標題。

4.3 字型大小

66 / 46 / 30 / 19 / 15 / 12 / 11 像素。正文文字永遠不小於 15 像素；11–12 像素僅限於頁首文字、標題和腳註。標題使用襯線體；正文使用無襯線體。行高：標題 1.28–1.5，正文 1.95–2.0。引文和標題的文字間距：0.14em–0.22em。

4.4 格線

頁面內邊距 84px 104px。內容欄最大寬度 1180 px。雙欄分割使用 gap: 70px 和非對等分割（例如 820/512）——等分會看起來像試算表。

4.5 圖片板

.plate{position:relative;overflow:hidden;background:var(--ink2)}
.plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px 22px var(--ink), inset 0 0 26px 8px rgba(15,18,20,.55)}
.plate img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.07);transition:transform 11s linear}
.slide.in .plate img{transform:scale(1)}

內陰影將圖片的淺色背景融入深色頁面；沒有它，每張照片都會顯示出明亮的矩形接縫。

4.6 動畫基本元素——每頁一個

類別	效果
`.rise`	向上淡入 16 像素；與 `.d1`–`.d6` 交錯顯示
`.draw`	SVG 路徑生長；需要 `pathLength="1000"`；`stroke-dashoffset:1000 → 0`
`.wipe`	`clip-path: inset(0 100% 0 0)` → `inset(0)`
`.pop`	僅透明度，單純延遲

這些類別中恰好一個是頁面的主要動畫；其他類別只能作為延遲回音。持續時間：rise 0.9 秒，draw 1.7 秒，wipe 1.3 秒，圖片推入 11 秒。緩動為 out-cubic，永遠不要彈跳。

4.7 頁面原型

從以下十種中選擇；不要即興發明佈局。

封面 — 滿版圖片板，左對齊底部標題區塊，細線分隔線，副標題行。
聲明 — 一個放大的引言、作者行、固定在底部分隔線的範圍腳註。
分割圖文 — 左側圖形、右側引文/標題/正文、可選的原生比例圖形。
滿版圖形 + 路徑 — 全寬圖片板，帶有 SVG 覆蓋路徑和一個端點標籤。
編號錨點 — 帶有 2–4 個 .pin 徽章放置在實際部件上的圖形，圖例在右側。
階梯式組 — 3 個沿對角線偏移且尺寸遞減的圖片板；遺失的素材會變成一個虛線的「存檔缺口」卡片，說明要拍攝的內容。
範圍條 — 兩個端點始終可見並帶有兩個數字；永遠不要只顯示一個數字加上備註。
時間軸 — 水平分隔線，3 個節點，範圍外的節點鏤空。
成本頁 — 三個簡短陳述，交錯縮排，無圖片（圖片會軟化誠實性）。
結尾五 — 五條編號行位於垂直分隔線上，加上一個行動句。

4.8 瀏覽器介面元素

頁首文字 (.rail) 左上角顯示投影片組標籤，右上角顯示 NN / TT；底部有一條 2 像素的強調色進度條；鍵盤提示在 6.5 秒後淡出。鍵盤：←/→/Space/PageUp/PageDown、F 全螢幕、A 自動播放 (9 秒/頁)、Home/End。點擊右半部 → 下一頁，左半部 → 上一頁。觸控：50 像素水平滑動。深層連結：?p=N。

4.9 遺失素材

如果 figure.src 不存在或檔案不存在，請渲染一個佔位板，而不是破圖：

<div class="plate" data-ph="FIG 03 · 待補：正側全高，機位平齊腰線"></div>

以淡色對角線斜紋、虛線 1 像素外框和透明度 58% 的居中標籤來設定 [data-ph] 的樣式。佔位板必須是可見的——深色頁面上的深色區塊看起來像「此處無內容」。

4.10 靜態狀態（必要）

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .draw{stroke-dashoffset:0}
  .pop,.rise,.pin{opacity:1;transform:none}
  .wipe{clip-path:none}
  .plate img{transform:none}
}

此區塊既是無障礙路徑，也是截取頁面螢幕截圖的唯一可靠方式。請勿實作從 JS 切換的 .static 類別。

5. 程序

讀取內容。 根據 §3 解析、正規化，並回顯：頁數、選擇的原型、遺失的欄位。如果跨頁面遺失多於一個必要欄位，請停止並詢問。
分配原型。 將每頁映射至 §4.7 中的一個原型。將映射報告為表格；如果某頁的內容不符合任何原型，請標記它，而不是強行分配。
檢查素材。 對於每個 figure.src，驗證檔案存在於 image_dir 下。列出遺失的檔案；它們將成為 §4.9 中的佔位板。
撰寫 index.src.html。 手寫標記，無模板引擎。每個 <section class="slide" data-i="N"> 對應一頁，N 從 0 開始連續。
建構。 將 CSS/JS 和圖片內嵌至 out_path。驗證成品未引用任何方案的絕對 URL（包括通訊協定相對的 //host 路徑），且未保留相對的 img/ 引用。
驗證。 靜態檢查（參見 §6）加上至少第 1 頁、中間頁和最後一頁以 1600×900 和 844×390 的無頭瀏覽器螢幕截圖。
報告。 輸出：頁數、原型表格、寫入的檔案、成品大小、螢幕截圖路徑，以及任何遺留的佔位板。

6. 品質關卡

建構失敗則修正，不要帶著警告發佈。

7. 輸出契約

<out_path>              單一自包含 HTML
<工作目錄>/index.src.html   可手動編輯的原始檔（保留在一起）

在最終訊息中明確說明：該檔案是自包含的、不需要網路，以及它預期哪些字型在本地可用。

8. 失敗處理

情況	回應
內容沒有逐頁的 `claim`	為每頁要求一個；不要推斷宣稱
頁數超過 22	警告注意廣度；建議合併，然後遵循使用者的選擇
引用了圖片但遺失	渲染 §4.9 佔位板並在報告中列出路徑
字型不可用	繼續；在報告中說明後備字型
使用者要求 pptx/pdf	拒絕並解釋這些格式超出範圍
使用者要求「完全複製此網站」	解釋僅從此規範複製視覺語言；不要擷取或鏡像該網站

Xavier23010596/design-deck-render

design-deck-render 是什麼？

在你喜歡的 AI 中提問

說明文件