Kami紙
好內容，值得好版面。Kami 是一套適合 AI 時代的排版設計系統，讓文件更清晰好讀，也容易記住。
00 · See it
輸出樣本
把文件需求交給 Claude。無論是一頁紙、長文、正式信件、作品集、履歷還是簡報，Kami 都用少量清晰規則，把提示詞變成可交付的排版。同一份 brief 也能 交給繪圖模型，README 裡附了樣圖和可複製的提示詞。
Equity Report · 中文
Tesla Q1 2026 財報點評
Resume · English
創辦人履歷，2 頁
作品集 · 日本語
Kaku 終端作品集（日文版），7 頁
Slides · English
Agent keynote, 6 slides
Landing Pages
用 Kami 搭建
同一套落地頁範本用於三款不同產品，一組約束規則，三種截然不同的用途。
Kami
設計系統主頁
Luo 落文
CJK 閱讀字體
Mole 鼴
macOS 系統工具
01 · Usage
安裝與調用
直接告訴 Claude 你要什麼，比如「幫我排版一份白皮書」「做一份履歷」「幫我做一份作品集」，skill 會自動觸發，無需斜線命令。
# Claude Code npx skills add tw93/kami -a claude-code -g -y # Codex npx skills add tw93/kami -a codex -g -y
Claude Code 外掛市場安裝在 2.1.136-2.1.138 暫時受上游根目錄 skill 路徑校驗影響；修復前請使用上面的 Claude Code 命令。
Claude Desktop：下載 kami.zip，在 Customize > Skills > "+" > Create skill 中直接上傳。
02 · Manifesto
設計原則
暖米紙底，油墨藍點綴，serif 承擔層級，硬陰影與花俏配色都退後；這套系統面向印刷文件，負責把內容收束成穩定、清晰、易讀的版面。
- 1
頁面背景 parchment
#f5f4ed，不用純白 - 2
強調色只有油墨藍
#1B365D，不引入第二種彩色 - 3
所有灰色暖調 (yellow-brown undertone)，禁止冷藍灰
- 4
英文 serif 通吃標題和正文，中文標題用 serif、正文用 sans
- 5
Serif 正文 400，標題 500，不用合成 bold
- 6
行距三檔：緊湊標題 1.1-1.3 / 密排 1.4-1.45 / 閱讀 1.5-1.55
- 7
Tag 背景必須實色 hex，禁止 rgba（WeasyPrint 雙層矩形 bug）
- 8
陰影只用 ring 或 whisper shadow，不用硬 drop shadow
03 · Color
暖調克制
唯一強調色、純暖調中性灰、零冷色；油墨藍全文件不超過 5% 面積，超過就從克制變成堆砌。
畫布 · Canvas
Parchment
頁面底色，也是整套設計的溫度來源
#F5F4EDIvory
卡片 · 浮起容器
#FAF9F5Warm Sand
按鈕預設背景 · 互動面
#E8E6DCDeep Dark
深色主題頁面底，不取純黑，保留一點橄欖底色
#141413主調 · Brand
Ink Blue
主色 · CTA · quote 豎線 · 章節標題
#1B365DInk Light
深色底上的連結 · 亮變體
#2D5A8ADark Surface
深色主題容器 · 暖炭灰
#30302EError
錯誤，深暖紅，不刺眼
#B53333中性 · Warm Neutrals
Near Black
#141413Dark Warm
#3D3D3AOlive
#504e49Stone
#6b6a64Tag Tints · rgba → 實色對照
這裡列的是油墨藍 #1B365D 疊加在 parchment 上的等效實色；Tag 背景不使用 rgba()，避免 WeasyPrint 的雙層矩形問題。
0.08
#EEF2F70.14
#E4ECF50.18
#E4ECF50.22
#D0DCE90.30
#D6E1EE04 · Typography
字體系統
Serif 承擔層級，sans 承擔功能；serif 正文 400，標題 500。
紙 Aa
Serif · 標題
TsangerJinKai02 / Charter
承擔標題、引語與數字強調，中文取倉耳今楷，英文取 Charter。
</>
Mono · 代碼
JetBrains Mono
用於代碼塊、版本號、hex 值與等寬數字，字號較正文低一檔。
層級（印刷品 pt · 螢幕 px ≈ pt × 1.33）
清晰、穩定、有餘韻
weight 500
line 1.10
weight 500
line 1.20
weight 500
line 1.25
weight 500
line 1.30
weight 400
line 1.55
weight 400
line 1.55
weight 400
line 1.40
weight 400
line 1.45
weight 600
line 1.35
05 · Spacing & Shape
節奏與形
基礎單位 4pt，密度越高 margin 越小，場合越正式 margin 越大。
| Scale | Value | Use | |
|---|---|---|---|
| xs | 2-3 pt | 同行內元素 | |
| sm | 4-5 pt | tag padding · 緊湊佈局 | |
| md | 8-10 pt | 元件內部 | |
| lg | 16-20 pt | 元件之間 · 卡片 padding | |
| xl | 24-32 pt | section 標題 margin | |
| 2xl | 40-60 pt | 大 section 之間 | |
| 3xl | 80-120 pt | 長文件章節之間 |
圓角尺度 · Radii
深度 · 陰影三法
Kami 不用傳統硬陰影，深度交給 ring shadow、whisper shadow 與明暗交替。
Ring Shadow
0 0 0 1pt var(--ring-warm)
按鈕 · 卡片 hover
Whisper Shadow
0 4pt 24pt rgba(0,0,0,0.05)
極輕浮起 · 特色卡
Light ⇌ Dark
parchment ⇌ deep-dark
section 級別 · 對比最明顯
06 · Components
原子元件
元件不求多，只保留能解決具體問題的一組。
Buttons
ring shadow 替代硬投影 · 8pt 圓角
Tags · 三檔
實色 hex · 從弱到強選
Quote
左 2pt 品牌實線 + olive 色
一千個 no 換一個 yes，寧可清淡，不可濃豔。
Metric
serif 數字 + sans 標籤 · tabular-nums
Section Title
serif 500 · 15pt · 純字號層級，無裝飾
Dash List
短橫線代替圓點 · 更書卷氣
- 暖米紙底，不用純白
- 油墨藍點綴，不引第二色
- Serif 承擔權威
Code Block
ivory 底 + 0.5pt border + 6pt 圓角 + mono 字體
// 暖米紙 · 一種克制的溫度 canvas = parchment; accent = ink_blue palette = warm_neutrals − cool_grays document = serif × hierarchy + generous_space beauty = constraints × intention ÷ noise
Featured Card
whisper shadow + 16pt 圓角
Tesla 公司介紹 · One-Pager
單頁 A4 · 中文版 · 4 張指標卡 + 3 段正文 + 時間線
07 · Diagrams
內聯圖表
十四種內聯 SVG 圖表，覆蓋架構、流程、資料三大場景。直接告訴 Claude 需要哪種圖，會自動嵌入文件，配色與字體沿用 Kami 設計語言。
系統元件與連接關係，一個焦點節點
決策分支，Yes / No 路徑，焦點為成功路徑
季度營收對比，可選顏色漸變或單色
營收結構拆解，支援 3-6 個分段
08 · Decision Lookup
決策速查
遇到「該用什麼」時先看這張表，不在表裡就回到基礎原則。
| 要做什麼 | 怎麼做 |
|---|---|
| 大標題 | serif 500，字號按層級，line-height 1.10-1.30 |
| 正文閱讀 | sans 400，9.5-10 pt，line-height 1.55 |
| 強調一個數字 | color: var(--brand)，不要粗體 |
| 分隔兩段內容 | 2.5pt 品牌色左側豎線，或 0.5pt 暖灰虛線 |
| 引用某人的話 | 左 2pt 品牌色實線 + olive 色 |
| 展示代碼 | ivory 底 + 0.5pt border + 6pt 圓角 + mono 字體 |
| 區分主次按鈕 | Primary 品牌色填充 + ivory 字；Secondary warm-sand + charcoal |
| 標註某張特殊卡片 | border: 0.5pt solid var(--brand) 或 border-left: 3pt |
| 章節開始 | serif 500 · 15pt · 純字號層級，無額外裝飾 |
| 文件封面 | 單頁 Display 字號 + 右對齊作者/日期 + 大量留白 |
| 資料卡 | ivory 底 + 8pt 圓角 + serif 大數字（油墨藍） + sans 小標籤 |
09 · Anti-Patterns
反面示例
破例可以，但理由要足夠清楚。
Don't
頁面背景用 #ffffff 純白或 #f3f4f6 冷灰，會讓版面變硬，也削弱 Kami 的暖米紙氣質。
Do
始終使用 #f5f4ed parchment，列印時把 @page background 也設為同色，避免白邊。
Don't
Tag 用 rgba(201,100,66,0.18)，WeasyPrint 會讓 padding 區與字形區透明度疊加，形成雙層矩形。
Do
查 tint 對照表，改用等效實色 #E4ECF5，顏色穩定，PDF 也乾淨。
Don't
標題用 font-weight: 600 或更粗的合成 bold，筆畫容易變糊，版面也會顯得粗重。
Do
正文 400，標題 500（真實 W05 字重）；需要更強存在感時，用字號或品牌色左側豎線，不靠合成粗體。
Don't
box-shadow 硬投影 0 2px 8px rgba(0,0,0,0.3) 觀感偏硬，印刷時也容易發黑。
Do
用 ring shadow (0 0 0 1pt)、whisper (rgba 0.05)，或直接用明暗交替建立層次。
10 · Background
設計緣起
我喜歡美股投資，經常讓 Claude 寫研究報告。每次出來的東西都是同一種預設文件的樣子：灰撲撲的，結構不清晰，格式老舊，換個對話就換一套排版，沒有一份讓人想讀下去。於是我開始一條一條地調字體、配色、間距，直到報告變成一份自己真正願意看的頁面。
後來要去做《你不知道的 Agent：原理、架構與工程實踐》分享，手上已經有文件，不想再做 PPT，就用 Claude Design 按自己的設計風格來排版，反覆調了很多輪，最後慢慢滿意了。加入了 inline SVG 圖表、統一暖色調、也收緊了編輯節奏，做著做著覆蓋了我常用的文件場景，就把這個過程繼續抽象了一下，成了現在的 kami：一套交給任何 agent 都能放心出活的安靜設計系統。
11 · 常見問題
FAQ
- Kami 是什麼？
- 一個面向 AI agent 的文件設計系統。一種強調色、襯線層級、暖色羊皮紙畫布。給任何 LLM agent 一段描述，就能得到穩定的排版輸出。也可以作為視覺設計簡報給到 Claude Design 或 GPT Canvas 這類圖像渲染工具。
- 能生成什麼？
- 十種範本類型：一頁紙、長文件、信件、作品集、履歷、簡報、個股研報、更新日誌、落地頁（中英文）。外加 14 種內聯 SVG 圖表用於視覺化說明。輸出為 HTML，可匯出為 PDF、PNG 或簡報。
- 怎麼安裝？
- Claude Code：
npx skills add tw93/kami -a claude-code -g -y。外掛市場安裝在 Claude Code 2.1.136-2.1.138 暫時受上游路徑校驗影響。通用 agent：npx skills add tw93/kami -a '*' -g -y。Claude Desktop：從 GitHub Releases 下載 kami.zip，在自訂 > Skills 中上傳即可。 - 支援哪些語言？
- 英文、中文、日文。每種語言使用專屬襯線字體：英文用 Charter，中文用 TsangerJinKai02，日文用 YuMincho。字距、行高、字號都按語言做了印刷級調優。