Design System · v1.7.1 · 2026.06

# Kami紙

好內容，值得好版面。Kami 是一套適合 AI 時代的排版設計系統，讓文件更清晰好讀，也容易記住。

Canvas#f5f4ed Accent#1B365D SerifTsangerJinKai / Charter Sans= Serif (一頁一字體)

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 plugin marketplace
    codex plugin marketplace add tw93/kami
    codex plugin add kami@kami

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. 1

   頁面背景 parchment `#f5f4ed`，不用純白

2. 2

   強調色只有油墨藍 `#1B365D`，不引入第二種彩色

3. 3

   所有灰色暖調 (yellow-brown undertone)，禁止冷藍灰

4. 4

   英文 serif 通吃標題和正文，中文標題用 serif、正文用 sans

5. 5

   Serif 正文 400，標題 500，不用合成 bold

6. 6

   行距三檔：緊湊標題 1.1-1.3 / 密排 1.4-1.45 / 閱讀 1.5-1.55

7. 7

   Tag 背景必須實色 hex，禁止 rgba（WeasyPrint 雙層矩形 bug）

8. 8

   陰影只用 ring 或 whisper shadow，不用硬 drop shadow

03 · Color

## 暖調克制

唯一強調色、純暖調中性灰、零冷色；油墨藍全文件不超過 5% 面積，超過就從克制變成堆砌。

### 畫布 · Canvas

Parchment

頁面底色，也是整套設計的溫度來源

#F5F4ED

Ivory

卡片 · 浮起容器

#FAF9F5

Warm Sand

按鈕預設背景 · 互動面

#E8E6DC

Deep Dark

深色主題頁面底，不取純黑，保留一點橄欖底色

#141413

### 主調 · Brand

Ink Blue

主色 · CTA · quote 豎線 · 章節標題

#1B365D

Ink Light

深色底上的連結 · 亮變體

#2D5A8A

Dark Surface

深色主題容器 · 暖炭灰

#30302E

Error

錯誤，深暖紅，不刺眼

#B53333

### 中性 · Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

### Tag Tints · rgba → 實色對照

這裡列的是油墨藍 `#1B365D` 疊加在 parchment 上的等效實色；Tag 背景不使用 `rgba()`，避免 WeasyPrint 的雙層矩形問題。

Tag sample

0.08

#EEF2F7
Tag sample

0.14

#E4ECF5
Default Tag sample

0.18

#E4ECF5
Tag sample

0.22

#D0DCE9
Tag sample

0.30

#D6E1EE

04 · Typography

## 字體系統

Serif 承擔層級，sans 承擔功能；serif 正文 400，標題 500。

紙 Aa

Serif · 標題

TsangerJinKai02 / Charter

承擔標題、引語與數字強調，中文取倉耳今楷，英文取 Charter。

</>

Mono · 代碼

JetBrains Mono

用於代碼塊、版本號、hex 值與等寬數字，字號較正文低一檔。

### 層級（印刷品 pt · 螢幕 px ≈ pt × 1.33）

Display
高品質文件讀起來
清晰、穩定、有餘韻
36-48 pt
weight 500
line 1.10
Section H1
色彩系統 · Color
18-22 pt
weight 500
line 1.20
Subsection H2
畫布 · Canvas
14-16 pt
weight 500
line 1.25
Item H3
Tag Tints · rgba 對照
12-13 pt
weight 500
line 1.30
Body Lead
面向印刷文件的約束系統，目標是穩定、清晰、易讀。
11 pt
weight 400
line 1.55
Body
油墨藍全文件不超過 5% 面積，超過就從克制變成堆砌；所有灰色都有暖黃底色，R ≈ G > B 是基本規律。
9.5-10 pt
weight 400
line 1.55
Body Dense
密排正文用於履歷、一頁紙、名片、索引卡，中文 pt 字號下 1.4-1.45 的行距最舒服，英文網頁的 1.6 放進來會顯得鬆散。
9-9.2 pt
weight 400
line 1.40
Caption
圖註、腳註、說明文字，顏色用 olive 或 stone 降一級。
8.5-9 pt
weight 400
line 1.45
Label
Design System · v1.7.1
7.5-8 pt
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

4 pt
極緊
6 pt
代碼塊
8 pt
預設卡片
12 pt
容器
16 pt
特色卡片
24 pt
大容器
32 pt
Hero

### 深度 · 陰影三法

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 圓角

Primary CTA Secondary Ghost

#### Tags · 三檔

實色 hex · 從弱到強選

極淡 0.08 標準 0.18 筆刷漸變

#### Quote

左 2pt 品牌實線 + olive 色

> 一千個 no 換一個 yes，寧可清淡，不可濃豔。

#### Metric

serif 數字 + sans 標籤 · tabular-nums

6 文件類型
1 強調色
8 條規則

#### Section Title

serif 500 · 15pt · 純字號層級，無裝飾

核心項目 · Selected Works

#### 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 段正文 + 時間線

中文 A4 × 1 Ink Blue

07 · Diagrams

## 內聯圖表

十四種內聯 SVG 圖表，覆蓋架構、流程、資料三大場景。直接告訴 Claude 需要哪種圖，會自動嵌入文件，配色與字體沿用 Kami 設計語言。

架構圖 · Architecture

系統元件與連接關係，一個焦點節點

流程圖 · Flowchart

決策分支，Yes / No 路徑，焦點為成功路徑

柱狀圖 · Bar Chart

季度營收對比，可選顏色漸變或單色

環形圖 · Donut Chart

營收結構拆解，支援 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 或可編輯的 PPTX 簡報。
怎麼安裝？
  Claude Code：`npx skills add tw93/kami -a claude-code -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`。通用 agent：`npx skills add tw93/kami -a '*' -g -y`。Claude Desktop：從 GitHub Releases 下載 kami.zip，在自訂 > Skills 中上傳即可。
支援哪些語言？
  英文、中文、日文、韓文。每種語言使用專屬襯線字體：英文用 Charter，中文用 TsangerJinKai02，日文用 YuMincho，韓文用 Source Han Serif K。字距、行高、字號都按語言做了印刷級調優。日文與韓文為最佳努力的 CJK 路徑，交付前會做視覺 QA。