Design System · v1.16.0 · 2026.09

Kami

好内容,值得好版面。Kami 为 AI 提供文档模板和排版规则,用来制作简历、报告、幻灯片和产品落地页。

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

00 · See it

输出样本

告诉 Claude 你需要什么文档,下面是一页纸、报告、简历和幻灯片的实际输出。相同的要求也能交给绘图模型,README 中有提示词和示例。

Tesla Q1 2026 财报点评

财报分析 · 中文

Tesla Q1 2026 财报点评

Musk 简历

简历 · 英文

创始人简历,2 页

Kami 打印一页纸

一页纸 · 中文

Kami 介绍,白底打印版,1 页

Agent 幻灯片

Slides · English

Agent 演讲幻灯片,共 8 页

Landing Pages

用 Kami 搭建

使用同一套落地页模板制作的三款产品网站。

Kami 官网

Kami

设计系统主页

Luo 落文官网

Luo 落文

CJK 阅读字体

Mole 官网

Mole 鼹

macOS 系统工具

01 · Usage

安装与调用

直接告诉 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 中上传

02 · 常见问题

FAQ

Kami 是什么?
Kami 为 AI 提供文档模板和排版规则,也能为 Claude Design、GPT Canvas 等图像工具提供排版参考。
能生成什么?
Kami 提供八种文档模板、中英韩落地页系统和 18 种内联 SVG 图表,文档可导出为 PDF 或 PNG,幻灯片另有可编辑的 PPTX 输出。
可以换成自己的品牌风格吗?
可以,直接告诉 Agent 你的品牌色、字体和版式偏好,或提供品牌配置,Kami 的默认样式始终以当前要求为准。
支持哪些语言?
英文和中文支持较完整,日文与韩文会按字体和排版情况逐份调整,交付前检查输出效果。默认字体分别为 Charter、TsangerJinKai02、YuMincho 和 Source Han Serif K。

03 · Background

设计缘起

我喜欢美股投资,经常让 Claude 写研究报告。每次出来的东西都是同一种默认文档的样子:灰扑扑的,结构不清晰,格式老旧,换个对话就换一套排版,没有一份让人想读下去。于是我开始一条一条地调字体、配色、间距,直到报告变成一份自己真正愿意看的页面。

后来要去做《你不知道的 Agent:原理、架构与工程实践》分享,手上已经有文档,不想再做 PPT,就用 Claude Design 按自己的设计风格来排版,反复调了很多轮,最后慢慢满意了。后来加入 SVG 图表,统一配色和间距,逐渐用在常写的各种文档上,再把模板和规则整理成了现在的 Kami。

04 · Manifesto

设计原则

默认使用暖米色背景、油墨蓝强调色和衬线字体,通过字号和间距区分标题与正文,也提供适合打印的白底版本,卡片与表格保留暖色背景。

  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

    默认保持平面;只给真实浮起的截图、弹层或悬浮界面保留极轻阴影

05 · Color

暖调克制

使用一种强调色和暖灰色,油墨蓝的面积不超过页面的 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

06 · Typography

字体系统

标题与正文使用同一套衬线字体,代码使用等宽字体。

紙 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.16.0
7.5-8 pt
weight 600
line 1.35

07 · Spacing & Shape

节奏与形

基础单位为 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
屏幕区块

深度

默认保持平面。优先用留白、一种安静的底色,或一条中性细线建立层级;只有真实浮起的截图、弹层和悬浮界面才使用极轻阴影。

08 · Components

原子组件

用于常见文档布局的基础组件。

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

09 · Diagrams

内联图表

提供十八种内联 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 个分段

10 · Decision Lookup

决策速查

根据用途选择组件,表中未列出的情况参考前面的设计原则。

要做什么怎么做
大标题serif 500,字号按层级,line-height 1.10-1.30
正文阅读serif 4009.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 小标签

11 · Anti-Patterns

反面示例

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

页面底色

页面背景用 #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) 观感偏硬,印刷时也容易发黑。

默认保持平面,用留白、一种安静填色或中性细线建立层级;极轻阴影只留给真实浮起的界面和截图。