#117スコア 3/5運輸：鉄道

AI に鉄道のポイント画面を作らせてみた — KeEem の「鉄道もポイント必要」が、的中した（やってみた #117）

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

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

解説記事

AI に鉄道のポイント画面を作らせてみた — KeEem の「鉄道もポイント必要」が、的中した（やってみた #117）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道 toC——モバイルIC＋ポイント会員画面（モバイルSuica／JRE POINT 的：IC残高・ポイント・利用履歴・定期券）。

KeEem が #116（航空マイレージ）の後に「鉄道もポイント必要だったかも」と言った。それを回収。観測の本命——ロイヤリティ要約（LoyaltySummaryCard）が2回目の手組みになるか。

結果 — 3/5、そして予言の的中（LoyaltySummaryCard 2/3）

tsc 緑・375px mobile-first・0 console error。残高ヒーロー・チャージ・ポイント・利用履歴・定期券。cold AI（群青を一度も触っていない設定）：

残高/ポイント/ステージ ヒーロー＝完全に手組み。これが最大の穴。 loyalty/balance/wallet/tier/membership の component は150+の中に一つも無い（名前も docstring も grep した）。索引は StatGroup/AnalyticsCard に誘導するが、両方とも flat KPI/トレンドで残高も tier も失効も持てない。「LoyaltySummaryCard には 残高ヒーロー＋ポイント＋tier バッジ＋次ランク進捗＋失効警告＋ブランド gradient が要る。唯一ゼロから作った部品。単一最大の追加。」

#116 航空マイル＋#117 鉄道ポイント＝2/3。 KeEem の「鉄道もポイント」が、そのまま2回目の証拠になった。あと1回（小売ロイヤリティ／EC ポイント等）で 3-confirm → build。

そして ListCard がまた即発掘——「これのために作られた・標準装備の主役・乗車/物販/入金 の利用履歴に1:1・kit で電話に最良」。universal な床はモードをまたいでも揺るがない。

起票（追記）

  • 🟠 LoyaltySummaryCard/TierCard 2回目（#364・ヒーローはdark gradient surfaceでブランド色が要る・埋め込む Progress は dark 背景で読める必要・slot 確定: 残高/ポイント/tier/進捗「ゴールドまであと850P」/失効/主アクション）。
  • 🟠 ブランド token が Tailwind utility 化されてない（--gunjo-*/--kobicha-*/--dawn-* は raw HSL var で存在するが bg-gunjo-deeper が無く bg-[hsl(var(--gunjo-deeper))] を手書き・未文書）＝B2C 温かみの具体ブロッカー（#367 追記）。「on-brand 色を使いたい消費者アプリは即この壁に当たる」。
  • 🟢 Banner の h-10 固定 truncate（失効警告が溢れ・#324）・Progress のトーンが light card 前提（dark hero で track 手 override・gold トーン無し）。

今回 src build なし（3/5・LoyaltySummaryCard 2/3＝次回 build 候補）。

学び — ユーザーの直感が、3回ルールの2つ目を当てた

KeEem は #116 を見て「鉄道もポイント必要」と直感した。それは単なる感想でなく、LoyaltySummaryCard という準-universal な床（航空マイル・鉄道ポイント・小売ロイヤリティ にまたがる）の2つ目の証拠を、的確に予測していた。cold-test ループは「文脈ゼロの AI が同じ穴を独立に踏むか」で 3回ルールを回すが、人間の『この業種でも要るはず』という直感は、その証拠集めを加速する。次の小売/EC ロイヤリティで3回目を踏めば、LoyaltySummaryCard を build する——dark gradient surface＋ブランド token の Tailwind 化（#367）とセットで、toC の「温かみ」を一段上げる回になる。

そして ListCard は鉄道IC でも揺るがず——toC の universal 床（ListCard）はもう信頼段階、モード固有/準-universal な床（SeatMap done・LoyaltySummaryCard 2/3）が今の最前線。

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

  • 小売/EC ロイヤリティ（LoyaltySummaryCard 3回目→build）か、バス/タクシー toC（SeatMap 越境発掘）か、鉄道 toC をもう少し（駅構内ナビ）。

試す

「鉄道もポイント必要」——ユーザーの直感が、次に作るべき部品を当てた。

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

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

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

BadgeBannerButtonCardCardContentCardHeaderCardTitleListCardMetadataListProgressSeparatorStatisticTabsTabsContentTabsListTabsTrigger

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

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