コールドテスト

基盤UI・汎用のコールドテスト — 連載最初の30画面で、群青が業界を問わずどこまで通用するかを試す

設定・ダッシュボード・データテーブル・コマンドパレット・受信トレイ・カレンダー──業界を絞らない30枚の汎用画面に、予備知識ゼロの AI が gunjo/ui だけで挑んだ記録。連載の出発点で、後のすべての業界画面が乗る土台が、どこまで安定しているかを確かめました。

基盤UI・汎用 の cold test、30 画面のまとめ。

なぜ汎用UIこそ、通用するかを試すのが難しいのか

業界画面が組めるかどうかは、その下にある汎用コンポーネント(Form / Table / Tabs / Tooltip…)のキャンバスがどれだけ描き込みに耐えるかで決まります。連載の最初の30枚は、業界の専門知識ではなく、汎用UIだけで戦う回でした。一般的なコンポーネントが「だいたい動く」のと、「業界画面の重さに耐える」のは別物です。Tooltip Provider の SSR クラッシュ、HTML/CSSチャートが任意データで崩れないか、FormField context が aria を正しく注入できるか──キャンバスの強度は、こうした重いシナリオに当てるまで見えてきません。

ここで群青に加わったコンポーネント

汎用30枚の中で群青のキャンバスが描き込まれていった代表的な動きです。新規コンポーネントの実装というより、既存コンポーネントの境界を広げ、足りないコンポーネントを課題として記録し、複数の領域で再利用できる形に固めていった回でもあります。

