在 AI 工具大爆發的時代，身為產品經理，我們不再需要從一個 Box、一條線開始拉原型，所以我針對一個工作流來進行測試：簡單講，就是利用 Antigravity 生成 HTML 代碼，並透過 Figma 橋接，最終導入 Axure 進行 UI 上的功能標註，希望可以減化 PRD 文件的流程。
先準備三種工具
因為這是一場「效率」與「精細度」的折衷方案，所以研究之後我試著使用以下工具：
- Antigravity：負責快速生成 UI 佈局，調整介面。
- Figma：作為「格式轉譯站」。
- Axure：最終產出物，方便我們撰寫邏輯說明與進行複雜的設計。
（理論上，在 Antigravity 生成 UI 時，可以對使用者進行原型測試，在這個階段反覆測試確認之後，再進行 PRD 文件的製作，不然工程師們只能看著你的原型來開發，沒定義到的地方就會自己腦補了）
我的實測步驟
Step 1 : Antigravity 輔助開發
在 Antigravity 中，我們可以透過對話要求 AI 生成高保真的 HTML，AI 會根據需求調整內容順序、配色與文字斷點等等，而在 AI 階段就先將頁面邏輯排序最佳化（如：年齡 > 價格 > 特性 > 評價），可以減少後續在 PRD 文件裡手動調整。
Step 2 : 獲取原始設計視圖
確認 Antigravity 產出的 HTML 頁面符合預期，這是我們後續要用來搬運的「母版」。
Step 3 : 在 Figma 安裝 html to design
打開 Figma，在 Plug in 搜尋並安裝 html to design，這是 Figma 將把 HTML 代碼轉去 Axure 的關鍵。
Step 4 : 導入 HTML 文件
打開 Plug in 後，切換到 File 模式，將 Antigravity 產出的 HTML 文件直接拖入。
Step 5 : Figma 圖層檢查
此時，HTML 會轉化為 Figma 的 Frame，雖然大部分的 HTML 會還原，但仍建議在此階檢查 UI 是否正確。
Step 6 : 在 Figma 安裝 Axure plugin
在 Figma 搜尋並執行 Axure 官方提供的 Plugin。
Step 7 : 準備導出至 Axure
進入 Plug in 執行介面，準備將 Figma 上的內容轉換為 Axure 可讀取的格式。
Step 8 : 在 Figma 複製選定內容
在 Figma 裡，先選取畫面，點擊右鍵：Plugins -> Axure -> Copy Selection for RP （或 Copy All Frames for RP ）。
Step 9 : 貼回 Axure 進行最終編輯
回到 Axure 中直接貼上，此時你的 AI 生成原型就已經成功進入 Axure 環境。
工作流實測心得：關於「中間流程出問題」的深度思考
在測試過程中，我發現從 Figma 貼到 Axure 時，經常會出現掉字、行高錯亂、佈局偏移的情況。
為什麼會出問題？
和 Gemini 討論之後，是「語法翻譯」的失真，HTML 是基於瀏覽器渲染（Browser-based），而 Figma 是向量路徑渲染（Vector-based），而 Axure 則是元件與容器渲染（Widget-based）。
- 字體斷層：當 Axure 無法完美映射 Figma 內的 CSS 字級時，會導致文字方塊縮水，進而產生掉字。
- 佈局重組：複雜的 Flex 佈局在進入 Axure 後會被強制轉化為絕對座標定位，這也是格式亂掉的主因。
結論與建議
這套流程並非「100% 複製貼上」，而是一場「AI 生成骨架，手動注入靈魂」的過程，雖然導入後需要手動微調（精修），但比起以往從零開始拉 Box 所耗費的數十小時，這套 Antigravity 到 Axure 的工作流已經節省了不少體力活，但結論我覺得這個流程是失敗的！
因為，我覺得不夠好，應該還有其他的辦法才對。
要深入了解 PRD ，請參考我們的詳細指南：PRD 怎麼寫？我教你。