本当に AI に使わせてみた — 予備知識ゼロの AI に @gunjo/ui で設定画面を作らせる（やってみた #1）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）で、AI エージェントに実際の UI を作らせていく連載。各回がそのまま「gunjo でこう作る」のハウツーにもなります。第1回は ⁠設定画面⁠。

@gunjo/ui を作るとき、私は「⁠AI から使えるように設計した⁠」と書きました。コンポーネントを型つきで一か所からまとめて呼べること、コンポーネントの仕様を機械が読めること、AI にそのまま渡せる説明があること——AI が「眺める」だけでなく「読んでそのまま使える」形を、最初から組み込んだ、と。

でも、それはただの主張です。書くだけなら誰でも書ける。だから⁠確かめました。⁠

実験の条件 — 実際に使う人と同じ「予備知識ゼロ」

群青を一度も見たことのない AI を1体用意して、次の条件だけ渡しました。

• ⁠公開済みの npm パッケージ @gunjo/ui⁠ と ⁠gunjo.jp の docs⁠ だけ
• ⁠ソースコードは見せない⁠（中身を読ませない＝実際に使う人と同じ条件）
• まっさらな ⁠Next.js（React 19 / Tailwind v4）⁠ アプリ
• ゴールは「動くものを npm run build まで自力で」

お題は⁠設定画面⁠。タブで Profile / Notifications を切り替え、プロフィールフォーム（名前・メール・Avatar）、ロール選択の Select、通知トグルの Switch——実アプリで誰もが一度は作る画面です。

やってみた

AI はまず docs を読み、3行のセットアップを見つけてきました。

/* app/globals.css (Tailwind v4) */
@import "tailwindcss";
@config "../node_modules/@gunjo/ui/tailwind-preset.js";
@source "../node_modules/@gunjo/ui/src/**/*.{ts,tsx}";
@import "@gunjo/ui/styles";

そして——ここが効いた——⁠必要なコンポーネントを、たった1か所（@gunjo/ui）からまとめて呼び出して⁠きました。

import {
  Avatar, AvatarFallback, AvatarImage,
  Button, Card, CardContent, CardHeader, CardTitle,
  Container, FormField, FormLabel,
  Input, Select, Separator, Switch,
  Tabs, TabsContent, TabsList, TabsTrigger,
} from "@gunjo/ui";

迷子になっていない。@gunjo/ui の1か所を見れば、どんなコンポーネントがあって何を組み合わせればいいかが分かる。組み立ても docs どおりでした。

<Tabs defaultValue="profile">
  <TabsList className="w-full">
    <TabsTrigger value="profile" className="flex-1">Profile</TabsTrigger>
    <TabsTrigger value="notifications" className="flex-1">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="profile">
    <Card>{/* プロフィールフォーム */}</Card>
  </TabsContent>
</Tabs>

結果 — 動いた（4/5）

npm run build は通り、実機でタブ切り替えもフォームもトグルも動作、コンソールエラーなし。⁠動く設定画面が完成しました。⁠

AI の総合評価は ⁠4/5⁠。一番効いたと挙げたのは、やはり⁠「コンポーネントが1か所に型つきで全部そろっている」点⁠でした。曰く「⁠どんなコンポーネントがあるか1ファイルで見渡せる⁠——入力・表示・ナビと分類済みで、探しやすい」。設計の狙いが、予備知識ゼロの相手にちゃんと届いていた。

そして、粗さも正直に見つかった

満点ではなく 4/5。残りの1点は、AI が率直に報告してきた⁠粗さ⁠です。

• いくつかのフォームコンポーネントに⁠固定幅が作り込まれて⁠いて、カードいっぱいに広げるには className で⁠上書きする⁠必要があった
• パッケージに⁠含まれていない docs⁠ へのリンクが張られていた（使う人の手元では 404）

「AI に使わせた」と気持ちよく書いて終わりにもできました。でも、この1点こそが価値です。⁠実際に使う人が最初につまずく小石を、先に踏んでおいてくれた。⁠

直した — 報告をそのまま設計に戻す

報告を受けて、#47 で直しました。

• ⁠固定幅だったコンポーネント（Input / Select / Tabs / Separator）を、初期状態で幅いっぱいに広がるよう⁠変更。狭めたいときだけ指定する形に
• ここで効くのが SSOT（＝正が一つだけの状態）。固定幅の指定はデザインソース（.pen）から来ているので、⁠デザインソース → 実装 → ショーケース → サムネイルまで揃えて⁠直さないと、検証（npm run design:verify）が通らない。直し漏れが起きない仕組みになっている
• 含まれていなかった docs とリンク切れも直した

つまり「使わせて見つけた粗さ」が、その場しのぎの一か所修正ではなく、⁠デザイン・実装・ドキュメントの3つが揃った一貫修正⁠として戻る。これが gunjo の背骨です。

学び — 「使わせて、見つけて、直す」ループ

AI に使わせる → 粗さが出る → 一貫して直す（SSOT）→ また使わせる

「AI が使える」は、そう宣言して終わりにできるものではなく、⁠実際に予備知識ゼロの相手に使わせて、出てきたひっかかりを潰し続けることでしか証明できない⁠——というのが今回の結論です。盛らない、隠さない。まだ開発中のいま、この過程をぜんぶ隠さず見せていきたい。

次回予告（やってみた #2 以降）

設定画面は入口です。続けて、実アプリで頻出のものを同じ「予備知識ゼロ」の条件で作らせていきます。

• ⁠モーダルでの告知バナー⁠（Dialog / Toast の出し分け）
• ⁠カルーセルの設置⁠（メディア一覧・LP＝ランディングページの主役ブロック）

各回、そのまま「gunjo でこう作る」ハウツーとして読めるようにします。

試す

• ⁠gunjo.jp⁠ — docs・ショーケース・パターン
• ⁠npm: @gunjo/ui⁠ ／ ⁠GitHub⁠
• まとめ記事: 群青（@gunjo/ui）— design / code / docs がズレないデザインシステム
• ⁠GunjoUI by UIXHERO⁠

まだ開発中（alpha 版）で、粗削りです。フィードバックも Issue も歓迎。