Kami は AI 向けの文書テンプレートと組版ルール集です。Claude Design や GPT Canvas などのデザインツールにも、レイアウトの指示として使えます。

どんなドキュメントを作れますか？

Kami には 9 種類のドキュメントテンプレート、多言語ランディングページ、18 種類のインライン SVG 図表があります。ドキュメントは PDF または PNG に書き出せ、スライドは編集可能な PPTX にも対応します。

ブランドのスタイルに合わせられますか？

はい、ブランドカラー、フォント、レイアウトの希望をエージェントに伝えるかブランドプロファイルを用意すれば、明示した要件がKamiのデフォルトより優先されます。

英語と中国語を中心に対応しています。日本語と韓国語は書体やレイアウトを個別に調整し、出力後に確認します。標準の書体は順に Charter、TsangerJinKai02、YuMincho、Source Han Serif K です。

デザインシステム · v1.20.0 · 2026.10

Kami紙

よい内容には、よい版面を。Kami は AI 向けの文書テンプレートと組版ルール集です。履歴書、レポート、スライド、製品紹介ページを作れます。

背景色#f5f4ed Accent#1B365D SerifYuMincho / TsangerJinKai Sans= Serif (一頁一書体)

出力サンプル

Claude に依頼して作った、一枚資料、レポート、履歴書、スライドの例です。

同じ指示は画像生成モデルにも渡せます。サンプル画像とコピーして使えるプロンプトは README に置いています。

株式レポート

Tesla Q1 2026 決算レポート

履歴書

創業者 CV、2ページ

一枚資料

Kami 紹介、白地印刷、1ページ

スライド

Agent キーノート、8枚

SNS 画像

X と Instagram 向けの画像カードで、背景は 8 色から選べます。下の 4 枚は自分のプロダクトについて投稿した原文で作りました。

Mole

表紙、ink

Kaku

リスト、pine

Pake

本文、crimson

MiaoYan

画面、char

Kami で構築

Pake、MiaoYan、Mole の公式サイトは、どれも Kami のルールで作っています。

Pake

Web サイトをアプリに

MiaoYan

Markdown ノート

Mole

Mac クリーナー

インストールと使い方

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からアップロード

設計の背景

米国株投資が好きで、Claude にリサーチレポートを書かせる場面が多いです。出力はいつも既定のドキュメント風で、灰色で平板、セッションごとにレイアウトも変わっていました。構成は追いづらく書式は古臭く、読み続ける気になれませんでした。書体、配色、余白をひとつずつ直していき、読んでいて心地よいページに仕上げました。

その後「あなたの知らない Agent：原理、アーキテクチャとエンジニアリング実践」の発表をすることになりました。すでに原稿があったのでスライドを一から作る気にならず、Claude Design で自分のスタイルのまま組版し、何度も調整を繰り返して、ようやく納得のいく仕上がりになりました。その過程で SVG 図表を加え、配色と余白を揃えました。普段作る文書にも使うようになり、テンプレートとルールをまとめたものが Kami です。

設計原則

標準の配色は淡い紙色の背景とインクブルーです。セリフ書体を使い、文字の大きさと余白で見出しと本文を区別します。印刷用の白い背景も選べ、カードや表には淡い暖色を残します。

ページ背景は parchment #f5f4ed、印刷用の白い背景も選択可
強調色は ink blue #1B365D のみ、第二の彩色は入れない
グレーはすべて暖色寄り、冷たいブルーグレーは禁止
見出しと本文は一つの serif で統一し、本物の UI 要素にだけ別の sans を使う
serif 本文 400、見出し 500、合成ボールドは使わない
行間は3段階、見出し 1.1-1.3 / 密な本文 1.4-1.45 / 長文 1.5-1.55
タグ背景は hex の実色のみ、rgba は使わない。WeasyPrint で二重矩形が出るためです
面は原則フラットにし、実際に浮くスクリーンショットやポップオーバーだけにごく薄い影を使う

暖色の配色

強調色は1色、グレーは暖色系を使います。インクブルーはページ全体の5%以内に抑えます。

背景色

Parchment

標準のページ背景

#F5F4ED

Ivory

カードの背景

#FAF9F5

Warm Sand

ボタンと操作要素

#E8E6DC

Deep Dark

深いグレーの背景

#141413

強調色

Ink Blue

メインカラー · CTA · ラベル · 章見出し

#1B365D

Ink Light

暗い背景のリンク · 明るめの派生色

#2D5A8A

Dark Surface

暗いコンテナ · 暖かいチャコール

#30302E

Error

エラーを示す深い赤

#B53333

