AI に年末調整の申告画面を作らせてみた — 直近で作った4つが、全部ゼロ摩擦で使われた（やってみた #41）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。給与2枚目——⁠年末調整 申告⁠（扶養親族・保険料控除の編集・各種控除計算・過不足税額の精算）。

結果 — 4.5/5

tsc/build 緑・console 0・375px で編集グリッドがカード化・過不足額がその場で再計算（還付/追徴を明示）・提出フロー動作・h1 1個。

この回の主役 — 直近で作った4つが、全部ゼロ摩擦で使われた

ここ数回で CurrencyInput(#176)・EditableDataTable(#199)・ApprovalSteps(#207)・formatCurrency(#180) を作って出荷してきました。⁠年末調整という、税申告の濃い新画面で、予備知識ゼロの AI が4つ全部を見つけて使いました⁠:

• ⁠CurrencyInput — 使った⁠、¥金額の9フィールド全部に（保険料・所得見積額・住宅借入金等・配偶者所得）。仕様がドンピシャ——外から制御する value:number＋onValueChange、¥の接頭辞、⁠入力中に桁区切り⁠、右揃え tabular-nums、最小値で制限、aria-invalid で赤枠。⁠ゼロ摩擦。この分野でいちばん良いコンポーネントだ。⁠
• ⁠EditableDataTable — 使った⁠、扶養親族と保険料控除の両方のリストに。getRowError・renderFooterCell（控除額の合計）・自動でモバイルの card 化。そのままで戦わず。
• ⁠ApprovalSteps — 使った⁠、申告者→人事確認＋差戻し。状態→アイコン＋色調＋テキスト・差戻しのコメント。修正ゼロで適合。
• ⁠formatCurrency — 使った⁠、すべての読み取り専用の ¥表示に。signed で -¥66,100。

⁠「足りないコンポーネントを見つける → 作る → 翌回以降の別画面で、組み合わせのコンポーネントとして効く」⁠——fintech/会計/給与の「金額を扱う層」を作り切った成果が出ました。税計算（控除の上限・累進税額・過不足精算）は⁠分野固有のロジックなので、デザインシステムは作らない⁠のが正解で、予備知識ゼロの AI もそう書きました。

新しい欠落は "設計レベルの層" に

満点(5/5)に届かなかったのは、品質ではなく、まだ整っていない設計レベルのコンポーネント:

• 🟠 ⁠条件付きセクションのコンポーネントが無い⁠（最大）。配偶者控除ブロックや確認パネルの表示/非表示を、role=region＋aria-live で毎回手組み（#213）。
• 🟠 ⁠精算結果バナーのコンポーネントが無い⁠。還付/追徴の見出し金額を、Alert＋手書きの大きな数字で構成（#214）。
• 🟡 ThemeProvider が、使う側の layout に配線されていないと OS のダークを無視（#171 のハマりどころ・3回目・導入ドキュメントの問題）。

⁠今回はソースの小修正なし⁠——ライブラリが持ちこたえ、残る欠落は新しいコンポーネントと分野固有のロジックでした。誠実に、そう記録します。

学び — 作り切った層は、新画面で "組み合わせ" になる

〜#40: 金額/グリッド/承認/フォーマッタの不足を1つずつ埋める
#41: 4つ全部が、新画面で 組み合わせのコンポーネントとして ゼロ摩擦で効く

コンポーネントを積み上げると、ある時点から ⁠予備知識ゼロの AI は「探して・組み合わせる」だけ⁠になります。41回回して、fintech/会計/給与の金額系画面は、その段階に達しました。次の最前線は、条件付きフォーム・結果表示といった⁠別の設計レベルの層⁠——欠落は、品質から「まだ整っていない上位のコンポーネント」へ、また一段収束しました。

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

• ⁠別業界⁠（POS/医療/物流）か、条件付きセクション(#213)を作るか。金額系は強い、次は別の層。

試す

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

まだ alpha。作り切った層が、新画面で 組み合わせ になった回。