AI に生保営業の朝のポータルを作らせてみた — 保険5枚、ほぼ全部が既存部品で組めた（やってみた #105）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。保険 5枚目＝締め——生保営業（ライフプランナー）の活動ポータル（目標・見込みパイプライン・本日のアポ・担当顧客・手数料）。

#101〜104 は社内 back-office（査定/契約/支払/引受）。#105 は現場の募集人側＝別ペルソナで保険を締める。観測：人物階層・金額内訳・パイプライン・関係——ここまで作った部品が、営業の朝の画面でも全部 composing するか。

結果 — 4.5/5・「ほぼ手組みゼロ」で締まった

tsc/build 緑・375px 横溢れゼロ・0 console error。KPI・目標・要対応アラート・見込みパイプライン・本日のアポ・手数料内訳・担当顧客ブック・顧客ドリルイン。cold AI（群青を一度も触っていない設定）のレポート：

これまで使った中で、日本の業務画面に一番嵌まる kit。逆引き索引が毎回ぴったりの部品に誘導し、3つ（AmountBreakdown・KanbanBoard・Meter）は保険の営業画面を実際に見た人が設計したとしか思えない。フル production ポータルを——KPI・アラート・パイプライン・アポ Timeline・顧客ブック・担当↔顧客・手数料 ledger・顧客ドリルイン——ほぼ手組み UI ゼロで、初回パスで tsc＋next build 緑。

部品の越境が全部決まった：

• AmountBreakdown（金額内訳）= 主役。手数料導出にぴったり——heading（募集手数料/インセンティブ・調整）・subtotal（手数料小計）・kind:"subtract"（取消・戻入を −¥34,500 のグリフ・控除トーン）・tone:"positive" の当月手数料見込 ¥545,900・formula。加算＋符号付き減算＋合計、完璧に嵌まった、穴なし。しかもドリルインの 年換算保険料で3度目の再利用——汎用に効く。
• KanbanBoard（見込みパイプライン）= div soup でない本物の pipeline primitive。見込→アプローチ→提案→申込→成約、リッチなカード、自前で横スクロールを内包＝モバイルでページを壊さない。
• Meter（目標進捗・higher-is-better/target）・RelationshipRow（募集人↔顧客）・StatGroup（KPI）・Timeline（アポ）・DataTable（ブック）・Sheet（ドリルイン）も全部。

観測の核 — 索引が「全部、名指しで、正解」

/docs/by-use-case がここでの一番の収穫。 7つのニーズを与えたら、各々に正確な部品が逐語で返り、日本語の一行理由が頭の中のモデルと一致した（金額の導出：明細 − 控除 = 合計 → AmountBreakdown／カード列のボード：パイプライン → KanbanBoard）。Meter vs Progress（目標 vs 容量の罠）まで曖昧さなく分けた。present-but-unfindable も誤誘導も、ゼロ。

#102 で索引が金額内訳を EditableDataTable に誤誘導していた——#103 でそれを AmountBreakdown に向け直した。#105 で、その索引が「全部、名指しで、正解」になった。 直した穴が塞がっているのを、3回後の別 cold AI が裏付けた。

起票 — ActionQueue / AlertList（2回目）

唯一の手組み＝要対応アラート（失効防止/更新/満期/誕生日）を Alert＋grid＋手書きの severity マップで。「severity でソートされた action-needed の worklist component が無い・営業の朝の画面 全部に出る」。→ #350。これは2回目——#102 でも更新の「act-now リスト」が手組みされ「dedicated alert worklist row が無い」と指摘されていた。あと1回で 3-confirm。StatGroup（KPI 行）と対になる「朝のダッシュボードのもう半分」。

今回 src build なし（4.5/5・保険5枚を作り切り）。

学び — 保険は「作り切った」、そして床はもう一段

保険5枚（査定/契約/支払/引受/営業）を回し切った。各回 ~85〜90% が composition、毎回 src build は最小か無し——新しい穴がほぼ出ない＝その業界の部品が揃った合図。医療7枚・製造6枚・公共5枚で見た「作り切り」が、保険でも起きた。そして締めの #105 は、AmountBreakdown（#103 build）と KanbanBoard（#142 family）が営業画面で同時に効き、索引が全部正解——機能と発見可能性の両輪が、業界をまたいで噛み合っている。残る候補は ActionQueue（2/3）。

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

• 保険を締めたので、15業界目へ pivot——運輸・交通（運行ダイヤ Gantt）／建設（工程 Gantt＋施工 Gallery）／エネルギー（検針・設備 Meter）あたり。ActionQueue 3回目の観測も継続。

試す

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

保険、5枚で作り切り。床がまた一段かたまって、次は15業界目へ。

---

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