#129スコア 4.5/5運輸：鉄道

AI にきっぷの払戻し画面を作らせてみた — 昨日 build した部品が、今日の画面で自力発見された（やってみた #129）

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

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

解説記事

AI にきっぷの払戻し画面を作らせてみた — 昨日 build した部品が、今日の画面で自力発見された（やってみた #129）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道 toC 深掘りの締め——きっぷの払戻し・遅延証明書（払戻対象・手数料/払戻額・申込フロー・遅延証明書）。これで航空・鉄道の両 arc が完走。

結果 — 4.5/5（連載最高スコア）

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

最難関の3つ＝汎用部品の「近似」ではなく、まさにこの画面のために作られていた。 AmountBreakdown（運賃合計 − 払戻手数料 = 払戻額が1部品・控除は destructive トーン＋符号グリフ＋式キャプション）・TicketStub（遅延証明書の QR がほぼ無料）・PageHeader（モバイル app-bar）。実質の手組みはほぼゼロ。

観測の核1 — 「昨日 build → 今日の画面で自力発見」

TicketStub は昨日 #128 で build したばかり。それが #129 で——

遅延証明書＝TicketStub の format="qr" がそのまま嵌まった。Zero friction。これのために作られていた。

連載の法則「build した床は翌画面で別の cold AI が自力発見する」が、build 翌日に最速で再現。AmountBreakdown（#103 build＝倉庫/会計の toB 文脈）も、今回 toC の払戻し内訳で「kit で最も価値ある部品」と評価＝toB で結晶化した床が toC でそのまま効くことの証明。

観測の核2 — 実バグを踏み抜いた（PageHeader footgun）

cold AI が実際のバグを踏んだ：

PageHeader の leading と onBack はソース上排他：back = leading ? leading : onBack ? <button/> : null。装飾の leading chevron と onBack を両方渡したら、chevron が本物の戻るボタンを黙って覆い隠し、クリックハンドラと aria-label を両方落とした。tsc は無傷。型を信じた文脈ゼロの開発者は、壊れた・アクセシブルでない戻るボタンを出荷する。

→ 即修正 PR#380：両方を描画し、どちらも黙って落とさない。onBack の戻るボタン＋leading を fragment で並べる。昨日 build した PageHeader(#125) の隠れた a11y バグを、翌々日の cold AI が炙り出した。 これも「越境発掘」の一種——部品を使い倒すほど、隠れた欠陥も露出する。

新 gap（起票）

  • 🟠 CheckboxCard / CheckboxCardGroup＝RadioCard(#121) の複数選択の双子。払戻し対象（乗車券・特急券を別々に選ぶ）が手組み Checkbox＋ラベルカードに。「どの明細を払戻すかの選択は、あらゆる払戻し/返品/明細アクションの最初の一歩」＝#378。
  • 🟡 StatusScreen の success/受付完了 variant＝今は error ページ専用(404/500)＋min-60vh で in-flow 完了に使えない＝#379。
  • ✅ Stepper を by-use-case 索引に追加（多段ウィザード/フォーム進捗の項目が欠けていた）。

今回 src 変更 = PageHeader バグ修正（昨日の build の欠陥を翌々日に修正）。

学び — 「使い倒しは、結晶化と検証と修繕を同時に進める」

鉄道 toC を締めるこの1枚で、3つが同時に起きた：

  1. 検証：昨日 build した TicketStub が翌日に自力発見（法則の最速再現）。
  2. 越境：toB で結晶化した AmountBreakdown が toC でそのまま「最も価値ある部品」に。
  3. 修繕：使い倒しが PageHeader の隠れた footgun を露出させ、即修正。

深掘りの真価は「新部品を作る」だけじゃない。作った部品を別文脈で使い倒すことが、検証・越境・バグ露出を同時に駆動する。 14業種の toB と、今の toC 深掘りで、この複利が回り切った。

📊 結晶化スコアボード（build 済 11個・shipped 修正多数）

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub 進行中：CheckboxCard・StatusScreen success・StatusLevel・BottomActionBar・AmenityRow

📋 toC バックログ — 航空・鉄道 完走

  • ✈️ 航空：全6枚 完了 ✅
  • 🚆 鉄道：全6枚 完了 ✅（定期券/駅ナビ/きっぷ/駅ナカ提案/払戻し ＋ 既存4）

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

  • 次モードへ：バス toB（運行管理）or toC（路線・時刻・予約）。鉄道・航空で結晶化した床が、バスでどれだけそのまま効くか＝越境の地力テスト。

試す

昨日 build した部品が今日の画面で自力発見され、toB の床が toC で効き、使い倒しが隠れたバグを炙り出した——深掘りは、結晶化と検証と修繕を同時に回す。

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

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

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

AlertAlertDescriptionAlertTitleAmountBreakdownAmountLineBadgeButtonCardCardContentCardHeaderCardTitleCheckboxMetadataListMetadataListItemPageHeaderRadioCardRadioCardGroupSeparatorStepperStepperStepTabsTabsContentTabsListTabsTriggerTicketStub

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

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