AI に国際線 eチケットを作らせてみた — 「ゲートで掲げる券面」が、まだ部品じゃない（やってみた #123）
/eticket375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に国際線 eチケットを作らせてみた — 「ゲートで掲げる券面」が、まだ部品じゃない（やってみた #123）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘り（toC バックログ）——国際線 eチケット控え＋渡航書類チェック（券面・旅程・パスポート/ビザ/ESTA）。
結果 — 3.5/5
tsc 緑・375px mobile-first。cold AI（群青を一度も触っていない設定）：
CheckList— これのために作られた。 チェックボックス＋ラベル＋説明＋trailingスロット・各行が自動でラベル付け。渡航書類チェックリストが drop-in（docstring に「document checklists」が明記）。Badge(icon)/MetadataList/Tabs/Progressも zero。 だが画面そのもの＝搭乗券の券面に部品が無い。
観測の核 — TicketStub が2回目（2/3）
eチケット/搭乗券の券面＝完全に手組み。頭の穴。
boarding|barcode|stub|pass|ticket|qr|perforationで全公開面を grep したが何も無い。OD ペア（HND 17:05→LAX 10:55）・座席/ゲート/搭乗時刻のフィールドグリッド・ミシン目（ノッチ＋破線 Separator）・QR・バーコードを全部手で組んだ。「TicketStubは OD ペアヘッダ＋フィールドグリッド＋ミシン目変種＋QR/バーコードスロット＋ステータス帯が要る。旅行/チケット領域に欠ける単一最大の部品。」
#114 搭乗券＋#123 eチケット＝TicketStub 2/3（#363）。API も #114＋#123 で収束：OD ペア（現地時間/時差）・座席/ゲート/搭乗時刻/クラスのグリッド・ノッチ＋破線・QR/バーコードスロット（encoded node＋aria-label）・ステータス帯・pure data で RSC 安全。あと1回（会員証バーコード／乗車券／イベント券）で 3-confirm → build。
その他の観測
- 🟢
RouteStopsが旅程にも配送語彙を漏らす（往路/復路 leg に 未配/配送中＋遅延列＋現在地・「未来の便には概念的に間違い」）＝transit#110＋駅 wayfinding#120＋空港 wayfinding#122＋国際線 leg#123＝4回目。leg 中心のFlightItinerary/TransitItinerary（#358）が要る。 - 🟢 テーマ token の罠：kit は
@config（Tailwind v3 風）でcolors.foreground = hsl(var(--foreground))＝v4 のvar(--color-foreground)は存在しない。カスタム CSS を書く消費者が即踏む（最初の barcode グラデが透明になりかけた）。 - 🟢
IconPassportが Tabler に無い（IconIdで代用）。
今回 src build なし（3.5/5・TicketStub 2/3）。CheckList が渡航書類で越境。
学び — 「感情の中心」が一番未対応、という toC の構造
cold AI のまとめが鋭い：「周辺（チェックリスト・詳細・旅程足場・アラート・タブ・進捗）は速くて a11y も手書きより良い。だが消費者旅行アプリの感情の中心＝ゲートで掲げる券面 が箱に無い＝一番重要な面が一番未対応。」これは toC 深掘りで繰り返し出る構造——back-office kit は「周辺の足場」は強いが「消費者の主役（ロイヤリティ hero・座席表・カテゴリチップ・券面）」が欠ける。だから toC を潰すほど、その主役級の primitive（SeatMap・LoyaltySummaryCard・RadioCard・FilterChips、そして次は TicketStub）が3回ルールで結晶化していく。深掘りは、消費者の主役を1つずつ箱に入れる作業。
📊 結晶化スコアボード（build 済8個）
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips 進行中：TicketStub 2/3・SegmentedControl・StatusScreen success・Gantt hour-axis・FlightItinerary/Steps
次回予告（やってみた #124）
- toC バックログ続行——航空（手荷物追跡＝状態 timeline / 旅程管理 / 欠航振替）or 鉄道残り（駅ナカ提案＝TicketStub 3回目に乗車券/会員証で寄せる手も / 払戻し）。
試す
ゲートで掲げる券面が、まだ部品じゃない——深掘りは、消費者の主役を1つずつ結晶化する作業だった。
<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import している部品です。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。