AI に在庫引当を作らせてみた — 画面まるごと「別業界で作った部品」で組み上がった(やってみた #69)
/shipping-allocation375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に在庫引当を作らせてみた — 画面まるごと「別業界で作った部品」で組み上がった(やってみた #69)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、文脈ゼロの cold な AI に実 UI で作らせる連載。製造6枚目・製造シリーズ最終——出荷 / 在庫引当(受注vs在庫引当 × 欠品 × 安全在庫 × ピッキング/出荷指示)。
製造の6枚目(最終)は出荷の在庫引当。受注に在庫を割り付け、欠品を見つけ、出荷を切る画面。製造シリーズ最高点 4.5/5——そしてプロジェクトの主題が完全に実証された回だった。
結果 — 4.5/5(製造6枚で最高)
tsc/build 緑・console 0・375px・受注一覧(引当状況 ○◐●▲=色非依存)・受注vs在庫vs安全在庫・引当 Sheet(ライブ再計算)・欠品サマリ・scan-to-release。
今回の主題 — 画面まるごと「別業界で育てた部品」で組み上がった
cold AI が在庫引当を組むのに使った部品は、ほぼ全部 他業界のために作ったものだった:
Meter(倉庫充填) → 受注vs在庫。target=安全在庫ライン+incoming=引当プレビューで「引当後どうなるか(80個+120個→71%)」をカスタム差分ロジックゼロで。"the standout, a genuinely thoughtful API"。ReferenceValue(医療ラボの H/L 判定) → 引当可能在庫 vs 安全在庫 vs 在庫切れ。flagValue(value,{low,criticalLow})+labels上書きで「as if it were built for inventory」。閾値方向が素のまま。Delta(金融の過不足) → 欠品数量。ScanInput(POS/棚卸) → scan-to-release。SafetyBanner→ 欠品アラート。
倉庫/医療/金融/POS のために作った部品が、製造の出荷引当で骨格そのまま効いた。Meter は #65/#66/#67/#68/#69 と5回連続、別業界で野生採用。これが cold-test の狙い——「作法の骨格を捉えた primitive は業界を越える」の最終証明。
起票だけ(軽微・3回ルール)
- 🟡 Meter に「fill-is-good」方向が無い(#286・1回目)。引当カバー率(value=引当/max=受注)は満杯=good だが、既定
higher-is-worseは満杯を warning に、higher-is-betterは target 必須。direction="fill-is-good"(target 不要で満杯=success)が欲しい=方向モデルの完成(worse / better-with-target / fill-is-good)。回避:target={max}or 明示tone。 - 🟡 同issueで 3分割の引当/残/欠品 reconciliation バー(Meter は2分割、DistributionBar は target 無)。
- 🟡 Badge が色のみが2回目(#276・引当状況に ○◐●▲ を手で追加)。
- 🟢 DataTable の filter が単一列テキストのみ(派生ステータス絞り込みは自前 pre-filter)。
学び — 製造6枚で「kit は成熟した」と確かめた
製造を MES工程進捗(#64)→QC検査(#65)→OEE保全(#66)→トレーサビリティ(#67)→生産計画(#68)→出荷引当(#69) の6枚で踏破した。得点は 4.5/4/4/4/3.5/4.5。直近3枚(#67/#68/#69)は src 修正ゼロ——だが全部高得点。これが意味するのは:
小〜中 primitive(Meter/ReferenceValue/Delta/ScanInput/SafetyBanner/DataTable/Timeline…)はもう揃った。
実業界の画面は、それらの組み合わせでほぼ賄える。
残る穴は「系譜グラフ(#281)」「ガント/スケジューラ(#142)」のような大型ドメインレイアウト primitive だけ。
#69 でそれを最も鮮やかに見た——画面まるごとが「過去に別業界のために作った部品」で組み上がり、新規 src はゼロ。デザインシステムが「作り切った」段階に入ったことの、6業界13部品横断による実証。残る大型 primitive は急がず、3回ルールで再出現を待って腰を据えて作る。
製造シリーズ総括(#64〜#69)
| # | 画面 | 点 | 主役の越境 |
|---|---|---|---|
| 64 | 工程進捗 | 4.5 | RouteStops(配送)→工程ルート |
| 65 | QC検査 | 4 | ReferenceValue(臨床)→公差判定・Meter higher-is-better build |
| 66 | OEE保全 | 4 | Meter を翌回AIが自力16回使用・ParetoChart build |
| 67 | トレーサビリティ | 4 | SafetyBanner(臨床)→リコール・初の大穴=DAG |
| 68 | 生産計画 | 3.5 | Meter incoming→再計画プレビュー |
| 69 | 出荷引当 | 4.5 | 画面まるごと別業界部品で完成 |
次回予告(やってみた #70)
- 業界 pivot——教育/公共/メディアなど、製造とは全く違う領域へ。系譜#281・ガント#142 の3回目も観測。旅行は後で腰据えて作り込む枠。
試す
まだ alpha。在庫引当の画面がまるごと別業界の部品で組み上がり、製造6枚で「kit は作り切った」を確かめた回。
<!-- 公開前: 相互URL差込/スクショ確定/EN(dev.to)ミラー -->
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import している部品です。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。