#19スコア 4.5/5基盤UI・汎用

AI に通知設定画面を作らせてみた — 5/5 を阻むのは、もう docs だけ（やってみた #19）

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

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

解説記事

AI に通知設定画面を作らせてみた — 5/5 を阻むのは、もう docs だけ（やってみた #19）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 通知設定（プリファレンス）画面。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /settings/notifications に、チャンネル別（Email/Push/SMS/In-app）のマスター＋個別トグル、通知レベルの RadioGroup、ダイジェスト頻度の Select、Quiet hours の TimePicker、保存/破棄＋未保存インジケータ。

今回は最近直した部品を実地で再検証しにいった——RadioGroup の a11y（#71）、Accordion の幅（#78）が、本当に効いてるか。

結果 — 4.5/5（2回連続で新 class ゼロ）

tsc/build 緑・static prerender・コンソール 0・hydration なし・375px overflow 0。そして cold AI の結論:

コードに新しい class の問題はゼロ。near-clean。コンポーネント軸としては "done" と読める。5/5 を阻んでるのは唯一 docs。

#18 に続き2回連続で新 class ゼロ。 致命傷の連鎖は、止まった。

実地で確認できたこと — 直した a11y が、効いてた

  • RadioGroup: role=radiogroup・tab stop 1個・ArrowDown で選択＋focus 移動。#71 の roving tabindex が実機で正しく動作。
  • Accordion: 360px で fluid・overflow 0。#78 の固定幅撤去が効いてる。
  • Switch: Space でトグル・マスター→子5個へ disabled カスケード・二重発火なし。
  • TimePicker: controlled で round-trip・Quiet hours off で全 select disabled。

「直した穴が、次の回で本当に消えてる」——loop-until-dry の "閉じる"が、ここでも見えた。

残った粗さ — 全部 minor、そして 5/5 の壁は docs

① Slider が固定 w-[200px]（full-width フォームで寸詰まり）→ #100・固定幅ファミリーの再発（.pen 起点で修正へ）。 ② TimePicker が未設定を 00:00 と表示（真夜中と区別つかず）→ #101・placeholder 化で修正。 ③ RadioGroupItem の冗長クラス（checked/unchecked 両方に bg-transparent）→ #102・base へ集約。

①②③のうち②③は今回 src で land（PR #103）、①は .pen 案件。

そして 5/5 を阻んだ唯一の要因——Select の docs。 cold AI が「Select は Radix composite（onValueChange/SelectItem）」と誤推論した。実際は native <select>＋<option> children。repo の doc 自体は正しいが、コード例が client-render で "Loading…"（#50）→ AI が実例を読めず prop 名から誤推論した。＝docs をデプロイすれば、これは消える。

学び — "done" の手前にいる

#3  致命傷 → #13-16 構造 → #17 コンポジション未完 → #18 仕上げ → #19 docs のみ

残ってるのは、もうコンポーネントじゃない。 cold AI が「コンポーネントを相手に戦ったことは一度もなく、戦った相手はいつも docs だった」と2回連続で言った。これは——コンポーネント軸は枯れたということ。5/5 が出ないのは、コードのせいじゃなく、まだデプロイしてない docs のせい。

正直に言う。「完全に枯れた」と宣言するには、あと数回の新 class ゼロが要る。 でもカーブの行き先は、もう見えている。

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

  • Error画面 / 空ダッシュボード ほか。新 class ゼロが続けば、component 軸 dry を確定させる。

試す

まだ alpha。でも"枯れ"の手前まで来た——盛らず、あと数枚で確定させる。

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

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

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

AccordionAccordionContentAccordionItemAccordionTriggerBadgeButtonCardCardContentCardDescriptionCardHeaderCardTitleContainerLabelRadioGroupRadioGroupItemSelectSeparatorSliderSwitchTimePicker

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

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