#125スコア 4/5運輸：航空

AI に欠航の振替画面を作らせてみた — 昨日作った2部品を翌日もう使い、app-bar が3回目で部品になった（やってみた #125）

ルート: /flight-rebooking
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に欠航の振替画面を作らせてみた — 昨日作った2部品を翌日もう使い、app-bar が3回目で部品になった（やってみた #125）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘り（toC バックログ）——欠航・遅延時の振替・再予約（欠航通知・代替便選択・再予約フロー）。

結果 — 4/5、そして「越境発掘 ×2」＋「PageHeader 3-confirm」

tsc 緑・375px mobile-first。cold AI（群青を一度も触っていない設定）：

RadioCard — これのために作られた。 value/title/description/tags/price/highlight/leading が代替便カードに1:1（便名+空席 / 時刻+所要 / tags / 差額 / 追加なし）。proper role=radiogroup・矢印キー・≥44px・チェック非色依存。zero friction。「ready-made の選択カードは嵌まったか？＝断然 yes。」 FilterChips — 単一選択ファセット（いつ：すべて/当日/翌日）に zero friction。 scroll-snap・矢印キー。

#121 で build した RadioCard と #122 で build した FilterChips が、その数回後の #125 で別 cold AI に2つとも自力発見された。 build→翌画面で発掘の法則が、1画面で2部品同時に起きた——universal/B2C 床の信頼が積み上がっている証拠。

観測の核 — PageHeader が3回目（3-confirm）

モバイルページヘッダー / app-bar＝手組み。本当の miss。 Header（唯一の nav-header export・索引が薦める）は折り返す marketing バーで、戻る＋中央タイトル＋右アクションの app-bar 構造を持たない。「モバイル AppBar/TopBar component が無い。単一最大の追加。」

3回連続——駅構内ナビ #120・手荷物追跡 #124・欠航振替 #125、別々3人 cold AI が独立にモバイル app-bar を手組み（kit の Header は desktop chrome）。3回ルール発火。build した。

build — PageHeader（ページヘッダー）

<PageHeader
  title="手荷物追跡" subtitle="ヤマダ クロウ 様・ABC123"
  onBack={() => router.back()}        // ≥44px の戻るボタン
  actions={<Button size="icon" variant="ghost" aria-label="更新"><IconRefresh/></Button>} />
  • 戻る＋タイトル/サブ＋アクション・<header> landmark・sticky・safe-area-inset-top（ノッチ）・左/中央寄せ。
  • onBack が 44×44px の戻るボタン＝Button size="icon"（36px）が届かないタッチ標的（#362）をこの部品で満たす。
  • 索引に「モバイル app-bar → PageHeader」追加・Header/AppRail（desktop chrome）と区別＝#120/#124/#125 の誤誘導を是正。
  • PR#374・実機375pxで <header> landmark・sticky・戻るボタン computed 44×44px・アクション発火・中央寄せ・0 error。

今回 src build = PageHeader（3-confirm・9個目の結晶化）。追記: Banner の prop 罠（title/description を持たず children のみ・title は HTML 属性と衝突 TS2322・description は黙って div に落ちる＝#324）。

学び — 「越境発掘」が複利で効き始めた

深掘りで build した B2C 床（ListCard・SeatMap・LoyaltySummaryCard・RadioCard・FilterChips・PageHeader）が、翌画面で次々と自力発見されるようになった。#125 は1画面で RadioCard と FilterChips を同時に発掘——「作れば翌画面で効く」が、toC でも複利になっている。 back-office で StatGroup/AmountBreakdown/ActionQueue が業種をまたいで効いたのと同じことが、toC の消費者床でも起きている。深掘りを潰すほど、新しい画面が『手組みゼロに近い composition』になっていく——それが結晶化のゴール。

📊 結晶化スコアボード（build 済 9個）

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader 進行中：TicketStub 2/3・SegmentedControl・StatusScreen success・Gantt hour-axis・TransitItinerary

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

  • toC バックログ続行——航空（旅程管理＝TransitItinerary 観測 / ラウンジ）or 鉄道残り（駅ナカ提案＝TicketStub 3回目を会員証/乗車券で / 払戻し）。

試す

昨日作った2部品を翌日もう使い、app-bar が3回目で部品に——越境発掘が、toC でも複利になってきた。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleAmountBreakdownBadgeButtonFilterChipsMetadataListRadioCardRadioCardGroupSeparatorStepperStepperStepTagToggleGroupToggleGroupItem

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。