精選案例#

#介紹

歡迎閱讀 MeDo Moment，這是協助你充分善用 MeDo 的快速指南。 如果你是第一次來，這裡會是最合適的起點。如果你已熟悉 MeDo，也歡迎提供反饋；你的建議能幫助我們持續改進。讓我們開始你的 MeDo 旅程。

#1. 對話模式

優點： 非常適合非技術用戶，可快速而簡單地生成結果。

缺點： 你可能需要多輪迭代，才能得到更精緻的成果。

你可以透過對話逐步完善想法。例如：「為科技產品發佈會建立一個 H5 邀請頁，包含所有必要活動資訊。」

完善 prompt 後，MeDo 可以將簡要描述擴展為詳細的應用程式需求，例如：

請設計一個科技產品發佈會的 H5 邀請頁。設計應呈現現代感與科技感，並必須包含以下資訊：
- 產品名稱
- 活動日期及時間
- 活動場地
- 產品的核心功能或亮點
- 報名方式及截止日期

請交付完整的 H5 頁面設計方案，涵蓋頁面佈局、建議配色、互動行為及內容模組。
- 頁面佈局：保持清晰簡潔。首頁應突出產品核心價值，幫助訪客快速理解其意義。
- 配色方案：使用具科技感的藍白配色，呈現現代美感。
- 互動：加入觸控/滑動及點擊互動，提升參與感。
- 內容模組：
1. 封面：產品名稱、日期/時間、場地，以及科技風格背景。
2. 產品概覽：詳細功能與亮點，可混合圖片、文字或影片。
3. 報名：包含報名入口、方式及截止日期。
4. 互動區：包含 Q&A、投票或其他參與型活動。
5. 結尾：感謝語、公司聯絡資料，以及後續活動預告。

模組詳情：
- **封面**
- 元素：產品名稱、日期/時間、場地、科技風格動畫背景（例如粒子動畫）。
- 互動：自動播放輕量背景動畫；點按/點擊進入下一部分。
- **產品概覽**
- 元素：高清產品圖片、核心功能、示範影片。
- 互動：滑動瀏覽圖片；點按播放以查看示範。
- **報名**
- 元素：「立即報名」CTA、截止日期提醒、參加者須知。
- 互動：點按報名以開啟報名表。提交後確認報名。加入倒數計時以營造緊迫感。
- **互動**
- 元素：簡短的產品相關 Q&A 及功能偏好投票。
- 互動：用戶可提交答案（之後顯示正確答案）並投票；展示即時結果。
- **結尾**
- 元素：感謝語、公司標誌、聯絡資料（電話、電郵、網站），以及後續活動預告。
- 互動：點按公司標誌開啟官方網站；點按「查看更多活動」查看即將舉行的活動。

#2. 進階模式：完整應用程式

優點： 完全掌控，可自行指定技術棧、UI 及互動模式。

缺點： 需要具備技術知識，並提供清晰的產品規格。

#範例 1

（技術棧） 使用 React 19 + TypeScript + Vite + TailwindCSS + shadcn/ui，生成名為 MeDo 的 AI 程式碼編輯器前端 Demo。預設使用深色主題，並提供一鍵切換至淺色模式。 （產品設計與 UI） 佈局：

• 頂部固定導覽列：左側為 MeDo logo，中間為分頁（Demo、Template、Community），右側為主題切換及個人資料選單。
• 左側可摺疊側邊欄，包含四個圖示捷徑：① 新增 Demo ② 我的 Demo ③ 收藏 ④ 設定。
• 主區域採用雙欄佈局：左側為 Monaco 風格程式碼編輯器（70%），包含行號、語法高亮、複製及全螢幕按鈕；右側為即時預覽 iframe（30%），包含重新整理及匯出控制。
• 底部懸浮全寬輸入框：「用一句話生成 Demo。」按下 Enter 後觸發載入動畫；約 10 秒後，生成的程式碼會插入編輯器，並自動重新整理預覽。
• 所有按鈕使用細緻的 hover 縮放動畫（Framer Motion）；側邊欄摺疊/展開需平滑動畫。

#生成效果

#範例 2

（技術棧） 使用 React 19 + TypeScript + Vite + TailwindCSS 3 + Zustand，生成流動端 H5 訂閱管理 Demo。預設深色主題，並提供一鍵淺色模式。 （產品設計與 UI） 結構：

• 三層導覽：① 固定頂部搜尋列 + 全局「新增訂閱」按鈕；② 主區域分為三個分頁：訂閱、統計、設定；③ 底部圓角 TabBar，會隨捲動隱藏/顯示。
• 訂閱頁：以瀑布流卡片展示服務 logo、名稱、月費/年費、下一次扣款日期及剩餘天數。卡片支援左滑刪除、右滑編輯，以及點按查看詳情（扣款歷史圖表 + 修改按鈕）。
• 統計頁：使用 Recharts 顯示月度/年度棒形圖，以及總額環形圖；支援時間範圍選擇。
• 設定頁：貨幣選擇器、到期前通知開關及 CSV 匯出。
• 所有互動（縮放/淡入淡出、滑動、分頁切換、圖表轉場）都應流暢精緻。

#使用指南

#先建立價值：體驗優先於外觀

一個常見錯誤，是從第一天開始就過度執着於 UI。你的產品存在的目的，是解決問題；用戶首先關心解決方案，其次才是視覺效果。

請遵循以下建立優先次序：UX → 功能 → 資料庫 → UI

1. 使用者體驗（UX）： 在編寫程式碼前，先梳理使用者旅程。需要哪些畫面？最簡單、最直觀且能交付價值的流程是甚麼？即使解決方案本身很好，如果用戶不知道如何使用，也會失敗。
2. 功能： 使用者流程確定後，實作能讓每一步可靠運作、且讓用戶感到可掌控的功能。
3. 資料庫（DB）： 功能清晰後，再設計資料模型。此時你會清楚知道需要儲存甚麼，以及如何保障安全。設計資料表結構時，請遵循最佳安全實務。
4. 使用者介面（UI）： 當產品已能端到端運作後，再打磨視覺，包括顏色、字體、間距及細緻動畫。確保 UI 變更不會破壞已驗證的流程，也不會遮擋關鍵操作。

#撰寫精準 prompt：具體且可衡量

AI 在收到明確指示時表現最好。想像一位客戶說：「把這份藍圖變得更好看。」那麼「更好看」是甚麼意思？指哪個部分？面向哪類受眾？

Prompt 的黃金法則：

「如果我叫一個 5 歲小朋友做這件事，他會明白要做甚麼嗎？」

如果答案是否定的，請簡化並加入更多細節。

#第一個提問很重要

第一個 prompt 會決定專案方向，應把它視為產品的地基。像「建立一個食譜應用程式」這樣模糊的指令並不足夠。

在寫下第一個 prompt 前，請先回答以下問題：

• 應用程式會有首頁嗎？
• 是否有登入和註冊流程？
• 會有儀表板嗎？它應該顯示甚麼？
• 用戶能否加入自己的內容（例如食材或食譜）？
• 應用程式會變現嗎？會使用哪個支付服務供應商？
• 主要視覺調性應該是甚麼？

把這些答案寫下來。不要急；初始 prompt 可能需要花幾小時打磨，而這些投入會帶來回報。

使用其他 AI（例如 GPT、Claude、ERNIE Bot）反覆優化你的 prompt，並測試其一致性。分析競品網站：把 URL 交給 AI，請它描述結構、顏色及字體，然後把分析轉化為可給 MeDo 使用的詳細設計 prompt。

如果仍有疑問，請加入 MeDo Assistant，獲得一對一協助。 感謝閱讀！