AI 做的網站畫面很陽春？VibeUI：92 個免費 UI 提示詞，複製貼給 Claude、Cursor 就能用

用 Lovable、Cursor、Bolt、v0 或 Claude 做網站，功能很快就能做出來，但畫面常常有一種「AI 味」：版面平平的、區塊都長一樣、看起來很陽春。

問題通常不在 AI，而在你給的指令太模糊。「幫我做一個首頁」和「做一個左右分欄的主視覺：左邊標題、副標和兩個按鈕，右邊放產品截圖」，做出來的東西差非常多。

這篇介紹一個免費網站 VibeUI：整理了 92 個 UI 版面提示詞，按分類排好，複製就能貼給你的 AI 寫程式工具。

VibeUI 是什麼？

項目	內容
網址	https://vibeui.online/
提示詞數量	92 個
分類	15 種
價格	免費，不用註冊、不用登入
適用工具	Claude、Cursor、Lovable、Bolt、v0 等

注意不要跟 vibeui.dev 搞混，那是另一個 React 元件庫，跟這個無關。

15 種分類，網站常用區塊都有

分類	數量	分類	數量
Hero Sections（首頁主視覺）	8	Testimonials（客戶評價）	8
Pricing（價格表）	8	Nav Bars（導覽列）	8
Features / Bento（功能介紹）	8	Stats Bars（數據列）	7
CTA Banners（行動呼籲橫幅）	7	Auth Forms（登入註冊）	6
Dashboards（後台儀表板）	6	Footer（頁尾）	5
FAQ（常見問題）	5	Bonus（加碼）	5
Onboarding（新手引導）	4	Blog / Content（文章）	4
Contact（聯絡我們）	3

每張卡片都有一張線框示意圖、標題、一句說明，以及「Copy prompt」按鈕。

提示詞長什麼樣子？

以 Hero Sections 裡的「Split hero」為例，網站上的原文是：

Create a hero section as a split layout — heading, subheading, and CTAs on one side, and a product mockup or visual on the other. Match the visual style, colors, typography, and overall aesthetic of my existing UI.

翻成中文大意是：「做一個左右分欄的主視覺區塊：一邊放標題、副標和行動按鈕，另一邊放產品示意圖或視覺。配合我現有介面的視覺風格、顏色、字體和整體美感。」

再看價格表的「Monthly/annual toggle」，它會要求：上方有月繳／年繳切換，年繳選項旁邊有「省 X%」標籤，切換時價格要跟著變。

這套提示詞的設計重點

它只描述版面結構，不規定視覺風格。 每一段最後都會加上「配合我現有的風格」這句，所以 AI 會沿用你網站原本的配色和字體，不會突然做出一個風格完全不同的區塊。

網站也建議：如果你還沒有風格，可以附一張你喜歡的網站截圖一起貼給 AI，讓它照那個感覺做。

怎麼用？三步驟

打開 https://vibeui.online/ ，從左邊分類找到你要的區塊（例如 Pricing）。
挑一個喜歡的版型，按 Copy prompt。
貼到 Claude、Cursor 或 Lovable，可以再補一句你的需求，例如：「價格分成免費、專業、團隊三種方案，幣別用新台幣。」

小技巧

一次只做一個區塊：首頁主視覺做完、看順眼了，再貼下一個（價格表、客戶評價…），比一次要整頁的品質好很多。
加上你的內容：提示詞只管版面，你的品牌名稱、文案、方案內容要自己補進去。
附截圖：想要特定風格，就附一張參考截圖。

誠實提醒：橘色按鈕是付費工具

每張卡片除了「Copy prompt」，還有一個橘色的 Generate in GlowUp 按鈕。GlowUp UI 是另一個付費的 AI 設計工具（官網方案為每月 9、16、28 美元），VibeUI 網站本身有在幫它導流：按下 Copy prompt 時也會跳出 GlowUp 的推廣視窗。

你不需要用它。 推廣視窗下方有「Just copy the raw prompt for now」的小連結，而且提示詞其實在你按下按鈕時就已經複製好了，關掉視窗直接貼上就行。只用提示詞的話，完全免費。

適合誰？

用 AI 做網站、但總覺得畫面不夠專業的人。
不知道「一個好的價格表／首頁該有哪些元素」的非設計背景開發者。
想快速做出 landing page 測試市場的創業者。

如果你本來就有設計稿，直接把設計稿截圖給 AI 會更準；VibeUI 比較適合「還沒有設計、想要一個合理版型起點」的情況。

連結

VibeUI：https://vibeui.online/

更多 AI 做網站的小技巧，追蹤 IG @aihub.tw。