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

AI に手荷物追跡を作らせてみた — RouteStops が「やっと正しく嵌まった」回（やってみた #124）

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

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

解説記事

AI に手荷物追跡を作らせてみた — RouteStops が「やっと正しく嵌まった」回（やってみた #124）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘り（toC バックログ）——手荷物追跡（預けた手荷物の状態進行：お預かり→保安検査→搭載→輸送→到着→受取可能）。

結果 — 4/5（深掘りの中で高め）。理由は1つ——RouteStops が嵌まったから。

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

RouteStops — zero-friction、これのために作られた。状態進行の背骨。 pending|current|completed|failed|delayed が 受託→受取可能 にほぼ1:1・plannedTime/actualTime で遅れ/早着/定刻を自動計算(Delta)・aria-current="step"・現在地の ring。「手荷物は『順序づいた停留所フロー』のもう一例。嵌まった、しぶしぶでなく。 Timeline/Stepper/ApprovalSteps は全部もっと悪い。」

観測の核 — RouteStops の「正しい定義域」が確定した

連載で RouteStops は **transit経路#110・駅 wayfinding#120・空港 wayfinding#122・国際線 leg#123 と4回『不適』だった（配送語彙が漏れる）。だが #124 で初めて『適合』**した。なぜか——cold AI が言語化：

Timeline は自由すぎ（マーカー/状態/時刻列/遅延計算を手で組む）。Stepper は {label,state} だけ＝時刻も遅延も説明も無く、6段を375pxに横詰めすると溢れる。ApprovalSteps は承認/差戻し意味論で手荷物に無意味。RouteStops だけが戦わず嵌まった。

つまり RouteStops は『状態トラッキング』（手荷物/配送/注文/修理）には正しく、『leg 中心の経路/道案内』には不適——この定義域の切り分けが #124 で確定した（#358 に追記＝だから別物の leg 中心 TransitItinerary/FlightItinerary が要る・RouteStops を経路に伸ばすな）。「同じ component が、ある業種で主役、別業種で誤誘導」を4回の不適＋1回の適合で確定させたのは、深掘りならでは。

起票・追記

  • 🟢 PageHeader（モバイル app-bar）起票＝戻る＋タイトル/サブ＋アクション・≥44px・sticky・safe-area。kit の Header は desktop chrome。駅構内ナビ#120＋手荷物#124 で手組み＝2/3（#373）。
  • 🟢 Button size="icon" が36pxで44pxに届かない（#362 再補強）。「ListCard は ≥44px を誇るのに icon button に適用されてない」。
  • 🟢 受取案内に「到着/受取 hero」部品が無く MetadataList＋手書き太字番号。

今回 src build なし（4/5・RouteStops 適合が成果）。Tabs(複数手荷物)/StatGroup/Alert/Accordion zero。

学び — 「定義域の確定」も深掘りの成果

build だけが成果じゃない。#124 は1つも build しなかったが、RouteStops の正しい定義域（状態トラッキング ⭕／経路・道案内 ❌）を確定させた——4回の不適と1回の適合で。これは索引の精度（RouteStops を経路に誤誘導しない・leg 中心は別物）を上げ、将来の TransitItinerary build の輪郭を固める。深掘りは、穴を見つけるだけでなく、既存部品の『正しい使い所』も確定させる。 RouteStops は状態トラッキングの主役、TicketStub/TransitItinerary は別途——という地図が、toC 深掘りで描けてきた。

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

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

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

  • toC バックログ続行——航空（旅程管理 / 欠航振替＝代替便 RadioCard）or 鉄道残り（駅ナカ提案 / 払戻し）。PageHeader 3回目・TicketStub 3回目を狙える画面も。

試す

RouteStops が、4回の不適を経て、やっと正しく嵌まった——深掘りは、部品の「正しい使い所」も確定させる。

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

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

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

AccordionAccordionContentAccordionItemAccordionTriggerAlertAlertDescriptionAlertTitleBadgeButtonCardCardContentCardHeaderCardTitleMetadataListRouteStopItemRouteStopStatusRouteStopsSeparatorStatGroupTabsTabsContentTabsListTabsTrigger

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

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