精選案例#

#引言

歡迎來到 MeDo Moment —— 幫助你充分發揮 MeDo 的快速指南。 如果你是第一次接觸 MeDo，這裡是最合適的起點；如果你已經熟悉 MeDo，也歡迎把你的建議告訴我們，這些回饋會推動 MeDo 變得更好。讓我們開始 MeDo 之旅。

#1. 對話模式

優點： 適合非技術使用者 —— 生成結果快速且簡單。

缺點： 通常需要多輪迭代才能達到理想效果。

你可以透過對話不斷打磨想法。例如:「製作一個科技產品發表會的 H5 邀請頁，包含所有關鍵活動資訊。」

在你的提示詞被打磨之後，MeDo 會把簡述擴展成詳細的應用需求，例如:

請為一場科技產品發表會設計一個 H5 邀請頁。整體設計應傳遞現代、科技的感覺，並必須包含以下資訊：
- 產品名稱
- 活動時間
- 活動地點
- 產品關鍵特性或亮點
- 報名方式與截止時間

產出一份完整的 H5 頁面設計方案，涵蓋頁面版面、配色建議、互動行為與內容模組。
- 頁面版面：版面清晰簡潔。首頁應突出產品核心價值，幫助訪客快速把握其意義。
- 配色：採用藍白為主的科技配色，傳遞現代美學。
- 互動：加入觸控/滑動與點擊互動，提升參與感。
- 內容模組：
1. 封面：產品名稱、時間、地點、科技風格背景。
2. 產品概覽：詳細特性與亮點 —— 圖片、文字、影片結合。
3. 報名：報名入口，包含方式與截止時間。
4. 互動模組：包含問答、投票或其他互動。
5. 結語：一段感謝語、公司聯絡方式，以及對下一場活動的預告。

模組細節：
- **封面**
- 元素：產品名稱、時間、地點、科技風背景動畫（例如粒子動畫）。
- 互動：自動播放的輕量背景動畫；點擊/觸控進入下一節。
- **產品概覽**
- 元素：高清產品圖、核心特性、示範影片。
- 互動：圖片滑動切換；點擊 Play 觀看示範。
- **報名**
- 元素：「立即報名」 CTA、截止時間提醒、參與須知。
- 互動：點擊「報名」開啟表單，送出即確認。加入倒數計時以製造急迫感。
- **互動**
- 元素：與產品相關的簡短問答、功能偏好投票。
- 互動：使用者可送出答案（作答後顯示正確答案）與投票；即時展示結果。
- **結語**
- 元素：感謝語、公司 Logo、聯絡方式（電話/信箱/網址）、下一場活動預告。
- 互動：點擊 Logo 跳轉官網；點擊「查看更多活動」查看後續活動。

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

優點： 完全可控 —— 你可以指定技術堆疊、UI 與互動模式。

缺點： 需要一定的技術知識，以及清晰的產品規格。

#範例 1

（技術堆疊） 使用 React 19 + TypeScript + Vite + TailwindCSS + shadcn/ui 生成一個名為 MeDo 的 AI 程式碼編輯器前端 Demo。預設深色主題，一鍵切換到淺色。 （產品設計與 UI） 版面：

• 頂部固定導覽列：左側 MeDo Logo，中間標籤（Demo、範本、社群），右側主題切換與使用者選單。
• 左側可收合側邊欄，包含四個圖示捷徑入口：① 新增 Demo ② 我的 Demo ③ 收藏 ④ 設定。
• 主區域：兩欄版面 —— 左側 Monaco 風格程式碼編輯器（70%），帶行號、語法高亮、複製、全螢幕按鈕；右側即時預覽 iframe（30%），帶重新整理與匯出。
• 底部懸浮全寬輸入框：「一句話生成 Demo」。按下 Enter 觸發 loading 動畫，大約 10 秒後將生成的程式碼寫入編輯器，並自動重新整理預覽。
• 所有按鈕均有 hover 時的輕量縮放動畫（Framer Motion）；側邊欄收合/展開使用平滑動畫。

#生成效果

#範例 2

（技術堆疊） 使用 React 19 + TypeScript + Vite + TailwindCSS 3 + Zustand 生成一個行動端 H5 訂閱管理 Demo。預設深色主題，一鍵切換淺色。 （產品設計與 UI） 結構：

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

#3. 讓頁面呈現你想要的樣子

#指向具體的東西，別只用形容詞

如果你告訴朋友「我想讓我的網站看起來現代一點」，他還是不知道你想要什麼。但如果你說「我想讓它看起來像 Apple iPhone 的產品頁」，他腦子裡馬上就有畫面了。

MeDo 也是一樣。別只用形容詞，指向一個具體的東西：

• 不要「乾淨、簡約」→ 改成「像 Apple 產品頁那樣」
• 不要「溫暖、親切」→ 改成「像無印良品店裡那種感覺 —— 米白色、木頭質感、只有一個很小的無襯線 Logo」
• 不要「高級感」→ 改成「像老飯店裡的火柴盒那樣 —— 墨綠色底、小小的金色字、細細的邊線」

選一個參照物就夠了。如果一份提示詞裡混三種風格，往往得到的是三個半成品，而不是融合體。

#把頁面拆成幾段，並給它們起名字

如果你不告訴 MeDo 你想要哪些區塊，它就得自己猜 —— 可能會加上你不需要的，或者漏掉你在乎的。把你要的區塊按順序寫下來，用最普通的話命名：

