AI に IDE 風エディタを作らせてみた — "枯れ" の境界線がはっきりした（やってみた #16）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は IDE 風のエディタ画面。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /editor に、メニューバー＋ツールバー、パンくず、左のファイルツリー、中央のタブ＋エディタ、右パネル、下のステータスバー。

前回 #15 で「基本部品は枯れた、loop は上へ移った」と分かった。今回はそれをもう一段はっきりさせにいった。

結果 — 3/5

tsc/build 緑・static prerender・コンソールエラー0・hydration なし。cold AI の結論が前回と一致:

基本部品は converged（Button/Badge/Kbd/Breadcrumb/Menubar/Tabs/CodeBlock/Tooltip…が初手で動く・a11y も型 export も問題なし）。不安定さは1段上——合成・上位部品に移った。

「枯れ」の境界線が、画面1枚でくっきり出た。

粗さ — 境界の "上側" に3つ

① ファイルツリーがキーボードで動かない（a11y 4度目）。 FileTree/TreeView は role="tree"/treeitem は正しいのに onKeyDown も roving tabindex も無い。↑↓←→（WAI-ARIA tree パターン）が無反応 → #87。#57/#71/#83 に続く。

② また名前負け（4例目）。 EditorTemplate は docs に無く（404）、status バー slot 無し・幅ハードコード・モバイルで左右パネルが消えて fallback 無し（電話でファイルツリーに到達不能）。StatusBar も default が app-shell に不適（fixed で viewport へ脱出＋640px cap）→ #90。

③ パッケージング衛生＋生成由来の矛盾クラス。 package.json の files が存在しないファイルを参照していて、design/ メタデータが出荷されていなかった（移行の取り残し）→ #88。加えて Breadcrumb/Menubar/StatusBar に矛盾した flex-col flex-row（生成元の方向ミス）→ #89。

直した

• #87 ツリー a11y → WAI-ARIA tree キーボード（↑↓←→/Home/End/roving tabindex）実装。FileTree は TreeView 委譲で同時に直る。land（PR #91）。実ブラウザで矢印移動・展開/折畳を検証。
• #88 packaging → files を実在パスへ。design/ メタデータが出荷されるように。同 PR で land。
• #90 名前負け（EditorTemplate/StatusBar）→ #74/#80/#85 と束ねて beta ゲートで横断整理。
• #89 矛盾クラス → 生成元から断った。land（PR #92）。根因は「Pencil が水平をデフォルトで省略→sync が誤解釈して flex-col を生成」で、.pen は元々正しく generator を修正（.pen 無編集）。

学び — "枯れ" は層の境界として現れる

基本部品（Button/Badge/Tabs/CodeBlock…） ── 枯れた
合成・上位部品（EditorTemplate/FileTree/StatusBar/NotificationCenter） ── まだ
a11y ── class 単位でまだ（#57/#71/#83/#87）
パッケージ/インストール衛生 ── 新しい loop（#79/#84/#88）

#15・#16 で境界線が安定した。もう基本部品は疑わなくていい。残るのは 合成・上位部品のデータ駆動化／a11y／衛生——どこを作り込めば beta かが、画面の積み重ねで具体的に見えてきた。低い点ほど誠実。

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

• Error画面 / 検索結果 / プロフィール ほか。境界の "上側" を中心に。

試す

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

まだ alpha。基本部品は枯れた、上位はこれから——"枯れ" の境界を、隠さず1枚ずつ確かめている。

---

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