AI に鉄道のポイント画面を作らせてみた — 「鉄道もポイント必要」の直感が、的中した（やってみた #117）
/rail-points375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に鉄道のポイント画面を作らせてみた — 「鉄道もポイント必要」の直感が、的中した（やってみた #117）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。鉄道の利用者向け——モバイルIC＋ポイント会員画面（モバイルSuica／JRE POINT 的：IC残高・ポイント・利用履歴・定期券）。
#116（航空マイレージ）の後に、私は「鉄道もポイント必要だったかも」と直感した。それを回収する回。観測の本命——ロイヤリティ要約（LoyaltySummaryCard）が2回目の手組みになるか。
結果 — 3/5、そして予言の的中（LoyaltySummaryCard 2/3）
tsc 緑・375px mobile-first・0 console error。残高の大きな見出し・チャージ・ポイント・利用履歴・定期券。予備知識ゼロの AI（群青を一度も触っていない設定）：
残高/ポイント/ステージ の大きな見出し＝完全に手組み。これが最大の欠落。 ロイヤリティ/残高/ウォレット/ランク/会員 のコンポーネントは150+の中に一つも無い（名前も docstring も grep した）。索引は
StatGroup/AnalyticsCardに誘導するが、両方とも平らな KPI/トレンドで、残高もランクも失効も持てない。「LoyaltySummaryCardには 残高の大きな見出し＋ポイント＋ランクのバッジ＋次ランクの進捗＋失効警告＋ブランドのグラデーション が要る。唯一ゼロから作ったコンポーネント。単一で最大の追加。」
#116 航空マイル＋#117 鉄道ポイント＝2/3。 「鉄道もポイント」の直感が、そのまま2回目の証拠になった。あと1回（小売ロイヤリティ／EC ポイント等）で3回ルール → 作る。
そして ListCard がまた即発掘——「これのために作られた・標準装備の主役・乗車/物販/入金 の利用履歴に1:1・ライブラリでスマホに最良」。全業種共通の土台はモードをまたいでも揺るがない。
課題に記録（追記）
- 🟠 LoyaltySummaryCard/TierCard 2回目（#364・大きな見出しは暗いグラデーションの面でブランド色が要る・埋め込む Progress は暗い背景で読める必要・差込口を確定: 残高/ポイント/ランク/進捗「ゴールドまであと850P」/失効/主アクション）。
- 🟠 ブランドのトークンが Tailwind のユーティリティになっていない（
--gunjo-*/--kobicha-*/--dawn-*は生の HSL 変数で存在するがbg-gunjo-deeperが無くbg-[hsl(var(--gunjo-deeper))]を手書き・未文書）＝利用者向けの温かみの具体的な障害（#367 追記）。「ブランドに沿った色を使いたい消費者アプリは、即この壁に当たる」。 - 🟢 Banner の h-10 固定で切り詰め（失効警告が溢れ・#324）・Progress のトーンが 明るいカード前提（暗い見出しで track を手で上書き・ゴールドのトーン無し）。
今回 src の新規コンポーネントなし（3/5・LoyaltySummaryCard 2/3＝次回に作る候補）。
学び — ユーザーの直感が、3回ルールの2つ目を当てた
私は #116 を見て「鉄道もポイント必要」と直感した。それは単なる感想でなく、LoyaltySummaryCard という準・全業種共通の土台（航空マイル・鉄道ポイント・小売ロイヤリティ にまたがる）の2つ目の証拠を、的確に予測していた。予備知識ゼロの AI に作らせるループは「予備知識ゼロの AI が同じ欠落を独立に踏むか」で3回ルールを回すが、人間の『この業種でも要るはず』という直感は、その証拠集めを加速する。次の小売/EC ロイヤリティで3回目を踏めば、LoyaltySummaryCard を作る——暗いグラデーションの面＋ブランドのトークンの Tailwind ユーティリティ化（#367）とセットで、利用者向けの「温かみ」を一段上げる回になる。
そして ListCard は鉄道IC でも揺るがず——利用者向けの全業種共通の土台（ListCard）はもう信頼できる段階、モード固有/準・全業種共通の土台（SeatMap 完了・LoyaltySummaryCard 2/3）が今の最前線。
次回予告（やってみた #118）
- 小売/EC ロイヤリティ（LoyaltySummaryCard 3回目→作る）か、バス/タクシーの利用者向け（SeatMap の別業界での自力発見）か、鉄道の利用者向けをもう少し（駅構内ナビ）。
試す
- gunjo.jp ／ リストカード ListCard ／ 逆引き索引 /docs/by-use-case ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#116 - GunjoUI by UIXHERO
「鉄道もポイント必要」——ユーザーの直感が、次に作るべきコンポーネントを当てた。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。