Codex use case
將使用者故事轉化為 UI 模擬稿
將產品意見回饋、議題討論串與設計上下文轉化為可供團隊評估並實作的模擬稿。
使用 Codex 從 Slack、Linear 和 Google Drive 彙整產品意見回饋，將其統整為使用者故事與限制條件，再透過 ImageGen 產生 UI 模擬稿。選定方向後，將模擬稿轉化為可運作的原型。
最適合
- 將零散意見回饋轉化為功能視覺方向的產品團隊。
- 希望在開始建置前，先根據來源資料製作模擬稿的設計與工程團隊。
- 希望根據使用者意見回饋快速迭代的團隊。
Contents
將使用者故事轉化為 UI 模擬稿
將產品意見回饋、議題討論串與設計上下文轉化為可供團隊評估並實作的模擬稿。
使用 Codex 從 Slack、Linear 和 Google Drive 彙整產品意見回饋，將其統整為使用者故事與限制條件，再透過 ImageGen 產生 UI 模擬稿。選定方向後，將模擬稿轉化為可運作的原型。
使用 Codex 從 Slack、Linear 和 Google Drive 彙整產品意見回饋，將其統整為使用者故事與限制條件，再透過 ImageGen 產生 UI 模擬稿。選定方向後，將模擬稿轉化為可運作的原型。
相關連結
最適合
- 將零散意見回饋轉化為功能視覺方向的產品團隊。
- 希望在開始建置前，先根據來源資料製作模擬稿的設計與工程團隊。
- 希望根據使用者意見回饋快速迭代的團隊。
技能與外掛程式
- 在已核准的意見回饋頻道和討論串中，搜尋使用者故事、痛點、引述以及尚待釐清的問題。
- 將功能需求、錯誤報告、標籤、優先順序及專案上下文納入模擬稿需求摘要。
- 讀取包含產品意見回饋或設計需求的研究筆記、通話摘要、文件、試算表與簡報。
- 擷取設計上下文、螢幕截圖及設計系統參考資料，確保模擬稿不偏離產品的視覺語言。
- ImageGen根據彙整後的使用者故事與設計限制，產生 UI 模擬稿及其變體，並建立視覺基準。
- 將選定的模擬稿轉化為可運作的網頁原型，並對照模擬稿驗證實作成果。
| Skill | Why use it |
|---|---|
| Slack | 在已核准的意見回饋頻道和討論串中，搜尋使用者故事、痛點、引述以及尚待釐清的問題。 |
| Linear | 將功能需求、錯誤報告、標籤、優先順序及專案上下文納入模擬稿需求摘要。 |
| Google Drive | 讀取包含產品意見回饋或設計需求的研究筆記、通話摘要、文件、試算表與簡報。 |
| Figma | 擷取設計上下文、螢幕截圖及設計系統參考資料，確保模擬稿不偏離產品的視覺語言。 |
| ImageGen | 根據彙整後的使用者故事與設計限制，產生 UI 模擬稿及其變體，並建立視覺基準。 |
| Build Web Apps | 將選定的模擬稿轉化為可運作的網頁原型，並對照模擬稿驗證實作成果。 |
起始提示詞
簡介
產品團隊經常從各種來源收集意見回饋，例如 Slack 討論串、Linear 議題、Google Drive 文件或試算表，以及客戶通話筆記。有時，他們已有清楚的使用者故事，可以說明想解決的問題；有時，相關上下文則包含在這些來源中。
ChatGPT 可以彙整這些上下文，並據此為能解決該問題的功能製作 UI 模擬稿。確認方向後，Codex 就能在產品中實作這項功能。
建立視覺基準
如果已有清楚的使用者故事，可以直接以此為起點。否則，可以先與 ChatGPT 討論，從不同來源收集上下文，再將其彙整成使用者故事。
接著，可以請 ChatGPT 使用圖像生成功能，產生幾個不同方向的模擬稿。這些模擬稿應保留產品的資訊架構，並符合設計系統的限制。
如有幫助，可以提供目前 UI 的螢幕截圖或 Figma 檔案作為參考。
持續調整，直到你對模擬稿感到滿意為止。變更範圍界定得越清楚，Codex 就越可能產生可直接實作的模擬稿。
從模擬稿到原型
請使用你希望 Codex 實作的最終模擬稿圖片。選取 Codex、開始新對話，並重新附加該圖片，不要直接接續原本的 ChatGPT 對話。接著，請 Codex 實作這份模擬稿——如果你正在建置網頁應用程式，也可以選擇使用 Build Web Apps 外掛程式——將它轉化為可運作的原型：
