なぜコールドテストするか
文脈ゼロの AI に、公開 npm パッケージと gunjo.jp の docs だけで実在の業種の画面を組ませる ── 170 ラウンドの記録から、何が結晶化したか。
出発点
@gunjo/ui を公開したとき、私は「AI から使えるように設計した」と書きました。typed entry point、 機械可読な metadata、AI-handoff ドキュメント。エージェントが「眺める」のではなく 「読んで、そのまま使う」ための面を、最初から組み込んだつもりでした。 でも、それはあくまで主張にすぎません。言葉にするだけなら、誰にでもできます。 だから、本当にそうなのかを確かめてみることにしました。
1ラウンドの作法
- まず、文脈ゼロの AI に「あなたは群青を初めて使うエンジニアです。この業種のこの画面を、できるだけ群青の部品で作ってください」とお願いします。
- AI には、公開ドキュメント(gunjo.jp)と npm パッケージの中身だけを頼りに、実データの画面を組んでもらいます。ソースコードは見せません。
- そのうえで、「この部品が無かったので手で組みました」「索引はこの部品を勧めてきましたが、用途には合いませんでした」と、正直に報告してもらいます。
- こうして集まった「手で組んだ跡」を見ていきます。3つの別々の画面で、それぞれ独立に同じものが手組みされていたら(これを 3-confirm と呼んでいます)、それは本当に欠けている部品だと考えます。
- そこで初めてデザインシステムに正式に追加し、SSOT(.pen / synthetic spec)まで反映して、その回を記事にまとめます。
3-confirm — 1回・2回では作らない
私たちは「同じ穴が3回出てくるまで待つ」ようにしています。1回目はまだ起票するだけ、 2回目は索引やドキュメントを調整するだけにとどめ、3回目になって初めて部品をつくります。その形が本当に安定するのを見届けたいからです。 急いで結晶化させると、API がひとつの用途に狭く固まってしまいます。たとえば MatchCard は、3回目(補助金マッチング=会社×制度という異なる種類どうしのペア)が決め手になりました。 もし1〜2回目(同じ種類どうしのペア)の時点でつくっていたら、「会社×会社」に固定してしまっていたかもしれません。 異なる種類のペアに出会ったからこそ、「left/right はどんなエンティティでもよい」という設計にたどり着けたのです。 3回目は、数を合わせるためではなく、仕様を最終的に見極めるための回でした。
結晶化した部品(抜粋)
170 画面を通るなかで、3-confirm を満たして実装された新しい部品の一部です。名前をクリックすると、それぞれのドキュメントへ移動します。
Stringline鉄道/バスの時間×距離 運行図表StatusBoard配車盤・機器盤Leaderboardベスト/ワースト・順位表ExpiryBadge有効期限の状態 BadgeLimitMonitor値 vs 名前付き上限(拘束時間・在庫など)SegmentedControl大人/小児・個人/法人 など二者択一の切替NavRow設定リストの行LineChip路線色+自動コントラストOriginDestination出発→到着の A→B 横並びSectionList請求の締め別グループ+小計DocumentRowDL ボタンを独立させた書類行MatchCard二者間ペアリング(会社×制度など)CompanyCell組織版の identity セル
AI を「正直者の検査装置」として
文脈ゼロの AI が「この部品は無い」と書いたとき、それは 「本当に無い」ことの、かなり強い証拠になります。 人が「なんとなく足りない気がする」と言うより、ずっと確かな手がかりです。 この AI にとっては手元のドキュメントだけが世界のすべてで、過去の経験や思い込みで隙間を埋めることができないからです。 手で組まれた跡は、設計の穴を正確に映した地図のようなもの。 その地図をたどっていくと、「これは本当に群青の側の問題なのか」「それとも AI の理解が足りなかっただけなのか」を、落ち着いて切り分けられます。
170 画面が示したこと
- 「完走」と言えるのは、toB と toC が同じ厚みになったときだけ。 事業者側だけ作って満足してしまうと、穴は消費者側に集まります。実際、タクシーは事業者側を6枚作っても新しい部品はゼロでしたが、利用者側を6枚掘ると7部品以上が出てきました。
- 「これは作るべきだ」という根拠には、強さの段階がある。 いちばん弱いのは「部品が無くて手で組んだ」。次が「索引が間違った部品を勧めてきた」。そして最も強いのが「既存部品では HTML の構造上どうしても無理」というケースで、これには反論の余地がほとんどありません。
- 床が成熟するほど、部品を作ってから再発見されるまでの距離が縮む。 初期は、作った部品が次に独立して再発見されるまで17回も離れていました。それが終盤には2回(ほとんど連続)にまで縮みました。新しい画面は「新しい部品を生む場」というより、「既存の部品が思わぬ文脈で使い回される場」へと変わっていったのです。
- 業界の壁は、思っていたより薄い。 20 業種・運輸5モードを通ってみると、共通の床(汎用的な UI)に業界ならではの部品を少し重ねるだけで、その多くを組むことができました。業界ごとの作法はもちろんありますが、UI の部品レベルでは業界を越えて使い回されることが多いのです。
ここから先
業界別の扉ページ(医療・運輸・金融…)は順次追加予定です。







