「うちのデザインシステムで」だけでは足りない：AIが18pxや48pxに走らないための、貼り付けて使えるプライマー

プロンプトに「うちのデザインシステムで料金ページを作って」と書くと、たいてい、似ているが細部が合わない画面が返ってくる。LogRocketの例は典型的だ。システムは16pxと24pxの間隔しか定義していないのに、AIは18pxと48pxのパディングを出してきた。大きな問題には見えないが、こうしたずれは一つひとつ、後で誰かが見つけて直さなければならない。

問題は従わないことではなく、指定が足りないこと

aiuxplaygroundのガイドは、よくある失敗を挙げている。トークンではなくpadding: 16pxやcolor: #333のような直書きの値を出力する。システムの文脈がないと汎用的なコンポーネントを作り、少しずつシステムからずれる。命名が不統一（btn-primaryとButtonPrimaryの混在）だと、AIはどちらかを選ぶか混ぜる。LogRocketはさらに、「アイコン付きのセカンダリ・アウトラインボタン」のように、もっともらしいがライブラリに実在しないバリアントをAIが作ることがあると警告している。

「モダンでクリーン」といった形容詞は役に立たず、具体的なルールが効く。LogRocketの勧めは、形容詞を確認できる条件に置き換えることだ。たとえば「24pxの垂直リズム、フォントサイズは最大三種類、カードのパディングは16px、角丸は8px」。

毎回貼れるプライマー

やり方は、デザインシステムの要点を固定の文章にまとめ、生成のたびに先頭に貼ることだ。以下はLogRocketの例の数値（8px刻みの間隔、主色#2563EB、フォントInter、限られたコンポーネント一覧）をもとに整理したもので、自分用に書き換えて使える。

You are designing within our design system. Use ONLY the elements below.
Anything not listed must be flagged as "a custom element that needs design system approval."

Spacing scale: 8px increments (tokens: space-8, space-16, space-24 ...)
Primary button color: #2563EB (token: color-action-primary)
Font: Inter
Components: Card, Button (primary / secondary), Badge, H1-H4
Rules:

Use our spacing tokens, not raw pixel values.
Use our color tokens, not hex codes.
After generating the component, check that all spacing values exist in the spacing scale, and list any deviations.

そのあとにタスクを書く。たとえば「上のデザインシステムを使って、タイトル、説明、切り替えスイッチを持つ設定カードのコンポーネントを作って」。要点は二つある。一つ目は、一覧にないものはAIに「承認が必要なカスタム要素」と明示させること。そうすれば新しく発明されたものが静かに混入しない。二つ目は、最後の一文が自己チェックであること。すべての間隔値がスケール内にあるかを確認させ、ずれを列挙させる。

トークンの渡し方と量

二つのガイドとも、トークンは文章で説明するのではなく、JSONなどの構造化データで渡すことを勧めている。量は段階的にできる。通常の依頼には間隔スケール、カラーパレット、使えるコンポーネントだけを渡す。複雑な作業ではタイポグラフィのルールやトーンの指針を加える。完全なドキュメントは、境界ケースやインタラクションパターンが必要な、まったく新しいデザインのために取っておく。

見落としやすい点が二つある。一つは、命名規則を一つに絞り、AIが推測しなくて済むようにすること。もう一つは、生成されたすべての要素を既存のコンポーネントに対応づけさせることだ。対応できないものは、先に対処すべき穴である。Figmaを使うなら、レイヤーが生の16進カラーコードや任意の間隔ではなく、実際にトークン変数に結びついているかも確認したい。

あなたのお金にとって何を意味するか

プライマーが節約するのはやり直しの回数だ。間隔が合わない、コンポーネントが発明されたといった理由で再実行するたびに、利用枠を余分に使うことになる（枠の数え方はツールによって違うが、消費されることに変わりはない）。30分かけて二つのことをしておきたい。最もよく使うデザインシステムのルールを1ページのプライマーに書くこと。そして次の1週間、プライマーがある場合とない場合で、生成のうちそのまま使えたものと、やり直したものの数を記録することだ。

プライマー自体にも保守が必要だ。二つのガイドとも、導入前後の定量データは示していない。LogRocketにある唯一の数字は、五分以内に三つのコンセプトを生成したという個人的な経験談にすぎないため、どれだけ節約できるかは言えない。その数字は自分の記録から出すしかない。