AIの画面に「らしさ」を出すには、デザインシステムに使用ルール・使い分け・「やらないこと」まで書き込み、Figmaとコードを一致させる

Goodpatch のデザイナー4人が半年かけて作ったデザインシステムの実践。パーツのカタログではなく、思想まで置いておくとAIの出力も揃う。

「悪くはないけど、なんか違う」画面が出てくるのは、AIが参照できる「このプロダクトらしさ」がどこにも置かれていないから、というのが筆者の見立て。

コンポーネントのページを3点セットにする：①実際に使える Figma のパーツ ②そのコンポーネントのプロフィール（どんな性質か）③使用ルール（いつ使うか、正しい使い方と誤った使い方）。約50個を登録。
横断ガイドラインを作る：「モーダル系の使い分け」「通知方法の選び方」など、複数の部品にまたがるルールはフローチャートなどで別にまとめる。
ルールはボトムアップで決める：まず画面ごとに一番良い形で作り、既存ルールと照らして、近ければ統合、無理に統合すると良さが消えるなら新しいルールにする（例：Side Sheet と Side Panel を両方残し、使い分けのルールを整備）。
「やらないこと」を決める：「こう使う」より「このプロダクトではこれをしない」を重視し、人が増えても解釈がぶれないようにする。
こだわる所だけ一般解から外す：例として、通常のグレー（Neutral）とは別に、少し色味を足した「Tint」グループを持つ。
Figmaとコードを一致させる：同じ形でコード・ドキュメントにも登録し、その上に DESIGN.md と Agent Skills を重ねてリポジトリに置く。外れたトークン指定は自動で弾く。