之前一個產品點子從發想到具體設計,往往需要產品經理、設計師一步步構思討論,但有了 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 需求文件。