AI にプロフィールページを作らせてみた — 粗さが尽きてきた（やってみた #18）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠ユーザープロフィールページ⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /profile に、ヘッダー（アバター・名前・自己紹介・統計）、フォロー/編集、タブ（Posts/About/Activity）、About（メタデータ）、Activity（タイムライン）、編集フォーム（モーダル＋入力チェック）。

結果 — 4.5/5（過去最高タイ）

tsc/build 緑・ビルド時に静的生成・コンソール 0・サーバーとブラウザの表示ずれ（hydration）なし・375px でのはみ出し0。そして今回いちばん大事なのは——⁠新しい種類の問題が、出なかったこと。⁠

何が出なかったか — 中間層が全部"本物"だった

#17 では Pagination/Badge が「コンポーネントのフリをした、ただの見た目」でした。でも今回触った中間層は⁠全部、本物の組み立て⁠でした:

• Statistic は増減から色調を自動で決め、矢印アイコンも付く。
• MetadataList は本物の <dl>/<dt>/<dd>。
• Timeline は <ol>/<li>/<time> ＋ 印と線をつなぐ処理つき。
• AvatarGroup は「+N」が⁠フォーカスできる Popover⁠になっていて、全員のリストが出る。
• Tabs は Radix ベースで role=tablist/tab/tabpanel＋矢印キー（実機で Posts→About→Activity の移動を確認）。

予備知識ゼロの AI 曰く「⁠どれも "div にクラスを付けただけ" ではない。名前と実体が一致している⁠」。基本コンポーネントも #15〜#18 で新規バグ0 が続いています。

出た粗さ — 全部 軽微、そして "docs の遅れ"

⁠① Dialog がモバイルで画面端まで広がり、角丸も無い⁠（左右の余白が portalContainer のときだけ効いていた）→ #97。 ⁠② MetadataList が値を無条件に切り詰める⁠（長い URL/メールが、ツールチップも無いまま途中で切れる）→ #98。 ⁠③ docs が実装に遅れている⁠: Statistic ページの import の誤記（@gunjoui/components）、MetadataList の型が「詳しく書かれていない」、Form が「見た目だけ」だと明示されていない——名前を信じるとアクセシビリティの不備を出荷しかねない → #50 に集約。

①② は今回ソースで直して ⁠反映（PR #99）⁠。③ は docs まわり＝beta ゲートで対応。

学び — "出尽くし" のカーブが見えてきた

#3  全体に共通するクラッシュ（~28 コンポーネント）  ← 致命傷
#13-16 名前負け（専用コンポーネントが核心を欠く）  ← 構造的
#17 コンポーネントのフリをした、ただの見た目               ← 組み立てが未完
#18 モバイル端の仕上げ ＋ docs の遅れ            ← 仕上げ

⁠粗さが「致命傷 → 構造 → 仕上げ」へ、確実に小さくなっています。⁠ 予備知識ゼロの AI の総括が刺さりました——「⁠コンポーネントは docs より先を行っている。コンポーネントそのものと戦ったことは一度もなく、戦った相手はいつも "そのコンポーネントについての docs" だった。これは、かなり終盤の失敗のしかただ⁠」。

まだ「完全に出尽くした」とは言いません（軽微なものは出た）。でも⁠残る最前線が、コンポーネントから「docs と、一つの正（SSOT）の同期」へ移った⁠のは、はっきりしました。正直に言えば——⁠完成に近づいています。⁠

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

• ⁠エラー画面 / 通知設定 / 空のダッシュボード⁠ ほか。出尽くし判定の詰めへ。

試す

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

まだ alpha。でも粗さのカーブは確実に下がっています——"出尽くし" を、盛らず1枚ずつ確かめています。