Kami紙
好内容,值得好版面。Kami 为 AI 提供文档模板和排版规则,用来制作简历、报告、幻灯片和产品落地页。
Landing Pages
用 Kami 搭建
使用同一套落地页模板制作的三款产品网站。
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
页面背景 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
默认保持平面;只给真实浮起的截图、弹层或悬浮界面保留极轻阴影
05 · 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默认
#E4ECF506 · Typography
字体系统
标题与正文使用同一套衬线字体,代码使用等宽字体。
紙 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
07 · Spacing & Shape
节奏与形
基础单位为 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
深度
默认保持平面。优先用留白、一种安静的底色,或一条中性细线建立层级;只有真实浮起的截图、弹层和悬浮界面才使用极轻阴影。
08 · Components
原子组件
用于常见文档布局的基础组件。
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 段正文 + 时间线
09 · Diagrams
内联图表
提供十八种内联 SVG 图表,涵盖架构、流程和数据,告诉 Claude 需要哪种图即可加入文档,配色与字体保持一致。
系统组件与连接关系,一个焦点节点
决策分支,Yes / No 路径,焦点为成功路径
季度营收对比,可选颜色渐变或单色
营收结构拆解,支持 3-6 个分段
10 · Decision Lookup
决策速查
根据用途选择组件,表中未列出的情况参考前面的设计原则。
| 要做什么 | 怎么做 |
|---|---|
| 大标题 | 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 小标签 |
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) 观感偏硬,印刷时也容易发黑。
宜默认保持平面,用留白、一种安静填色或中性细线建立层级;极轻阴影只留给真实浮起的界面和截图。






