AIネイティブなプロダクト開発は、プロダクトマネージャーの役割を「他者に要件を書く」ことから「AIエージェントを直接指揮してソフトウェアを構築する」ことへと変革します。このアプローチにより、開発期間が数ヶ月から数週間に短縮され、コストは最大99%削減されます。
「JIRA-Prompt」フレームワーク
AIエージェント(Boltなど)とのやり取りはすべて、シニアエンジニアに良質なチケットを書くのと同じ要領で行います。
1. 技術スコープを定義する
漠然とした説明ではなく、AIが環境を立ち上げるために必要な具体的なパラメーターを提供します:
- コア機能を特定する: 「ストリーミング、プレイリスト、MP3ファイルサポート付きのSpotifyクローンを作成して」
- スタックを指定する: 必要なインテグレーションを明記します(例:「データベースにはSupabase、ホスティングにはNetlifyを使用してください」)。
- データコンテキストを提供する: 生データ(例:LinkedInの経歴、CSVの行、ブランドガイドライン)をプロンプトに直接貼り付けて、AIにコンテキストを与えます。
2. 仕様と「雰囲気」のバランスを取る
AIエージェントは、厳格な要件と創造的自由の両方が与えられたときに最高のパフォーマンスを発揮します。
- 高い具体性: ビジネスロジック、データスキーマ、ユーザーフローにはこれを使用します。
- 「雰囲気」プロンプト: UI/UXには、具体的なCSSではなく、説明的な言葉遣いを使用します。
- 例: 「高級な医療寄付サイトのように、清潔でプロフェッショナル、そして信頼できる見た目にしてください。」
- 例: 「より美しく、モダンにしてください。」
3. 反復的なデバッグを実装する
AIが行き詰まったりエラーを生成したりした場合:
- スクリーンショットデバッグ: UIの問題やエラーメッセージのスクリーンショットをアップロードし、「これを意図したデザインに合わせて修正してください」と依頼します。
- 「アンスタック」プロトコル: 特定のロジック問題でAIが3回試行しても失敗した場合は、ヒューマン・イン・ザ・ループアプローチに移行します。専門家または開発者に相談してその特定の「細かい部分」を修正してもらい、AIにはコードベース全体の管理を任せたままにします。
ワークフロー:Figmaからデプロイまで
ステップ 1: デザインの抽出
直接URL方式を使用して、静的デザインをコードに変換します:
- FigmaのデザインURLを取得します。
- その前にAIツールのURLを追加します(例:
bolt.new/[FIGMA_URL])。 - エージェントにアセットとレイアウトを「吸収」させ、初期環境を作成させます。
ステップ 2: ライブプロトタイピング
Figmaでフレームをドラッグする代わりに、機能変更をプロンプトで指示します:
- 「Supabase Authを使用したログインページを追加してください。」
- 「usersテーブルからデータを取得するダッシュボードを作成してください。」
- QRコードプレビューを使用して、自分のデバイスでリアルタイムにアプリをテストします。
ステップ 3: ワンクリックデプロイ
アプリをすぐにプロダクションURLに移行します:
- 「デプロイ」をクリックします。
- ホスティングプロバイダー(Netlify/Vercel)に接続します。
- カスタムドメインをアタッチして、プロトタイプを実際のビジネスに変えます。
例
例 1: 「ゼロから市場へ」CRM
- コンテキスト: ある起業家がStripe請求機能付きのカスタムCRMを必要としているが、エージェンシーに30,000ドルを支払う予算がない。
- 入力: 「不動産業者向けのCRMを構築してください。リード追跡、月額サブスクリプション用のStripe統合、AI搭載のメール下書き機能を含めてください。清潔感のある青を基調としたUIにしてください。」
- アプリケーション: Boltを使用してベースアプリを生成します。「'最終連絡日'列を追加してください」や「Stripeテストキーを統合してください」と繰り返し指示することで反復します。
- 出力: 約300ドルの推論コストで3週間で構築された、機能的な収益を生むSaaS製品。
例 2: 迅速なマーケティングランディングページ
- コンテキスト: PMが新機能実験用のランディングページを必要としている。
- 入力: [LinkedInの経歴/ブランド仕様を貼り付け] + 「個人ポートフォリオサイトを作成してください。プロフェッショナルなダークモードを使用してください。簡単に編集できる「現在のプロジェクト」セクションを追加してください。」
- アプリケーション: サイトを生成し、続けて「エントリーを私のメールに送信するお問い合わせフォームを追加してください」とプロンプトします。
- 出力: 10分以内にトラフィックを受け入れる準備が整った、公開ホストされたURL。
よくある落とし穴
- レガシーコードの移行: 20年前の数千ファイルからなるプロダクションコードベースをブラウザベースのAIエージェントに移行しようとしないでください。これらのツールは、グリーンフィールドプロジェクトや管理画面、マーケティングサイトなどの独立した「ポッド」に使用してください。
- 初回の過剰プロンプト: 最初のバージョンに5ページものプロンプトを書かないでください。「Spotifyクローン」のベースから始めて、AIが混乱しないように機能を1つずつ追加してください。
- 決定論の無視: コードは決定論的であり、実行されるかされないかのどちらかであることを忘れないでください。AIが壊れたアプリを生成した場合、コードが間違っていると仮定する前に、環境(WebContainer)の起動が完了しているかどうかを確認してください。
- デザイナー専用として扱う: UIにだけ使用しないでください。データベース、認証、APIなどの「フルスタック」を構築する能力を活用して、プロトタイプが単なる高忠実度モックアップではなく、実際に機能することを確認してください。