#25スコア 4/5基盤UI・汎用

AI に価格比較ページを作らせてみた — primitive は強い、でも"看板"テンプレが job を外す（やってみた #25）

ルート: /pricing
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に価格比較ページを作らせてみた — primitive は強い、でも"看板"テンプレが job を外す（やってみた #25）

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

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、月/年トグル（価格が実際に変わる）・3〜4プランカード（1つを「おすすめ」強調）・機能比較マトリクス（行=機能・列=プラン・✓/✗/値）・FAQ・最終 CTA。

PricingTemplate というまさにこの用途の看板コンポーネントがある。だから「それで組めるか」が今回の核。

結果 — 4/5（最近で最高）

tsc/build 緑・console 0・h1 1個・level 飛ばし無し・マトリクスは real <table> で 全 <th> に scope（col/row/colgroup）・✓/✗ に sr-only "Included/Not included"・toggle は aria-live で状態通知・375px overflow 0・dark mode 完全。フル a11y の価格比較が primitive だけで組めた。

そして cold AI が、前ラウンドの修正を称賛した:

CardTitle の as prop が the best-designed a11y affordance。見出し階層を skip 無しで組むのが trivial だった。

これは #23 で入れた #116。直した穴が、次の回で武器になってる。 Table の scope forwarding、Tooltip の self-provider(#52) も活きてた。

でも 4/5 を阻んだ — "看板"が job を外す

① PricingTemplate がデータ駆動でない固定 stub（#80・Major）。 月/年トグル無し・md:grid-cols-3 固定で4プラン崩れ・featured が色反転のみで badge も「おすすめ」ラベルも SR text も無し・feature が <Check> 強制で ✗/値を出せず・自前で <h1> を持つ（page の h1 と衝突）。cold AI は使わず、Card+Badge+Button で手組みした。名前負けの本体。

② Badge が <p> を壊す（#128・実バグ）。 block <div> で as/asChild が無く、<p> 内に入れると "<div> cannot be a descendant of <p>" ＋ hydration mismatch。Card は as を持つのに Badge は無かった。

今ラウンドの修正 — primitive 側の小さな穴を3つ

  • #128: Badge に as?: "div" | "span" を追加（#116 と同型・as="span" でインライン可）。
  • #129: ToggleGroup の variant/size を root で受けて item に context 継承（<ToggleGroup variant="outline"> が TS エラーだった）。
  • #130: Switch に label/description を追加し aria-labelledby/aria-describedby で関連付け（ラベル付けを caller 任せにしない）。

全部 src＋非破壊で land。PricingTemplate のデータ駆動化（#80）は .pen 含む再設計＝beta ゲート。

学び — 「primitive」と「看板テンプレ」は別の成熟度

primitive 層（Card/Table/ToggleGroup/Button/Badge/dark mode）→ フル a11y で価格比較が組める
看板テンプレ（PricingTemplate）→ デモ止まり・job を外す（名前負け）

primitive が良いほど、テンプレの薄さが際立つ。 cold AI は「テンプレを使わず primitive で組めば 4/5 出せる」と示した一方、「看板を信じると詰む」も示した。直すべきは primitive じゃなくテンプレを primitive と同じ水準に引き上げること（#80/#74/#90 の名前負け系統）。

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

  • エラー画面 / カレンダー予定表 / 受信トレイ ほか。テンプレの名前負けと合成を引き続き。

試す

まだ alpha。primitive は強い、看板テンプレはこれから。回すほど、成熟度の差が見える。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AccordionAccordionContentAccordionItemAccordionTriggerBadgeButtonCardCardContentCardDescriptionCardFooterCardHeaderCardTitleContainerSeparatorTableTableBodyTableCaptionTableCellTableHeadTableHeaderTableRowToggleGroupToggleGroupItem

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。