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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠保険 3枚目⁠——⁠自動車保険 保険金支払・精算管理⁠（支払一覧・支払明細・承認・振込）。⁠3回ルールが発火した回。⁠

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

結果 — 4/5、そして3回目が発火

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

⁠支払明細の導出（認定損害額 − 過失相殺 − 免責 − 既払金 = 今回支払額）を手組み——これがライブラリの最大の欠落⁠。「⁠読み取り専用の『ラベル付き明細＋符号付き調整＋小計/合計』を表示するコンポーネントが、カタログのどこにも無い⁠」。MetadataList（仕様シートで明細台帳ではない）・EditableDataTable（編集グリッド＝確定済みの導出には作法違い）・DistributionBar（割合バー）・Delta（単一の符号付き値）——全部 80% で、合計行・符号・数式は毎回手書き。

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

作る — AmountBreakdown（金額内訳）

予備知識ゼロの 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 の「控除」で表示——⁠符号は色だけに依存しない⁠。
• ⁠既定でサーバー描画でも安全⁠：formatValue は formatCurrency（JPY/ja-JP）が既定＝唯一の関数 prop は任意指定。
• #347 をクローズ（PR#348）。⁠「KPI 行＝StatGroup」の金融版が揃った。⁠

そして索引も直した — コンポーネントが欠落を埋め、索引がそれを指す

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

学び — 3回ルールは「金融の土台」も固めた

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

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

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

試す

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

3回手組みされた形が、その場でコンポーネントになり、索引がそれを指す。15業界目前で、金融の土台がもう一段かたまった。