AI に EC 商品詳細ページを作らせてみた — 「足りないかも」と思ったトーストが、逆に絶賛された（やってみた #31）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠EC の商品詳細ページ⁠（画像ギャラリー・バリエーション選択・数量・カートに入れる→フィードバック・タブ・レビュー・関連商品・追従する購入バー）。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。EC（物販）は #1〜#30 で一度も触っていない、まったく新しい画面の種類です。

結果 — 4/5

tsc/build 緑・console 0・サーバーとブラウザの表示ずれ（hydration）なし・h1 1個・375px とデスクトップの両方で検証済み。

予想が外れた — 「足りないかも」と思ったトーストが、逆に主役だった

今回わたしは「カートに入れる」のフィードバックに ⁠トースト通知⁠ が要ると見て、「デザインシステムにトーストの仕組みが無ければ手組みになるな」と身構えていました。結果は逆でした。予備知識ゼロの AI の評:

⁠トーストは最初から、アクセシビリティまで完璧。⁠ ToastProvider ＋ useToast() で showToast(msg, "success")。実ブラウザで確認——role="status"（エラーは role="alert"）で読み上げられ、body にポータル表示、自動で消える。「カートに入れた」の要件はゼロ摩擦だった。

しかも ⁠#113 で直した Img⁠（aspectRatio・objectFit・skeleton・画像エラー時の代替表示で "白眉"）、⁠Badge as(#128)・CardTitle as(#116)・Breadcrumb の items API・Radix Tabs⁠ まで、全部 最初から作り込まれた強みとして再び称賛されました。⁠複利のループは今回も回りました。⁠

新しい欠落は "EC 向けコンポーネント" に収束した

逆に、点を削ったのは商品ページ特有のコンポーネントの不在でした:

• ⁠#168 Rating/星 が無い⁠ — 最大の欠落。商品ヘッダ・各レビュー・関連商品カードと、⁠1画面で6回手組み⁠。「どんなショップでも全画面で当たる、唯一の欠落」。→ 新しい表示系コンポーネント（.pen が必要・Codex へ）。
• ⁠#169 横並びの数量ステッパーが無い⁠（NumberInput は縦のスピンボックスのみ）。→ layout="stepper" を追加。
• ⁠#171 ダークモードが .dark クラスのみで、OS の設定に追従しない⁠（prefers-color-scheme も ThemeProvider も無い）→ 予備知識ゼロの AI が手で橋渡しを書いた。
• 細かい点: ToggleGroup が再クリックで選択解除される（#170）／SwatchGroup（#172）・Gallery（#173）が無い。

今ラウンドの修正 — コンポーネント ＋ 次の上位コンポーネント

ソースで安全に直せる3つを反映（PR#174）:

• ⁠ThemeProvider + useTheme + ThemeToggle⁠（#171）＝今回の ⁠上位でまとめるコンポーネント⁠。light/dark/system・OS の設定に追従・localStorage で保持・.dark の切替・サーバー側描画時のちらつき対策の ThemeScript。⁠#30 のフォームの仕組みと同じ「次の回が検証する種」⁠。
• ⁠NumberInput layout="stepper"⁠（#169）＝ − [n] +。既定の見た目はバイト単位で同一、ドリフト0。
• ⁠ToggleGroup disallowEmpty⁠（#170）＝ segmented control が選択を保つように。

Rating/SwatchGroup/Gallery は .pen のノードが要るので Codex のバッチへ。

学び — 「足りないものの予想」すら検証になる

予想: トーストの仕組みが無いかも → 実際: 既にあって絶賛された
予想どおり: EC 専用のコンポーネント（Rating 等）が無い
そして: 次の上位コンポーネント（ThemeProvider）を仕込んだ

⁠怖がっていた所が強く、思わぬ所（OS のダーク追従）が弱点でした。⁠ 予備知識ゼロの AI に作らせるテストの価値は、「自分の思い込みの外側」を突くことにあります。

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

• ⁠エラー画面 / 検索フィルタ / ダッシュボード⁠ ほか。ThemeProvider が次の AI に検証されるか。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#30
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。怖がっていた所が強く、思わぬ所が弱点だった回。