AI に料金ページを作らせてみた — また "名前負け"、そして依存の混入（やってみた #14）

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

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /pricing に、3〜4 プランのカード（"Most popular" 強調）、月額/年額トグル（年額は割引・価格がライブ更新）、feature リスト（✓/✗）、比較表、FAQ。

結果 — 3.5/5

tsc クリーン・next build 緑（static）・トグルで価格更新（$19→$15）・モバイル(375px)でカード1列・比較表は内部横スクロール・ページ overflow 0・コンソールエラー0。primitives は本物。だが今回も「料金ページのための部品」が、料金ページをやれなかった。

良かったところ:

• Switch（controlled・role="switch"）が月額/年額トグルにそのまま。Table が overflow を自前で内包。Icon の decorative/label で ✓/✗ に正しい a11y ラベル。
• 通貨は Intl.NumberFormat がロケール固定で hydration mismatch なし（素朴な実装が踏む罠を回避）。型は1つの barrel から全部 export・初手で type-check 通過。

粗さ — 名前負け再び＋固定幅＋依存の混入

① PricingTemplate がスタブで実務に耐えない（また名前負け）。 公開 export なのに: 月額/年額トグル無し、feature が全項目 <Check> ハードコード（✗ を表現できない）、max-w-4xl md:grid-cols-3 固定（4プランで折返し崩れ）。cold AI は使えると思って手を伸ばし、数分で諦めて primitives で手巻き。#13 の OnboardingFlow と全く同じ構図 → #80。docs にも非掲載（/patterns/pricing 404）＝スタブ4テンプレ（#74）の1つ。

② Accordion が固定 w-[400px]。 375px の FAQ ではみ出す。固定幅ファミリー（#47/#58/#66/#72）の続き → #78。

③ 新種: DS が consumer に不要な依存を強制。 @vercel/analytics が shipped src で未使用なのに dependencies に入っていた（使うのは docs サイトだけ）。npm install @gunjo/ui で不要なベンダー analytics が降ってくる → #79。

直した

• #79（依存混入） → @vercel/analytics を devDependencies へ。land（PR #81）。docs build 緑・consumer の必須依存から除外。
• #78（Accordion 固定幅） → .pen 起点で 400→fill_container。land（PR #82）。実ブラウザ 375px で page overflow 0・親幅追従を検証。
• #80（PricingTemplate スタブ） → #74 と束ねて beta ゲートのカタログ完成へ（データ駆動な再設計＋patterns 登録）。

学び — "依存の衛生" も DS の品質のうち

#13 OnboardingFlow: 専用部品が Next gating を持たない
#14 PricingTemplate: 専用部品が ✗/トグル/可変列を持たない

"テンプレ" を名乗る部品ほど、本職で試さないと「データ駆動でない」が見えない。 加えて今回は 依存グラフの混入という新しい class が出た——コンポーネントが正しくても、dependencies の1行が consumer のバンドルを汚す。primitives は production 級。でも「テンプレ層」と「パッケージ衛生」はまだ loop で磨く段階。低い点（3.5）ほど誠実。

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

• Editor / Error画面 / 通知フィード ほか。loop-until-dry。

試す

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

まだ alpha。primitives は本物、テンプレと依存衛生は磨き途中——それを隠さず出す。