samarv/Shanon

AIネイティブな製品構築は、プロダクトマネージャーの役割を「他人のための要件作成」から「AIエージェントを直接指揮してソフトウェアを構築する」へと変化させます。このアプローチにより、開発期間を数ヶ月から数週間に、コストを最大99%削減できます。

「JIRA-Prompt」フレームワーク

AIエージェント（Boltなど）とのすべてのやり取りを、シニア開発者向けの高品質なチケットを書くかのように扱います。

1. 技術スコープの定義

一般的な説明ではなく、AIが環境を立ち上げるために必要な具体的なパラメータを提供します。

• 核となる機能の特定: 「ストリーミング、プレイリスト、MP3ファイル対応のSpotifyクローンを作成する」
• スタックの指定: 希望するインテグレーションを明記する（例：「データベースにSupabase、ホスティングにNetlifyを使用する」）。
• データコンテキストの提供: 生データ（LinkedInの経歴、CSVの行、ブランドガイドラインなど）をプロンプトに直接貼り付け、AIにコンテキストを与える。

2. 仕様と「Vibe（雰囲気）」のバランス

AIエージェントは、厳格な要件と創造的自由のバランスが取れているときに最も効果を発揮します。

• 高精細な仕様: ビジネスロジック、データスキーマ、ユーザーフローに使用します。
• 「Vibe」プロンプト: UI/UXには、特定のCSSではなく、説明的な言葉を使用します。
  • 例: 「高級医療寄付サイトのように、清潔でプロフェッショナルで信頼感のあるルックスにする。」
  • 例: 「もっと美しく、モダンにする。」

3. 反復デバッグの実装

AIが行き詰まったりエラーを生成した場合：

• スクリーンショットデバッグ: UIの問題やエラーメッセージのスクリーンショットをアップロードし、「これを意図したデザインに修正して」と依頼します。
• 「アンスタック」プロトコル: 特定のロジック問題でAIが3回試行しても失敗した場合は、人間参加型（ヒューマン・イン・ザ・ループ）のアプローチに移行します。専門家や開発者に相談してその特定の「細かい部分」を修正させつつ、AIにはコードベース全体の指揮を任せます。

ワークフロー：Figmaからデプロイまで

ステップ1: デザイン抽出

ダイレクトURL方式を使用して、静的デザインをコードに変換します。

• FigmaのデザインURLを取得します。
• AIツールのURL（例：bolt.new/[FIGMA_URL]）を先頭に付け加えます。
• エージェントがアセットとレイアウトを「吸い取って」初期環境を作成できるようにします。

ステップ2: ライブプロトタイピング

Figmaでフレームをドラッグする代わりに、機能的な変更をプロンプトで指示します。

• 「Supabase Authを使用したログインページを追加して。」
• 「ユーザーテーブルからデータを取得するダッシュボードを作成して。」
• 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クローン」ベースから始めて、機能を1つずつ追加することで、AIが混乱するのを防ぎます。
• 決定論の無視: コードは決定論的であり、実行されるかされないかのどちらかであることを覚えておいてください。AIが壊れたアプリを生成した場合、コードが間違っていると決めつける前に、環境（WebContainer）の起動が完了しているか確認してください。
• デザイナーとしてのみ扱う: UIだけに使用しないでください。「フルスタック」（データベース、認証、API）を構築する能力を活用し、プロトタイプが単なる高忠実度モックアップではなく、実際に機能することを確認してください。