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

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

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /profile に、ヘッダー（アバター・名前・bio・統計）、フォロー/編集、Tabs（Posts/About/Activity）、About（メタデータ）、Activity（タイムライン）、編集フォーム（モーダル＋バリデーション）。

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

tsc/build 緑・static prerender・コンソール 0・hydration なし・375px overflow 0。そして今回いちばん大事なのは——新しい class の問題が、出なかった。

何が出なかったか — mid-tier が全部"本物"だった

#17 では Pagination/Badge が「widget のフリした markup」だった。でも今回触った mid-tier は全部 real composition:

• Statistic は trend から tone を自動導出＋矢印アイコン。
• MetadataList は本物の <dl>/<dt>/<dd>。
• Timeline は <ol>/<li>/<time> ＋ marker/connector ロジック。
• AvatarGroup は「+N」がfocusable な Popoverで全員リスト。
• Tabs は Radix で role=tablist/tab/tabpanel＋矢印キー（実機で Posts→About→Activity 移動を確認）。

cold AI 曰く「どれも "div にクラス" じゃない。名前と実体が一致してる」。基本部品も #15〜#18 で fresh バグ0 継続。

出た粗さ — 全部 minor、そして "docs 遅延"

① Dialog がモバイルで画面端まで＋角丸無し（横 gutter が portalContainer 限定だった）→ #97。 ② MetadataList が値を無条件 truncate（長い URL/email が title 無しで切れる）→ #98。 ③ docs が code に遅れてる: Statistic ページの import 誤記（@gunjoui/components）、MetadataList の型が「not detailed」、Form が presentational-only と非明示——名前を信じると a11y 不備を出荷しうる → #50 に集約。

①② は今回 src で直して land（PR #99）。③ は docs 軸＝beta ゲート。

学び — "枯れ" のカーブが見えてきた

#3  systemic クラッシュ（~28 部品）   ← 致命傷
#13-16 名前負け（専用部品が核を欠く）  ← 構造的
#17 widget のフリした markup          ← コンポジション未完
#18 モバイル端の polish ＋ docs 遅延    ← 仕上げ

粗さが「致命傷 → 構造 → 仕上げ」へ確実に小さくなっている。 cold AI の総括が刺さった——「コンポーネントは docs に先行してる。コンポーネントを相手に戦ったことは一度もなく、戦った相手はいつも "そのコンポーネントについての docs" だった。これは very late-stage の失敗モード」。

まだ「完全に枯れた」とは言わない（minor は出た）。でも残る frontier がコンポーネントから docs/SSOT-sync 軸へ移ったのは、はっきりした。誠実に言えば——done に近づいている。

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

• Error画面 / 通知設定 / 空ダッシュボード ほか。枯れ判定の詰めへ。

試す

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

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

---

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