💡 アイデアからプロトタイプまで、AIと一緒に

今回は「AIでどこまでプロトタイプを自動生成できるか？」に挑戦しました。
設計資料なし、Figmaなしでも、ユーザーストーリーとAIさえあれば、想像以上に実用的なUIとロジックが作れます。

ここでは、実際に私が試したプロトタイピングのフローをステップごとに紹介します。

🔁 ステップ1：AIにUser Storyを書かせる

まずはChatGPTやGeminiに指示して、ベースとなる user-story.md を自動生成させます。

# user-story.md
- ユーザーはToDoを追加・削除・完了できる
- 各タスクには期限、優先度、担当者がある
- タスクはステータスでフィルターできる

このファイルをVibe Codingにcontextとして読み込ませることで、以後の生成作業のベースにします。

今回はFigmaなどのデザインツールがなかったため、代わりに次の方法を取りました：

🧠 この工程で、UIの「雰囲気」をすばやくプロジェクトに反映できました。

🚀 Cursorでは、コンテキストを保持したままAIに編集指示できるので、修正サイクルが非常に速く回せます。

プロトタイプレベルでは、これで十分に機能するAPIができあがりました。

この流れにより、1〜2日以内でフロント・バックエンドを持つWebアプリのプロトタイプが完成しました。

次回は、CursorとWindsurfの比較レビューです。

開発効率を求める人には必見です！

フォロー＆LGTM、ぜひお願いします！
質問・ツッコミもコメント欄でお待ちしてます :)