FormField context(#152 で追加)が #30 で別の cold AI に「real form/validation/a11y system」と評価されたように、上位の協調コンポーネントほど次の回での複利が大きいことが見え始めた30枚でした。

基盤UI・汎用 の全ラウンド

基盤UI・汎用 カテゴリの 30 画面を、ラウンド順に並べています。各カードから cold AI が組んだソース、解説記事、デスクトップ/モバイルのプレビューに飛べます。

本当に AI に使わせてみた — 予備知識ゼロの AI に @gunjo/ui で設定画面を作らせる(やってみた #1) preview
#1スコア 4/5
本当に AI に使わせてみた — 予備知識ゼロの AI に @gunjo/ui で設定画面を作らせる(やってみた #1)
/settings

「使わせて、見つけて、直す」ループ。報告をそのまま設計に戻す。

またしても本当に AI に使わせてみた — モーダル告知バナーを @gunjo/ui で(やってみた #2) preview
#2スコア 4/5
またしても本当に AI に使わせてみた — モーダル告知バナーを @gunjo/ui で(やってみた #2)
/announce

今回は2つ、しかも片方は痛いところを突かれた。

またしても AI に使わせてみた — カルーセル、そして "氷山の一角" の話(やってみた #3) preview
#3スコア 4/5
またしても AI に使わせてみた — カルーセル、そして "氷山の一角" の話(やってみた #3)
/carousel

だから "担保できる" は、テストしてから言う。"氷山の一角" だった。

AI にダッシュボードを作らせてみた — チャートは"任意データで壊れない"のか(やってみた #4) preview
#4スコア 4/5
AI にダッシュボードを作らせてみた — チャートは"任意データで壊れない"のか(やってみた #4)
/dashboard

動いた、そして"壊れない"は本物だった。「型で発見できる」の足元をすくう一点。

AI にログイン画面を作らせたら、直したバグが消えていた(やってみた #5) preview
#5スコア 4.5/5
AI にログイン画面を作らせたら、直したバグが消えていた(やってみた #5)
/login

欠陥が消えていた。残り0.5点と、パターンの宿題。

AI に管理画面のデータテーブルを作らせてみた(やってみた #6) preview
#6スコア 4/5
AI に管理画面のデータテーブルを作らせてみた(やってみた #6)
/users

#52 がまた効いていた。また「公開漏れ」、ただし今度はパターンが見えた。

AI に ⌘K コマンドパレットを作らせてみた(やってみた #7) preview
#7スコア 4.5/5
AI に ⌘K コマンドパレットを作らせてみた(やってみた #7)
/command

アクセシビリティを売りにするライブラリから、そのアクセシビリティの警告が出た。

AI に "誰も作りたがらない states" を作らせてみた — 一周の締め(やってみた #8) preview
#8スコア 4/5
AI に "誰も作りたがらない states" を作らせてみた — 一周の締め(やってみた #8)
/inbox

粗さが "出尽くしてきた"。また「固定幅」。ただし今度は、もう分かっている種類のもの。

AI に Kanban ボード(ドラッグ&ドロップ)を作らせてみた — "枯れて" なかった(やってみた #9) preview
#9スコア 4/5
AI に Kanban ボード(ドラッグ&ドロップ)を作らせてみた — "枯れて" なかった(やってみた #9)
/board

新しい発見が出た。"出尽くした" は、複雑な画面を通してから言う。

AI にファイルアップロードを作らせたら、自分のコンポーネントが半完成だった(やってみた #10) preview
#10スコア 3/5
AI にファイルアップロードを作らせたら、自分のコンポーネントが半完成だった(やってみた #10)
/upload

シリーズ最低点。一番低い点が、一番誠実。

AI にカレンダー予約を作らせてみた — 日付は複雑系の本丸(やってみた #11) preview
#11スコア 4/5
AI にカレンダー予約を作らせてみた — 日付は複雑系の本丸(やってみた #11)
/booking

日付という複雑な題材が出した粗さ。

AI に Chat インターフェースを作らせてみた — 3度目の固定枠で「根が同じ」だと見えた(やってみた #12) preview
#12スコア 4.5/5
AI に Chat インターフェースを作らせてみた — 3度目の固定枠で「根が同じ」だと見えた(やってみた #12)
/chat

1個ずつ踏むたびに、共通の種類が見えてくる。3度目の固定枠で、ついに「根が同じ」だと分かった。

AI にオンボーディング・ウィザードを作らせてみた — 専用コンポーネントが "本業" を外していた(やってみた #13) preview
#13スコア 3.5/5
AI にオンボーディング・ウィザードを作らせてみた — 専用コンポーネントが "本業" を外していた(やってみた #13)
/onboarding

"専用コンポーネント" ほど、本業でやらせてみないと核心の欠落が見えない。専用コンポーネントが核心を満たせない+「アクセシビリティ内蔵」がまた破れた。

AI に料金ページを作らせてみた — また "名前負け"、そして依存の混入(やってみた #14) preview
#14スコア 3.5/5
AI に料金ページを作らせてみた — また "名前負け"、そして依存の混入(やってみた #14)
/pricing

"依存の衛生"(余計な依存を持ち込まないこと)も、デザインシステムの品質のうち。名前負け再び+固定幅+余計な依存の混入。

AI に通知センターを作らせてみた — 基本コンポーネントは枯れた。次の課題は"上の層"へ移った(やってみた #15) preview
#15スコア 3/5
AI に通知センターを作らせてみた — 基本コンポーネントは枯れた。次の課題は"上の層"へ移った(やってみた #15)
/notifications

"出尽くし" は、層ごとにやってくる。課題は"上の層"と"インストール"へ移った。

AI に IDE 風エディタを作らせてみた — "出尽くし" の境界線がはっきりした(やってみた #16) preview
#16スコア 3/5
AI に IDE 風エディタを作らせてみた — "出尽くし" の境界線がはっきりした(やってみた #16)
/editor

"出尽くし" は、層の境界として現れる。境界の "上側" に3つ。

AI に検索結果ページを作らせてみた — "コンポーネントのフリをした、ただの見た目"(やってみた #17) preview
#17スコア 4/5
AI に検索結果ページを作らせてみた — "コンポーネントのフリをした、ただの見た目"(やってみた #17)
/search

最近で最高点。"出尽くし" の輪郭が、さらに細かく見えた。

AI にプロフィールページを作らせてみた — 粗さが尽きてきた(やってみた #18) preview
#18スコア 4.5/5
AI にプロフィールページを作らせてみた — 粗さが尽きてきた(やってみた #18)
/profile

過去最高タイ。"出尽くし" のカーブが見えてきた。

AI に通知設定画面を作らせてみた — 5/5 を阻むのは、もう docs だけ(やってみた #19) preview
#19スコア 4.5/5
AI に通知設定画面を作らせてみた — 5/5 を阻むのは、もう docs だけ(やってみた #19)
/settings/notifications

2回連続で新しい種類の問題ゼロ。"完成" の手前にいる。

AI に空ダッシュボードを作らせてみた — 連続クリーンが、途切れた(やってみた #20) preview
#20スコア 4.5/5
AI に空ダッシュボードを作らせてみた — 連続クリーンが、途切れた(やってみた #20)
/dashboard-empty

だが連続記録は途切れた。"出尽くした" を急がない。

AI にブログ記事ページを作らせてみた — アクセシビリティの"根"が見えた(やってみた #21) preview
#21スコア 4.5/5
AI にブログ記事ページを作らせてみた — アクセシビリティの"根"が見えた(やってみた #21)
/blog/post

コンポーネント内部のアクセシビリティ・バグはゼロ。アクセシビリティは「潰す」より「根を断つ」段階へ。

AI にランディングページを作らせてみた — 「出尽くした」を破る2つの実バグ(やってみた #22) preview
#22スコア 3.5/5
AI にランディングページを作らせてみた — 「出尽くした」を破る2つの実バグ(やってみた #22)
/landing

これまで最低、でも意味のある低さ。予備知識ゼロのテストは「作りの不一致」を炙り出す。

AI にドキュメントサイトのトップを作らせてみた — 骨格は通る、でも"中身"が無い(やってみた #23) preview
#23スコア 3.5/5
AI にドキュメントサイトのトップを作らせてみた — 骨格は通る、でも"中身"が無い(やってみた #23)
/docs-home

骨格は強い、でも中身の層が空。「骨格」と「中身」は別物。

AI に管理ダッシュボードを作らせてみた — DataTable は強い、でも"管理画面の作法"が足りない(やってみた #24) preview
#24スコア 〜3.5/5
AI に管理ダッシュボードを作らせてみた — DataTable は強い、でも"管理画面の作法"が足りない(やってみた #24)
/admin

データ層がよく支えた。「データ層」と「管理作法」は別レイヤー。

AI に価格比較ページを作らせてみた — コンポーネントは強い、でも"看板"テンプレが役割を外す(やってみた #25) preview
#25スコア 4/5
AI に価格比較ページを作らせてみた — コンポーネントは強い、でも"看板"テンプレが役割を外す(やってみた #25)
/pricing

「コンポーネント」と「看板テンプレ」は別の成熟度。"看板"が役割を外す。

AI に受信トレイ(メール一覧+詳細)を作らせてみた — 枠組みは強い、でも"選べるリスト"が無い(やってみた #26) preview
#26スコア 4/5
AI に受信トレイ(メール一覧+詳細)を作らせてみた — 枠組みは強い、でも"選べるリスト"が無い(やってみた #26)
/inbox

「枠組み」と「中身のリスト」は別。"選べるリスト"が無い。

AI に週表示カレンダー(予定表)を作らせてみた — 汎用コンポーネントは綺麗、でも"分野ごとの表示層"がゼロ(やってみた #27) preview
#27スコア 4.5/5
AI に週表示カレンダー(予定表)を作らせてみた — 汎用コンポーネントは綺麗、でも"分野ごとの表示層"がゼロ(やってみた #27)
/schedule

汎用コンポーネントは綺麗・分野ごとの層がゼロ。「汎用のライブラリ」と「分野ごとの表示層」は別物。

AI にファイルブラウザを作らせてみた — 直した不備が全部「武器」になって返ってきた回(やってみた #28) preview
#28スコア 4.5/5
AI にファイルブラウザを作らせてみた — 直した不備が全部「武器」になって返ってきた回(やってみた #28)
/files

ループが複利で効いている。直した不備が全部「武器」になっていた。

AI に設定ウィザード(検証つき多段フォーム)を作らせてみた — "見た目" はあるが "フォームの仕組み" が無い(やってみた #29) preview
#29スコア 3.5/5
AI に設定ウィザード(検証つき多段フォーム)を作らせてみた — "見た目" はあるが "フォームの仕組み" が無い(やってみた #29)
/setup

"アクセシブルなコンポーネント" と "フォームの仕組み" は別物。Form は "見た目" だけ。

プレビューを表示できません
#30スコア 4.5/5
AI に設定ハブを作らせてみた — 前の回で作ったフォームの仕組みが、次の AI に"本物"と認定された(やってみた #30)
/account

上位のコンポーネントを作ると、複利が一段上がる。前回作ったフォームの仕組みが "本物" と認定された。

この業界が gunjo に残したもの

汎用30枚は、新しいコンポーネントを量産する場ではなく、「このキャンバスに乗せて以後の業界画面を組めるか」を判定する目盛りでした。HTML/CSSチャートが任意データで崩れないこと、FormField の自動 aria 注入が cold AI に発見されること、CommandPalette や受信トレイの list-detail が一発で組めること──ここで証明されたキャンバスの上に、医療・物流・運輸・金融まで全業界の画面が積み重なっています。