AI に "誰も作りたがらない states" を作らせてみた — 一周の締め（やってみた #8）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。#1〜#7 コマンドパレット に続いて、今回は 空状態・スケルトン・トースト——誰も作りたがらないのに全員要る "states"。これで主要カテゴリを一周します。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /inbox に、ローディング（Skeleton）／空（EmptyState）／一覧（Card）の3状態を切り替えられる UI ＋アクションでトースト。

結果 — 4/5

npm run build 成功、static prerender、コンソールエラー0・a11y 警告0。

EmptyState（icon＋title＋description＋CTA 一発）、Skeleton（shape: rectangle/circle/text）、Toast（useToast()→showToast(msg, type)、role="status" で a11y 良好）——「states に要るもの」が型付きでそろっていた。SSR クラッシュなし。（#7 の Description 警告も、ここでは Dialog を使わないので出ない＝隔離されている。）

粗さ — また「固定幅」、ただし今度は既知の系統

rectangle: "h-4 w-[200px]",
text:      "h-3.5 w-[160px]",

Skeleton の非 circle variant が固定幅で、全幅の行にするには override 必須。これ——#47 で直した「固定幅デフォルト」と同じ class。あの流体化パスで Skeleton が漏れていた。→ #58（Skeleton 流体化＋固定幅デフォルトの再監査）

ほかは、もう見慣れた顔ぶれでした:

• docs のコード例が fetch に映らない（#50）
• 変数名の発見が source 頼り（Avatar は fallback prop でなく <AvatarFallback> 合成、Badge に primary variant は無い）

一周して見えたこと — 穴が "枯れてきた"

8回コールドテストを回して、はっきりしたことがあります。新しい種類の穴が、出なくなってきた。

#8 で出たのは、ほぼ既知の系統の再確認だけ。これは「枯れるまで回す」と決めていたシリーズの、枯れ始めのサインです。新しい未知のバグ class が出続ける間は alpha、出尽くして既知 class を潰し切ったら——beta。

ここまでのスコアボード

8画面すべて build 通過・4〜4.5/5。穴は全部 issue にして、systemic（#52）は修正済み、残りは既知 class の監査で潰す段階。「破綻しない、AI が使える日本語のデザインシステム」を、作っている過程ごと見せる——それがこのシリーズでした。

この先

• 残りの既知 class（#55 パターン／#56 型監査／#57 a11y／#58 固定幅）を潰す
• 各画面を canonical に整えて gunjo の Patterns に "領収書付き" で出荷
• 全部緑になったら alpha → beta

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 全話: #1 / #2 / #3 / #4 / #5 / #6 / #7
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha、でも青になりつつある。一緒に見届けてもらえたら。