AI エージェント向けの文書デザインシステムです。書体、強調色、余白を統一し、文書や画像生成用のビジュアルブリーフを整えます。

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

8種類のドキュメントテンプレートに加え、ランディングページと18種の図表があります。履歴書は既存原稿の整形、ゼロからの構築、資料からの再構築の3モードを選び、Visual guide、Layout fitting、Source protectionを経て、HTML、PDF、ページ数検証済みの編集可能DOCXを納品します。履歴書は白地の A4・1ページが既定です。クリーム色、2ページ、写真は任意です。

セットアップ方法は？

現在は非公開プレビューで、正式リリースはまだありません。リポジトリへのアクセス権を取得し、クローンしてローカルのマーケットプレイスから導入します。Claude Desktop はリポジトリ内の zhi.zip を使用します。許可されたテスターは zhi-fonts-full.zip をローカルで作成し、bash scripts/ensure-fonts.sh --bundle で導入します。

英語、中国語、日本語、韓国語。ラテン文字は Charter、中国語本文は FangZheng GongWen KaiTi、中国語履歴書の氏名は FangZheng XinKaiTi、日本語は YuMincho、韓国語は Source Han Serif K を使用します。

Design System · v1.12.0 · プレビュー

Zhi纸

Name: Zhi
Author: Zhi

よい内容には、よい版面を。Zhi が文書を読みやすく整えます。

Canvas#f5f4ed Accent#1B365D SerifYu Mincho / FZ Kai Sans= Serif (一頁一書体)

00 · See it

出力サンプル

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

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

履歴書は白地の A4・1ページが既定です。クリーム色、2ページ、写真は必要に応じて選べます。HTML、PDF、編集可能な DOCX をまとめて納品します。

Equity Report

Tesla Q1 2026 決算レポート

Resume

プロダクト職 CV、1ページ

One-Pager

Zhi 紹介、1ページ

Slides

Agent キーノート、8枚

Landing Pages

Web ページの実例

Zhi と第三者の製品ページを通じて、統一感のある視覚表現を紹介します。各製品の名称と帰属はそのまま掲載しています。

Zhi

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

Luo 落文

CJK リーディングフォント

Mole 鼹

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

01 · Usage

インストールと呼び出し

「履歴書を作って」「紹介資料を整えて」のように依頼すると、スキルが起動します。

現在は非公開プレビューで、正式リリースはまだありません。リポジトリへのアクセス権を取得し、手順に沿ってクローンしてから、次のローカルコマンドを実行してください。

# Authorized checkout
gh auth login
gh repo clone okht/zhi ./zhi

# Claude Code (v2.1.142+)
/plugin marketplace add ./zhi
/plugin install zhi@zhi

# Codex plugin marketplace
codex plugin marketplace add ./zhi
codex plugin add zhi@zhi

汎用エージェント：npx skills add ./zhi/plugins/zhi -a universal -g -y。クローン済みの軽量プラグインディレクトリから導入します。

Claude Desktop はリポジトリ内の Slim zhi.zip（6 MB 未満）を使用します。許可されたテスターは zhi-fonts-full.zip をローカルで作成し、bash scripts/ensure-fonts.sh に --bundle を指定して導入します。公開ダウンロードは提供していません。

02 · Manifesto

設計原則

暖かい紙色を土台に、強調色は ink blue のみ。階層は serif で作り、強い影や派手な配色は退かせます。履歴書は純白を既定とし、暖かいクリーム色も選べます。その他の文書は従来どおりパーチメントを既定にします。

1
通常文書は parchment #f5f4ed、履歴書は純白が既定で暖色クリームも選択可能
2
強調色は ink blue #1B365D のみ、第二の彩色は入れない
3
グレーは暖色寄りで統一
4
中国語は FangZheng GongWen KaiTi、ラテン文字は独立した Charter を維持
5
一般文書は本文 400、見出し 500。履歴書の太字は見本に従う
6
行間の目安：見出し 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

タイポグラフィ体系

一般文書は本文 400、見出し 500。履歴書の太字と区切り記号は参照見本に従います。

Serif · 見出し + 本文

JP Mincho / FZDocKai

