DESIGN SYSTEM
AIが使う
色・文字・部品のルールを渡さずに画面を作らせると、AIは画面ごとに値を決め直します。Zingerは、基準になる画面と部品、AIに読ませるルールを作って納めます。いま作っている画面があれば、3画面まで無料でレビューします。
01/BEFORE / AFTER
同じ指示で、
受注管理システムの4画面を、1画面ずつ別の会話でClaudeに作らせました。BEFOREは指示だけを渡した結果、AFTERは同じ指示にデザインシステムを添えた結果です。どちらも出力には手を加えていません。
4つの画面
BEFORE指示だけ
1枚ずつ見れば、どれも使えそうな画面です。
AFTER指示＋デザインシステム
4枚が、同じシステムの画面に見えます。
ヘッダーだけを切り出すと
BEFORE指示だけ
メニューがあるのは2画面だけで、並び順も違います。紺の色は3通りです。
- 受注一覧
- 受注登録
- 顧客詳細
- ダッシュボード
AFTER指示＋デザインシステム
4画面とも同じです。今いる画面の下線だけが動きます。
- 受注一覧
- 受注登録
- 顧客詳細
- ダッシュボード
主ボタンを並べると
BEFORE指示だけ
青が2色、紺が2色。高さは38・41・42px、角の丸みは3・4・6pxです。
受注一覧
受注登録
顧客詳細
ダッシュボード
AFTER指示＋デザインシステム
色も高さも角も同じです。変わるのは文言だけです。
受注一覧
受注登録
顧客詳細
ダッシュボード
同じ「出荷準備中」を
BEFORE指示だけ
緑、黄、赤。同じ状態が、画面ごとに別の色です。ステータスの呼び方は7種類ありました。
受注一覧
顧客詳細
ダッシュボード
- 受注番号
- SO-2026-01482／SO-2611-0382／SO-241107
- 金額
- ¥482,900／218,400 円／18,642,300円
AFTER指示＋デザインシステム
色は1つです。呼び方は、ルールで決めた5種類だけです。
受注一覧
顧客詳細
ダッシュボード
- 受注番号
- SO-26-01398／SO-26-01387／SO-26-01371
- 金額
- ¥627,000／¥49,600／¥18,426,300
使われた色を全部並べると
BEFORE指示だけ
54色
AIが画面ごとに色を決め直した結果です。
AFTER指示＋デザインシステム
14色
デザインシステムで決めた色だけです。
あとで色を変えるとき
BEFORE指示だけ
12か所
主ボタンの色だけで、4つのファイルに12か所。1か所ずつ書き換えます。
AFTER指示＋デザインシステム
1行
変数を1行書き換えると、4画面がまとめて変わります。押して試せます。
--ds-accent: #b84c2c;
指示文と作り方
- 受注一覧
- 受注管理システムの受注一覧画面を作ってください。検索、ステータスでの絞り込み、受注の一覧表（8行ほど）、ページ送り、新規登録ボタンが必要です。
- 受注登録
- 受注管理システムの受注登録画面を作ってください。顧客、納期、商品明細（3行）、備考を入力して保存できる画面です。キャンセルもできるようにしてください。
- 顧客詳細
- 受注管理システムの顧客詳細画面を作ってください。顧客の基本情報（会社名、担当者、連絡先、支払条件）と、その顧客の最近の受注5件を表示します。顧客情報を編集するボタンも付けてください。
- ダッシュボード
- 受注管理システムのダッシュボード画面を作ってください。今月の受注件数・受注金額・未出荷件数・キャンセル件数の4つの数字、納期が近い受注の一覧（5件）、担当者別の受注金額の棒グラフを表示します。新しい受注を登録するボタンも置いてください。
- どの指示にも「HTMLとCSSだけの1ファイルで、画面幅は1280pxです。データは実在しそうなダミーにしてください。」と続けています。
- 8画面とも Claude Sonnet で、互いの出力が見えない別々の会話で作りました（2026年11月）。
- AFTERに添えたのは、色・文字・部品を定義したCSS 1ファイル（132行）と、部品の使い方・ステータスの呼び方・表記を書いたルール1枚です。
- 部品を切り出す目印として、ヘッダーと主ボタンに属性を付ける指示を、BEFOREとAFTERの両方に入れています。
- 色の数は、表示された文字・背景・罫線の色を4画面ぶん数えたものです。
02/FREE REVIEW
3画面まで、
AIで作った画面のURL、スクリーンショット、Figmaのいずれかをお送りください。直す箇所と優先順位を、1枚のメモでお返しします。
- 01
情報の優先順位
最初に目に入るものが、その画面でいちばん大事な情報になっているか。
- 02
画面ごとのばらつき
色、文字サイズ、余白、ボタンや表の形が、画面の間でそろっているか。
- 03
操作で迷う箇所
次に押すものが分かるか。入力の間違いに、その場で気づけるか。
4画面目以降のレビューは、内容を伺ってお見積もりします。
03/DESIGN SYSTEM
デザインシステム
- 01
基準になる画面
一覧、詳細、入力など、よく使う型の画面を先に作ります。以後の画面は、これを手本にします。
- 02
部品
ボタン、入力欄、表、通知など。無効、エラー、選択中といった状態まで決めます。
- 03
色・文字・余白の変数
値を1か所で管理し、変更が全画面に届くようにします。
- 04
AIに読ませるルール
使ってよい部品と値、避ける組み方を、AIが読めるファイルにまとめます。
- 05
レビューの手順
AIが作った画面がルールに沿っているかを、社内で確かめる手順をお渡しします。
期間と費用は、画面数と、すでにあるFigmaやコードを伺ってお見積もりします。
04/FLOW
レビューから
- 01
無料レビュー
3画面を見て、直す箇所と優先順位を1枚のメモでお返しします。
- 02
デザインシステム構築
基準になる画面、部品、変数、AI向けのルールを作って納めます。
- 03
納品後のレビュー
新しく作った画面を、必要なときに見ます。部品を足すか、今ある部品で済ませるかを一緒に決めます。