Vercel v0 完整教學｜2025 用 AI 生成 UI 程式碼指南
想要快速建立漂亮的 UI 嗎？
v0 是 Vercel 推出的 AI UI 生成工具。
只要用文字描述，它就能幫你生成可用的 React 程式碼。
這篇文章教你如何用 v0 提升開發效率。
什麼是 v0？
v0 是一個 AI 驅動的 UI 生成工具。
核心功能
| 功能 | 說明 |
|---|---|
| 文字轉 UI | 描述你想要的介面，自動生成程式碼 |
| React + Tailwind | 生成標準的 React 元件和 Tailwind CSS |
| shadcn/ui 整合 | 使用高品質的元件庫 |
| 即時預覽 | 立即看到生成的結果 |
| 一鍵複製 | 複製程式碼到你的專案 |
v0 能生成什麼？
- 登入/註冊表單
- 導覽列和頁尾
- 產品卡片
- 定價表
- Dashboard 元件
- 資料表格
- 圖表
- 還有更多...
官方網站
開始使用 v0
註冊帳號
- 前往 v0.dev
- 使用 GitHub 或 Google 登入
- 開始使用
免費額度
v0 有免費使用額度：
- 每月一定的生成次數
- 可以升級訂閱獲得更多額度
第一次生成
步驟一：輸入描述
在輸入框中描述你想要的 UI，例如：
一個現代風格的登入表單，有 email 和密碼輸入框，
還有一個登入按鈕和「忘記密碼」連結
步驟二：等待生成
v0 會生成多個版本供你選擇。
步驟三：選擇和調整
選擇喜歡的版本，可以繼續用文字修改。
步驟四：複製程式碼
滿意後，複製程式碼到你的專案。
寫出好的 Prompt
Prompt 的品質決定生成結果的品質。
基本原則
1. 要具體
❌ 不好：做一個表單
✅ 好：一個聯繫我們表單，包含姓名、email、訊息三個欄位，
有送出按鈕，使用現代簡潔的設計風格
2. 描述視覺風格
✅ 好：一個深色主題的 Dashboard 側邊欄，
有圖標和文字選單項目，
頂部有使用者頭像和名稱，
底部有設定和登出按鈕
3. 提及響應式需求
✅ 好：一個產品卡片網格，
桌面版一排顯示 4 個，
平板一排 2 個，
手機一排 1 個
Prompt 範例
登入頁面：
一個全螢幕的登入頁面：
- 左側有品牌 Logo 和歡迎文字，背景是漸層色
- 右側是登入表單，有 email、密碼輸入框
- 有「記住我」勾選框
- 有 Google 和 GitHub 第三方登入按鈕
- 底部有「還沒有帳號？註冊」連結
- 整體風格現代簡潔
定價表：
一個 SaaS 定價表元件：
- 三個方案：Basic、Pro、Enterprise
- Pro 方案有「最受歡迎」標籤並高亮顯示
- 每個方案顯示價格、功能列表、CTA 按鈕
- 有月付/年付切換開關
- 年付顯示折扣價
Dashboard：
一個 Analytics Dashboard：
- 頂部有四個統計卡片：用戶數、收入、訂單、轉換率
- 中間是一個折線圖，顯示過去 30 天的趨勢
- 右側是最近活動列表
- 底部是一個數據表格
- 整體使用深色主題
進階技巧
迭代修改
v0 支援對話式修改：
用戶：一個產品卡片
v0：[生成基本卡片]
用戶：加上價格和「加入購物車」按鈕
v0：[更新卡片]
用戶：把按鈕改成藍色，加上 hover 效果
v0：[更新樣式]
指定技術棧
使用 shadcn/ui 元件建立一個資料表格，
有排序、篩選、分頁功能
使用 Tailwind CSS 建立一個響應式導覽列，
不要使用任何元件庫
參考設計
類似 Linear 風格的功能介紹區塊，
三欄佈局，每欄有圖標、標題、描述
類似 Stripe 的定價頁面設計，
簡潔現代，有視覺層次
加入動態效果
一個 Hero 區塊，標題要有打字機動畫效果，
背景有微微的漸層動畫
整合到專案
安裝依賴
v0 生成的程式碼通常需要這些依賴：
# Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# shadcn/ui（如果使用）
npx shadcn-ui@latest init
複製程式碼
v0 提供幾種複製方式：
- 複製程式碼 - 純 JSX/TSX 程式碼
- 複製為元件 - 包含完整的元件檔案
- 使用 CLI -
npx v0 add [component-id]
使用 CLI（推薦）
# 安裝特定元件
npx v0 add AbCdEf123
# 程式碼會自動加入到你的專案
手動複製
- 點擊「Copy Code」
- 在專案中建立新檔案，如
components/LoginForm.tsx - 貼上程式碼
- 安裝缺少的依賴
實用範例
範例一：Landing Page Hero
Prompt：
一個 SaaS 產品的 Hero 區塊：
- 大標題：「讓你的工作更輕鬆」
- 副標題描述產品價值
- 兩個按鈕：「開始免費試用」和「觀看 Demo」
- 右側或下方有產品截圖
- 背景有細微的網格圖案
生成結果示意：
export function Hero() {
return (
<section className="relative overflow-hidden bg-gradient-to-b from-slate-50 to-white">
<div className="container mx-auto px-4 py-24">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h1 className="text-5xl font-bold tracking-tight text-slate-900">
讓你的工作更輕鬆
</h1>
<p className="mt-6 text-xl text-slate-600">
我們的產品幫助你自動化繁瑣任務，
讓你專注在真正重要的事情上。
</p>
<div className="mt-8 flex gap-4">
<button className="bg-blue-600 text-white px-6 py-3 rounded-lg">
開始免費試用
</button>
<button className="border border-slate-300 px-6 py-3 rounded-lg">
觀看 Demo
</button>
</div>
</div>
<div className="relative">
<img
src="/product-screenshot.png"
alt="Product"
className="rounded-xl shadow-2xl"
/>
</div>
</div>
</div>
</section>
);
}
範例二：功能比較表
Prompt：
一個功能比較表格，比較三個方案的功能：
- 欄位：功能名稱、Free、Pro、Enterprise
- 用打勾和叉叉顯示是否支援
- 有些功能用文字說明（如「5 個」「無限」）
- 表格有斑馬紋，易於閱讀
範例三：Dashboard 側邊欄
Prompt：
一個 Dashboard 側邊欄：
- 頂部有 Logo
- 主選單：Dashboard、用戶、訂單、產品、設定
- 每個選單項目有圖標
- 目前選中的項目有高亮
- 底部有用戶資訊和登出按鈕
- 可以收合成只顯示圖標
v0 的限制
不適合的情況
1. 複雜的業務邏輯
❌ v0 不擅長：
「建立一個購物車，有優惠碼計算、
運費計算、庫存檢查功能」
✅ v0 適合：
「購物車的 UI 介面」
（邏輯需要自己寫）
2. 即時資料互動
v0 生成的是靜態 UI，資料綁定需要自己加：
// v0 生成的
<div>{price}</div>
// 你需要改成
<div>{product.price}</div>
3. 高度客製化的設計
如果有非常特定的品牌設計規範，可能需要較多調整。
需要調整的部分
- 資料綁定 - 把假資料換成真實資料
- 事件處理 - 加入 onClick、onSubmit 等
- 狀態管理 - 加入 useState、useContext 等
- 樣式微調 - 根據品牌調整顏色、字體
與 Vercel 部署整合
完整流程
- 在 v0 生成 UI 元件
- 複製到 Next.js 專案
- 加入業務邏輯和資料
- Push 到 GitHub
- Vercel 自動部署
範例工作流程
# 1. 建立 Next.js 專案
npx create-next-app@latest my-app
# 2. 安裝 shadcn/ui
npx shadcn-ui@latest init
# 3. 使用 v0 CLI 加入元件
npx v0 add login-form
# 4. 開發和測試
npm run dev
# 5. 部署
git push origin main
# Vercel 自動部署
常見問題 FAQ
Q1：v0 是免費的嗎？
有免費額度，但有使用限制。可以付費升級獲得更多額度。
Q2：生成的程式碼品質如何？
品質很好，使用 React 最佳實踐和 Tailwind CSS。
但仍建議：
- 檢查 accessibility
- 根據專案需求調整
- 加入適當的錯誤處理
Q3：可以商業使用嗎？
可以。v0 生成的程式碼可以用於商業專案。
Q4：v0 和 ChatGPT 生成程式碼有什麼不同？
- v0 專為 UI 設計，結果更一致
- v0 使用 shadcn/ui，元件品質高
- v0 有視覺預覽
- v0 和 Vercel 生態整合更好
Q5：支援 Vue 或其他框架嗎？
目前主要支援 React。
其他框架可以：
- 參考 v0 的設計，手動轉換
- 使用 AI 轉換程式碼
最佳實踐
1. 先設計再生成
先有大致的設計想法，再用 v0 快速實現。
2. 迭代優化
不要期望一次生成完美結果，多次迭代調整。
3. 建立元件庫
把常用的 v0 生成結果整理成團隊元件庫。
4. 結合手動開發
v0 生成 80%，手動精修 20%。
5. 保持程式碼一致
調整 v0 生成的程式碼，符合團隊程式碼風格。
Vercel 部署失敗？
Build Error、環境變數、自訂網域，我們幫你快速排除問題。