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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。#1〜#8 で主要コンポーネントを一周したあと、今回からは⁠作りが複雑な画面⁠に入ります。第9回は ⁠Kanban ボード（ドラッグ&ドロップ）⁠。

#8 のあと「粗さが出尽くし始めた」と書きかけました。でも——⁠それは早とちりでした⁠。バグの "種類" は収束してきたけれど、⁠試した画面の幅が全然足りていない⁠。特に⁠操作の重い画面⁠は一度も通していません。そこに新しい粗さが潜んでいる。だから、作りの複雑な画面から再開します。

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

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

npm run build 成功。ビルド時に静的生成され、ドラッグ&ドロップも実際に動作（カードを移動すると各列の件数も更新）。

カードの見た目は群青できれいに組めました——Card が forwardRef ですべての props をそのまま下へ渡すので、dnd-kit の listeners を直接付けられる。優先度は Badge、担当者は Avatar（⁠tooltip prop が必要な provider を自分の内側に持っている⁠＝#52 の直しがここでも効いています）。見た目の摩擦はゼロ、とのこと。

でも、作りの複雑な画面は、⁠単純な画面では出なかった粗さ⁠を出しました:

① 群青にドラッグ&ドロップ用のコンポーネントが無い

@gunjo/ui の入口には Sortable/Draggable/Droppable の類が一つもありません。予備知識ゼロの AI は ⁠dnd-kit を自分で持ち込みました⁠。デザインシステムがドラッグ&ドロップを持たないのは、設計判断としてアリです（多くのデザインシステムが dnd-kit に任せている）。でも——

② KanbanTemplate が壊れた固定サイズの枠（#55 と同じ種類）

群青は KanbanTemplate を⁠持っている⁠のに、中身は w-[1280px] h-[720px] h-screen w-full overflow-hidden——固定 px は打ち消されて効かず、しかも常に画面いっぱい＋はみ出し隠しを強制するので、ページ内のレイアウトと喧嘩します。列もカードも状態もドラッグ&ドロップも無い、ただの枠。⁠#5 の AuthTemplate とまったく同じ、固定枠の持病です。⁠ 予備知識ゼロの AI は使わず、手で組みました。→ #60

③ Kanban が docs サイトで 404

gunjo.jp/patterns に Kanban が無く、/patterns/kanban は 404。型の定義でしか存在が分かりません。「Kanban あります」という雰囲気だけ先行して、実体が伴っていない状態です。

（正直に書くと: 予備知識ゼロの AI が入れた dnd-kit は、サーバー側の事前描画（SSR）で aria-describedby の ID がサーバーとブラウザでずれる、という不整合を出しました。これは ⁠dnd-kit 側⁠の挙動で、群青のバグではありません——でも「群青が SSR でも安全な board を出せば避けられる」という理由にはなります。）

学び — "出尽くした" は、複雑な画面を通してから言う

#8 のあと「出尽くした」と思ったのは、⁠1回の結果だけを見た早とちり⁠でした。#9 は、⁠すでに分かっている種類（固定枠 #55）の再発⁠と、⁠新しいかたまり（"Kanban" という名前だけで実体が伴っていない＝ドラッグ&ドロップ無し・テンプレ壊れ・docs 404）⁠を、同時に出しました。

バグの "種類" は収束してきた
  ↓ でも
試した画面の幅はまだ薄い ＝ 複雑な画面（ドラッグ&ドロップ／ファイル／カレンダー／ウィザード／チャット）が未踏
  ↓ だから
複雑な画面を通すまで "出尽くした" とは言わない（出尽くすまで回す）

正しい beta の判定は「⁠数回連続で新しい種類が出ない⁠」こと。#9 で新しいかたまりが出た以上、まだ出尽くしていません。盛らない、隠さない——⁠自分のテストが、自分の早とちりを正してくれた⁠回でした。

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

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

試す

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

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