AI にログイン画面を作らせたら、直したバグが消えていた（やってみた #5）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。#1 設定画面〜#4 ダッシュボード に続いて、今回はログイン／サインアップ——誰もが作る、検索数の多い画面。

今回は条件を1つだけ変えた。渡すパッケージを、出荷物そのもの（直前まで直していた最新版）にした。 #3 で見つけた systemic な穴——Tooltip を使う ~28 コンポーネントが provider 無しで SSR クラッシュする問題（#52）——を直した版です。条件は相変わらず「パッケージ＋docs だけ・ソースは見せない」。そして今回は 「TooltipProvider で包め」というヒントを、あえて渡さなかった。

お題

中央寄せの認証カード。タブで Sign in / Create account を切り替え、メール＋パスワード（表示トグル）、Remember me、サインアップ側はパスワード要件のライブ表示とインライン検証。

結果 — 4.5/5（シリーズ最高点）、そして穴が消えていた

npm run build 成功、static prerender、コンソールエラー0。

cold AI の報告で一番効いたのはこの一文:

No provider/wrapper required. プレーンな client ページでそのまま動く。SSR/prerender クラッシュなし。

#2〜#4 は毎回 <TooltipProvider> を手で巻かないと落ちていた。#52 を直したら、次の #5 は何も巻かずに通った。 系統バグが消えたことを、次のテストが勝手に証明してくれた。これがこのシリーズの設計：穴を見つけ → 直し → 次の回で消えたことを確かめる。スコアボードが目に見えて良くなる。

効いたのも豊富で、Form/FormGroup/FormLabel/FormMessage の構成、PasswordInput（表示トグル内蔵）、PasswordRequirementList（要件のライブ表示）、aria-invalid 標準対応——「認証フォームに要るもの」が型付きで一式そろっていたと。

粗さ — 残り0.5点と、パターンの宿題

正直な粗さも出た:

• docs のコード例が fetch に映らない（既出 #50・未デプロイ）— 採用者は同梱 TS 型で救われる
• Tabs の既定が rounded-lg border＋TabsContent が p-4＝カード内に埋めると二重枠／二重 padding（border-0 p-0 で回避）。Button 既定が w-fit（全幅は w-full）。軽微だが docs 非記載
• AuthTemplate（既存の認証パターン）が w-[1280px] h-[720px] 固定で responsive に使えず、cold AI は使わず手で中央寄せカードを組んだ → #55

最後のが本質的。gunjo は "認証パターン" を持っているのに、それが固定枠で使い物にならなかった。 これはまさに、いま進めている方針——パターンを、コールドテストで作り直す——の生きた理由。この #5 の手作りログインこそ、磨いて出荷すべき responsive な認証パターンの候補です。

学び

AI に使わせる → 穴が出る → SSOT で一貫して直す → また使わせて、消えたか確かめる

#5 でループが一周して閉じた。#52 を直した効果が、次の画面で「provider 要らず・4.5点」として返ってきた。そして次の宿題（固定枠パターン #55）も同じ画面が差し出した。盛らず、直し、また試す。完成に一歩ずつ近づくのが見える——それが alpha のいま見せたいものです。

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

• データテーブル＋フィルタ（Table / Select / Pagination / Badge）— 管理画面で頻出のやつ。

試す

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

まだ alpha、粗削りな青。穴が出るたび直します。Issue 歓迎。

---

<!-- 公開前: #55 反映後にパターン記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->