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

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

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

お題

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

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

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

予備知識ゼロの AI の報告で一番効いたのはこの一文:

⁠provider もラッパーも要らない。⁠ ふつうの client ページでそのまま動く。⁠サーバー側の事前描画（SSR）でのクラッシュなし。⁠

#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] 固定⁠で画面幅に追従できず、予備知識ゼロの AI は⁠使わず、手で⁠中央寄せカードを組んだ → #55

最後のが本質的。⁠群青は "認証パターン" を持っているのに、それが固定枠で使い物にならなかった。⁠ これはまさに、いま進めている方針——⁠パターンを、予備知識ゼロの AI に作らせるテストで作り直す⁠——の生きた理由。この #5 の手作りログインこそ、磨いて出荷すべき、画面幅に追従する認証パターンの候補です。

学び

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 歓迎。