AI に検索結果ページを作らせてみた — "widget のフリした markup"（やってみた #17）

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

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /search に、検索バー＋結果件数、フィルタ（カテゴリ checkbox・種別 Combobox・タグ）、アクティブフィルタチップ、ソート、結果カード、ページネーション、loading→結果→空状態。

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

tsc/build 緑・static prerender・コンソールエラー0・hydration なし・375px overflow 0。cold AI:

基本部品は fresh バグ0。Combobox(role=combobox+listbox/option)・Checkbox(role+aria-checked)・SearchInput 全部 typed どおり、ARIA 正しい。この層の収束は保持。

検索フィルタ一式がきれいに組めて、点も上がった。

でも 4 止まりの理由 — "widget のフリした markup"

今回は名前負けじゃなかった（名前と実体は一致）。出たのは別の系統——「primitive がコンポジションのフリして出荷されてる」。

① Pagination が完全に inert（a11y 5度目）。 PaginationLink が href 無しの <a>＝フォーカスもキーボード操作もできない。prev/next/page 全部マウス専用。page/onPageChange も無く window/ellipsis 計算は consumer 任せ。widget に見えて、実は markup だけ → #93。

② Badge に dismiss が無い。 フィルタチップ（個別×で削除）は Badge の本命用途なのに、× ボタンを自前でネストする羽目 → #95。

③ SearchInput の clear(×) が tabIndex={-1} でキーボード到達不可 → #94。

直した — 今回は全部その場で、Codex も beta ゲート送りもゼロ

• #93 Pagination → polymorphic に。href あれば <a href>（SEO/SSR）、無ければ <button>（キーボード可）。docs の href demo は <a href> 維持を実ブラウザで確認。
• #95 Badge → onRemove を追加し dismiss(×) ボタン内蔵。フィルタチップが内蔵で作れるように。
• #94 SearchInput → clear の tabIndex={-1} 除去＋focus リング。

3件とも実 <button> を有効化/生成＝キーボードアクセシブル。PR #96 で land。design:verify 緑・exclusion ゼロ。

学び — "枯れ" の輪郭が、さらに細かく見えた

基本部品 ── 枯れた（#15/#16/#17 で fresh バグ0 継続）
mid-tier ── 「コンポジション未完」（widget に見えて markup・consumer に wiring を押し付け）
a11y ── class 単位でまだ（#57/#71/#83/#87/#93）

#16 までは上位＝「名前負け」だったが、#17 は 「名前は合ってるが中身が markup 止まり」 という別の粗さ。"枯れてない" の中身が、回を追うごとに具体化していく。 今回は全部 src 完結で land＝直せる穴は直しきれる段階に入ってきた。4/5＝過去最高だが、誠実に粗さも出す。

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

• Error画面 / プロフィール / 通知設定 ほか。mid-tier のコンポジション完成度を中心に。

試す

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

まだ alpha。基本部品は枯れ、mid-tier は「markup から widget へ」磨き中——層ごとの "枯れ" を1枚ずつ確かめている。

---

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