AI にマイレージ画面を作らせてみた — ListCard は3用途で効いたが、ロイヤリティの「華」は無かった（やってみた #116）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘りバッチの3枚目——予約管理・マイレージ（会員ステータス・予約一覧・マイル）。KeEem の「鉄道もポイント必要だったかも」を航空で先に。

結果 — 3.5/5

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

ListCard が標準装備の主役——予約行・マイル履歴・特典 の3つのリスト全部に同じ部品で、摩擦ゼロ。≥44px の本物ボタン・aria-pressed・左 severity レール。kit 最良の答え。 だが画面の華＝ロイヤリティ要約に部品が無い。 会員ステータスカード（tier バッジ＋残高ヒーロー数字＋次ランクまでの進捗＋失効警告）は全部手組み。「Statistic は平らな KPI タイルで badge も progress も温かみも無い。これが #1 の穴。」

ListCard が1画面で3用途（予約/履歴/特典）＝universal な床の汎用性を一画面で実証。

起票

• 🟢 LoyaltySummaryCard/TierCard（残高ヒーロー＋tier バッジ＋goal-framed 進捗「ダイヤモンドまであと11,500 PP」＋失効スロット）＝#364・1/3。Meter の goal-framed/ロイヤリティモードも同issue（Meter の readout が「38,500/50,000 PP（77%）」と容量表現で、目標未満で赤に反転する footgun＝「あと◯◯」表現と非判定トーンが要る）。
• 🟢 44px タッチ標的（Button 最大40px・Tabs も手で min-h-11・#362）。Badge h-5 固定で2行警告に override。

今回 src build なし（3.5/5・ListCard 3用途が成果・LoyaltySummaryCard は 1/3）。

学び — KeEem の「鉄道もポイント必要」が裏付いた

航空のマイレージで「ロイヤリティ要約に部品が無い」と出た。KeEem は「鉄道もポイント必要だったかも」と言っていた——鉄道 toC に戻れば IC/ポイント/定期で LoyaltySummaryCard の2回目が出る公算が高い。これは toC モード固有の床の中でも、複数モード（航空マイル・鉄道ポイント・小売ロイヤリティ）にまたがる準-universal な床。バックログに鉄道 toC のポイント画面を積んで、3回ルールの2つ目を踏みにいく。一方 ListCard は3用途で揺るがず＝toC の universal な床は、もう信頼できる段階。

航空 toC バッチ（#114-116）まとめ

toC を深掘りした結果＝SeatMap を結晶化し、TicketStub/LoyaltySummaryCard/SegmentedControl/44px/B2C温かみ という次の床を露出。 弱い toC は、床が一番出る場所だった。

試す

• gunjo.jp ／ リストカード ListCard ／ 座席表 SeatMap ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#115
• GunjoUI by UIXHERO

ListCard は3用途で効いた。ロイヤリティの華はまだ無い——だから次の床が見えた。

---

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