AI に給付金審査を作らせてみた — 3回手組みされた「審査ワークフロー」を、ついにコンポーネントにした（やってみた #76）
/benefit-screening375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に給付金審査を作らせてみた — 3回手組みされた「審査ワークフロー」を、ついにコンポーネントにした（やってみた #76）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。公共/自治体2枚目——給付金 / 生活支援給付 審査（多段審査ワークフロー × 資格判定 × 必要書類 × 決定署名 × 支給額）。
公共の2枚目は給付金審査。申請受付→書類審査→資格判定→世帯収入調査→決定→支給 と進める画面。そして #63 賃貸審査・#75 自治体窓口・#76 給付金審査 で3回手組みされた「操作できる審査ワークフロー」を、3回ルールでついにコンポーネント化した回。
結果 — 4/5
tsc/build 緑・console 0・375px・申請一覧・6段の対話的審査パイプライン（次へ/差戻し/却下）・資格判定（収入vs基準額）・必要書類チェック・2人確認→署名決定→ロック・支給額計算。
今回の主役 — 3回目で、審査ワークフローをコンポーネント化
予備知識ゼロの AI の核心の問いへの答え:
操作できる段階進行のコンポーネントが無い。
ApprovalStepsもStepperも厳密に表示専用だ。状態遷移まるごとを手組みした——data.ts に約180行 + アクション処理に~120行。 … SignedRecord と CoSign（実際のワークフローの振る舞いを内包する）を出荷しているデザインシステムにとって、対になる操作できる ApprovalWorkflow が無いのは、最大の欠落だ。
これは #63 賃貸審査・#75 自治体窓口 でも同じ手組み（~120-300行）。3回出た → 3回ルールで作る（#267・PR #304）。予備知識ゼロの AI が3回かけて磨いた状態遷移を、そのまま ApprovalWorkflow に固めた:
- 表示は既存
ApprovalStepsを内部で合成（状態は色だけに頼らず・アイコン+テキスト）。- 次へ進める: 現段階に {担当者, 時刻} を記録し次へ（最終段→status "approved"）・
canAdvanceでゲート＋無効時にadvanceHint。- 差戻し: 戻し先の段階＋理由を選び、対象以降の記録をロールバック。
- 却下: 理由付きで terminal "rejected"。
now()を注入可（ユーザー操作時のみ呼ぶ＝サーバー描画でも安全）・labels/stateLabels を各言語化できる。
ブラウザ実証: 次へ（申請受付→書類審査→資格判定）・ゲート（書類審査で必要書類チェックまで advance 無効→チェックで有効）・差戻しロールバック（資格判定→書類審査）・却下→terminal「却下されました」。3画面で~300行ずつ手組みしていた審査ロジックが、設定オブジェクトに畳まれた。
業界越えは規制の重い領域で全開
-
ReferenceValue（臨床ラボ）→ 収入/資産 vs 基準額「いちばんの見どころ、まるで収入審査のために作られたよう」（¥248,000 [↑H 基準超過] ≤¥273,000・色だけに頼らない）。 -
SignedRecord（臨床記録）→ 決定（署名→ロック→追記のみ）「ほぼ完璧」。 -
CoSign（与薬ダブルチェック）→ 2人確認。DataTable onRowClick の修正（#75 で直したばかり）→ 申請一覧の選択に即採用。
医療の基準値判定/署名/2人確認が、公共の収入審査/決定/承認に骨格そのまま。
課題に記録だけ（軽微・1回目）
- 🟡 Button に loading の prop が無い（Spinner はあるが未配線・#305）。
- 🟡 ReferenceValue が showLabel 時にラベルを二重に読み上げる（visible＋sr-only・#306・#291 と ReferenceValue の PR で束ねる）。
- 🟡 Input/Select/Textarea 共通の error/required API が無い（#166 に追記）。
学び — 「振る舞いを持つコンポーネント」の系譜が揃った
これまで作った SignedRecord/CoSign は「振る舞いを内包するコンポーネント」だった。今回 ApprovalWorkflow を足したことで、事務方の3大振る舞い（署名ロック・二重承認・段階審査）が全部コンポーネントになった。予備知識ゼロの AI が3回・各300行手組みした審査ロジックが、これで <ApprovalWorkflow stages value onChange canAdvance> に畳まれる。3回ルールは「痛みが3回揃った瞬間に、磨かれた解を固める」——今回は予備知識ゼロの AI が3回作った状態遷移が、そのまま設計仕様になった。
次回予告（やってみた #77）
- 公共をもう1枚（施設予約・税申告・住民異動 など）で3枚目。ApprovalWorkflow が別の審査画面で即再利用されるか観測。系譜#281・連続時間軸#142残りの大型も継続。
試す
まだ alpha。3回手組みされた審査ワークフローを ApprovalWorkflow に固め、事務方の振る舞いコンポーネントが揃った回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。