暖色系のグレー

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

タグの背景色

登録済みの実色は 2 段階だけです。#EEF2F7 は控えめ、#E4ECF5 は既定。実色は WeasyPrint の二重矩形も防ぎます。

控えめタグの例#EEF2F7

既定タグの例#E4ECF5

タイポグラフィ体系

見出しと本文には同じセリフ書体、コードには等幅書体を使います。

Serif · 見出し + 本文

YuMincho / TsangerJinKai02

見出し、本文、引用、数値強調に使用。日本語は明朝体を優先し、TsangerJinKai02 は CJK 書体の代替として扱います。

Aa 01

Mono · コード

JetBrains Mono

コードブロック、バージョン番号、hex 値、等幅数字に使用。

スケール · 画面 px = pt x 1.33

Display

よい文書は
明快で、安定し、読みやすい

36-48 pt
weight 500
line 1.10

H1 Section

Color System · Palette

18-22 pt
weight 500
line 1.20

H2 Subsection

Canvas · Warm Neutrals

14-16 pt
weight 500
line 1.25

H3 Item

Tag Tints · Solid Hex

12-13 pt
weight 500
line 1.30

Body

Ink blue は各ページで 5% 以内。超えると抑制ではなく過剰になります。グレーは黄褐色の下地を持ち、R ≈ G > B を目安にします。

9.5-10 pt
weight 400
line 1.55

Caption

図注、脚注、補足説明。色は olive または stone へ一段落とします。

8.5-9 pt
weight 400
line 1.45

Label

デザインシステム · v1.20.0

7.5-8 pt
weight 600
line 1.35

リズムと形

基本単位は 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	長文の章と章の間

角丸

2 pt

印刷タグ

4 pt

印刷ブロック

8 px

画面ブロック

奥行き

面は原則フラットです。余白、淡い背景色、必要な場合だけ中立色の細線を使います。ごく薄い影は、実際に浮くスクリーンショットやポップオーバーに限ります。

モジュール

文書のレイアウトに使う基本的な部品です。

ボタン

塗り + 枠線・影なし・角丸 8px

主要 CTA 副次 CTA Ghost

タグ · 2 段階

実色 hex ・控えめまたは既定

控えめな塗り既定タグ

引用

olive テキスト・側線なし

装飾より明快さを優先する。ひとつの Yes のために多くの No を選ぶ。

指標カード

serif 数字 + sans ラベル・ tabular-nums

8文書タイプ

1強調色

8基本ルール

セクション見出し

serif 500 ・ 15pt ・サイズ主導の階層、装飾は不要

Selected Works · Projects

プレーンリスト

余白でリズムを作る・記号なし

紙色は暖色、印刷用の白い背景も選択可
強調色は ink blue だけ、第二色は入れない
階層は serif で担保する

コードブロック

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 セクション + タイムライン

日本語 A4 x 1 Ink Blue

インライン図表

構成図、フロー、データの可視化に使える18種類の SVG 図表を用意しています。Claude に必要な図を伝えると、文書と同じ色や書体で追加できます。

アーキテクチャ図

システム構成と接続関係、焦点ノードを 1 つに絞る

フローチャート

分岐と yes/no の流れ、成功側を主軸に配置

棒グラフ

四半期売上の比較、単色または段階色で表現

ドーナツチャート

売上構成の内訳、3-6 セグメントに対応

クイック参照

用途に合う部品をこの表から選べます。該当するものがなければ、前述の設計原則を参考にしてください。

場面	処方
大きな見出し	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 小ラベル

避けるべきこと

例外は許容できますが、理由を明示できる場合に限ります。

ページ背景

避けるページ背景の #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 やスクリーンショットだけに使います。

FAQ

Kamiとは？: Kami は AI 向けの文書テンプレートと組版ルール集です。Claude Design や GPT Canvas などのデザインツールにも、レイアウトの指示として使えます。
どんなドキュメントを作れますか？: Kami には 9 種類のドキュメントテンプレート、多言語ランディングページ、18 種類のインライン SVG 図表があります。ドキュメントは PDF または PNG に書き出せ、スライドは編集可能な PPTX にも対応します。
ブランドのスタイルに合わせられますか？: はい、ブランドカラー、フォント、レイアウトの希望をエージェントに伝えるかブランドプロファイルを用意すれば、明示した要件がKamiのデフォルトより優先されます。
対応言語は？: 英語と中国語を中心に対応しています。日本語と韓国語は書体やレイアウトを個別に調整し、出力後に確認します。標準の書体は順に Charter、TsangerJinKai02、YuMincho、Source Han Serif K です。