第 10 章品牌銷售頁 - 零基礎學 Vibe Coding讀者專區

提示詞範本（10 則）

把方括號〔〕裡的內容換成你自己的情況，整段複製貼給 AI 就能用。

類別三、UI 元件與互動

21. 做一個含驗證與錯誤提示的表單

什麼時候用你需要一個讓使用者填資料的表單，且要防止他們填錯或漏填。

請幫我做一個〔用途，例如：活動報名〕表單，欄位有：〔姓名、Email、電話、備註〕。要有即時驗證：Email 格式不對、必填欄位空白時，就在該欄位下方顯示紅色提示文字，告訴使用者哪裡錯、該怎麼改。全部填對之前，送出按鈕不能按。送出成功後顯示一句感謝訊息。

好的錯誤提示會說「Email 好像少了 @」，壞的只會說「錯誤」。請 AI 給出具體、友善、教人怎麼改的提示，不要只是冷冰冰的警告訊息。

22. 做一個彈窗 modal

什麼時候用你想在不換頁的情況下，跳出一個小視窗讓使用者確認或填資料。

請幫我做一個彈窗（modal）。當使用者點〔某個按鈕，例如：立即預約〕時，畫面中央跳出一個小視窗，背景變暗且不能點。視窗裡放〔內容，例如：一個簡短的預約表單〕，右上角有關閉的叉叉，點視窗以外的暗色區域或按 Esc 鍵也能關閉。關閉時要有輕微的淡出動畫。

「點外面或按 Esc 能關」是彈窗的基本禮貌。少了它，使用者會有種被困住的煩躁感，這是新手最常漏掉的一環。

23. 做一個下拉選單

什麼時候用選項太多不適合全部攤開，你想收進一個點開才展開的選單。

請幫我做一個下拉選單（dropdown）。平常只顯示〔目前選項或按鈕文字〕，點一下往下展開所有選項：〔選項清單〕，選好之後選單收起、顯示所選項目。點選單以外的地方要能自動收起。選單展開時要能用鍵盤上下鍵移動、Enter 選取，對用鍵盤操作的人也友善。

下拉選單最容易忘記做點外面自動收合。測試時故意點一下旁邊空白處，看它會不會乖乖收起來？

24. 做一個分頁 tab 切換

什麼時候用同一塊區域要放好幾組內容，你想用頁籤讓使用者切換著看。

請幫我做一個分頁切換（tabs）。上方有幾個頁籤：〔頁籤名稱，例如：課程介紹、講師、常見問題〕，點哪個頁籤，下方就只顯示對應的內容，其他隱藏。目前選中的頁籤要有明顯的視覺標示（例如底線或變色）。切換內容時不要整頁重新載入，只換下方區塊。

分頁很適合同一主題的多面向資訊。但如果內容彼此無關，硬塞進分頁反而讓人找不到，那種情況不如直接分區塊攤開。

25. 做一個可展開的手風琴（accordion）

什麼時候用像常見問題那樣，一長串標題平常收起，點了才展開答案。

請幫我做一個手風琴（accordion）樣式的常見問題區。每個問題是一行標題，平常收合，點一下往下平順展開答案，再點一下收起。展開時標題旁的箭頭要跟著轉向。可以設定成〔一次只能展開一個／可以同時展開多個，擇一〕。展開收合要有滑順的動畫，不要瞬間跳出。

一次只展開一個比較整齊，適合 FAQ；可同時展開多個，適合使用者需要對照比較的情況。想清楚再告訴 AI。

26. 做一個可排序、可篩選的資料表格

什麼時候用你有一堆資料要用表格呈現，還想讓使用者自己排序或篩選來找資料。

請幫我做一個資料表格，欄位有：〔例如：日期、客戶名稱、金額、狀態〕。功能要包含：點欄位標題可以升冪／降冪排序、上方有一個搜尋框可以即時篩選、狀態欄用不同顏色的標籤呈現。資料很多時要能分頁，每頁顯示 〔20〕 筆。手機上請改成好讀的卡片式排列。

表格在手機上最容易爆版。「手機改成卡片式」這句能救你一命，不然一堆欄位在小螢幕上會擠到沒法看。

27. 加一張把資料視覺化的圖表

什麼時候用你有一組數字，想用長條圖或折線圖讓人一眼看懂趨勢。

我有這樣一組資料：〔描述資料，例如：過去六個月每月的報名人數〕。請幫我用〔長條圖／折線圖／圓餅圖，擇一〕呈現。圖表要有清楚的標題、座標軸標籤、以及滑鼠移上去會顯示該筆數字的提示。配色要簡潔專業、手機上也看得清楚。如果我還沒有真實資料，先用假資料讓我看效果。

選圖有訣竅：比較大小用長條圖，看趨勢變化用折線圖，看占比用圓餅圖。選對圖，資料才會替你說話。

28. 做一個檔案上傳功能

什麼時候用你需要讓使用者上傳圖片或文件，還想把體驗做得順一點。

請幫我做一個檔案上傳功能。使用者可以點按鈕選檔案，或直接把檔案拖進指定區域。只接受〔檔案類型，例如：jpg、png 圖片〕，單檔不超過〔5MB〕，超過或格式不對就顯示清楚的提示。選好後顯示檔名和一個小預覽（如果是圖片），上傳中顯示進度，成功後給明確的完成提示。

限制類型與大小並給提示，是安全與體驗的雙重防線。少了它，使用者傳了 50MB 的檔案卡住又不知道為什麼，體驗會很差。

29. 補上載入中與空狀態

什麼時候用資料還在載入、或根本沒有資料時，你不想讓使用者對著空白畫面發呆。

請幫我的〔某個列表或區塊，例如：訂單列表〕補上兩種狀態的畫面。載入中：顯示一個轉圈或骨架佔位效果，讓使用者知道正在讀取，不要空白一片。沒有資料時（空狀態）：顯示一句友善的說明和一個引導動作，例如「你還沒有任何訂單，去逛逛吧」加一顆按鈕，而不是留一片空白讓人以為壞了。

空白畫面會讓使用者以為當機。載入中和空狀態這兩塊常被新手忽略，補上它們，作品立刻從半成品變成品。

30. 做一個通知 toast 提示

什麼時候用使用者完成某個動作後，你想給一句短暫、不擋路的成功或失敗提示。

請幫我做一個通知提示（toast）。當使用者〔完成某動作，例如：儲存成功／刪除失敗〕時，畫面〔右上角或下方〕輕輕滑出一小條訊息，成功用綠色、失敗用紅色，顯示 3 秒後自動淡出消失，也可以手動點叉關掉。它不能擋住使用者正在操作的內容。

toast 適合「講一聲就好」的短訊息。如果是需要使用者做決定的重要事情（例如「確定刪除？」），該用彈窗，不要用會自己消失的 toast。前面做的是外觀，這一關做的是本事：能登入、能存資料、能搜尋以及能結帳。這些是讓你的作品從好看的樣板，變成真的能用的產品的關鍵。別被這些聽起來很硬的詞嚇到，你要做的一樣是把需求講清楚，剩下的交給 AI。