AI にランディングページを作らせてみた — 「枯れた」を破る2つの実バグ（やってみた #22）

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

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、ナビ・ヒーロー（h1＋CTA）・ロゴクラウド・特徴グリッド・指標バンド・お客様の声・価格3プラン・FAQ・最終CTA・フッターの全部入りランディング。

#21 で「個別コンポーネントの a11y は収束した」と分かった。だから今回は別の軸——「マーケ画面という合成」を初めて突いた。

結果 — 3.5/5（これまで最低、でも意味のある低さ）

tsc/build 緑・コンソール 0・hydration なし・h1 は1個・level 飛ばし無し・375px overflow 0・36個の interactive 要素は全部本物の <a>/<button>。下半身は強い——Card・Grid の minItemWidth（auto-fit でモバイル安全）・Button の asChild・Accordion・Statistic・Container 単体。

低いのは品質じゃなく 「app/dashboard 型で、marketing 型じゃない」 から。そして cold AI は実バグを2つ掘った。

「枯れた」が破れた — in-component の実バグ2件

#21 で「機能軸は枯れた」と書いた。#22 がそれを更新した。

① LandingTemplate が素の .container を使ってた（Major）。 マーケ用に唯一用意したテンプレなのに、中の各セクションが Tailwind の .container（＝ブレークポイント毎の max-width だけで mx-auto も padding も無い）。実測でコンテンツが画面左端に密着・右に64pxの死に gutter。本物の Container 部品があるのに dogfood してなかった → #111。

② Img が 256×256 に固定（Minor）。 ラッパーが全状態で h-[256px] w-[256px]。aspectRatio を渡しても明示 height が勝つので hero 画像が正方形ロック → #113。これは 固定寸法ファミリー（#47/#58/#66/#72/#78/#100）の続き。

今ラウンドの修正 — #111 を SSOT 完結で land

LandingTemplate を <Container size="2xl"> に差し替え（dogfood）。.pen 幾何は不変（Container は React 層の中央寄せグルー）なので src＋drift だけで完結:

+ <Container as="section" size="2xl" className="py-12 ...">  // 旧 className="container ..."
+ assertMatch(landingSource, /<Container\b/, ...)             // dogfood を強制
+ assertNoMatch(landingSource, /className="container\b/, ...) // bare .container の再発を禁止

/embed/landing で live 確認: sticky ヘッダ内側が mx-auto … max-w-screen-2xl に、ロゴ/CTA が正しい gutter の内側へ。design:verify 緑・exclusion 0。#113 Img は固定寸法系統なので .pen 担当へ。

でも、根はまた typography だった

新しい a11y バグは出なかった。代わりに cold AI が最大の穴として挙げたのは——「ランディングは8割タイポグラフィなのに、型の物語が無い」。h1/h2/eyebrow/本文を全部手巻き。CardTitle（固定h3）と MarkdownRenderer 以外に見出し/本文プリミティブが無い。

これは #110——#21 ブログでも名指しされた「typography primitive 不在」。別の画面タイプ（ブログ→ランディング）から、2連続で同じ根。signal は確定的。

学び — cold テストは「形の不一致」を炙り出す

品質（バグ・a11y・型・responsive）→ 個別はほぼ枯れた
形（マーケ画面の合成・型の物語）  → ここに穴。dashboard 型のまま

部品が良くても、「ランディングを組む」という合成の物語が無いと 3.5 点になる。cold AI は「LandingTemplate を使わず手で組み直した」——テンプレが信頼されなかった。それが一番の学び。まだ穴はある。 loop は続く。

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

• Docs ホーム / 価格比較 / エラー画面 ほか。合成と型の物語を引き続き突く。

試す

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

まだ alpha。「機能は枯れた」を自分で破った回。次は形と型の物語へ。

---

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