#31スコア 4/5小売・EC

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

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

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

解説記事

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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は EC の商品詳細ページ（画像ギャラリー・バリアント選択・数量・カートに入れる→フィードバック・タブ・レビュー・関連商品・sticky 購入バー）。

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

結果 — 4/5

tsc/build 緑・console 0・hydration なし・h1 1個・375px と desktop 両方で検証済み。

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

今回わたしは「カートに入れる」のフィードバックに トースト通知 が要ると見て、「DS にトースト system が無ければ手巻きになるな」と身構えていた。結果は逆だった。cold AI の評：

トーストは out-of-the-box で a11y まで完璧。 ToastProvider ＋ useToast() で showToast(msg, "success")。実ブラウザで確認——role="status"（エラーは role="alert"）で読み上げられ、body に portal、自動 dismiss。「カートに入れた」要件はゼロ摩擦。

しかも #113 で直した Img（aspectRatio・objectFit・skeleton・error fallback で "standout"）、Badge as(#128)・CardTitle as(#116)・Breadcrumb の items API・Radix Tabs まで、全部 baked-in な強みとして再称賛。複利ループは今回も回った。

新しい穴は "commerce 部品" に収束した

逆に、点を削ったのは商品ページ特有の部品の不在：

  • #168 Rating/星 が無い — 最大の穴。商品ヘッダ・各レビュー・関連商品カードと、1画面で6回手巻き。「どんな shop でも全画面で当たる唯一の欠落」。→ 新 display 部品（.pen 必要・Codex へ）。
  • #169 横並びの数量ステッパーが無い（NumberInput は縦スピンボックスのみ）。→ layout="stepper" を追加。
  • #171 ダークが .dark クラスのみで OS に追従しない（prefers-color-scheme も ThemeProvider も無い）→ cold AI が手で bridge を書いた。
  • 小: ToggleGroup が再クリックで選択解除（#170）／SwatchGroup（#172）・Gallery（#173）が無い。

今ラウンドの修正 — 部品 ＋ 次の上位 primitive

src で安全に直せる3つを land（PR#174）：

  • ThemeProvider + useTheme + ThemeToggle（#171）＝今回の 上位協調 primitive。light/dark/system・OS 追従・localStorage 永続・.dark 切替・SSR フラッシュ対策の ThemeScript。#30 の form system と同じ「次の回が検証する種」。
  • NumberInput layout="stepper"（#169）＝ − [n] +。既定パスは byte-identical で drift 0。
  • ToggleGroup disallowEmpty（#170）＝ segmented control が選択を保つ。

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

学び — 「穴の予想」すら検証になる

予想: トースト system が無いかも → 実際: 既にあって絶賛された
予想どおり: commerce 専用部品（Rating 等）が無い
そして: 次の上位 primitive（ThemeProvider）を仕込んだ

怖がっていた所が強く、思わぬ所（OS ダーク追従）が穴だった。 cold テストの価値は「自分の思い込みの外側」を突くこと。

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

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

試す

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

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

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

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

AvatarAvatarFallbackAvatarImageBadgeBreadcrumbButtonCardCardContentCardDescriptionCardHeaderCardTitleEmptyStateIconImgSeparatorSkeletonTableTableBodyTableCellTableHeadTableRowTabsTabsContentTabsListTabsTriggerToastProviderToggleGroupToggleGroupItem

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

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