Kami紙
よい内容には、よい版面を。Kami は AI 時代のための文書組版デザインシステム。文書を明快で読みやすく、記憶に残る形へ整えます。
00 · See it
出力サンプル
Claude に要件を渡すだけで、一枚資料、長文、正式書簡、ポートフォリオ、履歴書、スライドまで、少数の明確なルールで整った版面に仕上がります。
同じ brief は 画像生成モデル にも渡せます。サンプル画像とコピペできるプロンプトは README に置いています。
One-Pager
Tesla 企業紹介、A4 1ページ
Resume
創業者 CV、2ページ
Portfolio
Kaku ターミナル作品集、7ページ
Slides
Agent キーノート、6枚
01 · Usage
インストールと呼び出し
「履歴書を作って」「スタートアップ紹介の一枚資料を作って」「登壇用スライドを作って」のように要件を伝えるだけで、skill が自動起動します。スラッシュコマンドは不要です。
# Claude Code npx skills add tw93/kami -a claude-code -g -y # Codex npx skills add tw93/kami -a codex -g -y
Claude Desktop の場合は kami.zip をダウンロードし、Customize > Skills > "+" > Create skill からそのままアップロードします。
02 · Manifesto
設計原則
暖かい紙色を土台に、強調色は ink blue のみ。階層は serif で作り、強い影や派手な配色は退かせます。印刷文書に向けて、安定し、明快で、読みやすい紙面を保つための設計です。
- 1
ページ背景は parchment
#f5f4ed、純白は使わない - 2
強調色は ink blue
#1B365Dのみ、第二の彩色は入れない - 3
グレーはすべて暖色寄り、冷たいブルーグレーは禁止
- 4
英語は見出しと本文を serif、中国語は見出しを serif、本文は読みやすい本文体
- 5
serif 本文 400、見出し 500、合成ボールドは使わない
- 6
行間は 2 段階、見出し 1.1-1.3 / 本文 1.4-1.45
- 7
タグ背景は hex の実色のみ、rgba は使わない。WeasyPrint で二重矩形が出るためです
- 8
影は ring か whisper のみ、強い drop shadow は使わない
03 · Color
暖色で抑制する
強調色は 1 つ、ニュートラルは暖色のみ、寒色は入れない。Ink blue の使用面積はページ全体の 5% 以内に抑えます。超えると統制ではなく過剰になります。
Canvas
Parchment
Page background, the emotional foundation
#F5F4EDIvory
Cards / elevated surfaces
#FAF9F5Warm Sand
Button default / interactive surfaces
#E8E6DCDeep Dark
Dark theme page base, not pure black
#141413Brand
Ink Blue
Primary color · CTA · quote bar · section overline
#1B365DInk Light
Links on dark surfaces · lighter variant
#2D5A8ADark Surface
Dark theme container · warm charcoal
#30302EError
Error state, deep warm red
#B53333Warm Neutrals
Near Black
#141413Dark Warm
#3D3D3AOlive
#504e49Stone
#6b6a64Tag Tints: rgba から実色 hex へ
下記は ink blue #1B365D を parchment 上に重ねたときの等価な実色 hex です。タグ背景は rgba() を避け、WeasyPrint の二重矩形を防ぎます。
0.08
#EEF2F70.14
#E4ECF50.18
#E4ECF50.22
#D0DCE90.30
#D6E1EE04 · Typography
タイポグラフィ体系
階層は serif、機能要素は sans。serif は本文 400、見出し 500 を基本にします。
Aa
Serif · 見出し + 本文
JP Mincho / TsangerJinKai02
見出し、本文、引用、数値強調に使用。日本語は明朝体を優先し、TsangerJinKai02 は CJK fallback として扱います。
</>
Mono · コード
JetBrains Mono
コードブロック、バージョン番号、hex 値、等幅数字に使用。
スケール（印刷 pt、画面 px = pt x 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.45
weight 600
line 1.35
05 · Spacing & Shape
リズムと形
基本単位は 4pt。情報密度が高いほどマージンを詰め、フォーマルな文書ほど広く取ります。
| Scale | Value | Use | |
|---|---|---|---|
| xs | 2-3 pt | Inline elements | |
| sm | 4-5 pt | Tag padding · tight layout | |
| md | 8-10 pt | Component internals | |
| lg | 16-20 pt | Between components · card padding | |
| xl | 24-32 pt | Section title margins | |
| 2xl | 40-60 pt | Between major sections | |
| 3xl | 80-120 pt | Between long-doc chapters |
Radii
奥行き: 3 つの影の方法
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
セクション単位・最も強い対比
06 · Components
モジュール
必要最小限の固定セットを使い、文書上の具体的な課題に効く場面だけで使います。
Buttons
強い drop shadow ではなく ring shadow ・角丸 8pt
タグ（3 段階）
実色 hex ・弱から強へ選択
引用
左 2pt のブランド実線 + olive テキスト
装飾より明快さを優先する。ひとつの Yes のために多くの No を選ぶ。
指標カード
serif 数字 + sans ラベル ・ tabular-nums
セクション見出し
serif 500 ・ 15pt ・サイズ主導の階層、装飾は不要
Dash List
丸点ではなくダッシュ ・ 編集文体
- 紙色は暖色、純白は使わない
- 強調色は ink blue だけ、第二色は入れない
- 階層は serif で担保する
コードブロック
ivory 背景 + 0.5pt 枠線 + 6pt 角丸
// 温かみは色数ではなく、抑制で作る canvas = parchment; accent = ink_blue palette = warm_neutrals − cool_grays document = serif × hierarchy + generous_space beauty = constraints × intention ÷ noise
特集カード
whisper shadow + 16pt 角丸
Tesla 企業紹介 · One-Pager
A4 1ページ ・ 指標カード 4 枚 + 本文 3 セクション + タイムライン
07 · Diagrams
インライン図表
アーキテクチャ、フロー、データ可視化をカバーする 12 種の SVG 図表を用意。必要な種類を Claude に伝えると、Kami の色と書体規則に沿って文書へ直接埋め込みます。
システム構成と接続関係、焦点ノードを 1 つに絞る
分岐と yes/no の流れ、成功側を主軸に配置
四半期売上の比較、単色または段階色で表現
売上構成の内訳、3-6 セグメントに対応
08 · Decision Lookup
クイック参照
どの手法を使うか迷ったらこの表を参照。該当がなければ基本原則に戻って判断します。
| 場面 | 処方 |
|---|---|
| 大きな見出し | serif 500、サイズで階層化、行間 1.10-1.30 |
| 本文（可読重視） | serif 400、9.5-10 pt、行間 1.55 |
| 数値を強調 | color: var(--brand) を使い、太字には頼らない |
| セクション分離 | 左 2.5pt の brand 実線、または 0.5pt 暖色破線 |
| 引用を置く | 左 2pt brand 実線 + olive テキスト |
| コードを載せる | ivory 背景 + 0.5pt 枠線 + 6pt 角丸 + mono 書体 |
| 主ボタンと副ボタン | 主: brand 塗り + ivory 文字、副: warm-sand + charcoal |
| 特別カードを示す | border: 0.5pt solid var(--brand) または border-left: 3pt |
| セクション開始 | serif 500 ・ 15pt ・サイズ主導の階層、装飾は不要 |
| 表紙を作る | 1 ページ構成、Display サイズ + 右寄せの著者/日付 + 広い余白 |
| データカード | ivory 背景 + 8pt 角丸 + serif 大数字 + sans 小ラベル |
08 · Anti-Patterns
避けるべきこと
例外は許容できますが、理由を明示できる場合に限ります。
Don't
ページ背景に #ffffff の純白や #f3f4f6 の寒色グレーを使わない。紙面が硬く見え、温かい紙質感が崩れます。
Do
常に #f5f4ed の parchment を使う。印刷時の白フチを防ぐため、@page background も同色に設定します。
Don't
タグに rgba(27,54,93,0.18) を使わない。WeasyPrint で文字領域と余白領域の不透明度がずれ、二重矩形が出ます。
Do
tint 対照表の実色 hex #E4ECF5 を使う。描画が安定し、色ぶれを防げます。
Don't
見出しに font-weight: 600 以上の合成ボールドを使わない。線が潰れて可読性と品位が落ちます。
Do
本文 400、見出し 500（実フォント W05）。強調が必要ならサイズや左バーで対応し、合成ボールドは使わない。
Don't
強い drop shadow 0 2px 8px rgba(0,0,0,0.3) を使わない。重く見え、印刷時に黒く潰れやすい。
Do
ring shadow 0 0 0 1pt か whisper rgba 0.05 を使う。あるいは明暗の切り替えで階層を作る。
09 · Background
設計の背景
米国株投資が好きで、Claude にリサーチレポートを書かせる場面が多いです。出力はいつも既定のドキュメント風で、灰色で平板、セッションごとにレイアウトが変わる。構成は追いづらく書式は古臭く、読み続ける気になれませんでした。書体、配色、余白をひとつずつ直していき、読んでいて心地よいページに仕上げました。
その後「あなたの知らない Agent：原理、アーキテクチャとエンジニアリング実践」の発表をすることになりました。すでに原稿があったのでスライドを一から作る気にならず、Claude Design で自分のスタイルのまま組版し、何度も調整を繰り返して、ようやく納得のいく仕上がりになりました。inline SVG 図表、暖色パレットの統一、編集リズムの引き締めを加え、よく使う文書形式をすべてカバーするまで育ったので、このプロセスをさらに抽象化して kami にしました。どのエージェントに渡しても安心して出せる、静かなデザインシステムです。