如何用 AI 快速產出 PRD 與 Figma:從專案點子到設計稿的流程步驟|EP88

更新於 發佈於 閱讀時間約 5 分鐘

之前一個產品點子從發想到具體設計,往往需要產品經理、設計師一步步構思討論,但有了 AI 的幫助,即使是沒有產品背景,也可以在短短幾小時內完成 PRD 文件與 Figma 設計稿,這篇將記錄我透過 ChatGPT 4o、Figma 完成 PRD 和初步設計稿。

raw-image

Step 1:定義題目方向

不論是要準備求職的產品作品,或是自己要練習寫 PRD,第一步通常是先「找題目」。

這個階段的目標是從模糊的想法出發(e.g. 我想做將 AI 結合到電商購物流程),逐步縮小範圍,變成一個清楚的產品主題(e.g. 讓使用者輸入文字後,讓 AI 店員推薦適合的商品)。

▶️ 操作方式:

  • 開啟 ChatGPT 或 Claude 或任何常用的 LLM,輸入題目方向,例如我輸入「我想將 AI 加入電商購物流程,有哪些題目可以規劃」。
raw-image
  • 若 ChatGPT 推薦的題目不感興趣,可以再多給一些提示,例如「想要著重在 C 端消費者的購買流程」、「C 端消費者的搜尋商品流程」或「B 端商品人員的上架流程」。

Step 2:確認使用者流程

當你確定了產品方向之後,下一步就是畫出「使用者從頭到尾會經歷哪些互動」。

▶️ 操作方式:

  • 根據上述的回答,接續詢問「我想規劃聊天式購物助理,請再幫我列出功能重點和流程」。
raw-image
  • 如果熟悉 Mermaid 圖表的話,也可以請 ChatGPT 生成 Mermaid 語法,如下圖,接著貼到相關工具。
raw-image
raw-image
  • 若發現 ChatGPT 提供的流程有漏,也可以針對某個環境進行補充,以下方為例我希望他針對「自動加入購物車,消費者結帳」這段流程補充得更細一點。
raw-image
  • 當 ChatGPT 提供的流程差不多時,可以再用另一種問法「如果你是電商產品經理要規劃一個 AI 店員功能,上述使用者流程有沒有遺漏什麼步驟或環節」,確保流程盡可能都包含到,像是下列他又提到冷啟動流程。
raw-image
  • 這些都是我一開始可能沒想到的細節,但可以透過 ChatGPT 補充得更完整,也可以之後放進 PRD。
raw-image

Step 3:撰寫 PRD 文件

有了流程之後,我們就可以進入產出 PRD(Product Requirement Document,產品需求文件),PRD 是產品經理用來和產品開發團隊溝通的文件,會包含功能緣起、競品分析、需求細節、驗收標準等內容。

▶️ 操作方式:

  • 直接提供一份 PRD 給 ChatGPT,並說明「請將上述 AI 店員的所有流程,參考這份 PRD 文件範本,寫出一份完整的 PRD」。
raw-image
  • 若覺得 ChatGPT 產出的需求描述太簡略,也可以直接請他重新生成,並說明要著重的地方,例如「請針對專案需求多描述每張 Story,以及說明每一張的驗收標準,以及設計稿」。
raw-image

Step 4:產出 HTML 架構

接著我希望 ChatGPT 能協助我產生設計稿,但目前還無法直接轉成 Figma,而是要先產出 HTML 語法,後續再貼到 Figma 內。

▶️ 操作方式:

  • 直接回覆「請幫我將上述的使用者流程以 HTML 呈現,並且要用 shopee 的樣式和色系,案例則以「使用者想購買 1000 元耳機」」。
raw-image
  • 點擊右上角的「預覽」即可看到 HTML 呈現出來的示意圖。
raw-image
  • 雖然 ChatGPT 已產出一個畫面,可以直接看完使用者的對話過程,但因為我要放進 Figma,我希望切成數個步驟,因此可以再請 ChatGPT「明確區分整段的各步驟」,如下成果。
raw-image

Step 5:匯入 Figma 設計稿

有了 HTML 後,可以進一步把它轉成 Figma 的設計稿,讓使用者更方便做元件調整與設計提案。

▶️ 操作方式:

  • 開啟 Figma 後,在中間下方的工具列點擊 Actions,即可安裝一個免費插件「html2design」。
  • 啟動插件後,將剛剛生成的 HTML 貼到 Code 區塊,如下圖位置。
raw-image
  • 貼入後,可點擊 html2design 彈窗的 Preview,即可預覽剛剛的內容。
raw-image
  • 最後再點擊「Get Figma」,大約過幾秒即可看到 Figma 後方有產生元件。
raw-image

Step 6:補充 PRD 細節

針對上述的 Figma 元件,可以再自行調整要補充的畫面或按鈕,這時若有想到要新增的需求,可以再請 ChatGPT 補完整一點。

