AI にクレジットカード利用明細を作らせてみた — 3回連続で出た穴を、ついに埋めた（やってみた #36）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。銀行5枚目——クレジットカード利用明細（限度額ゲージ・ポイント・カテゴリ別支出・利用明細・支払方法変更）。

「各業界で複数枚」で銀行を深掘り。#32=フォーム、#33=チャート、#34=テーブル、#35=計算機、今回 #36 は 限度額ゲージ＋ポイント（ロイヤルティ）＋カテゴリ別支出の層。

結果 — 4.5/5

tsc/build 緑・console 0・375px で明細が25枚のカードに collapse・ゲージの used+remaining=limit が一致・h1 1個。

この回の主役 — 3回連続で出た穴を、ついに埋めた

DataTable がモバイルで横スクロールする（min-w-[720px]）問題は、#34 取引明細・#35 返済予定表・#36 利用明細と3回連続で cold AI が手巻きしてきた。今回でついに作った:

🟠 DataTable は 375px で 720px のテーブルを横スクロールするだけ。モバイルでカード化したい。毎回 sm:hidden のカードリストを手巻きしている。

直し（#195・同 PR で land）

renderCard を追加（opt-in・非破壊）: 渡すと md 以上はテーブル、モバイルは同じ sort/paginate 済みの行モデルをカードで描画——並行 state なし。ブラウザ実証: 1280px でテーブル表示、375px でテーブル非表示＋10枚のカード（ページング済み）＋横スクロール無し。

「同じ穴を3回見たら作る」——cold テストを複数業界×複数枚で回すと、本当に欲しい primitive が "頻度" で浮かび上がる。

それでも土台は強い — 複利は4回連続

cold AI が褒めたのは、また baked-in な強み:

• formatCurrency(#180) が4回連続で「excellent / standout」。¥371,650 をゼロ設定・compact で ¥372K。
• SegmentedGaugeCard が「near-perfect な限度額ゲージ」: used/remaining/limit が一致・利用率で primary→warning→destructive にトーン escalation。
• GaugeChart は role="img" で「今月のご利用: ¥200,000」と読み上げ（弧だけでない）。
• DonutChart の凡例が %＋¥、Badge が支払区分（一括/分割/リボ）、Dialog（手数料 aria-live 再計算）、ThemeProvider(#171) も初手で動いた。

その他の穴

• 🟠 ポイント/ロイヤルティ panel の primitive 無し（Card＋Statistic＋Alert で合成・許容）。
• 🟡 ゲージ/ドーナツに固定 max-w-*（縮小はするが広い列に拡大できない）。
• 🟡 defaultChartValueFormatter が en-US（#197・#180 の follow-up・formatValue を渡せば回避）。

学び — 頻度が primitive を浮かび上がらせる

#34 取引明細: table→card 手巻き
#35 返済予定表: table→card 手巻き（再）
#36 利用明細: table→card 手巻き（3回目）→ 作った(#195)

1回の「あったらいいな」では作らない。3業界×複数画面で同じ手巻きが3回出たら、それは確実に欲しい primitive。cold テストを量で回す価値は、ここに出る。

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

• 銀行はこれで5層。隣接の数字業界（会計/給与/POS）へ——銀行で育てた formatCurrency・renderCard・gauge が効くか。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#35
• GunjoUI by UIXHERO

まだ alpha。3回連続で出た穴を、ついに埋めた回。

---

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