Kami紙
よい内容には、よい版面を。Kami は AI 向けの文書テンプレートと組版ルール集です。履歴書、レポート、スライド、製品紹介ページを作れます。
00 · See it
出力サンプル
Claude に依頼して作った、一枚資料、レポート、履歴書、スライドの例です。
同じ指示は 画像生成モデル にも渡せます。サンプル画像とコピーして使えるプロンプトは README に置いています。
株式レポート
Tesla Q1 2026 決算レポート
履歴書
創業者 CV、2ページ
一枚資料
Kami 紹介、白地印刷、1ページ
スライド
Agent キーノート、8枚
Landing Pages
Kami で構築
同じテンプレートで作った3つの製品サイトです。
Kami
デザインシステム ホームページ
Luo 落文
CJK リーディングフォント
Mole 鼹
macOS システムユーティリティ
01 · Usage
インストールと使い方
Claude に「履歴書を作って」「発表用スライドを作って」と伝えると、Kami が自動で使われます。スラッシュコマンドは不要です。
# Claude Code、Codex、Cursor など各エージェント 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には8種類のドキュメントテンプレート、多言語ランディングページ、18種類のインラインSVG図表があり、ドキュメントはPDFまたはPNGに書き出せ、スライドは編集可能なPPTXにも対応します。
- ブランドのスタイルに合わせられますか？
- はい、ブランドカラー、フォント、レイアウトの希望をエージェントに伝えるかブランドプロファイルを用意すれば、明示した要件がKamiのデフォルトより優先されます。
- 対応言語は？
- 英語と中国語を中心に対応しています。日本語と韓国語は書体やレイアウトを個別に調整し、出力後に確認します。標準の書体は順に Charter、TsangerJinKai02、YuMincho、Source Han Serif K です。
03 · Background
設計の背景
米国株投資が好きで、Claude にリサーチレポートを書かせる場面が多いです。出力はいつも既定のドキュメント風で、灰色で平板、セッションごとにレイアウトが変わる。構成は追いづらく書式は古臭く、読み続ける気になれませんでした。書体、配色、余白をひとつずつ直していき、読んでいて心地よいページに仕上げました。
その後「あなたの知らない Agent：原理、アーキテクチャとエンジニアリング実践」の発表をすることになりました。すでに原稿があったのでスライドを一から作る気にならず、Claude Design で自分のスタイルのまま組版し、何度も調整を繰り返して、ようやく納得のいく仕上がりになりました。その後、SVG 図表を加え、配色と余白を揃えました。普段作る文書にも使うようになり、テンプレートとルールをまとめたものが Kami です。
04 · Manifesto
設計原則
標準の配色は淡い紙色の背景とインクブルーです。セリフ書体を使い、文字の大きさと余白で見出しと本文を区別します。印刷用の白い背景も選べ、カードや表には淡い暖色を残します。
- 1
ページ背景は parchment
#f5f4ed、印刷用の白い背景も選択可 - 2
強調色は ink blue
#1B365Dのみ、第二の彩色は入れない - 3
グレーはすべて暖色寄り、冷たいブルーグレーは禁止
- 4
見出しと本文は一つの serif で統一し、本物の UI 要素にだけ別の sans を使う
- 5
serif 本文 400、見出し 500、合成ボールドは使わない
- 6
行間は3段階、見出し 1.1-1.3 / 密な本文 1.4-1.45 / 長文 1.5-1.55
- 7
タグ背景は hex の実色のみ、rgba は使わない。WeasyPrint で二重矩形が出るためです
- 8
面は原則フラットにし、実際に浮くスクリーンショットやポップオーバーだけにごく薄い影を使う
05 · Color
暖色の配色
強調色は1色、グレーは暖色系を使います。インクブルーはページ全体の5%以内に抑えます。
背景色
Parchment
標準のページ背景
#F5F4EDIvory
カードの背景
#FAF9F5Warm Sand
ボタンなどの操作要素
#E8E6DCDeep Dark
深いグレーの背景
#141413強調色
Ink Blue
Primary color · CTA · labels · section overline
#1B365DInk Light
Links on dark surfaces · lighter variant
#2D5A8ADark Surface
Dark theme container · warm charcoal
#30302EError
エラーを示す深い赤
#B53333暖色系のグレー
Near Black
#141413Dark Warm
#3D3D3AOlive
#504e49Stone
#6b6a64タグの背景色
登録済みの実色は 2 段階だけです。#EEF2F7 は控えめ、#E4ECF5 は既定。実色は WeasyPrint の二重矩形も防ぎます。
Quiet
#EEF2F7既定
#E4ECF506 · Typography
タイポグラフィ体系
見出しと本文には同じセリフ書体、コードには等幅書体を使います。
Aa
Serif · 見出し + 本文
JP Mincho / TsangerJinKai02
見出し、本文、引用、数値強調に使用。日本語は明朝体を優先し、TsangerJinKai02 は CJK 書体の代替 として扱います。
</>
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
07 · Spacing & Shape
リズムと形
基本単位は 4pt です。情報量が多い文書は余白を小さく、正式な書簡などは広めに取ります。
| 段階 | 値 | 用途 | |
|---|---|---|---|
| xs | 2-3 pt | 文中の要素 | |
| sm | 4-5 pt | タグの内側余白 | |
| md | 8-10 pt | 部品の内側 | |
| lg | 16-20 pt | 部品の間・カードの内側 | |
| xl | 24-32 pt | 節見出しの余白 | |
| 2xl | 40-60 pt | 大きな節の間 | |
| 3xl | 80-120 pt | Between long-doc chapters |
Radii
奥行き
面は原則フラットです。余白、淡い背景色、必要な場合だけ中立色の細線を使います。ごく薄い影は、実際に浮くスクリーンショットやポップオーバーに限ります。
08 · Components
モジュール
文書のレイアウトに使う基本的な部品です。
Buttons
塗り + 枠線 ・影なし ・角丸 8px
タグ（2 段階）
実色 hex ・控えめまたは既定
引用
olive テキスト + 斜体 ・側線なし
装飾より明快さを優先する。ひとつの Yes のために多くの No を選ぶ。
指標カード
serif 数字 + sans ラベル ・ tabular-nums
セクション見出し
serif 500 ・ 15pt ・サイズ主導の階層、装飾は不要
プレーンリスト
余白でリズムを作る ・記号なし
- 紙色は暖色、印刷用の白い背景も選択可
- 強調色は ink blue だけ、第二色は入れない
- 階層は serif で担保する
コードブロック
ivory 背景 + 4pt 角丸、枠線なし
// 温かみは色数ではなく、抑制で作る 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 1ページ ・ 指標カード 4 枚 + 本文 3 セクション + タイムライン
09 · Diagrams
インライン図表
構成図、フロー、データの可視化に使える18種類の SVG 図表を用意しています。Claude に必要な図を伝えると、文書と同じ色や書体で追加できます。
システム構成と接続関係、焦点ノードを 1 つに絞る
分岐と yes/no の流れ、成功側を主軸に配置
四半期売上の比較、単色または段階色で表現
売上構成の内訳、3-6 セグメントに対応
10 · Decision Lookup
クイック参照
用途に合う部品をこの表から選べます。該当するものがなければ、前述の設計原則を参考にしてください。
| 場面 | 処方 |
|---|---|
| 大きな見出し | serif 500、サイズで階層化、行間 1.10-1.30 |
| 本文（可読重視） | serif 400、9.5-10 pt、行間 1.55 |
| 数値を強調 | color: var(--brand) を使い、太字には頼らない |
| セクション分離 | まず余白。境界を明示する必要がある場合だけ 0.5pt の中立色の全幅細線 |
| 引用を置く | olive テキスト + 斜体または字下げ。側線は使わない |
| コードを載せる | ivory 背景 + 4pt 角丸 + mono 書体、枠線なし |
| 主ボタンと副ボタン | 主: brand 塗り + ivory 文字、副: warm-sand + charcoal |
| 特別カードを示す | 明確なラベルかシンプルな塗りをひとつ使い、強調線は足さない |
| セクション開始 | serif 500 ・ 15pt ・サイズ主導の階層、装飾は不要 |
| 表紙を作る | 1 ページ構成、Display サイズ + 右寄せの著者/日付 + 広い余白 |
| 重要な数値を見せる | ベースライン揃えの一行、透明・コンテナなし + serif 大数字 + sans 小ラベル |
11 · Anti-Patterns
避けるべきこと
例外は許容できますが、理由を明示できる場合に限ります。
ページ背景
避けるページ背景の #ffffff 純白や #f3f4f6 の寒色グレー。紙面が硬く見え、温かい紙質感が崩れます。
推奨常に #f5f4ed の parchment。印刷時の白フチを防ぐため、@page background も同色に設定します。
タグの色
避けるタグへの rgba(27,54,93,0.18)。WeasyPrint で文字領域と余白領域の不透明度がずれ、二重矩形が出ます。
推奨登録済みの既定タグ色 #E4ECF5。描画が安定し、色ぶれを防げます。
合成ボールド
避ける見出しへの font-weight: 600 以上の合成ボールド。線が潰れて可読性と品位が落ちます。
推奨本文 400、見出し 500（実フォント W05）。強調が必要ならサイズ、余白、ink blue の文字で対応します。
シャドウ
避ける強い drop shadow 0 2px 8px rgba(0,0,0,0.3)。重く見え、印刷時に黒く潰れやすい。
推奨面は原則フラットにし、余白、シンプルな塗り、中立色の細線で階層を作ります。ごく薄い影は実際に浮く UI やスクリーンショットだけに使います。