▶️ 操作方式:

  • 直接向 ChatGPT 說「請針對前面生成的 HTML 內容,幫我將 PRD 文件的第三段的需求描述補充更完整一點,並重新提供一份 PRD 文件文字稿」
raw-image
  • 這段我有來回好幾次,確保 PRD 的需求描述盡可能補完。
  • 基本上到這篇一個功能的 PRD 就完成 80% 了,剩下就是自己再持續補充文件或是持續和 AI 對話,確保各使用者操作情境,包含正確情境、錯誤情境都有涵蓋到。

小結:持續和 AI 對話,讓需求流程更清晰

這篇是記錄我自己和 ChatGPT 對話直到產出 PRD 和 Figma 的流程,但畢竟有些對話沒有來回很多次,因此有些結果比較粗糙,需求和情境也有一些地方還沒有補齊。

但若有興趣的人可以持續和 ChatGPT 或 Claude 對話,也可以快速產出 PRD 需求文件。

留言
avatar-img
留言分享你的想法!
avatar-img
張家惟 Evan Chang的沙龍
107會員
182內容數
《思維的創意想像》是工作之餘發起的 Side Project,因為近期快速吸收各種資訊跟商業知識(Input),但一直沒有地方輸出(Output),因此想透過這系列記錄學到的內容,包含商業知識、產業洞見,或是職場分享等等,目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
2025/04/20
從 ChatGPT、Claude、Gemini 各種模型的出現,「AI 是否會取代 PM / UX / RD」一直是軟體業在討論的話題,AI 已能撰寫 PRD 產品需求文件、分析用戶、設計原型 Prototype,甚至提供產品決策建議,甚至對於一些產品主管來說,只會執行的初級產品經理職缺可能會越來越
Thumbnail
2025/04/20
從 ChatGPT、Claude、Gemini 各種模型的出現,「AI 是否會取代 PM / UX / RD」一直是軟體業在討論的話題,AI 已能撰寫 PRD 產品需求文件、分析用戶、設計原型 Prototype,甚至提供產品決策建議,甚至對於一些產品主管來說,只會執行的初級產品經理職缺可能會越來越
Thumbnail
2025/04/17
在電商產業擔任產品經理,最常被問的就是「AI 可以在電商平台做哪些事」,像是個人化商品推薦、文案生成、加速上架、AI 客服等,市面上已陸續有 AI 功能逐漸釋出,但 AI 協助購物這段流程要怎麼進行,這篇想記錄初步想法。
Thumbnail
2025/04/17
在電商產業擔任產品經理,最常被問的就是「AI 可以在電商平台做哪些事」,像是個人化商品推薦、文案生成、加速上架、AI 客服等,市面上已陸續有 AI 功能逐漸釋出,但 AI 協助購物這段流程要怎麼進行,這篇想記錄初步想法。
Thumbnail
2025/04/12
Retrospective 是敏捷流程中的回顧環節,對產品經理來說是一個可以回顧過往、反思的時刻,這篇會記錄 Retro 的重點,以及產品經理可以如何運用 Retro,讓產品團隊提升開發效率。
Thumbnail
2025/04/12
Retrospective 是敏捷流程中的回顧環節,對產品經理來說是一個可以回顧過往、反思的時刻,這篇會記錄 Retro 的重點,以及產品經理可以如何運用 Retro,讓產品團隊提升開發效率。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
AI生成圖片是一個挑戰性的任務,雖然AI能理解文字需求,但仍無法完全想像心中的理想畫面。使用中文描述AI的生成效果約為5成到6成,而加入擬人化的描述可以讓AI更好地理解需求。無論如何,AI生成圖片仍面臨許多挑戰,需要更多的研究與嘗試。
Thumbnail
AI生成圖片是一個挑戰性的任務,雖然AI能理解文字需求,但仍無法完全想像心中的理想畫面。使用中文描述AI的生成效果約為5成到6成,而加入擬人化的描述可以讓AI更好地理解需求。無論如何,AI生成圖片仍面臨許多挑戰,需要更多的研究與嘗試。
Thumbnail
產品經理想做 AI 產品要懂哪些基本名詞?這篇整理我過往參與 AI 自傳生成時,和 NLP 工程師有討論到的概念,AI 應用目前還尚未普及,未來我會再陸續整理不同功能或產業需要知道的 AI 基礎知識。
Thumbnail
產品經理想做 AI 產品要懂哪些基本名詞?這篇整理我過往參與 AI 自傳生成時,和 NLP 工程師有討論到的概念,AI 應用目前還尚未普及,未來我會再陸續整理不同功能或產業需要知道的 AI 基礎知識。
Thumbnail
本文探討了AI是否能取代平面設計,強調了學習AI運用需要用心學習,並提供了相關的技術與運用範例。文章透過實際例子與觀點,澄清了AI在設計領域的應用與限制,並強調了學習基礎設計知識的重要性。讀者藉由本文能更具深度地瞭解AI與設計領域之間的關係,以及AI對設計師職業的影響。
Thumbnail
本文探討了AI是否能取代平面設計,強調了學習AI運用需要用心學習,並提供了相關的技術與運用範例。文章透過實際例子與觀點,澄清了AI在設計領域的應用與限制,並強調了學習基礎設計知識的重要性。讀者藉由本文能更具深度地瞭解AI與設計領域之間的關係,以及AI對設計師職業的影響。
Thumbnail
這篇文章描述作者如何利用 AI 技術(如 ChatGPT)來輔助撰寫文章的過程。作者詳細拆解了自己的寫作流程,並闡述了每個環節中如何使用 AI 來提高效率。文章強調 AI 在工作流程中所帶來的改變,並指出要適應這種改變需要一定的時間和練習。
Thumbnail
這篇文章描述作者如何利用 AI 技術(如 ChatGPT)來輔助撰寫文章的過程。作者詳細拆解了自己的寫作流程,並闡述了每個環節中如何使用 AI 來提高效率。文章強調 AI 在工作流程中所帶來的改變,並指出要適應這種改變需要一定的時間和練習。
Thumbnail
AI 繪圖的浪潮席捲而來,如何在沒有靈感時使用聊天機器人找到靈感?此篇分享如何透過ChatGPT來尋求AI幫助生成創意點子,並分享了實例、圖像生成和創作過程。
Thumbnail
AI 繪圖的浪潮席捲而來,如何在沒有靈感時使用聊天機器人找到靈感?此篇分享如何透過ChatGPT來尋求AI幫助生成創意點子,並分享了實例、圖像生成和創作過程。
Thumbnail
AI 履歷、AI 自傳、AI 找工作是近期很熱門的應用,但 AI 自傳要如何實現?身為產品經理要如何設計這個功能?如何套用到履歷編輯器內?這篇想分享我過往的產品發想經歷。
Thumbnail
AI 履歷、AI 自傳、AI 找工作是近期很熱門的應用,但 AI 自傳要如何實現?身為產品經理要如何設計這個功能?如何套用到履歷編輯器內?這篇想分享我過往的產品發想經歷。
Thumbnail
本篇文章分享了對創意和靈感來源的深入思考,以及如何將其轉化為實際的成果或解決方案的過程。透過學習、資料收集、練習、創新等方法,提出了將創意落實的思路和技巧。同時介紹了AI在外顯知識的自動化應用,以及對其潛在發展方向的討論。最後探討了傳統機器學習技術在模擬中的應用案例和對AI世界的影響。
Thumbnail
本篇文章分享了對創意和靈感來源的深入思考,以及如何將其轉化為實際的成果或解決方案的過程。透過學習、資料收集、練習、創新等方法,提出了將創意落實的思路和技巧。同時介紹了AI在外顯知識的自動化應用,以及對其潛在發展方向的討論。最後探討了傳統機器學習技術在模擬中的應用案例和對AI世界的影響。
Thumbnail
這篇內容想要分享的是我如何利用 AI 跟各類工具來輔助我更有效率的製作社群貼文,因為有這些工具,讓我在製作內容可以更穩定以及有效率。
Thumbnail
這篇內容想要分享的是我如何利用 AI 跟各類工具來輔助我更有效率的製作社群貼文,因為有這些工具,讓我在製作內容可以更穩定以及有效率。
Thumbnail
🔍 使用 AI 工具 (ChatGPT): ChatGPT 搭配 Notion 是我目前在使用的兩項主要工具,讓我能夠輕鬆地管理和組織我的工作和想法。透過 ChatGPT 的功能,我能夠更好地發想與內容創作,而 Notion 則提供了一個知識資料庫的整合,讓我能夠有效地記錄、規劃和分享各種內
Thumbnail
🔍 使用 AI 工具 (ChatGPT): ChatGPT 搭配 Notion 是我目前在使用的兩項主要工具,讓我能夠輕鬆地管理和組織我的工作和想法。透過 ChatGPT 的功能,我能夠更好地發想與內容創作,而 Notion 則提供了一個知識資料庫的整合,讓我能夠有效地記錄、規劃和分享各種內
Thumbnail
第 19 天:使用 ChatGPT 完成了哪 3 個任務? 這幾年真的人人都在討論 AI,在我工作的產業裡,也有不少設計師擔心未來會被 AI 取代。 但我認為,AI 就像一個得力助手,可以幫助人們更快完成庶務,給我們更多時間思考更多可能~
Thumbnail
第 19 天:使用 ChatGPT 完成了哪 3 個任務? 這幾年真的人人都在討論 AI,在我工作的產業裡,也有不少設計師擔心未來會被 AI 取代。 但我認為,AI 就像一個得力助手,可以幫助人們更快完成庶務,給我們更多時間思考更多可能~
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News