AI にきっぷの払戻し画面を作らせてみた — 昨日作ったコンポーネントが、今日の画面で自力発見された（やってみた #129）
/ticket-refund375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にきっぷの払戻し画面を作らせてみた — 昨日作ったコンポーネントが、今日の画面で自力発見された（やってみた #129）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。鉄道の利用者向け 深掘りの締め——きっぷの払戻し・遅延証明書（払戻対象・手数料/払戻額・申込フロー・遅延証明書）。これで航空・鉄道の両シリーズが完走。
結果 — 4.5/5（連載最高スコア）
tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：
最難関の3つ＝汎用コンポーネントの「近い代用」ではなく、まさにこの画面のために作られていた。
AmountBreakdown（運賃合計 − 払戻手数料 = 払戻額が1つのコンポーネント・控除は destructive トーン＋符号グリフ＋式キャプション）・TicketStub（遅延証明書の QR がほぼタダ）・PageHeader（モバイルのアプリバー）。実質の手組みはほぼゼロ。
観測の核1 — 「昨日 作る → 今日の画面で自力発見」
TicketStub は昨日 #128 で作ったばかり。それが #129 で——
遅延証明書＝
TicketStubのformat="qr"がそのまま嵌まった。摩擦ゼロ。これのために作られていた。
連載の法則「作った土台は翌画面で別の予備知識ゼロの AI が自力発見する」が、作った翌日に最速で再現。AmountBreakdown（#103 で作った＝倉庫/会計の事業者向けの文脈）も、今回 利用者向けの払戻し内訳で「ライブラリで最も価値あるコンポーネント」と評価＝事業者向けで固めた土台が利用者向けでそのまま効くことの証明。
観測の核2 — 実バグを踏み抜いた（PageHeader のハマりどころ）
予備知識ゼロの AI が実際のバグを踏んだ：
PageHeaderのleadingとonBackはソース上、排他だった：back = leading ? leading : onBack ? <button/> : null。装飾のleadingの chevron とonBackを両方渡したら、chevron が本物の戻るボタンを黙って覆い隠し、クリックハンドラと aria-label を両方落とした。tscは無傷。型を信じた予備知識ゼロの開発者は、壊れた・アクセシブルでない戻るボタンを出荷してしまう。
→ 即修正 PR#380：両方を描画し、どちらも黙って落とさない。onBack の戻るボタン＋leading を fragment で並べる。昨日 作った PageHeader(#125) の隠れたアクセシビリティのバグを、翌々日の予備知識ゼロの AI が炙り出した。 これも「別業界での自力発見」の一種——コンポーネントを使い倒すほど、隠れた欠陥も露出する。
新しい欠落（課題に記録）
- 🟠 CheckboxCard / CheckboxCardGroup＝
RadioCard(#121) の複数選択の双子。払戻し対象（乗車券・特急券を別々に選ぶ）が手組みの Checkbox＋ラベルカードに。「どの明細を払戻すかの選択は、あらゆる払戻し/返品/明細操作の最初の一歩」＝#378。 - 🟡 StatusScreen の success/受付完了 の variant＝今は error ページ専用(404/500)＋min-60vh で、画面内の完了表示に使えない＝#379。
- ✅ Stepper を by-use-case 索引に追加（多段のウィザード/フォーム進捗の項目が欠けていた）。
今回 src 変更 = PageHeader のバグ修正（昨日作ったものの欠陥を翌々日に修正）。
学び — 「使い倒しは、コンポーネント化と検証と修繕を同時に進める」
鉄道の利用者向けを締めるこの1枚で、3つが同時に起きた：
- 検証：昨日作った TicketStub が翌日に自力発見（法則の最速再現）。
- 業界越え：事業者向けで固めた AmountBreakdown が利用者向けでそのまま「最も価値あるコンポーネント」に。
- 修繕：使い倒しが PageHeader の隠れたハマりどころを露出させ、即修正。
深掘りの真価は「新しいコンポーネントを作る」だけじゃない。作ったコンポーネントを別の文脈で使い倒すことが、検証・業界越え・バグ露出を同時に駆動する。 14業種の事業者向けと、今の利用者向けの深掘りで、この複利が回り切った。
📊 コンポーネント化スコアボード（作成済 11個・出荷済み修正多数）
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub 進行中：CheckboxCard・StatusScreen success・StatusLevel・BottomActionBar・AmenityRow
📋 利用者向けバックログ — 航空・鉄道 完走
- ✈️ 航空：全6枚 完了 ✅
- 🚆 鉄道：全6枚 完了 ✅（定期券/駅ナビ/きっぷ/駅ナカ提案/払戻し ＋ 既存4）
次回予告（やってみた #130）
- 次のモードへ：バスの事業者向け（運行管理）or 利用者向け（路線・時刻・予約）。鉄道・航空で固めた土台が、バスでどれだけそのまま効くか＝業界を越える地力テスト。
試す
- gunjo.jp ／ 内訳 AmountBreakdown ／ チケット券面 TicketStub ／ ページヘッダー PageHeader ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#128 - GunjoUI by UIXHERO
昨日作ったコンポーネントが今日の画面で自力発見され、事業者向けの土台が利用者向けで効き、使い倒しが隠れたバグを炙り出した——深掘りは、コンポーネント化と検証と修繕を同時に回す。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。