AI 原生產品建構：從規格到部署
AI 原生產品建構將產品經理的角色從為他人撰寫需求，轉變為直接指揮 AI 代理來建構軟體。這種方法能將開發時間從數月縮短至數週，並降低成本高達 99%。
「JIRA-Prompt」框架
將每次與 AI 代理（如 Bolt）的互動，視為為資深開發人員撰寫高品質的工單。
1. 定義技術範圍
不要使用一般性的描述，而是提供 AI 啟動環境所需的具體參數：
- 識別核心功能： 「製作一個 Spotify 複製品，具備串流、播放清單和 MP3 檔案支援。」
- 指定技術堆疊： 說明所需的整合服務（例如：「使用 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]）。 - 允許 AI 代理「吸收」資源和版面配置，以建立初始環境。
步驟 2：即時原型製作
不要拖曳 Figma 中的框架，而是提示功能性的變更：
- 「使用 Supabase Auth 新增一個登入頁面。」
- 「建立一個從使用者資料表中擷取資料的儀表板。」
- 使用 QR Code 預覽在您自己的裝置上即時測試應用程式。
步驟 3：一鍵部署
立即將應用程式移至正式環境 URL：
- 點擊「部署」。
- 連接到託管供應商（Netlify/Vercel）。
- 附加自訂網域，將原型轉變為實際運作的商業服務。
範例
範例 1：「零到市場」CRM
- 背景： 一位企業家需要一個自訂 CRM 並整合 Stripe 帳單功能，但沒有預算支付 30,000 美元的代理商費用。
- 輸入： 「為房地產經紀人建立一個 CRM。包含潛在客戶追蹤、用於每月訂閱的 Stripe 整合，以及一個 AI 驅動的電子郵件草稿工具。使用乾淨、藍色主題的 UI。」
- 應用： 使用 Bolt 生成基礎應用程式。透過迭代新增功能，例如「新增一個『上次聯絡日期』欄位」和「整合 Stripe 測試金鑰」。
- 輸出： 一個功能完善、能產生收益的 SaaS 產品，在 3 週內以約 300 美元的推理成本建構完成。
範例 2：快速行銷登陸頁面
- 背景： 產品經理需要一個新功能實驗的登陸頁面。
- 輸入： [貼上 LinkedIn 個人簡介/品牌規格] + 「建立一個個人作品集網站。使用專業的深色模式。新增一個我可以輕鬆編輯的『目前專案』區塊。」
- 應用： 生成網站，然後提示：「新增一個能將提交內容寄到我的電子郵件的聯絡表單。」
- 輸出： 一個在 10 分鐘內準備好接收流量的正式上線 URL。
常見陷阱
- 搬遷舊有程式碼： 不要試圖將一個有 20 年歷史、包含數千個檔案的生產級程式碼庫移入基於瀏覽器的 AI 代理。將這些工具用於全新專案或隔離的「容器」，例如管理後台和行銷網站。
- 過度提示第一個草稿： 避免為第一個版本撰寫 5 頁的提示。從「Spotify 複製品」的基礎開始，然後逐個功能新增，以防止 AI 混淆。
- 忽略確定性： 請記住，程式碼是確定性的——它要麼能執行，要麼不能。如果 AI 產生了一個損壞的應用程式，先檢查環境（WebContainer）是否已完成啟動，然後再假設程式碼有問題。
- 只把它當作設計工具： 不要僅將其用於 UI。善用其建立「完整堆疊」（資料庫、驗證、API）的能力，以確保原型實際上是功能性的，而不僅僅是高擬真的模型。