AI に給与明細の編集画面を作らせてみた — 直近2回で作った primitive が、両方とも別業界で即採用された（やってみた #40）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。記念すべき40回目は業界を変えて給与——給与明細の編集・確定画面（支給/控除の編集・差引支給額・社会保険/税・年間累計・承認確定フロー）。

結果 — 4.5/5

tsc/build 緑・console 0・375px で支給/控除グリッドがカード化・差引支給額がライブ再計算（マイナスは警告）・承認→確定フロー動作・h1 1個。

この回の主役 — 直近2回で作った primitive が、両方とも新業界で即採用された

私は直近2回で EditableDataTable(#199・編集グリッド) と ApprovalSteps(#207・承認経路) を作って出荷した。40回目の給与画面（銀行でも会計でもない新業界）で、cold AI が両方を見つけて使った:

EditableDataTable — USED, zero fighting, 支給と控除の両グリッドに。再発明する構造を全部供給してくれる——自動でデスクトップ table→モバイル card・add/remove・footer 合計・getRowError・セル別 ctx.ariaLabel・列の width/minWidth。仕事をカバーした。各セルの editor を渡すだけ。

ApprovalSteps — USED, purpose-built, 人事→経理→確定に。差戻し state は comment を取る。一度も戦わなかった。

「穴を見つける → 作る(#199/#207) → 翌回の別業界で即採用、ゼロ摩擦」——複利が全開で回った。formatCurrency(#180) は8回連続（{signed:true} で -¥30,000）。Statistic/Badge/Alert/Dialog/MetadataList も初手で。

新しい穴と今ラウンドの修正

• 🟠 CurrencyInput が無い（最大）。display の formatCurrency はあるが、¥プレフィックス・桁区切り・右揃えの金額 editor が無い。給与/会計の金額セルは全部 NumberInput（数量用スピンボックス）に落ちる。#176 が #32/#33/#38/#40 と4回連続確認——出荷待ちの一番手。
• 🟡 EditableDataTable の footer が full-width で金額列に揃えられない（新部品の精錬点）→ renderFooterCell を追加（#210・ブラウザ実証で合計を金額列の真下に右揃え）。

学び — 作った投資は、業界を越えて翌回に返ってくる

#38: 編集グリッドの穴 → #199 を作る → #39 会計で主役(5/5)
#39: 承認の穴 → #207 を作る → #40 給与で即採用(4.5/5)

部品の小修正も上位 primitive も、作った投資はどれも翌回の cold AI が見つけて使う。しかも #40 では業界を越えて（会計→給与）両 primitive が効いた——複利は「同じ業界の翌回」から「別業界の翌回」へ広がった。40回回した価値は、この複利の確かさに出ている。

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

• CurrencyInput(#176) を作るか、給与もう1枚 or 別業界（POS/医療）へ。4回連続の穴は作り時。

試す

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

まだ alpha。作った primitive が、業界を越えて翌回に返ってきた回。

---

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