技能概述
Kami（紙 / 纸）設計系統產生一個打印級嘅單頁文檔。美學借鑒編輯印刷、技術白皮書同舊式打字機通信 —— 目標係「好內容配好紙」，而唔係「現代 app UI」。支持多語言（EN · zh-CN · ja），單一自包含 HTML 文件，零依賴。
設計系統來源：design-systems/kami/DESIGN.md，包含 token、類型規則、「十大不變式」同禁用顏色。
觸發關鍵字
- kami、紙、paper one-pager、白皮書、white paper
- parchment landing、editorial document、print-grade page
- kami landing
什麼時候用
- 需要一份打印風格嘅品牌一頁紙
- 技術白皮書、工作室簡介、研究摘要
- 用戶要求「白皮書風格」、「打印級頁面」、「紙質感」
- 需要多語言支持（中英日）
使用方法
自然語言觸發
做一個 kami 風格嘅一頁紙
白皮書風格 landing page
用 kami 技能做 print-grade 頁面
工作流程
1. 收集品牌簡報
分兩輪收集：
- 身份輪 — name, tagline, location, edition/version, primary URL, dominant language
- 內容輪 — manifesto paragraph + signature, 3-6 metric tiles, 3-5 chapter entries
2. 選擇語言棧
language |
--serif |
說明 |
|---|---|---|
en |
Charter, Georgia, Palatino | 默認 |
zh-CN |
TsangerJinKai02, Source Han Serif SC | letter-spacing 0.35px |
ja |
YuMincho, Hiragino Mincho ProN | 同時覆蓋 --olive 為 #4d4c48 |
3. 編寫 index.html
單一文件，所有 CSS inline。
頁面結構
- Eyebrow 行 — 語言切換器 · edition · version（12px sans 大寫）
- Hero — 展示標題（96–106px serif 500）、tagline（21px）、3 個 hero-token 芯片
- Manifesto — 襯線 400、20px、1.65 行高，墨藍色左邊框 + 簽名
- Metrics 行 — 3-6 個單元格：value（24px serif 500 墨藍色，tabular-nums）、label（12px serif 500 olive）
- Chapters — 編號（
01、02...）墨藍色襯線 500、標題 28-32px、正文 14-15px - Footer — kicker 詞（mega serif 500）、license · year · contact、3 列站點索引
設計規則
- 畫布： 暖羊皮紙色（
#f5f4ed），絕唔可以用#ffffff。 - 單一色彩強調： 墨藍色（
#1B365D），用於區塊編號、標題強調詞、manifesto 左邊框、metric 值。墨藍色覆蓋 ≤ 5% 表面積。 - 單一權重（500）襯線： Charter（EN）、TsangerJinKai02（CN）、YuMincho（JA）。無處使用斜體。
- 打印節奏： 行高 1.10–1.55，字距按語言。
- 數字用
tabular-nums：確保 metric 列對齊。 - 深度來自 1px 環 + 輕柔陰影（
0 4px 24px rgba(0,0,0,0.05)）。 - 標籤填充用純色 hex（如
#E4ECF5），唔好用rgba()。
禁止事項
- 發明新顏色或字體。
- 第二強調色。
- 三種字體棧混入同一聲明。
rgba()用於標籤填充。- JavaScript 動畫。頁面係紙，唔係 app。
- 純白
#ffffff背景。 font-style: italic。font-weight: 700或900於襯線文本。
自檢清單
- 頁面背景係羊皮紙色（
#f5f4ed） - 墨藍色覆蓋 ≤ 5% 表面積
- 所有灰色係暖色（R ≈ G > B）
- 襯線權重保持在 500
- 無
font-style: italic - 所有數字棧帶有
tabular-nums - 所有標籤填充用純色 hex
- 標題 ≤ 6 詞（展示尺寸）；CJK ≤ 8 字符
- 768px 同 560px 單列無水平滾動
實際例子
用戶：「Build me a kami-style one-pager for 'Lumen Field', an indie studio shipping a soundscape app for focus. Hero headline 'Soundscapes for focused work.', 3 metric tiles (12 soundscapes / 4 presets / 1 daily ritual), English-language stack.」
生成結果：
- Hero：「Soundscapes for focused work.」Charter 500、96px
- Manifesto：一段宣言 + 簽名「by Lumen Field, Berlin」
- Metrics：12 soundscapes / 4 presets / 1 daily ritual
- Chapters：3 個編號章節