一、要解決什麼問題？

我們很常在辦公室跟同事們一起訂便當或飲料，但時常要手動彙整、確認、計算金額，然後再跑腿下訂單的繁瑣流程？

因此，我開發一個 AI 自動團購點餐系統 來解決「人工」處理團購訂單的低效與混亂問題。透過極簡風格的 UI 設計和清晰的程式邏輯，它將點餐的每個步驟都變得 自動化、透明化、且零錯誤。從發起團購、每個人輕鬆點餐，到系統自動彙總清單與金額！

二、提示詞設計

請遵循下面的提示開發任務

情境(Context): 你是一位使用 Google Gemini 專業全端開發者。
任務 (Task): 建立一個 AI 自動團購點餐系統。
指南 (Guidelines): UI 應該是極簡風格，並且為每個步驟提供清晰的程式碼註解。
限制 (Constraints): 確保最終輸出是一個可運作的頁面。

三、產品原型呈現

1. 團購發起與 AI 智慧生成（發起頁面）

這是整個團購流程的起點，旨在利用 AI 快速建立團購訂單。

• 訂購要求（文字或圖片）：
  • 使用者可以透過文字描述（例如：店名、想點的品項、預算限制等）來發起團購。
  • 也可以直接上傳菜單圖片（支援 PNG, JPG, GIF, WEBP 格式）。
• AI 智慧生成：
  • 系統會根據使用者輸入的文字或上傳的圖片，利用 AI 自動解析菜單品項、價格，並建立一個可供團員點餐的訂購表單。
• 歷史訂單記錄：
  • 顯示過去發起過的團購活動，並提供「重複開團」或「複製訂單」的選項，方便快速發起相似的團購，省去重複設定的時間。

2. 個人點餐介面（訂單進行中頁面）

這是團員參與團購、選擇餐點的主要介面。

• 點餐狀態與截止時間：
  • 頂部清晰顯示「團購進行中」狀態，並設有 「截止倒數」 時間（例如：「再睡 5 分鐘」）。
  • **「團主控制台」**讓發起人隨時能 「立即截止」 訂單，確保及時下訂。
• 客製化點餐：
  • 團員可輸入 「您的姓名」，方便後續對帳。
  • 可選擇 「主品項」、「數量」，並勾選各種 「加料選項」（如：加珍珠、加布丁，並清楚標示加價）。
  • 提供「備註」欄位（例如：微糖、少冰、不要蔥），滿足個人化的特殊需求。
• 我的訂單總覽：
  • 即時顯示該團員已選擇的品項、數量、單價，以及「小計」金額，方便隨時確認。
  • 點餐完成後，透過 「確認我的訂單」 送出。

3. 訂單彙總與輸出（訂單已截止頁面）

當團購截止後，系統會自動整理所有團員的訂單，並提供訂購所需的最終資訊。

• 目前訂單總覽：
  • 清晰羅列所有團員的訂購內容、單價、小計金額，方便快速核對。
  • 顯示「總點餐數」和「總計」金額。
• 生成公開分享連結：
  • 提供 「產生公開分享連結」 功能，讓團主可以將彙總好的訂單資訊分享給團員，方便大家對帳或確認。
• 訂單輸出：
  • 系統會自動生成一份清晰、可複製貼上的文字訂單清單，內容包含：品項總數、總金額、所有人的訂單明細，非常適合直接用於向店家下訂單或群組通知。
  • 提供「複製」和「離開訂單列表」按鈕，優化操作流程。