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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。#1〜#7 コマンドパレット に続いて、今回は ⁠空状態・スケルトン・トースト⁠——誰も作りたがらないのに、どのアプリにも要る "states"（状態の表示）です。これで主要カテゴリを一周します。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /inbox に、ローディング（Skeleton）／空（EmptyState）／一覧（Card）の3つの状態を切り替えられる UI と、操作したときのトースト。

結果 — 4/5

npm run build 成功。ビルド時に静的生成され、⁠コンソールエラー0・アクセシビリティ（a11y）の警告も0⁠。

EmptyState（アイコン＋見出し＋説明＋CTA が一発）、Skeleton（形は rectangle/circle/text）、Toast（useToast() → showToast(msg, type) で、role="status" が付いていてスクリーンリーダー対応も良好）——「状態表示に要るもの」が、型のついた形でそろっていました。⁠サーバー側の事前描画（SSR）でのクラッシュもなし。⁠（#7 で出た Description の警告も、ここでは Dialog を使わないので出ません＝問題が他に漏れず、ちゃんと切り分けられている、ということです。）

粗さ — また「固定幅」。ただし今度は、もう分かっている種類のもの

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

Skeleton の circle 以外の形が⁠固定幅⁠になっていて、行いっぱいに広げるには上書きが必須でした。これは——⁠#47 で直した「初期状態が固定幅」問題と同じ種類⁠。あのとき「初期状態で幅いっぱいに広げる」直しをしたのに、Skeleton だけ漏れていた、というわけです。→ #58（Skeleton を幅いっぱいに＋固定幅デフォルトの再点検）

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

• docs のコード例が、機械的に取得すると本文に出てこない（#50）
• 使える名前を知るのに、結局ソースを読むしかない（Avatar は fallback prop ではなく <AvatarFallback> を組み合わせる形、Badge に primary の見た目は無い、など）

一周して見えたこと — 粗さが "出尽くしてきた"

予備知識ゼロの AI に作らせるテストを8回まわして、はっきりしたことがあります。⁠新しい種類の粗さが、出なくなってきた。⁠

#8 で出たのは、ほぼ⁠すでに分かっている種類の再確認⁠だけでした。これは「粗さが出尽くすまで回す」と決めていたこのシリーズの、⁠出尽くし始めのサイン⁠です。まだ見ぬバグの種類が出続けるうちは alpha、出尽くして分かっている種類を全部潰し切ったら——⁠beta⁠。

ここまでのスコアボード

8画面すべて ⁠ビルド通過・4〜4.5/5⁠。出た粗さは全部 issue にして、全体に共通していた問題（#52）は修正済み、残りは分かっている種類を点検で潰す段階です。⁠「破綻しない、AI が使える日本語のデザインシステム」を、作っている過程ごと見せる⁠——それがこのシリーズでした。

この先

• 残りの分かっている種類（#55 パターン／#56 型の点検／#57 アクセシビリティ／#58 固定幅）を潰す
• 各画面を手本になる形に整えて、⁠群青の Patterns に「証拠つき」で出荷する⁠
• 全部緑になったら ⁠alpha → beta⁠

試す

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

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