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

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

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /pricing に、3〜4 プランのカード（"Most popular" を強調）、月額/年額トグル（年額は割引で、価格がその場で更新）、機能リスト（✓/✗）、比較表、FAQ。

結果 — 3.5/5

tsc クリーン・next build 緑（ビルド時に静的生成）・トグルで価格が更新（$19→$15）・モバイル（375px）でカード1列・比較表は内側で横スクロール・⁠ページ全体のはみ出し0⁠・コンソールエラー0。⁠基本コンポーネントは本物⁠。でも今回も「料金ページのための専用コンポーネント」が、料金ページをやれませんでした。

⁠良かったところ:⁠

• Switch（状態を外から制御でき、role="switch"）が月額/年額トグルにそのまま使える。Table は横スクロールを自前で内包。Icon の decorative/label で、✓/✗ に正しいアクセシビリティ用ラベルが付く。
• 通貨は Intl.NumberFormat が地域設定を固定するので ⁠サーバーとブラウザの表示ずれ（hydration mismatch）なし⁠（素朴に書くと踏む罠を回避）。型は1か所の入口から全部公開されていて、最初から型チェックを通過。

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

⁠① PricingTemplate が中身の薄い見本で、実務に耐えない（また名前負け）。⁠ 公開されているのに: 月額/年額トグル無し、機能が全項目 ⁠<Check> で固定⁠（✗ を表現できない）、⁠max-w-4xl md:grid-cols-3 固定⁠（4プランだと折り返して崩れる）。予備知識ゼロの AI は使えると思って手を伸ばし、数分で諦めて基本コンポーネントで手組みしました。⁠#13 の OnboardingFlow とまったく同じ構図です⁠ → #80。docs にも載っておらず（/patterns/pricing は 404）、中身の薄い見本テンプレ4つ（#74）の1つでした。

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

⁠③ 新しい種類: 使う側に不要な依存を押し付けていた。⁠ @vercel/analytics が、⁠出荷するソースでは使っていないのに dependencies⁠ に入っていました（実際に使うのは docs サイトだけ）。このままだと npm install @gunjo/ui で、不要な外部の analytics まで一緒に降ってくる → #79。

直した

• ⁠#79（余計な依存）⁠ → @vercel/analytics を devDependencies へ移動。⁠反映（PR #81）⁠。docs のビルド緑・使う側の必須依存から除外。
• ⁠#78（Accordion の固定幅）⁠ → .pen を起点に、400px 固定から「親幅いっぱい」へ。⁠反映（PR #82）⁠。実ブラウザ 375px で、ページのはみ出し0・親の幅に追従することを検証。
• ⁠#80（PricingTemplate が中身の薄い見本）⁠ → #74 と束ねて、⁠beta ゲートでのカタログ完成⁠へ（データで動く形に再設計＋patterns へ登録）。

学び — "依存の衛生"（余計な依存を持ち込まないこと）も、デザインシステムの品質のうち

#13 OnboardingFlow: 専用コンポーネントが「Next を止める制御」を持たない
#14 PricingTemplate: 専用コンポーネントが ✗/トグル/可変な列数を持たない

⁠"テンプレ" を名乗るコンポーネントほど、本業で試さないと「データで動く作りになっていない」ことが見えません。⁠ 加えて今回は ⁠依存関係への余計な混入⁠という新しい種類の問題が出ました——コンポーネント自体が正しくても、dependencies の1行が、使う側のバンドルを汚す。基本コンポーネントは実運用レベル。でも「テンプレ層」と「パッケージの衛生」は、まだ回して磨く段階です。低い点（3.5）ほど誠実。

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

• ⁠Editor / エラー画面 / 通知フィード⁠ ほか。出尽くすまで回します。

試す

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

まだ alpha。基本コンポーネントは本物、テンプレと依存の衛生は磨き途中——それを隠さず出します。