kami-landing
產生一份 kami（紙） 設計系統的單頁文件。 美學借鏡編輯印刷、技術白皮書和老式打字機信件 — 目標是 好紙上的好內容，而非 現代應用程式 UI。
設計系統事實來源：
design-systems/kami/DESIGN.md。 交付前請務必閱讀。權杖、字體規則、「十大不變法則」和禁止色都定義於此。
你會得到什麼
一個單一、自包含的 HTML 檔案，包含：
- 溫暖的羊皮紙畫布（
#f5f4ed） — 絕不使用#ffffff。 - 單一強調色調 — 墨藍色（
#1B365D），用於章節編號、標題強調字、宣言左側線條和指標數值。其他任何地方，墨藍色覆蓋面積必須 ≤ 文件表面積的 5%。 - 單一字重 (500) 的襯線字體用於層級 — 英文用 Charter，中文用 TsangerJinKai02 / Source Han Serif，日文用 YuMincho，由
language參數選擇。任何地方都不要使用斜體。 - 緊湊的印刷節奏 — 行高 1.10–1.55，依語言設定字距（英文 0，簡體中文 0.35px，日文 0.02em）。
- 數字堆疊使用
font-variant-numeric: tabular-nums，讓指標欄位和分頁數字能整齊對齊。 - 透過 1px 環線和輕微陰影營造深度（
0 4px 24px rgba(0,0,0,0.05)）。無硬式下拉陰影、無新同態、無 backdrop-filter 模糊。 - 標籤填充使用純色十六進位值（例如
#E4ECF5），絕不使用rgba()— 列印渲染器會雙重繪製 alpha 標籤。 - 響應式，支援 1280 / 980 / 768 / 560 解析度。
頁面結構
1. 眉列 — 地區切換器 · 版本 · 版次（12px 無襯線大寫）
2. 主視覺 — 顯示標題（96–106px 襯線 500）、標語（21px）、
三個主視覺標記晶片（紙色調背景）
3. 宣言 — 引用段落，襯線 400，20px，行高 1.65，帶有
墨藍色左側線條和簽名頁尾
4. 指標列 — 3-6 個區塊：數值（24px 襯線 500 墨藍色，tabular-nums）、
標籤（12px 襯線 500 橄欖綠）
5. 章節 — 編號（`01`、`02`、…）墨藍色襯線 500 14px，
章節標題 28-32px，內文 14-15px
6. 頁尾 — 引導字（大型襯線 500），授權 · 年份 · 聯絡資訊，
三欄站點索引，12px 襯線 500
工作流程契約
1. 收集品牌簡報
使用 AskQuestion（或等效方式）逐步收集品牌簡報。不要一次將所有輸入清單丟給使用者；分兩輪詢問：
- 身份輪 — 名稱、標語、地點、版本／版次、主要 URL、主要語言。
- 內容輪 — 宣言段落 + 簽名、3-6 個指標方塊、3-5 個章節（標題 + 導言 + 內文）條目。
2. 選擇語言堆疊
language 參數控制 :root 上設定的 --serif 堆疊。根據宣言和章節內文的主要語言來選擇：
language | --serif | 注意事項 |
|---|---|---|
en | Charter, Georgia, Palatino, Times New Roman, serif | 預設值 |
zh-CN | TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia | 內文字距 0.35px |
ja | YuMincho, Hiragino Mincho ProN, Source Han Serif JP | 同時將 --olive 覆寫為 #4d4c48（YuMincho 筆劃較細） |
混合腳本內文沒有問題 — 瀏覽器的逐字元後備鏈會處理它。不要將三個字體家族串聯在一個 font-family 宣告中；這會稀釋字元特性。
3. 撰寫 index.html
輸出一個包含所有內嵌 CSS 的單一檔案。模仿 example.html 的結構，並且僅使用 design-systems/kami/DESIGN.md 中的權杖。不要發明新的顏色、字重或字體家族。
AI 可以直接套用的元件基本元素（全部定義在範例的 <style> 區塊中）：
.eyebrow、.label— 無襯線上方線.metric— 數值 + 標籤垂直配對.section-num+.section-title+.section-lede.tag.standard、.tag.brush— 純色十六進位標籤（每頁最多一個 brush）.quote— 左側線條襯線 500 引言ul.dash— 墨藍色破折號項目符號.code— 象牙白背景、1px 邊框程式碼區塊.footer-kicker— 大型襯線 500 字
為每個可編輯元素標記 data-od-id="<unique-slug>"，以便主機應用程式的評論模式可以定位它。
4. 交付前自我檢查
- 頁面背景是羊皮紙色（
#f5f4ed），絕不使用#ffffff。 - 墨藍色（
#1B365D）覆蓋可見表面積 ≤ 5% — 計算章節編號、宣言規則、指標數值、標題強調字。總計 ≤ 5%。 - 所有灰色都是暖色調（R ≈ G > B）。無
slate-*，無#f3f4f6。 - 襯線字重保持在 500 — 襯線文字上無
font-weight: 700或900。 - 任何地方都沒有
font-style: italic。強調改用墨藍色或.tag取代。 - 所有數字堆疊（指標數值、分頁、日期、財務數字）都帶有
font-variant-numeric: tabular-nums。 - 所有標籤填充都是純色十六進位值（例如
#E4ECF5），絕不使用rgba()。 - 陰影：最多一個
1px環線或一個0 4px 24px rgba(0,0,0,0.05)的輕微陰影。無硬式下拉陰影。 - 顯示尺寸下的標題 ≤ 6 個單字；CJK 標題 ≤ 8 個字元。
- 在 768px 和 560px 解析度下，版面會摺疊為單欄，且無水平捲動。
此技能包含的檔案
design-templates/kami-landing/
├── SKILL.md # 此契約
├── README.md # 人類快速入門
└── example.html # 標準 SplatStudio 渲染
界線
- 不要發明新的顏色或字體。kami 調色板是固定的；如果簡報要求品牌色，請拒絕，或將品牌色渲染為單一的
.tag.brush強調。 - 不要引入第二個強調色。選擇墨藍色，或什麼都不選。
- 不要在一個宣告中混合所有三個字體堆疊；選擇主導語言，在
:root上覆寫--serif，然後讓瀏覽器逐字元後備鏈來解析混合腳本內文。 - 不要對標籤填充使用
rgba()— 列印渲染器會雙重繪製 alpha 標籤。使用design-systems/kami/DESIGN.md§2 表格中預先混合的純色十六進位值。 - 不要為了動畫效果加入 JavaScript。頁面是紙，不是應用程式 — 動感屬於閱讀者的滾動。
參見
design-systems/kami/DESIGN.md— 完整的權杖規格。design-templates/kami-deck/— 姐妹技能，用相同的 kami 語言產生投影片組。- 上游來源：
tw93/kami— 設計系統改編自的原始 Claude 技能 (MIT)。