AI にドキュメントサイトのトップを作らせてみた — 骨格は通る、でも"中身"が無い（やってみた #23）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は ドキュメントサイトのトップ（docs home）。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、上部ナビ＋検索（⌘K）、左サイドバー（グループ化されたナビ・モバイルでドロワー）、パンくず、本文（h1＋クイックスタートの CodeBlock＋callout＋特徴リスト）、右の「On this page」TOC、prev/next、フッター。

@gunjo/ui はそもそも gunjo.jp 自体が docs サイト。だから「cold AI が docs home を組めるか」は最高の dogfooding テスト——組めなければ一番痛い。

結果 — 3.5/5（骨格は強い、でも content 層が空）

フレームは全部ある: Breadcrumb（正しい aria-current）・CodeBlock（本物）・DocumentPager（prev/next 専用）・CommandPalette（⌘K）・Sheet（モバイルドロワー）・Header/Footer・dark mode。verify も全緑（tsc 0・build 0・console 0・h1 1個・level skip 0・sidebar は本物の <nav aria-current>・375px overflow 0）。

低いのは——docs ページの本体（長文タイポ＋TOC）を表す部品が一つも無いから。そしてまた in-component の実バグを掘った。

また「枯れ」が破れた — 今回の実バグ

① CardTitle が <h3> ハードコード（a11y）。 page の <h1> の隣に Card を置くと <h3> が刺さって 見出しが 1→3 で飛ぶ（WCAG 違反）。→ as prop を追加（非破壊・既定 h3）で consumer がレベルを選べるように #116。

② PageAside が h1 より前に stray <h3>（a11y）。 モバイルの「On this page」開閉を Accordion で組んでいて、Radix の header が <h3> を生成 → ページの h1 より前に見出しが入る。→ native <details>/<summary>（summary は見出しでない）に置換 #117。

③ DocsTemplate がモバイルで壊れる。 base で grid-cols-[200px_…] ＝ 375px でもサイドバーが 200px 固定で潰れる。→ モバイルは単一カラム（サイドバーは drawer に委譲）、lg/xl で多カラム #118。#66/#111 と同じテンプレ責務系統。

①〜③ を全部 src＋drift で今 land。 ＋並行で Img の 256×256 固定（#113・固定寸法ファミリー）も .pen を fill_container 化して land（drift の guard が width===256 で黙って死んでたのも修復）。

学び — 「骨格」と「中身」は別物

新 a11y バグ2件は、結局同じ根を指す: typography/Heading primitive が無い（#110）。CardTitle も PageAside も「見出しを手で組む」から階層が崩れる。＋TableOfContents primitive も無い（#120）——TOC・スクロールスパイ・heading の slug を全部手巻き。

フレーム（Header/Sidebar/Breadcrumb/Pager/CodeBlock）→ 揃ってる・強い
中身（Heading/Prose/TableOfContents）            → 無い。docs の本体がこっち

ブログ(#21)・ランディング(#22)・docs(#23) と3画面連続で「typography 不在」が最大の穴。 部品の骨格は dogfood で通るが、「長文＋見出し階層＋TOC」という content 層を DS が持ってない。次に閉じるべき軸はここで確定的。

（#116/#117 は typography-root の症状を "局所で今すぐ直せる形" で潰した。根本の Heading/Prose/TOC は architectural＝beta ゲート。）

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

• 価格比較 / エラー画面 / 管理ダッシュボード ほか。content 層と合成を引き続き突く。

試す

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

まだ alpha。骨格は通る、次は"中身"（typography 層）。3画面連続で同じ根を指してる。

---

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