AI に Chat インターフェースを作らせてみた — 3度目の固定枠で「根が同じ」だと見えた（やってみた #12）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。作りの複雑な画面の4本目、今回は ⁠Chat インターフェース⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /chat に、メッセージ列（送信者・アバター・時刻・自分/相手の見分け）、入力欄（Enter で送信）、送信後の「入力中…」→返信のシミュレート、空状態。

結果 — 4.5/5（最高点タイ）

npm run build 成功。ビルド時に静的生成され、コンソールエラー0。

⁠チャット用のコンポーネントは本物でした。⁠

• ChatMessage: 役割（assistant/user/system）で見た目が変わり、アバター・時刻・入力中カーソル・標準アクションを内蔵。⁠時刻はあらかじめ整形した文字列で渡す⁠設計で、コンポーネント内では Date を整形しない＝⁠サーバーとブラウザで表示がずれる不整合（hydration mismatch）を避けられる⁠（良い設計です）。
• ChatInput: 状態を外から制御できて、⁠日本語入力（IME）に対応⁠（変換確定の Enter では送信しない）・Shift+Enter で改行・isProcessing のあいだは停止ボタンに変わる。
• docs も Chat 系は⁠コード例が、機械的に取得しても本文に出てくる⁠（#50 の問題が出ない、数少ない例）。
• 初期の文言も日本語（日本語のデザインシステムらしさ）。ツールチップは必要な provider を自分の内側に持っているので provider 不要（#52）。

粗さ — 3度目の固定枠で、ついに「根が同じ」だと分かった

ChatTemplate がまた固定枠でした: w-[1280px] h-[720px] h-screen w-full overflow-hidden。⁠Auth(#55)・Kanban(#60) に続いて3つ目。⁠ さすがに怪しい。パターンのテンプレを全部棚卸ししたら——

❌ 固定枠が残る: Bannalyze / Chat / Dashboard / Editor / Landing / MediaLibrary / Settings（7個）
✅ 問題なし:     Auth(#55) / Kanban(#60) / Blog / Docs / Onboarding / Pricing

⁠7個も残っていました。⁠ つまり——#55 で Auth、#60 で Kanban と、⁠1個ずつ直してきたけれど、根っこは同じ種類の問題だった⁠（#3→#52 の Tooltip とまったく同じ構図です）。予備知識ゼロの AI に作らせるテストの価値はここ：⁠3度目に当たって初めて「これは全体に共通する問題だ」と確信できる。⁠ → #66 で⁠7個まとめて、種類ごと⁠潰します。

ほかにも:

• ⁠行き場のないコンポーネント⁠: AIChatInput / AIChatMessage が src にあるのに、入口から公開されていない（使われないコード）→ 公開するか削除
• Badge に success の見た目が無い（ステータス表示で欲しくなる・今は4種類だけ）

学び — 1個ずつ踏むたびに、共通の種類が見えてくる

#55 Auth で固定枠を1個直した
#60 Kanban でまた直した（同じやつ？）
#12 Chat で3度目 → 棚卸し → 7個が同じ問題と判明 → 種類ごと #66

これは #52（Tooltip 28個）と同じです。⁠1個ずつ直していると根っこが見えない。複雑な画面を通し続けると、3度目4度目で「これは種類の問題だ」と確信に変わります。⁠ だから「出尽くすまで回す」ことに意味がある。盛らず、全体に共通する問題だと分かったらそう書いて、まとめて直します。

次回予告（やってみた #13）

• ⁠オンボーディング（多段ウィザード）⁠（OnboardingFlow / Stepper）— 作りの複雑な画面。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#11
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。3度目で「根が同じ」と気づける——それが、使い続けてテストする意味です。