AIエージェント向けのドキュメントデザインシステムです。単一アクセントカラー、serif階層、あたたかなパーチメントキャンバスで安定したレイアウトを出力します。

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

9種類：ワンページャー、長文ドキュメント、レター、ポートフォリオ、履歴書、スライド、個別株レポート、変更履歴、ランディングページ（EN + CN + KO）。加えて14種のインラインSVG図表。HTML出力でPDF、PNG、編集可能なPPTXスライドに変換可能です。

英語、中国語、日本語、韓国語。各言語に専用のserifフォント：英語はCharter、中国語はTsangerJinKai02、日本語はYuMincho、韓国語はSource Han Serif Kを使用します。

Design System · v1.7.1 · 2026.06

Kami紙

Name: Kami
Author: Tw93

よい内容には、よい版面を。Kami は AI 時代のための文書組版デザインシステム。文書を明快で読みやすく、記憶に残る形へ整えます。

Canvas#f5f4ed Accent#1B365D SerifJP Mincho / Tsanger fallback Sans= Serif (一頁一書体)

00 · See it

出力サンプル

Claude に要件を渡すだけで、一枚資料、長文、正式書簡、ポートフォリオ、履歴書、スライドまで、少数の明確なルールで整った版面に仕上がります。

同じ brief は画像生成モデルにも渡せます。サンプル画像とコピペできるプロンプトは README に置いています。

Equity Report

Tesla Q1 2026 決算レポート

Resume

創業者 CV、2ページ

Portfolio

Kaku ターミナル作品集、7ページ

Slides

Agent キーノート、6枚

Landing Pages

Kami で構築

同じランディングページテンプレートを 3 つの異なるプロダクトに適用。ひとつの制約セットから、3 つの異なる目的に。

Kami

デザインシステムホームページ

Luo 落文

CJK リーディングフォント

Mole 鼹

macOS システムユーティリティ

01 · Usage

インストールと呼び出し

「履歴書を作って」「スタートアップ紹介の一枚資料を作って」「登壇用スライドを作って」のように要件を伝えるだけで、skill が自動起動します。スラッシュコマンドは不要です。

# Claude Code
npx skills add tw93/kami -a claude-code -g -y

# Codex plugin marketplace
codex plugin marketplace add tw93/kami
codex plugin add kami@kami

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 · 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

#F5F4ED

Ivory

Cards / elevated surfaces

#FAF9F5

Warm Sand

Button default / interactive surfaces

#E8E6DC

Deep Dark

Dark theme page base, not pure black

#141413

Brand

Ink Blue

Primary color · CTA · quote bar · section overline

#1B365D

Ink Light

Links on dark surfaces · lighter variant

#2D5A8A

Dark Surface

Dark theme container · warm charcoal

#30302E

Error

Error state, deep warm red

#B53333

Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

Tag Tints: rgba から実色 hex へ

下記は ink blue #1B365D を parchment 上に重ねたときの等価な実色 hex です。タグ背景は rgba() を避け、WeasyPrint の二重矩形を防ぎます。

Tag sample

0.08

#EEF2F7

Tag sample

0.14

#E4ECF5

DefaultTag sample

0.18

#E4ECF5

Tag sample

0.22

#D0DCE9

Tag sample

0.30

#D6E1EE

04 · Typography

タイポグラフィ体系

階層は serif、機能要素は sans。serif は本文 400、見出し 500 を基本にします。

Serif · 見出し + 本文

JP Mincho / TsangerJinKai02

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

</>

Mono · コード

JetBrains Mono

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

スケール（印刷 pt、画面 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

Design System · v1.7.1

7.5-8 pt
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

4 pt

Tight

6 pt

Code block

8 pt

Default card

12 pt

Container

16 pt

Feature card

24 pt

Large container

32 pt

Hero

奥行き: 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

主要 CTA 副次 CTA Ghost

タグ（3 段階）

実色 hex ・弱から強へ選択

Light 0.08 Standard 0.18 Brush gradient

引用

左 2pt のブランド実線 + olive テキスト

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

指標カード

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

6文書タイプ

1強調色

8基本ルール

セクション見出し

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

Selected Works · Projects

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

日本語 A4 x 1 Ink Blue

07 · Diagrams

インライン図表

アーキテクチャ、フロー、データ可視化をカバーする 14 種の SVG 図表を用意。必要な種類を Claude に伝えると、Kami の色と書体規則に沿って文書へ直接埋め込みます。

アーキテクチャ図 · Architecture

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

フローチャート · Flowchart

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

棒グラフ · Bar Chart

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

ドーナツチャート · Donut Chart

売上構成の内訳、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 小ラベル

09 · 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 を使う。あるいは明暗の切り替えで階層を作る。

10 · Background

設計の背景

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

その後「あなたの知らない Agent：原理、アーキテクチャとエンジニアリング実践」の発表をすることになりました。すでに原稿があったのでスライドを一から作る気にならず、Claude Design で自分のスタイルのまま組版し、何度も調整を繰り返して、ようやく納得のいく仕上がりになりました。inline SVG 図表、暖色パレットの統一、編集リズムの引き締めを加え、よく使う文書形式をすべてカバーするまで育ったので、このプロセスをさらに抽象化して kami にしました。どのエージェントに渡しても安心して出せる、静かなデザインシステムです。

11 · よくある質問

FAQ

Kamiとは？: AIエージェント向けのドキュメントデザインシステムです。単一アクセントカラー、serif階層、あたたかなパーチメントキャンバス。LLMエージェントに指示を出すだけで安定したレイアウトが返ってきます。Claude DesignやGPT Canvasなどの画像レンダラーへのビジュアルブリーフとしても使えます。
どんなドキュメントを作れますか？: 9種類のテンプレート：ワンページャー、長文ドキュメント、レター、ポートフォリオ、履歴書、スライド、個別株レポート、変更履歴、ランディングページ（EN + CN + KO）。加えて14種のインラインSVG図表で視覚的な説明も可能です。出力はHTMLで、PDF、PNG、編集可能なPPTXスライドに変換できます。
セットアップ方法は？: Claude Code：npx skills add tw93/kami -a claude-code -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。汎用エージェント：npx skills add tw93/kami -a '*' -g -y。Claude Desktop：GitHub Releasesからkami.zipをダウンロードし、カスタマイズ > スキルでアップロード。
対応言語は？: 英語、中国語、日本語、韓国語。各言語に専用のserifフォントを使用：英語はCharter、中国語はTsangerJinKai02、日本語はYuMincho、韓国語はSource Han Serif K。字間、行高、フォントサイズは言語ごとに印刷品質レベルで調整されています。