Kami紙
好內容，值得好版面。Kami 是一套適合 AI 時代的排版設計系統，讓文件更清晰好讀，也容易記住。
00 · See it
輸出樣本
把文件需求交給 Claude。無論是一頁紙、長文、正式信件、作品集、履歷還是簡報，Kami 都用少量清晰規則，把提示詞變成可交付的排版。同一份 brief 也能 交給繪圖模型，README 裡附了樣圖和可複製的提示詞。
Equity Report · 中文
Tesla Q1 2026 財報點評
Resume · English
創辦人履歷，2 頁
一頁紙 · 中文
Kami 介紹，白底列印版，1 頁
Slides · English
Agent keynote, 6 slides
Landing Pages
用 Kami 搭建
同一套落地頁範本用於三款不同產品，一組約束規則，三種截然不同的用途。
Kami
設計系統主頁
Luo 落文
CJK 閱讀字體
Mole 鼴
macOS 系統工具
01 · Usage
安裝與調用
直接告訴 Claude 你要什麼，比如「幫我排版一份白皮書」「做一份履歷」「幫我做一份作品集」，skill 會自動觸發，無需斜線命令。
# Claude Code、Codex、Cursor 及其他 Agent npx skills add tw93/kami -a claude-code codex cursor -g -y # Claude Code 外掛 (v2.1.142+) /plugin marketplace add tw93/kami /plugin install kami@kami # Codex 外掛 codex plugin marketplace add tw93/kami codex plugin add kami@kami # Claude Desktop 下載 kami.zip，在 Customize > Skills > "+" > Create skill 中上傳
02 · Manifesto
設計原則
暖米紙底，油墨藍點綴，serif 承擔層級，硬陰影與花俏配色都退後；這套系統面向印刷文件，負責把內容收束成穩定、清晰、易讀的版面。羊皮紙底為預設，另有可選的白底版本，把任意文件切到白底以適配印表機，暖意則沉入卡片與表格。
- 1
頁面背景 parchment
#f5f4ed，不用純白 - 2
強調色只有油墨藍
#1B365D，不引入第二種彩色 - 3
所有灰色暖調 (yellow-brown undertone)，禁止冷藍灰
- 4
一頁只用一套 serif 承擔標題和正文，只有真正的 UI 元素才另用 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
預設保持平面；只給真正浮起的截圖、彈層或懸浮介面保留極輕陰影
03 · Color
暖調克制
唯一強調色、純暖調中性灰、零冷色；油墨藍全文件不超過 5% 面積，超過就從克制變成堆砌。
畫布 · Canvas
Parchment
頁面底色，也是整套設計的溫度來源
#F5F4EDIvory
卡片 · 浮起容器
#FAF9F5Warm Sand
按鈕預設背景 · 互動面
#E8E6DCDeep Dark
深色主題頁面底，不取純黑，保留一點橄欖底色
#141413主調 · Brand
Ink Blue
主色 · CTA · 標籤 · 章節標題
#1B365DInk Light
深色底上的連結 · 亮變體
#2D5A8ADark Surface
深色主題容器 · 暖炭灰
#30302EError
錯誤，深暖紅，不刺眼
#B53333中性 · Warm Neutrals
Near Black
#141413Dark Warm
#3D3D3AOlive
#504e49Stone
#6b6a64標籤底色
只用兩檔登記過的實色。#EEF2F7 用於弱化，#E4ECF5 是預設值。實色也能避開 WeasyPrint 的雙層矩形問題。
Quiet
#EEF2F7預設
#E4ECF504 · Typography
字體系統
一套 serif 同時承擔層級和正文，mono 只用於程式碼與技術標籤。
紙 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
深度
預設保持平面。優先用留白、一種安靜的底色，或一條中性細線建立層級；只有真正浮起的截圖、彈層和懸浮介面才使用極輕陰影。
06 · Components
原子元件
元件不求多，只保留能解決具體問題的一組。
Buttons
填色 + 邊框 · 無陰影 · 8px 圓角
Tags · 兩檔
實色 hex · 弱化或預設
Quote
olive 色 + 斜體 · 無側邊線
一千個 no 換一個 yes，寧可清淡，不可濃豔。
Metric
serif 數字 + sans 標籤 · tabular-nums
Section Title
serif 500 · 15pt · 純字號層級，無裝飾
純文字列表
用間距形成節奏 · 不加符號
- 暖米紙底，不用純白
- 油墨藍點綴，不引第二色
- Serif 承擔權威
Code Block
ivory 底 + 4pt 圓角 + mono 字體，無邊框
// 暖米紙 · 一種克制的溫度 canvas = parchment; accent = ink_blue palette = warm_neutrals − cool_grays document = serif × hierarchy + generous_space beauty = constraints × intention ÷ noise
安靜卡片
一種 ivory 填色 + 8px 圓角 · 無邊框和陰影
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)，不要粗體 |
| 分隔兩段內容 | 先用留白；只有邊界必須明確時，才用一條 0.5pt 中性全寬細線 |
| 引用某人的話 | olive 色 + 斜體或縮排，不加側邊線 |
| 展示代碼 | ivory 底 + 4pt 圓角 + mono 字體，無邊框 |
| 區分主次按鈕 | Primary 品牌色填充 + ivory 字；Secondary warm-sand + charcoal |
| 標註某張特殊卡片 | 用更明確的標籤或一種安靜的填色，不加強調邊 |
| 章節開始 | serif 500 · 15pt · 純字號層級，無額外裝飾 |
| 文件封面 | 單頁 Display 字號 + 右對齊作者/日期 + 大量留白 |
| 展示關鍵數字 | 基線一行排開，透明不做容器 + serif 大數字（油墨藍） + sans 小標籤 |
09 · Anti-Patterns
反面示例
破例可以，但理由要足夠清楚。
頁面底色
忌頁面背景用 #ffffff 純白或 #f3f4f6 冷灰，會讓版面變硬，也削弱 Kami 的暖米紙氣質。
宜始終使用 #f5f4ed parchment，列印時把 @page background 也設為同色，避免白邊。
Tag 著色
忌Tag 用 rgba(27,54,93,0.18)，WeasyPrint 會讓 padding 區與字形區透明度疊加，形成雙層矩形。
宜直接使用登記過的預設標籤色 #E4ECF5，顏色穩定，PDF 也乾淨。
合成粗體
忌標題用 font-weight: 600 或更粗的合成 bold，筆畫容易變糊，版面也會顯得粗重。
宜正文 400，標題 500（真實 W05 字重）；需要更強存在感時，用字號、間距或油墨藍文字，不靠合成粗體。
陰影
忌box-shadow 硬投影 0 2px 8px rgba(0,0,0,0.3) 觀感偏硬，印刷時也容易發黑。
宜預設保持平面，用留白、一種安靜填色或中性細線建立層級；極輕陰影只留給真正浮起的介面和截圖。
10 · Background
設計緣起
我喜歡美股投資，經常讓 Claude 寫研究報告。每次出來的東西都是同一種預設文件的樣子：灰撲撲的，結構不清晰，格式老舊，換個對話就換一套排版，沒有一份讓人想讀下去。於是我開始一條一條地調字體、配色、間距，直到報告變成一份自己真正願意看的頁面。
後來要去做《你不知道的 Agent：原理、架構與工程實踐》分享，手上已經有文件，不想再做 PPT，就用 Claude Design 按自己的設計風格來排版，反覆調了很多輪，最後慢慢滿意了。加入了 inline SVG 圖表、統一暖色調、也收緊了編輯節奏，做著做著覆蓋了我常用的文件場景，就把這個過程繼續抽象了一下，成了現在的 kami：一套交給任何 agent 都能放心出活的安靜設計系統。
11 · 常見問題
FAQ
- Kami 是什麼？
- Kami 是一套面向 AI Agent 的文件設計系統，以單一強調色、襯線層級和暖色羊皮紙畫布維持穩定排版，也能作為視覺簡報交給 Claude Design 或 GPT Canvas 等圖像工具。
- 能生成什麼？
- Kami 提供八種文件範本、中英韓落地頁系統和 18 種內聯 SVG 圖表，文件可匯出為 PDF 或 PNG，簡報另有可編輯的 PPTX 輸出。
- 可以換成自己的品牌風格嗎？
- 可以，直接告訴 Agent 你的品牌色、字體與版式偏好，或提供品牌設定，Kami 的預設樣式始終以當前要求為準。
- 支援哪些語言？
- 支援英文、中文、日文和韓文，分別使用 Charter、TsangerJinKai02、YuMincho 和 Source Han Serif K，並針對各語言調整字距、行高與字號；日文和韓文為盡力適配，交付前會做視覺檢查。