#158スコア 4/5運輸：バス

AI にバスのモバイルIC画面を作らせてみた — バスが完走、4モード目（やってみた #158）

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

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

解説記事

AI にバスのモバイルIC画面を作らせてみた — バスが完走、4モード目（やってみた #158）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toC 最後の1枚（接近#138・高速予約#139・経路#140・乗車券#156・運行情報#157 に続く6枚目）——モバイルIC・残高チャージ・利用履歴（残高 hero・チャージ・オートチャージ・利用履歴・バス特典）。これで toB5+toC6 対称＝バス完走。

まず — バスが完走（航空・鉄道・タクシーに並ぶ4モード目）

バス toB（運行#136/配車#137/計画#153/営収#154/安全#155）+ toC（接近#138/高速予約#139/経路#140/乗車券#156/運行情報#157/IC#158）が toB5+toC6 で対称に。航空（toB5+toC6）・鉄道（toB5+toC6）・タクシー（toB6+toC6）に並ぶ4モード完成。残るは🚚トラックのみ。

結果 — 4/5、ウォレットには最適なドメイン

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

これは渡され得る中で最高に相性の良いドメインだった。 交通系IC ウォレットは、まさにこれらの部品が作られた用途。LoyaltySummaryCard の JSDoc は文字通り「鉄道 IC/ポイント」「IC残高」を名指しする。穴は1か所——日付グループ化された取引履歴。

観測の核1 — IC残高 hero と SegmentedControl 再検証

  • LoyaltySummaryCard（#118 build）＝IC残高 hero に built-for-this・cold AI「doc が IC残高 を名指し・balance＋meta(カード名/下4桁)＋tier(定期一体)＋secondary(定期区間/最終利用)＋progress(バス特典)＋alert・全ての IC-hero ニーズに名前付きスロットがあった・ゼロ摩擦」。
  • SegmentedControl（#156 build）＝2回連続の自力発見検証・設定（オートチャージのしきい値/金額）で使用。だしチャージ金額の5択には RadioCard に正しく切替＝cold AI「SegmentedControl の docstring が『2-4 が適量』と言う・375px で5等幅セグメントは ¥10,000 を潰す・RadioCard の2列グリッドが正解」＝docstring の 2-4 guidance が効いて誤用を防いだ（部品が自分の境界を adopter に正しく伝えた）。

観測の核2 — TransactionList/Ledger（台帳）が2回目

日付グループ化された利用履歴——これが唯一の手組みだった：

cold AI「date-grouped/SectionList/transaction-list 部品が無い。barrel を見たが List/ListCard/Timeline/MetadataList/DataTable どれも『日でグループ化し sticky な日付ヘッダ』をしない。索引は Transaction History を DataTable か ListCard に誘導するが、どちらもグルーピングを丸投げする。Map<date,Txn[]> を手組みした。しかも符号付き金額＋取引後残高 が ListCard のスロットに合わず、符号付き金額を status に押し込んだ（off-label・sr-only で入金/利用 を付与し符号が色だけに依存しないように）。groupBy＋符号付き金額＋残高推移 を持つ TransactionList/LedgerList が、ウォレット画面でキットに欠けている最重要部品。」

SectionList/GroupedList は taxi#149（月別乗車履歴）でも手組み済＝2/3（#404）。#158 は仕様を鋭くした：grouped-rows+小計だけでなく、ウォレット/IC/銀行/経費 の feed は符号付き in/out（色だけに非依存）＋残高推移が要る。索引も誤誘導（Transaction History→DataTable/ListCard でグループ化しない）。あと1回で build。

学び — 「完走」は4回繰り返すと型になる

航空・鉄道・タクシー・バスと4モード完走して、完走の型が固まった：

  1. toB を業種の back-office として 5-6 枚（指令/運行・乗務員・車両・営収・安全・計画…）。
  2. toC を消費者フローとして 5-6 枚（案内・予約・履歴・サポート・会員・IC…）。
  3. toB と toC を対称に（弱い側 toC を必ず toB と同じだけ掘る）。

そして4モード目（バス）の完走で、新しい部品はもうほとんど出ない——出たのは TransactionList(2/3)・ValidityTimer(1/3) など「あと一押し」の在庫だけ。#155-157 で Leaderboard/SegmentedControl/LineChip を放出し切ったので、4モード目の終盤は**ほぼ②検証（LoyaltySummaryCard/SegmentedControl の自力発見）**になった。これは床が成熟した証拠＝**新モードを完走しても穴がほぼ出ない＝結晶化が一巡した。**残るトラックは「本当に新しい穴が出るか／既存床で足りるか」の最終テストになる。

拾った点

  • 🟡 TransactionList/LedgerList（日付グループ＋符号付き金額＋残高推移）＝#404 2/3。
  • 🟡 LoyaltySummaryCard の alert を中立フットノートに流用（footnote スロットが欲しい）・Toast API が showToast(message,type) で toast({title,description}) を期待した adopter を驚かせた＝#404 に併記。
  • ✅ LoyaltySummaryCard/SegmentedControl/RadioCard/AmountBreakdown/Switch/StatGroup/BottomActionBar 全て built-for-this or ゼロ摩擦。

今回 src build なし（4/5・バス完走・LoyaltySummaryCard/SegmentedControl 検証・SectionList 2/3）。

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

…Gantt(intraday) / Leaderboard / SegmentedControl / LineChip 進行中：SectionList/TransactionList(2/3)・ValidityTimer(1/3)・ComparisonTable・Statistic tone/icon

📋 モード進捗 — 4モード完走

  • ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅（toB5+toC6 完走）
  • 🚚 トラック：未着手（5モード目・最後）

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

  • トラック配送（新モード・最後） を toB→toC で、or 既存モードの深掘り。※KeEem に確認。

試す

バスが完走して4モード目——「完走」は4回繰り返すと型になる。toB を 5-6 枚、toC を 5-6 枚、対称に。そして4モード目の完走では、新しい穴はもうほとんど出ない。

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

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

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

AmountBreakdownBadgeBottomActionBarButtonCardCardContentListCardLoyaltySummaryCardPageHeaderRadioCardRadioCardGroupSegmentedControlSeparatorStatGroupSwitchToastProvider

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

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