之前一個產品點子從發想到具體設計，往往需要產品經理、設計師一步步構思討論，但有了 AI 的幫助，即使是沒有產品背景，也可以在短短幾小時內完成 PRD 文件與 Figma 設計稿，這篇將記錄我透過 ChatGPT 4o、Figma 完成 PRD 和初步設計稿。
Step 1：定義題目方向
不論是要準備求職的產品作品，或是自己要練習寫 PRD，第一步通常是先「找題目」。
這個階段的目標是從模糊的想法出發（e.g. 我想做將 AI 結合到電商購物流程），逐步縮小範圍，變成一個清楚的產品主題（e.g. 讓使用者輸入文字後，讓 AI 店員推薦適合的商品）。▶️ 操作方式：
- 開啟 ChatGPT 或 Claude 或任何常用的 LLM，輸入題目方向，例如我輸入「我想將 AI 加入電商購物流程，有哪些題目可以規劃」。
- 若 ChatGPT 推薦的題目不感興趣，可以再多給一些提示，例如「想要著重在 C 端消費者的購買流程」、「C 端消費者的搜尋商品流程」或「B 端商品人員的上架流程」。
Step 2：確認使用者流程
當你確定了產品方向之後，下一步就是畫出「使用者從頭到尾會經歷哪些互動」。
▶️ 操作方式：
- 根據上述的回答，接續詢問「我想規劃聊天式購物助理，請再幫我列出功能重點和流程」。
- 如果熟悉 Mermaid 圖表的話，也可以請 ChatGPT 生成 Mermaid 語法，如下圖，接著貼到相關工具。
- 例如貼到 https://mermaid.live/，就可以產出下方的流程示意圖。
- 若發現 ChatGPT 提供的流程有漏，也可以針對某個環境進行補充，以下方為例我希望他針對「自動加入購物車，消費者結帳」這段流程補充得更細一點。
- 當 ChatGPT 提供的流程差不多時，可以再用另一種問法「如果你是電商產品經理要規劃一個 AI 店員功能，上述使用者流程有沒有遺漏什麼步驟或環節」，確保流程盡可能都包含到，像是下列他又提到冷啟動流程。
- 這些都是我一開始可能沒想到的細節，但可以透過 ChatGPT 補充得更完整，也可以之後放進 PRD。
Step 3：撰寫 PRD 文件
有了流程之後，我們就可以進入產出 PRD（Product Requirement Document，產品需求文件），PRD 是產品經理用來和產品開發團隊溝通的文件，會包含功能緣起、競品分析、需求細節、驗收標準等內容。
▶️ 操作方式：
- 直接提供一份 PRD 給 ChatGPT，並說明「請將上述 AI 店員的所有流程，參考這份 PRD 文件範本，寫出一份完整的 PRD」。
- 若覺得 ChatGPT 產出的需求描述太簡略，也可以直接請他重新生成，並說明要著重的地方，例如「請針對專案需求多描述每張 Story，以及說明每一張的驗收標準，以及設計稿」。
Step 4：產出 HTML 架構
接著我希望 ChatGPT 能協助我產生設計稿，但目前還無法直接轉成 Figma，而是要先產出 HTML 語法，後續再貼到 Figma 內。
▶️ 操作方式：
- 直接回覆「請幫我將上述的使用者流程以 HTML 呈現，並且要用 shopee 的樣式和色系，案例則以「使用者想購買 1000 元耳機」」。
- 點擊右上角的「預覽」即可看到 HTML 呈現出來的示意圖。
- 雖然 ChatGPT 已產出一個畫面，可以直接看完使用者的對話過程，但因為我要放進 Figma，我希望切成數個步驟，因此可以再請 ChatGPT「明確區分整段的各步驟」，如下成果。
Step 5：匯入 Figma 設計稿
有了 HTML 後，可以進一步把它轉成 Figma 的設計稿，讓使用者更方便做元件調整與設計提案。
▶️ 操作方式：
- 開啟 Figma 後，在中間下方的工具列點擊 Actions，即可安裝一個免費插件「html2design」。
- 啟動插件後，將剛剛生成的 HTML 貼到 Code 區塊，如下圖位置。
- 貼入後，可點擊 html2design 彈窗的 Preview，即可預覽剛剛的內容。
- 最後再點擊「Get Figma」，大約過幾秒即可看到 Figma 後方有產生元件。
Step 6：補充 PRD 細節
針對上述的 Figma 元件，可以再自行調整要補充的畫面或按鈕，這時若有想到要新增的需求，可以再請 ChatGPT 補完整一點。
▶️ 操作方式：
- 直接向 ChatGPT 說「請針對前面生成的 HTML 內容，幫我將 PRD 文件的第三段的需求描述補充更完整一點，並重新提供一份 PRD 文件文字稿」
- 這段我有來回好幾次，確保 PRD 的需求描述盡可能補完。
- 基本上到這篇一個功能的 PRD 就完成 80% 了，剩下就是自己再持續補充文件或是持續和 AI 對話，確保各使用者操作情境，包含正確情境、錯誤情境都有涵蓋到。
小結：持續和 AI 對話，讓需求流程更清晰
這篇是記錄我自己和 ChatGPT 對話直到產出 PRD 和 Figma 的流程，但畢竟有些對話沒有來回很多次，因此有些結果比較粗糙，需求和情境也有一些地方還沒有補齊。
但若有興趣的人可以持續和 ChatGPT 或 Claude 對話，也可以快速產出 PRD 需求文件。
