AI にフライト予約を作らせてみた — 昨日作った ListCard を翌日もう使い、座席表の欠落が2回目になった（やってみた #112）
/flight-booking375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にフライト予約を作らせてみた — 昨日作った ListCard を翌日もう使い、座席表の欠落が2回目になった（やってみた #112）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。航空の利用者側1枚目——国内線フライト予約（便検索・座席指定・運賃内訳・予約フロー）。
鉄道の利用者向け（特急券/乗換案内/運行情報）に続く、交通モード2つ目の利用者側。観測2つ——#111 で作った ListCard を別の予備知識ゼロの AI が便一覧で自力発見するか＋座席表（SeatMap）が2回目の手組みになるか（#109 鉄道座席に続く）。
結果 — 3.5/5。法則がまた1ラウンドで閉じ、SeatMap が 2/3 に。
tsc/build 緑・375px mobile-first・0 console error・5ステップ予約フロー。予備知識ゼロの AI（群青を一度も触っていない設定）のレポート：
ListCard— これのために作られていた。便の結果行。 docstring が使用例（「検索結果・経路/商品/物件 比較」）と必要なタグ（「最速/最安/おすすめ」）まで名指し。leading/title/description/tags/status/meta/severity/onSelect（≥44px の本物のボタン）。摩擦ゼロ・ライブラリの旗艦『物の一覧』コンポーネント。 AmountBreakdown— ライブラリ全体で最も合った（運賃→諸税・料金→座席指定料→割引→総額をそのまま）。Stepper— これのために作られていた（5ステップ・モバイル決済）。
#111 で ListCard を作った、その次の #112 で、航空の別の予備知識ゼロの AI が便一覧で自力発見し 摩擦ゼロ で使った。 AmountBreakdown（#103→#104）・ActionQueue（#106→#107）に続き、作る→翌画面で発掘、の法則が ListCard でも1ラウンドで閉じた——全業種共通の土台は、作れば翌画面で裏付かれていく。
そして Stepper——予備知識ゼロの AI が「5ステップが375pxでも崩れず段階的に収まり、ページを壊さない」と書いた。#109 で「決済が見えない」と報告された 375px での切れを #355 で直した、その修正がここで機能した。
観測の核 — SeatMap が 2回目（2/3）
座席指定（機内座席表）＝完全に手組み（~190行）。
SeatMapは無く、近いものすら無い。 /docs/by-use-case は座席選択をHeatmapChart（読み取り専用のデータ可視化）に誤誘導。客室/区画のモデル・通路の隙間・4状態（空席/予約済/選択中/選択不可）・4種別（普通/非常口/足元ゆったり/プレミアム）・座席ごとの指定料・上限ガード・grid のアクセシビリティ を全部手書き。「これが追加されればライブラリが航空/イベント/映画/スタジアムの座席選択を占める。単一で最大の追加。」
#109 鉄道座席＋#112 機内座席＝SeatMap 2/3（#356 追記）。予備知識ゼロの AI が 客室/通路 のモデル（"3-3"/"2-4-2"/"2-2"）・座席ごとの {種別,料金,状態,窓側/通路側}・定員の上限・375px の横スクロール必須まで設計。あと1回（映画/スタジアム/イベント/レストラン席）で3回ルール → 作る。 SeatMap を作る時に索引の HeatmapChart 誤誘導も是正する。
今回 src の新規コンポーネントなし（3.5/5・ListCard の別業界での自力発見＋SeatMap 2/3 が成果）。AmountBreakdown が運賃に5回目の業界越え・ListCard が2業種目。
学び — 全業種共通の土台は翌モードで効き、モード固有の土台は積み上がる
利用者向けの全業種共通の土台 ListCard は、鉄道で作って航空で即発掘された——事業者向けで見た「全業種共通の土台は業界をまたいで翌画面で裏付く」が、利用者向けでも、しかも交通モードをまたいで起きた。 一方 SeatMap は利用者向けのモード固有の土台（座席選択）で、鉄道→航空で 2/3 まで積み上がった。全業種共通の土台（StatGroup/AmountBreakdown/ActionQueue/ListCard）は3回ルールで一気に効き、モード固有の土台（SeatMap/TransitItinerary/Stringline）はモードをまたいで証拠が貯まる——両方を3回ルールが選り分け続けている。残る多言語化（NumberInput の英語 aria-label）は #326 LocaleProvider 待ち。
次回予告（やってみた #113）
- 航空の事業者向け（フライト運航ボード・機材繰り Gantt）で Gantt の区切り付きの帯 3回目を狙う、あるいは SeatMap 3回目（映画/イベント席）で作る合図、あるいは次のモード。
試す
- gunjo.jp ／ リストカード ListCard ／ 金額内訳 AmountBreakdown ／ 逆引き索引 /docs/by-use-case ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#111 - GunjoUI by UIXHERO
昨日作ったコンポーネントを翌日もう使い、座席表の欠落が2回目に。全業種共通の土台は翌モードで効き、モード固有の土台は積み上がる。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。