Kami紙
好內容,值得好版面。Kami 為 AI 提供文件範本與排版規則,用來製作履歷、報告、簡報和產品介紹頁。
輸出樣本
告訴 Claude 需要什麼文件,下面是一頁紙、報告、履歷和簡報的實際成果。相同的需求也能交給繪圖模型,README 提供提示詞與範例。
用 Kami 搭建
基於這套網頁範本搭建的三款產品官網。
安裝與使用
直接告訴 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
頁面背景 parchment
#f5f4ed,列印版本可使用白底 - 2
強調色只有墨藍色
#1B365D,不引入第二種彩色 - 3
灰色使用偏黃褐的暖色調,禁止冷藍灰
- 4
標題與內文使用同一套襯線字體,介面控制項可另用無襯線字體
- 5
內文使用字重 400,標題使用 500,不用合成粗體
- 6
行距三檔:緊湊標題 1.1-1.3 / 密排 1.4-1.45 / 閱讀 1.5-1.55
- 7
Tag 背景必須實色 hex,禁止 rgba(WeasyPrint 雙層矩形 bug)
- 8
預設保持平面;只給真正浮起的截圖、彈層或懸浮介面保留極輕陰影
暖調克制
只用一種重點色搭配暖灰色,墨藍色面積不超過頁面的 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預設
#E4ECF5字體系統
標題與內文使用同一套襯線字體,程式碼使用等寬字體。
紙 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
節奏與形
基本單位為 4pt,內容較多時縮小頁面邊界,正式信函等文件則適當留寬。
| 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
深度
預設保持平面。優先用留白、安靜底色,或一條中性細線建立層級;只有真正浮起的截圖、彈層和懸浮介面才使用極輕陰影。
原子元件
用於常見文件排版的基本元件。
Buttons
填色 + 邊框 · 無陰影 · 8px 圓角
Tags · 兩檔
實色 hex · 弱化或預設
Quote
olive 色 + 斜體 · 無側邊線
一千個 no 換一個 yes,寧可清淡,不可濃豔。
Metric
serif 數字 + sans 標籤 · tabular-nums
Section Title
serif 500 · 15pt · 純字級層級,無裝飾
純文字列表
用間距形成節奏 · 不加符號
- 暖米紙底,列印版本可使用白底
- 墨藍色點綴,不引第二色
- 襯線字體區分層級
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 段正文 + 時間線
內聯圖表
提供十八種可嵌入的 SVG 圖表,涵蓋架構、流程和資料,告訴 Claude 需要哪種圖就能加入文件,配色與字體保持一致。
系統元件與連接關係,一個焦點節點
決策分支,Yes / No 路徑,焦點為成功路徑
季度營收對比,可選顏色漸變或單色
營收結構拆解,支援 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) 觀感偏硬,印刷時也容易發黑。
宜預設保持平面,用留白、安靜底色或中性細線建立層級;極輕陰影只留給真正浮起的介面和截圖。