日本語は明朝体、中国語は方正公文楷体、ラテン文字は独立した Charter。中国語履歴書の氏名は方正新楷体です。

</>

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.12.0

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 つの影の方法

細い輪郭、薄い影、明暗の切り替えで奥行きを表現します。

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

8文書タイプ

1強調色

8基本ルール

セクション見出し

15pt serif ・文字サイズで階層を表現

Selected Works · Projects

Dash List

丸点ではなくダッシュ・編集文体

通常文書は暖色、履歴書は白地も選択可能
強調色は ink blue だけ、第二色は入れない
階層は serif で担保する

コードブロック

ivory 背景 + 4pt 角丸、枠線なし

// 温かみは色数ではなく、抑制で作る
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

インライン図表

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

アーキテクチャ図 · 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 背景 + `4pt` 角丸 + mono 書体、枠線なし
主ボタンと副ボタン	主: brand 塗り + ivory 文字、副: warm-sand + charcoal
特別カードを示す	`border-left: 1.4pt solid var(--brand)`、一辺のみ
セクション開始	serif `500` ・ `15pt` ・サイズ主導の階層、装飾は不要
表紙を作る	1 ページ構成、Display サイズ + 右寄せの著者/日付 + 広い余白
重要な数値を見せる	ベースライン揃えの一行、透明・コンテナなし + serif 大数字 + sans 小ラベル

09 · Anti-Patterns

避けるべきこと

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

ページ背景

避ける寒色グレー #f3f4f6 は避けます。履歴書と白地印刷版は純白を使用できます。

推奨常に #f5f4ed の parchment。印刷時の白フチを防ぐため、@page background も同色に設定します。

タグの色

避けるタグの rgba(27,54,93,0.18) は二重矩形の原因になります。単色 hex を使います。

推奨tint 対照表の実色 hex #E4ECF5。描画が安定し、色ぶれを防げます。

合成ボールド

避ける一般文書の見出しは、強い合成ボールドで線が潰れ、階層も重くなります。

推奨付属フォントで本文 400、見出し 500 を維持します。強調にはサイズや左バーを使い、履歴書の太字は専用の見本に従います。

シャドウ

避ける強い drop shadow 0 2px 8px rgba(0,0,0,0.3)。重く見え、印刷時に黒く潰れやすい。

推奨ring shadow 0 0 0 1pt か whisper rgba 0.05。あるいは明暗の切り替えで階層を作ります。

10 · Background

内容が伝わる文書へ

Zhi は中国語書体、明快な階層、余白をそろえて日々の文書制作を支えます。レター、紹介資料、調査レポート、ポートフォリオ、スライドを統一した組版ルールで整えます。

履歴書は手元の資料から始めます。完成原稿の文言は保持し、断片的なメモは質問を通じて整理します。背景色、ページ数、写真を必要に応じて選び、編集可能なファイルと検証済み PDF を納品します。

11 · よくある質問

FAQ

Zhiとは？: AI エージェント向けの文書デザインシステムです。書体、強調色、余白を統一し、文書や画像生成用のビジュアルブリーフを整えます。
どんなドキュメントを作れますか？: 8種類のドキュメントテンプレートに加え、ランディングページと18種の図表があります。履歴書は既存原稿の整形、ゼロからの構築、資料からの再構築の3モードを選び、Visual guide、Layout fitting、Source protectionを経て、HTML、PDF、ページ数検証済みの編集可能DOCXを納品します。履歴書は白地の A4・1ページが既定です。クリーム色、2ページ、写真は任意です。
セットアップ方法は？: 現在は非公開プレビューで、正式リリースはまだありません。リポジトリへのアクセス権を取得し、クローンしてローカルのマーケットプレイスから導入します。Claude Desktop はリポジトリ内の zhi.zip を使用します。許可されたテスターは zhi-fonts-full.zip をローカルで作成し、bash scripts/ensure-fonts.sh --bundle で導入します。
対応言語は？: 英語、中国語、日本語、韓国語。ラテン文字は Charter、中国語本文は FangZheng GongWen KaiTi、中国語履歴書の氏名は FangZheng XinKaiTi、日本語は YuMincho、韓国語は Source Han Serif K を使用します。