AI に返品処理を作らせてみた — 前回作ったコンポーネントを、次の予備知識ゼロの AI が自分で見つけて全面採用した（やってみた #45）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。小売4枚目——⁠返品 / 払戻処理⁠（元取引照合 × 一部返品 × 理由コード × 返金計算 × 払戻テンダー × 在庫戻し）。

「1業界は最低3〜5枚・可能な限り違う内容・業界特有UIを最優先」という方針。#42 売る・#43 数える・#44 締める に続いて、今回は ⁠巻き戻す⁠——売った取引を逆にたどる、取引の取り消し。同じ小売でも、レジ会計とも棚卸とも締めとも違う作法。

結果 — 4.5/5

tsc/build 緑・console 0・375px でカード化・返品数量→返金が即再計算・理由必須で確定ブロック・高額/ノーレシートで承認ゲート・返品完了 read-only・h1 1個・返金額が text+符号で読み上げ。

今回の主役 — ⁠前回作った Delta を、次の予備知識ゼロの AI が自分で見つけて全面採用した⁠

この連載のいちばんの賭けは「⁠作ったコンポーネントが、予備知識ゼロで始まる次の回の AI に、ちゃんと発見されて使われるか⁠」でした。予備知識ゼロの AI は毎回まっさら——前回何を作ったかは知りません。@gunjo/ui の中身と gunjo.jp だけが手がかり。

前回 #44 で、過不足表示を3回見たので Delta(#221)（符号つきの差分を表す最小コンポーネント）を作りました。そして今回 #45 の予備知識ゼロの AI は——⁠Delta を自分で見つけて、返金まわり全部に使いました⁠:

⁠Delta — 使った、見事に合った、この回の白眉。⁠ 返金の額にちょうど合う最小コンポーネント。value={-amount}・format={(n)=>yen(Math.abs(n))}（金額は絶対値、符号はこのコンポーネントが持つ）・labels={{ negative: "返金" }} で動かす。⁠EditableDataTable のセル（明細別の返金額）・列フッタ（返品商品の計）・値引きの按分行・サマリ（返金合計）・払戻方法の対応表——画面全体を1つのコンポーネントで⁠。符号で決まる destructive の色調＋常時読み上げるラベルで、返金が⁠色でなく テキスト+符号⁠で伝わる。⁠一度も戦わず、差分表示を1つも手書きしなかった⁠。

これが複利の正体です。人間が3回ルールで作る判断をし、相棒の AI（この連載の実作業を担う）がコンポーネントを実装して埋める → ⁠次のまっさらな AI がそのコンポーネントを発見して、ゼロ摩擦で組み合わせる⁠。AI が学習しているのではありません（毎回まっさら）。⁠パッケージが育って、毎回新しい AI がそれを"発掘"している⁠——だから検証が信用できる。

横断的なコンポーネントも全採用: EditableDataTable（明細別の返品数量＋理由 Select＋自動計算の返金額・renderFooterCell で列合計・375px カード化）・NumberInput(stepper)（0〜購入数量で制限）・CurrencyInput（ノーレシート時の手入力単価）・RevealSection＋ApprovalSteps（高額/ノーレシートで承認パネルが role=region で出現＋承認の証跡）・formatCurrency（全 ¥）。

src で直した不備 — 「存在するのに docs で見つからない」prop

今回のはっきりした不備は⁠見つけやすさ⁠でした:

• 🟡 ⁠CardTitle の as prop が docs に載っていない⁠。CardTitle は as（h1〜h6/p/div・既定 h3）を出荷済みなのに、Card の docs ページは全デモが裸の <CardTitle> で、props 表も className/children だけ。⁠2回連続の予備知識ゼロの AI が、真逆から踏んだ⁠——#44 は .tsx の型を読んで as="h2" を発見し見出し階層を整え、#45 は docs だけ見て見落とし ⁠h1→h3 の飛び⁠を作った。⁠能力はある、docs から見つからなかっただけ⁠。→ props 表に as 行を追加（PR #224）。新しいコンポーネントを作る話ではなく、既存の能力を可視化して再発を止める話です。

課題に記録だけした欠落（3回ルール未達）

• 🟠 ⁠スキャン/レシート照合の入力⁠（手入力かスキャン→レコードを解決→found/not-found・#220・⁠2回目⁠＝棚卸 SKU#43＋返品レシート#45）。予備知識ゼロの AI が最大の欠落に指名。あと1回で作る。
• 🟠 ⁠制約付きの払戻方法セレクター⁠（元の支払方法で払戻方法を制約：カード売上→クレジット取消のみ・現金戻し不可）。Select の disabled オプションで手当て。#42 の数値キーパッドとは⁠別物⁠（#216 にメモ・キーパッドは1回・制約セレクターは新規）。
• 🟡 RevealSection に囲み/カードのバリエーションがあると、承認パネルが楽（枠線/余白を毎回手当て）。

学び — 複利は「AI が賢くなる」ではなく「コンポーネントが増えて毎回発掘される」

#44: 過不足を3回見た → 人間が Delta を作る
#45: まっさらな AI が Delta を発掘 → 返金画面全体に全面採用（戦わず）

検証が信用できるのは、⁠AI が前回を覚えていないから⁠です。覚えていたら「前に使ったから今回も使う」になる。毎回ゼロから始まる AI が、毎回パッケージを"発掘"して同じコンポーネントに辿り着く——それは、そのコンポーネントが⁠本当に発見でき、組み合わせられる⁠という証拠になります。今回作ったのは小さな docs の1行だけ（ライブラリが持ちこたえた回）。でも前回の投資が、今回ちゃんと返ってきました。

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

• ⁠小売5枚目⁠（レジ開け/受領 or スキャン#220 を3回目へ＝作る閾値）か、別業界へ。方針: 1業界3〜5枚・可能な限り違う内容・業界特有UI最優先。

試す

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

まだ alpha。前回作ったコンポーネントが、次の予備知識ゼロの AI に発掘されて全面採用された回。