AI駆動のアプリ開発をはじめました『プロトタイピング編』 #2

要約
AIを使って仕様書を段階的に作成・統合し、各ツールの特性に応じて使い分けた開発フローの紹介
意見はこのエリアに表示されます

フローまとめ

  • 仕様書の.mdをAIで作成

    pptや資料をもとにカンプを作成。技術選定もChatGPTで対話しながら進めました。

  • 中間仕様書の.mdを作成

    見た目・DB・インフラに分けて作成。プロトタイプ精度がぐっと上がりました。（ここでは、AI向けにコンテキストを細分化した仕様書を「中間仕様書」と呼んでいますが、一般的になんと言うのでしょう？）

  • 必要に応じて統合

    コンテキスト長に制限があるAIもあるので、仕様書は分割・統合を調整。

中間仕様書づくりに使ったAI

  • Readdy https://readdy.ai/

    フロントやReact、デザインに強い。中間仕様書の生成にも◎

  • ChatGPT https://chatgpt.com/

    バックエンド・インフラ構成に活用。claudeよりフレンドリーでやりやすい。

ローカル派の生成ツール

  • Cursor https://www.cursor.com/

    ローカル最強。Agentが空気を読んでミドルウェアまで提案→コード生成も爆速。

  • Windsurf https://windsurf.com/

    期待してたけど、今はCursorの方が強い印象。コマンド入力で固まりやすいので今後に期待。

web派の生成ツール

  • v0.dev https://v0.dev/

    Vercel製。中間仕様書→UI生成の流れが安定。日本語対応あり。コードの安定感も高い。

  • Bolt https://bolt.new/

    supabase/Figma/Netlifyなどと相性良し。長めの仕様も安定処理。

  • a0.dev https://a0.dev/

    同じくVercel製。supabase向け。読み込み可能なコンテキストが短め（無料プラン？）。短すぎる仕様書だとAI生成には不利。

👉 長文note版はこちら

Explore More
関連記事はありません。
Trends
  • バックエンド多めのフルスタック風エンジニア。Railsやインフラ周りや育成やメンバー集めが長かったけど、直近ではスマートウォッチ向けのアプリ開発（JavaとDart）をゴリゴリ。動画制作も。
  • 技術