AIが組んだ画面の品質を守るデザインシステム：外に開く口は props・theme・events の3つだけ、下の5層は部品側で保証する

ラクスの社内デザインシステム Libero の設計判断。誰が（AIが）画面を組んでも、3つの口だけを通れば見えない品質が同じ水準になる。

どんな問題を解決するか / いつ使うか

AIで画面を作る人が増えると、見た目は整っていても、フォーカスの制御漏れ・色だけで示した選択状態・disabled時の挙動など「見えない層」の品質が抜けやすい。直す工数は後から来る。複数プロダクトで使うデザインシステムを作るとき、またはエージェントに使わせる部品ライブラリの境界を決めるときに使える考え方。

考え方と手順

持たないものを先に決める：ドメインの言葉（業務フロー・文言）とブランド表現は部品に入れない。どのガイドラインが後から来ても受け入れられる無色の土台にする。
画像では表せない領域を洗い出す：状態（ホバー・押下中・送信中・エラー・空データ・長い文字列・文字拡大）、操作（キーボードのみ、読み上げ内容）、更新（ライブラリ更新後の見た目）。
部品が引き受ける5つの層を決め、全部品に適用する
- セマンティックHTML（用途に合う要素とrole）
- アクセシビリティ（キーボード操作、名前・役割・状態を支援技術に伝える）
- 状態表現（hover・focus・disabled・処理中を見た目で示す）
- テーマ（色や形をトークンで持ち、まとめて差し替え）
- フレームワーク対応（UI/CSSライブラリの更新に追従）
  情報設計・画面構成・文言・操作後の処理は、引き続きプロダクト側が持つ。
値は「導き方」で決め、CIで検査する：色はコントラスト比から候補を絞り、角丸は要素の高さとの比で決める。Baseline の Widely available 以外の機能を使っていないかを lint、WCAG 2.2 AA の違反を axe-core で確認する。
外に開く口を3つに絞る：props（variant・状態・文言）、theme（primaryなど役割に値を渡す）、events（操作の発生を通知し、その後は任せる）。依存はプロダクト→部品の一方向にする。
口の範囲で表せない要件や基準を下回る上書きが出たら、強制せず、制約の根拠を共有してトレードオフを一緒に判断する。

AIで使うときのポイント

エージェントに「この3つの口以外で見た目を変えない」と守らせれば、非エンジニアがAIで作ったプロトタイプでも、レビューは画面構成と文言の確認に集中できる。
値そのものより導き方（コントラスト比・高さとの比）をドキュメントに残すと、AIに値を決め直させるときも同じ根拠で再計算できる。

注意点

Libero のコードとドキュメントは社外公開されない。設計のケーススタディとして読む（44コンポーネント）。

出典

@DevRakus · 2026-11-10
記事：ドメインとブランドを持たない。複数プロダクト向けデザインシステムの設計判断（RAKUS Developers Blog）tech-blog.rakus.co.jp