Design System · v1.18.0 · 2026.10

Kami紙

好內容,值得好版面。Kami 為 AI 提供文件範本與排版規則,用來製作履歷、報告、簡報和產品介紹頁。

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

輸出樣本

告訴 Claude 需要什麼文件,下面是一頁紙、報告、履歷和簡報的實際成果。相同的需求也能交給繪圖模型,README 提供提示詞與範例。

Tesla Q1 2026 財報點評

財報分析 · 中文

Tesla Q1 2026 財報點評

Musk 履歷

履歷 · 英文

創辦人履歷,2 頁

Kami 列印一頁紙

一頁紙 · 中文

Kami 介紹,白底列印版,1 頁

Agent 簡報

Slides · English

Agent 演講簡報,共 8 頁

用 Kami 搭建

基於這套網頁範本搭建的三款產品官網。

Kami 官網

Kami

設計系統主頁

Luo 落文官網

Luo 落文

CJK 閱讀字體

Mole 官網

Mole 鼴

macOS 系統工具

安裝與使用

直接告訴 Claude「幫我做一份履歷」或「幫我排版一份白皮書」,Kami 就會自動啟用,不必輸入斜線指令。

# 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 中上傳

FAQ

Kami 是什麼?
Kami 為 AI 提供文件範本與排版規則,也能為 Claude Design、GPT Canvas 等圖像工具提供排版參考。
能生成什麼?
Kami 提供八種文件範本、中英韓產品介紹頁系統和 18 種可嵌入的 SVG 圖表,文件可匯出為 PDF 或 PNG,簡報另有可編輯的 PPTX 輸出。
可以換成自己的品牌風格嗎?
可以,直接告訴 Agent 品牌色、字體與版式偏好,或提供品牌設定,Kami 的預設樣式始終以這次要求為準。
支援哪些語言?
英文與中文支援最完整,日文與韓文會依字體和排版逐份調整,交付前再檢查一遍效果。預設字體分別為 Charter、TsangerJinKai02、YuMincho 和 Source Han Serif K。

設計緣起

我喜歡美股投資,經常讓 Claude 寫研究報告。每次出來的東西都是同一種預設文件的樣子:灰撲撲的,結構不清晰,格式老舊,換個對話就換一套排版,沒有一份讓人想讀下去。於是我開始一條一條地調字體、配色、間距,直到報告變成一份自己真正願意看的頁面。

後來要去做《你不知道的 Agent:原理、架構與工程實踐》分享,手上已經有文件,不想再做 PPT,就用 Claude Design 按自己的設計風格來排版,反覆調了很多輪,最後慢慢滿意了。後來加入 SVG 圖表,統一配色與間距,逐漸用在常寫的各種文件上,再把範本和規則整理成了現在的 Kami。

設計原則

預設使用暖米色背景、墨藍色重點色和襯線字體,透過字級與間距區分標題和內文,也提供方便列印的白底版本,卡片與表格保留暖色背景。

  1. 1

    頁面背景 parchment #f5f4ed,列印版本可使用白底

  2. 2

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

  3. 3

    灰色使用偏黃褐的暖色調,禁止冷藍灰

  4. 4

    標題與內文使用同一套襯線字體,介面控制項可另用無襯線字體

  5. 5

    內文使用字重 400,標題使用 500,不用合成粗體

  6. 6

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

  7. 7

    Tag 背景必須實色 hex,禁止 rgba(WeasyPrint 雙層矩形 bug)

  8. 8

    預設保持平面;只給真正浮起的截圖、彈層或懸浮介面保留極輕陰影

暖調克制

只用一種重點色搭配暖灰色,墨藍色面積不超過頁面的 5%。

畫布 · Canvas

Parchment

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

#F5F4ED

Ivory

卡片 · 浮起容器

#FAF9F5

Warm Sand

按鈕預設背景 · 互動面

#E8E6DC

Deep Dark

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

#141413

主調 · Brand

Ink Blue

主色 · CTA · 標籤 · 章節標題

#1B365D

Ink Light

深色底上的連結 · 亮變體

#2D5A8A

Dark Surface

深色主題容器 · 暖炭灰

#30302E

Error

錯誤,深暖紅,不刺眼

#B53333

中性 · Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

標籤底色

只用兩檔登記過的實色。#EEF2F7 用於弱化,#E4ECF5 是預設值。實色也能避開 WeasyPrint 的雙層矩形問題。

弱化Tag sample

Quiet

#EEF2F7
DefaultTag sample

預設

#E4ECF5

字體系統

標題與內文使用同一套襯線字體,程式碼使用等寬字體。

紙 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
標籤底色 · 實色參考
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.18.0
7.5-8 pt
weight 600
line 1.35

節奏與形

基本單位為 4pt,內容較多時縮小頁面邊界,正式信函等文件則適當留寬。

ScaleValueUse
xs2-3 pt同行內元素
sm4-5 pttag padding · 緊湊佈局
md8-10 pt元件內部
lg16-20 pt元件之間 · 卡片 padding
xl24-32 ptsection 標題 margin
2xl40-60 pt大 section 之間
3xl80-120 pt長文件章節之間

圓角尺度 · Radii

2 pt
印刷標籤
4 pt
印刷區塊
8 px
螢幕區塊

深度

預設保持平面。優先用留白、安靜底色,或一條中性細線建立層級;只有真正浮起的截圖、彈層和懸浮介面才使用極輕陰影。

原子元件

用於常見文件排版的基本元件。

Buttons

填色 + 邊框 · 無陰影 · 8px 圓角

Primary CTA Secondary Ghost

Tags · 兩檔

實色 hex · 弱化或預設

弱填充 預設標籤

Quote

olive 色 + 斜體 · 無側邊線

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

Metric

serif 數字 + sans 標籤 · tabular-nums

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

Section Title

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

核心項目 · Selected Works

純文字列表

用間距形成節奏 · 不加符號

  • 暖米紙底,列印版本可使用白底
  • 墨藍色點綴,不引第二色
  • 襯線字體區分層級

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

中文 A4 × 1 Ink Blue

內聯圖表

提供十八種可嵌入的 SVG 圖表,涵蓋架構、流程和資料,告訴 Claude 需要哪種圖就能加入文件,配色與字體保持一致。

架構圖 · Architecture
CLIENT Browser SERVICE API DATA Database

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

流程圖 · Flowchart
Start Valid? Yes Process No Reject

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

柱狀圖 · Bar Chart
Q1 Q2 Q3 Q4 180 220 195 240

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

環形圖 · Donut Chart
60% 主營 主營業務 · 60% 服務收入 · 25% 其他來源 · 15%

營收結構拆解,支援 3-6 個分段

決策速查

根據用途選擇元件,表中未列出的情況參考前面的設計原則。

要做什麼怎麼做
大標題serif 500,字級按層級,line-height 1.10-1.30
正文閱讀serif 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 小標籤

反面示例

破例可以,但理由要足夠清楚。

頁面底色

忌頁面背景用 #ffffff 純白或 #f3f4f6 冷灰,會讓版面變硬,也削弱 Kami 的暖米紙氣質。

宜預設使用暖米色 #f5f4ed,白底列印版除外,列印時把 @page background 也設為同色,避免白邊。

標籤底色

忌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) 觀感偏硬,印刷時也容易發黑。

宜預設保持平面,用留白、安靜底色或中性細線建立層級;極輕陰影只留給真正浮起的介面和截圖。