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 新增一個登入頁面。」
- 「建立一個從使用者資料表提取資料的儀表板。」
- 使用 QR 碼預覽在你的裝置上即時測試應用程式。
步驟 3：一鍵部署
立即將應用程式移至正式環境 URL：
- 點擊「部署」。
- 連接到託管服務供應商（Netlify/Vercel）。
- 附加自訂網域，將原型轉變為實際運作的業務。
範例
範例 1：「零到市場」的 CRM
- **背景：**一位企業家需要一個帶有 Stripe 帳單功能的客製化 CRM，但沒有預算支付 30,000 美元的代理商費用。
- 輸入：「為房地產經紀人建立一個 CRM。包含潛在客戶追蹤、用於月費訂閱的 Stripe 整合，以及一個 AI 驅動的電子郵件草稿工具。使用乾淨、藍色主題的 UI。」
- **應用：**使用 Bolt 生成基礎應用程式。透過說「新增一個『上次聯絡日期』欄位」和「整合 Stripe 測試金鑰」來進行迭代。
- **輸出：**一個功能齊全、能產生收入的 SaaS 產品，在 3 週內以約 300 美元的推理成本建構完成。
範例 2：快速行銷登陸頁面
- **背景：**一位產品經理需要為一個新功能實驗建立一個登陸頁面。
- 輸入：[貼上 LinkedIn 個人簡介/品牌規格] + 「建立一個個人作品集網站。使用專業的深色模式。新增一個我可以輕鬆編輯的『當前專案』區塊。」
- **應用：**生成網站，然後提示：「新增一個可以將提交內容寄到我的信箱的聯絡表單。」
- **輸出：**一個在 10 分鐘內即可準備好接收流量的線上託管 URL。
常見陷阱
- **遺留程式碼遷移：**不要嘗試將擁有上千個檔案的 20 年老舊產品程式碼庫移入基於瀏覽器的 AI 代理。將這些工具用於全新專案或隔離的「模組」，例如管理後台和行銷網站。
- **首次草稿過度提示：**避免為第一個版本撰寫長達 5 頁的提示詞。從「Spotify 克隆版」的基礎開始，然後逐一添加功能，以防止 AI 混淆。
- **忽略確定性：**請記住，程式碼是確定性的——它要麼能執行，要麼不能。如果 AI 產生了一個有問題的應用程式，請先檢查環境（WebContainer）是否已完成啟動，然後再假設程式碼有誤。
- **僅將其視為設計工具：**不要只用它來做 UI。利用它建構「全端」（資料庫、認證、API）的能力，以確保原型是真正功能完整的，而不只是一個高擬真的模型。