💡 アイデアからプロトタイプまで、AIと一緒に
今回は「AIでどこまでプロトタイプを自動生成できるか？」に挑戦しました。
設計資料なし、Figmaなしでも、ユーザーストーリーとAIさえあれば、想像以上に実用的なUIとロジックが作れます。
ここでは、実際に私が試したプロトタイピングのフローをステップごとに紹介します。
🔁 ステップ1：AIにUser Storyを書かせる
まずはChatGPTやGeminiに指示して、ベースとなる user-story.md を自動生成させます。
# user-story.md
- ユーザーはToDoを追加・削除・完了できる
- 各タスクには期限、優先度、担当者がある
- タスクはステータスでフィルターできる
このファイルをVibe Codingにcontextとして読み込ませることで、以後の生成作業のベースにします。
🖼️ ステップ2：UIは好きなWebからキャプチャ → v0.devで再現！
今回はFigmaなどのデザインツールがなかったため、代わりに次の方法を取りました：
- 気に入ったUIのWebページをスクリーンショット
- v0.dev にその画像をアップロード（Bolt又はLovableが人気があったら自由に利用する）
- 自動的にReact/Next.jsプロジェクトとしてエクスポート
- 3番目のソースをダウンロードして、次の段階のcontextに組み込む
🧠 この工程で、UIの「雰囲気」をすばやくプロジェクトに反映できました。
🧑💻 ステップ3：Cursorでコード生成を開始・フロント強化
- v0.devが出力したコードをCursorで読み込み
- Contextに元のuser-storyとUIコードを組み込んで、
ChatGPTに「このボタンがクリックされたらXを実行」といった指定を追加 - 高速にフロントエンドの動作部分を実装
🚀 Cursorでは、コンテキストを保持したままAIに編集指示できるので、修正サイクルが非常に速く回せます。
🛠️ ステップ4：バックエンドの自動生成
- フロントが形になった段階で、次はAPI設計とサーバー実装
-
user-story.mdに「データ保存・取得要件」を追加記述 - それをもとに、AIがNode.js又はPython（FastAPI)ベースのバックエンドを生成
プロトタイプレベルでは、これで十分に機能するAPIができあがりました。
📦 まとめ：UIもロジックも、AI＋Vibeでここまでできる！
この流れにより、1〜2日以内でフロント・バックエンドを持つWebアプリのプロトタイプが完成しました。
| 工程 | 手段 |
|---|---|
| 要件整理 | ChatGPTでUser Story自動生成 |
| UI | スクショ → v0.dev → Reactコード |
| コーディング | Cursorで文脈付きAI開発 |
| バックエンド | AIによるAPIルーティング自動化 |
🔮 次回予告
次回は、CursorとWindsurfの比較レビューです。
- 文脈の保持力は？
- 複雑なプロンプトへの対応力は？
- チームで使いやすいのはどっち？
開発効率を求める人には必見です！
フォロー＆LGTM、ぜひお願いします！
質問・ツッコミもコメント欄でお待ちしてます :)