1. 封面 —— 一個大標題、一句副標、一個按鈕
2. 關於我們 —— 一段短介紹加一張照片
3. 我們做什麼 —— 三項服務，每項寫價格
4. 團隊 —— 四個人的照片和名字
5. 聯絡我們 —— 地址、電話、信箱、一個表單

哪怕只是這樣一份簡單的編號清單，效果都會有很大差別。

#說出「不要什麼」，不只是「要什麼」

如果你只說想要什麼，MeDo 還是得猜其他所有細節。加一句「不要這樣」，往往比再寫一大段「要這樣」更有用：

• 「白色背景，但不要奶白、不要米白，就是純白。」
• 「圓潤的無襯線字體，不要花體、不要斜體。」
• 「只用一個點綴色 —— 紅色 —— 只用在按鈕上，內文不要用。」
• 「照片裡要有真實的人臉，不要那種筆電放在桌上的圖庫照片。」

你不用把每個細節都寫成這種形式 —— 只把最在乎的兩三件事寫清楚就好。

#只挑一個動效，用大白話講清楚

如果你想讓頁面「活」起來，選一個你在乎的動作 —— 不要一次要一堆。用你和朋友解釋的方式來描述：

• 「頁面載入時，標題從下面慢慢淡入。」
• 「滑鼠停在卡片上時，卡片會稍微變大一點。」
• 「照片可以用手指往左右拖動來切換。」

一次要求太多動效，頁面反而會看起來很躁。選好一個就夠了。

諸如「敬請期待」「Lorem ipsum」「NT$XX」這類佔位符，如果你留著不改，幾乎一定會原封不動地出現在最終頁面上。

#用一句話說清「這個頁面是給誰看的」

在提示詞末尾加一句話，描述真實會打開這個頁面的人。這能給 MeDo 一個明確的目標：

• 「這是給一對正在籌備婚禮的情侶，他們在手機上找攝影師。」
• 「這是給一位小店老闆，他在打電話前想先了解價格。」
• 「這是給一位路過咖啡館的顧客，他在決定要不要進來坐一下。」

人物越具體、場景越具體，生成的結果就越聚焦。

#送出前簡單過一遍

• 我有沒有指出一個具體的參照物（一個真實的品牌、產品或圖片），而不只是形容詞？
• 我有沒有把要的區塊按順序寫出來，用最普通的話命名？
• 對我最在乎的兩三件事，我有沒有說出「不要什麼」？
• 如果要動效，我是不是只選了一個，用大白話描述清楚了？
• 標題、按鈕、價格、地址這些文字，我是不是都寫了真實的內容，而不是佔位符？
• 我有沒有一句話說清楚這個頁面是給誰看的？

提示詞層面多花十分鐘，通常能省下一次重新生成的時間。如果你手上有一張喜歡的網站截圖，把你從截圖上看到的東西用文字描述出來，比只貼截圖效果更好。

#使用者指南

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

一個常見的錯誤是從第一天就糾結 UI。產品之所以存在，是為了解決問題 —— 使用者先關心方案，其次才是外觀。

按這個順序建構：UX → 功能 → 資料庫 → UI

1. 使用者體驗（UX）： 在寫程式之前，先把使用者旅程畫出來。需要哪些頁面？最簡單、最直覺的路徑是什麼？再好的方案，如果使用者不會用，也是失敗。
2. 功能： 使用者流走清楚之後，實作讓每一步都可靠、讓使用者覺得掌控在自己手中的功能。
3. 資料庫（DB）： 功能清楚了，再設計資料模型。你會很清楚要儲存什麼、如何保障安全。設計資料表結構時遵循安全最佳實踐。
4. 介面（UI）： 產品端到端跑通之後，再打磨視覺 —— 顏色、字體、間距、微互動。確保 UI 變更不會破壞已經驗證過的流程，也不遮擋關鍵操作。

#精準提示詞：具體且可衡量

AI 在明確的指令下發揮最佳。想像一位客戶說：「把這版稿子做得更美學一點。」「更美學」指什麼？哪一部分？給誰看？

提示詞黃金法則：

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

如果答案是否定的，就精簡並補細節。

如果你的重點在於頁面的樣子和風格 —— 品牌頁、作品集、發表頁 —— 可以參考第 3 節，看看怎麼把你想要的視覺風格描述清楚。

#第一次詢問至關重要

第一條提示詞決定了整個專案的方向 —— 請把它當成產品的基礎來對待。一句「做一個食譜應用」遠遠不夠。

在寫下第一條提示詞之前，先回答類似這些問題：

• 應用需要首頁嗎？
• 是否有登入與註冊流程？
• 是否有儀表板？展示什麼？
• 使用者能否新增自己的內容（例如食材或食譜）？
• 是否商業化？使用哪個支付服務？
• 主要視覺基調是什麼？

把這些答案寫下來。不要急 —— 初始提示詞可能要打磨幾個小時，這份投入是值得的。

也可以借助其他 AI（例如 GPT、Claude、文心一言）來迭代提示詞並檢驗一致性。分析對標網站：把一個 URL 發給 AI，讓它描述結構、顏色和字體，然後把這份分析轉化成給 MeDo 的詳細設計提示詞。

如果還有疑問，歡迎新增 MeDo Assistant 一對一諮詢。 感謝閱讀！