為什麼「幫我做個登入頁」出來的東西總是不對？
課堂上最常看到的畫面：學員打開 Claude，敲一句「幫我做一個登入頁」，出來的東西不是太陽春就是太花，改三輪還是不像自己想要的。很多人的結論是「AI 還不夠聰明」。不對。問題出在那句話本身——資訊量太少，AI 只能猜。
「登入頁」三個字，裡面藏著一堆沒講的決定：卡片要置中還是左右分割？要不要第三方登入按鈕？密碼欄要不要提示？手機上長怎樣？這些沒說，AI 就拿它最常見的答案填——於是每個人做出來都是同一張臉。
專業前端跟小白的差別，很多時候不在會不會寫程式，而在描述畫面的顆粒度：他們會先講容器長怎樣，再列裡面有哪些元素，接著講互動細節，最後講手機版怎麼收。這套描述法是可以學的，而 vibeprompts.dev 等於把 256 份範本攤在你面前。
vibeprompts.dev 是什麼？
網址就是 vibeprompts.dev，不用註冊、不用付費。首頁一句話講完它的用法：挑一個區塊、複製提詞、貼進你的 AI 工具，拿回乾淨可用的 Tailwind CSS 版面。
目前 15 個分類，挑幾個跟做管理系統最有關的：
- Auth Forms（登入／註冊，17 條）：置中卡片註冊、左右分割登入、一次性驗證碼、Magic link、重設密碼含強度條、雙重驗證 QR、Passkey 登入……連「帳號被鎖定的復原畫面」都有。
- Dashboards（後台儀表板，16 條）：側欄加統計卡、帶工具列的資料表、圖表卡、活動動態、看板拖拉、收件匣分割檢視、週排程格、審核佇列含側邊抽屜。
- Pricing（定價，17 條）：三欄含主打方案、比較表、用量估算器、按人數計價、本地貨幣顯示。
- 其他：Hero 區、CTA 橫幅、數據列、導覽列、見證、頁尾、FAQ、Onboarding、部落格內容、聯絡表單，還有一個 Bonus 分類。
每條提詞的頁面長一樣：上面是即時預覽，可以切桌機、平板、手機三種寬度看效果；中間一顆 Copy 按鈕；旁邊寫著「Paste it into Claude, Cursor, v0 or any AI coding tool」。下面再推 5、6 條同分類的相關提詞。
三條提詞拆給你看：一條好的 UI 提詞長什麼樣
與其聽我講，直接看它怎麼寫。下面三條是原文照抄（英文別翻，AI 讀英文版面詞彙最準），每條後面拆給你看它為什麼有效。
第一條：置中卡片註冊（Auth Forms）
Create a centered sign-up card with Tailwind CSS on a soft neutral background. The card is max-w-md, rounded-2xl, with a shadow and a thin border. Include a title, a subtitle with a "Sign in" link, full name / email / password fields, a small password hint, a full-width gradient-free dark submit button, and a legal line about Terms and Privacy at the bottom. Keep spacing generous and inputs comfortable.注意它的順序。先講容器：置中、max-w-md、圓角、陰影、細框。再列元素：標題、副標帶「Sign in」連結、三個欄位、密碼提示、按鈕、法律聲明。最後講手感：間距要寬鬆、輸入框要舒服。一句廢話都沒有，但 AI 沒有任何需要猜的地方。
第二條：三欄定價含主打方案（Pricing）
Create a 3-column pricing section with Tailwind CSS. Each card has a plan name, price with /mo, a short description, a feature list with check icons, and a CTA button. Make the middle "Pro" card visually featured — dark background, a "Most popular" badge, and lifted with a ring/shadow. The outer cards are white with borders. Responsive: stack on mobile, three columns on lg.這條多了兩層：狀態差異（中間那張要深底、掛「Most popular」標籤、浮起來）和響應式規則（手機堆疊、大螢幕三欄）。這兩層正是小白最常漏講的——漏了，AI 就做一個三張一模一樣、手機上擠成一團的定價表。
第三條：側欄加統計卡（Dashboards）
Build a dashboard shell with Tailwind CSS: a fixed left sidebar (logo, nav items with active state, user chip at bottom) and a main area with a top bar (page title + primary button) and a row of four KPI cards, each showing a label, a big value, and a small delta. Keep it light with borders and rounded-2xl cards. Hide the sidebar under lg.做管理系統的人，這條先存起來。它給的是整個後台的「外殼」：固定側欄、頂欄、四張 KPI 卡。你的報名系統、訂單系統、庫存系統，第一版後台長這樣就夠用了——差別只在側欄的選單名稱和 KPI 卡上的數字。
拿來做管理系統，怎麼用才不會白忙
這個網站很好用，但用錯方式會讓你以為「做出來了」，其實只做了一層皮。照下面的順序走：
- 先拆畫面，再去挑提詞。把你的系統需要哪些頁面列出來——通常是登入頁、一張主要的資料表、一個儀表板、幾張表單。列完再去對應分類找，不要反過來在網站上逛到什麼就做什麼。
- 提詞留英文，內容換成你的。「Pro」「Most popular」「full name」這些字眼，貼進 AI 之前直接改成你的方案名、你的欄位名。描述版面的詞彙留英文，AI 讀得最準。
- 貼之前先加一句上下文。在提詞前面補「這是我報名系統的登入頁，沿用專案既有的顏色和字型」，AI 才不會每個區塊都給你一套新配色，最後拼起來像五個網站縫在一起。
- 一次貼一條。這些提詞都是單一區塊，不是整頁。一次丟三條進去，AI 容易把它們混成一團。做完一塊、確認沒問題、再做下一塊。
然後是三個會踩的坑，先講在前面：
- 它只給版面，不給邏輯。拿回來的是 Tailwind CSS 的 HTML，登入按鈕按下去不會真的登入，KPI 卡上的數字是寫死的。接資料、寫判斷，還是得另外請 AI 做——這也是課堂上真正要教的部分。
- 它是區塊，不是系統。256 條裡沒有一條叫「完整的報名管理系統」。系統是你把四、五個區塊挑出來、串起資料之後才會出現的東西。
- 預設是英文網站的字型與語系。提詞沒提中文，出來的版面通常沒設
lang="zh-Hant"、沒有中文字型 fallback。貼之前在上下文那句補上「介面文字為繁體中文」，省得事後一個個改。
就算不用這個網站，也要帶走的東西
真正值錢的不是那 256 條，是它們背後同一套描述法。學會了，以後任何畫面都能自己寫提詞，不必上網找。照剛才那四層，套到「學員報名列表頁」，中文版長這樣：
用 Tailwind CSS 做一個「報名名單」頁面，介面文字為繁體中文，沿用專案既有的顏色與字型。
容器：主內容區 max-w-6xl 置中，上方一條工具列，下方一張資料表卡片（rounded-2xl、細框、淺陰影）。
元素：工具列左邊是頁面標題「報名名單」與總人數，右邊是搜尋框、狀態篩選下拉、「匯出 CSV」按鈕。資料表欄位：姓名、電話、報名日期、付款狀態、操作。
狀態與細節：付款狀態用色塊標籤——已付款綠色、待確認黃色、逾期紅色。滑鼠移到列上淡淡反白。沒有資料時顯示一張空狀態卡，寫「目前還沒有人報名」。
手機版：工具列改成直向堆疊，資料表改成一列一張卡片，欄位名稱顯示在值的左邊。對照一下，這跟 vibeprompts.dev 那三條是同一個骨架，只是換成中文、換成你的業務。寫得出這種提詞的人，已經不是「不會寫程式的小白」了——是一個會把需求講清楚的產品負責人，剩下的交給 AI 去做。
結尾一句話
AI 做不出你要的畫面，九成的原因是你沒講清楚，而不是它不會做。vibeprompts.dev 幫你把「講清楚」這件事先做了 256 遍，拿去抄、拿去拆、拿去學它的順序。
今天先做一件事：打開它的 Dashboards 分類，挑一條你看得順眼的後台外殼，貼進 Claude 跑一次。看到畫面出來的那一秒，你就會知道自己的系統大概長什麼樣了——接下來才是把資料接進去的正事。