AI に Kanban ボード（ドラッグ&ドロップ）を作らせてみた — "枯れて" なかった（やってみた #9）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。#1〜#8 で主要コンポーネントを一周したあと、今回から複雑な画面に入る。第9回は Kanban ボード（DnD）。

#8 のあと「穴が枯れ始めた」と書きかけた。でも——それは早とちりだった。バグの "種類" は収束してきたけど、画面のカバレッジが全然足りてない。特にインタラクションが重い画面は一度も通してない。そこに新しい穴が潜む。だから複雑系から再開する。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /board に、To Do / In Progress / Done の3列、優先度バッジ＋担当アバター付きカード、そして列をまたぐドラッグ&ドロップ。

結果 — 4/5、そして新しい発見が出た

npm run build 成功、static prerender、DnD 実動作（カード移動でカウント更新）。

カードの見た目は gunjo で綺麗に組めた——Card が forwardRef で全 props を透過するので dnd-kit の listeners をそのまま付けられる、Badge の優先度、Avatar の担当者（tooltip prop が provider を self-wrap＝#52 がここでも効いてる）。見た目の摩擦はゼロ、と。

でも複雑系は、単純画面では出なかった穴を出した:

① gunjo に DnD プリミティブが無い

barrel に Sortable/Draggable/Droppable 等ゼロ。cold AI は dnd-kit を自前で持ち込んだ。DS が DnD を持たないのは設計判断としてアリ（多くの DS が dnd-kit に委ねる）。でも——

② KanbanTemplate が壊れた固定サイズ枠（#55 と同系統）

gunjo は KanbanTemplate を持ってるのに、中身は w-[1280px] h-[720px] h-screen w-full overflow-hidden——固定 px は死にクラス、しかも常に full-viewport＋overflow-hidden を強制してページ内レイアウトと喧嘩。columns も cards も state も DnD も無い、ただの枠。#5 の AuthTemplate と全く同じ固定枠の病。 cold AI は使わず手で組んだ。→ #60

③ Kanban が docs サイトで 404

gunjo.jp/patterns に Kanban が無く、/patterns/kanban は 404。型 export でしか存在が分からない。「Kanban あります」感だけ先行して、実体が伴ってない。

（正直に: cold AI が入れた dnd-kit は SSR で aria-describedby の ID 不一致 hydration mismatch を出した。これは dnd-kit 側の挙動で gunjo のバグじゃない——でも「gunjo が SSR-safe な board を出せば避けられる」論拠にはなる。）

学び — "枯れた" は複雑系を通してから言う

#8 のあと「枯れた」と思ったのは1データ点での早とちりだった。#9 は、既知の class（固定枠 #55）の再発と、**新しいクラスタ（"Kanban" surface が実体を伴わない＝DnD無し・テンプレ壊れ・docs 404）**を同時に出した。

バグの "class" は収束してきた
  ↓ でも
画面カバレッジはまだ薄い ＝ 複雑系（DnD/file/calendar/wizard/chat）が未踏
  ↓ だから
複雑系を通すまで "枯れた" とは言わない（loop-until-dry）

正しい beta 判定は「K回連続で新しい class が出ない」。#9 で新クラスタが出た以上、まだ枯れてない。盛らない、隠さない——自分のテストが、自分の早とちりを正してくれた。

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

• ファイルアップロード（Dropzone / FileUploader / Progress）— もう一つの複雑系。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#8
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha、青になりつつある。複雑な画面ほど、新しい穴を正直に出してくれる。

---

<!-- 公開前: #60 反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->