AI に保険金支払の画面を作らせてみた — 3回目の手組みで、金額内訳がついに部品になった（やってみた #103）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。保険 3枚目——自動車保険 保険金支払・精算管理（支払一覧・支払明細・承認・振込）。3回ルールが発火した回。

#101 査定・#102 契約に続く保険3枚目。観測の核は最初から決まっていた——金額導出ブロックが3回目の手組みになれば、その場で AmountBreakdown を build する。

結果 — 4/5、そして 3-confirm 発火

tsc/build 緑・375px・0 console error。KPI・支払一覧・支払明細（導出）・承認・2名承認・振込。そして cold AI のレポート：

支払明細の導出（認定損害額 − 過失相殺 − 免責 − 既払金 = 今回支払額）を手組み——これが kit の最大の穴。「read-only の『labeled 明細＋符号付き調整＋小計/合計』表示 component がカタログのどこにも無い」。MetadataList（spec sheet で ledger でない）・EditableDataTable（編集グリッド＝確定済みの導出には作法違い）・DistributionBar（割合バー）・Delta（単一の符号付き値）——全部 80% で、合計行・符号・数式は毎回手書き。

3回連続——査定額 #101・保険料内訳 #102・支払明細 #103、別々の3人の cold AI が、独立に、同じ穴を手組みし、同じ「最も価値ある追加」と名指した。3回ルール発火。その場で build した。

build — AmountBreakdown（金額内訳）

cold AI 3人が設計まで収束させてくれていたので、API はほぼ転記：

<AmountBreakdown
  lines={[
    { type: "heading", label: "認定損害額" },
    { label: "修理費", amount: 480000 },
    { type: "subtotal", label: "認定損害額 計", amount: 540000 },
    { label: "過失相殺", kind: "subtract", amount: 162000, note: "認定額 × 過失割合 30%" },
    { label: "免責金額", kind: "subtract", amount: 50000 },
    { label: "既払金（内払）", kind: "subtract", amount: 100000 },
  ]}
  total={{ label: "今回支払額", amount: 228000 }}
  formula="今回支払額 = 認定損害額 − 過失相殺 − 免責 − 既払金"
/>

• line / subtotal（点線）/ heading 行を混在。
• 控除（kind:"subtract"）は −|金額| のグリフ＋sr-only の「控除」で表示——符号は色だけに依存しない。
• 既定で RSC 安全：formatValue は formatCurrency（JPY/ja-JP）既定＝唯一の関数 prop はオプトイン。
• #347 クローズ（PR#348）。「KPI 行＝StatGroup」の金融版が揃った。

そして索引も直した — 部品が穴を埋め、索引がそれを指す

#102 で見えた索引の限界——金額内訳を EditableDataTable（エディタ）に誤誘導していた問題。部品ができた今、逆引き索引を AmountBreakdown に向け直した：read-only の金額導出（AmountBreakdown）vs 編集入力（EditableDataTable）vs 単一差分（Statistic/Delta）vs KPI 行（StatGroup）を曖昧さなく分けた。#100→#101 で「索引を作る投資が翌回効く」を見たが、今回は逆——「部品を作ったら、索引をそこへ向ける」。両輪が噛み合った。

学び — 3回ルールは「金融の床」も結晶化させた

人物階層（PersonCell→RelationshipRow→StatGroup）を3回ルールで積み上げたのと同じことが、金額表現でも起きた。請求書#37 から数えて、金額導出は連載で最も多く手組みされた形だった——それが #101/#102/#103 の保険3連続でついに「3回の独立した証拠」に達し、AmountBreakdown になった。back-office の2大『床』——KPI 行（StatGroup）と 金額内訳（AmountBreakdown）——が揃った。 cold AI が手組みを名指しで設計してくれるから、結晶化は推測でなく転記になる。

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

• 保険4〜5枚目（団体保険/共済 or 引受診査）で AmountBreakdown の越境発掘を観測、保険を締める。あるいは次業界（運輸/建設/エネルギー）へ pivot。

試す

• gunjo.jp ／ 金額内訳 AmountBreakdown ／ 逆引き索引 /docs/by-use-case ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#102
• GunjoUI by UIXHERO

3回手組みされた形が、その場で部品になり、索引がそれを指す。15業界目前で、金融の床がもう一段かたまった。

---

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