UI
OpenAI
FREE
Gemini
FREE
Claude
Ollama
LM Studio
gemini-3.5-flash-lite (Free)
接続テスト
?
UIコンポーネントの要件を
自然言語で入力
同じ命令でTailwind / shadcn/ui / MUIがどう変わるかを見る
認証・オンボーディング
→ ダークモード対応のログインフォーム
→ ソーシャルログイン付きの新規登録画面
→ パスワード再設定の3ステップフロー
→ 初回セットアップのウィザード画面
ダッシュボード・データ
→ データダッシュボードの統計カード
→ ソート可能なユーザー管理テーブル
→ 売上推移グラフとKPI4枚の管理画面
→ フィルタ付きのアクティビティログ一覧
業務・タスク管理
→ タスク管理のKanbanボード
→ 週表示のカレンダーと予定作成モーダル
→ 承認フロー付きの経費申請フォーム
→ ガントチャート風のプロジェクト進捗表
EC・決済
→ カテゴリフィルタ付きの商品一覧グリッド
→ サイズ選択とレビュー付きの商品詳細ページ
→ 数量変更と合計表示のあるショッピングカート
→ 配送先と支払い方法を入力するチェックアウト
マーケティング・LP
→ SaaSの料金プランページ (3プラン)
→ ヒーローとCTA付きのプロダクトLP
→ 顧客の声をカード形式で並べたセクション
→ アコーディオン式のFAQページ
コミュニケーション・設定
→ スレッド表示付きのチャット画面
→ 未読バッジ付きの通知センター
→ タブ切替のあるプロフィール設定画面
→ OSSライセンス一覧のようなアプリ設定画面
DESIGN.md未読み込み。Designタブで読み込むと以後の生成すべてに自動で適用
UI生成
質問
ストーリー
レビュー
改善
Hard
3ライブラリ
お急ぎ
標準
じっくり
生成する
Preview
Code
Design
プロンプトを入力してUIを生成