AI に返品処理を作らせてみた — 前回作った部品を、次の文脈ゼロ AI が自分で見つけて全面採用した（やってみた #45）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。小売4枚目——返品 / 払戻処理（元取引照合 × 一部返品 × 理由コード × 返金計算 × 払戻テンダー × 在庫戻し）。

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

結果 — 4.5/5

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

今回の主役 — 前回作った Delta を、次の cold AI が自分で見つけて全面採用した

この連載のいちばんの賭けは「作った primitive が、文脈ゼロで始まる次の回の AI に、ちゃんと発見されて使われるか」だった。cold AI は毎回まっさら——前回何を作ったかは知らない。@gunjo/ui の中身と gunjo.jp だけが手がかり。

前回 #44 で、過不足表示を3回見たので Delta(#221)（符号付き差分 atom）を起こした。そして今回 #45 の cold AI は——Delta を自分で見つけて、返金まわり全部に使った:

Delta — USED, fit excellently, the standout of this round. 返金 out にちょうど合う atom。value={-amount}・format={(n)=>yen(Math.abs(n))}（金額は絶対値、符号は atom が持つ）・labels={{ negative: "返金" }} で駆動。EditableDataTable のセル（明細別 返金額）・列フッタ（返品商品計）・値引き按分行・サマリ（返金合計）・テンダーミラー——画面全体を1つの primitive で。符号駆動の destructive トーン＋常時読み上げラベルで、返金 out が色でなく text+符号で伝わる。一度も戦わず、variance 表示を1つも手書きしなかった。

これが複利の正体だ。私（人間側）が3回ルールで穴を埋める → 次の fresh AI がその部品を発見して、ゼロ摩擦で組み合わせる。AI が学習してるんじゃない（毎回まっさら）。パッケージが育って、毎回新しい AI がそれを"発掘"している——だから検証が信用できる。

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

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

今回の clean な穴は発見性だった:

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

起票だけした穴（3回ルール未達）

• 🟠 スキャン/レシート照合 input（type-or-scan→レコード解決→found/not-found・#220・2回目＝棚卸 SKU#43＋返品レシート#45）。cold AI が最大の穴に指名。あと1回で build。
• 🟠 制約付き払戻テンダー selector（元支払方法で払戻方法を制約：カード売上→クレジット取消のみ・現金戻し不可）。Select の disabled option で手当て。#42 の数値キーパッドとは別の形（#216 にメモ・keypad は1回・constrained selector は新規）。
• 🟡 RevealSection に callout/card 変種があると承認パネルが楽（border/padding を毎回手当て）。

学び — 複利は「AI が賢くなる」ではなく「部品が増えて毎回発掘される」

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

検証が信用できるのは、AI が前回を覚えてないからだ。覚えていたら「前に使ったから今回も使う」になる。毎回ゼロから始まる AI が、毎回パッケージを"発掘"して同じ部品に辿り着く——それは部品が本当に発見可能で composable だという証拠になる。今回作ったのは小さな docs 行1つ（kit が持ちこたえた回）。でも前回の投資が、今回ちゃんと返ってきた。

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

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

試す

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

まだ alpha。前回作った部品が、次の文脈ゼロ AI に発掘されて全面採用された回。

---

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