基盤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#30
上位協調コンポーネント(context で id / aria-invalid / aria-describedby を自動注入)。#29 で課題として記録され、#30 の別 cold AI に「real form/validation/a11y system」と評価された複利の象徴。
- DataTable#6
テキスト検索+Select フィルタ+列ソート+ページネーション+Badge を一発で 組み合わせ できるキャンバス。後の admin / inbox / 業界 worklist の母体になった。
- CommandPalette#7
⌘K で開く検索パレット。Kbd・グループ・矢印+Enter まで含めて、cold AI が docs だけから一発で組み上げた。
- Charts (HTML/CSS)#4
SVG ではなく HTML/CSS のレイアウトコンポーネントで作ったチャート群。「任意データで崩れないこと」を売りにしたまま、現実の汚いデータ(外れ値・ゼロ・極小値)で stress test を通過した。
FormField context(#152 で追加)が #30 で別の cold AI に「real form/validation/a11y system」と評価されたように、上位の協調コンポーネントほど次の回での複利が大きいことが見え始めた30枚でした。
基盤UI・汎用 の全ラウンド
基盤UI・汎用 カテゴリの 30 画面を、ラウンド順に並べています。各カードから cold AI が組んだソース、解説記事、デスクトップ/モバイルのプレビューに飛べます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/setup"アクセシブルなコンポーネント" と "フォームの仕組み" は別物。Form は "見た目" だけ。
/account上位のコンポーネントを作ると、複利が一段上がる。前回作ったフォームの仕組みが "本物" と認定された。
この業界が gunjo に残したもの
汎用30枚は、新しいコンポーネントを量産する場ではなく、「このキャンバスに乗せて以後の業界画面を組めるか」を判定する目盛りでした。HTML/CSSチャートが任意データで崩れないこと、FormField の自動 aria 注入が cold AI に発見されること、CommandPalette や受信トレイの list-detail が一発で組めること──ここで証明されたキャンバスの上に、医療・物流・運輸・金融まで全業界の画面が積み重なっています。