・什麼是 v0.dev？
・ v0.dev 核心概念與功能特點
| 項目 | 內容說明 |
|---|---|
| 定義 | 由 Vercel 開發的生成式 AI UI 工具，扮演懂設計、懂程式碼的「AI 建築師」。 |
| 技術標準 | 生成符合現代工業標準的 React, Tailwind CSS, Radix UI 代碼。 |
| 主要功能 | 生成式 UI、迭代修正、工業級代碼輸出、一鍵複製。 |
| 特點 | 可透過對話不斷修正成品，而非產出後即定案。 |
・ v0.dev 介面導覽
| 區域 | 功能描述 |
|---|---|
| 輸入框 (Prompt Input) | 位於上下方，用於輸入功能描述或需求指令。 |
| 預覽視窗 (Preview) | 佔據大面積，展示 AI 生成 UI 的即時樣貌。 |
| 代碼視窗 (Code Editor) | 顯示 React (JSX) 程式碼，可檢查結構或直接複製。 |
・ 標準操作流程 (四步驟)
| 步驟 | 動作 | 細節指引 |
|---|---|---|
| Step 1 | 輸入指令 (Prompting) | 輸入需求，指令越具體越好（包含元件、功能、樣式）。 |
| Step 2 | 預覽與溝通 (Iterating) | 基於初步結果提出修改（如：圓角調整、深色模式、響應式佈局）。 |
| Step 3 | 檢查程式碼 (Inspecting) | 切換至 Code 分頁，確認 Import 與 JSX 結構。 |
| Step 4 | 複製並應用 (Copying) | 點擊 Copy，貼入本地專案 (.tsx) 即可完成開發。 |
💡 給新手的教練建議
別只會複製貼上：把 v0 當成教練，試著看懂它為什麼用 div 或 p-4 等語法，這能幫你快速學習什麼是好的 React 寫法。
動手試試看：試著輸入：「請幫我做一個簡潔的個人履歷卡片，包含姓名、職稱、一段簡介和一個頭像。」
・ 前置準備：Figma 稿件的 AI 預處理
・ Auto Layout 轉化法則 (Flexbox 原理)
・圖層語意化命名對照表
・Framer AI 核心功能與 Prompt 工程
💡 二次優化機制：當設計稿匯入 Framer 後，即可借助 Framer 內建的大型語言與佈局模型（Framer AI Engine）進行自動化佈局重構成型、RWD 斷點生成與自然語言風格調教。
| Framer AI Engine 核心分枝 | 功能定義與自動化運作範疇 | 解決之設計痛點與轉譯效益 |
|---|---|---|
|
引擎功能 01 Make Responsive |
自動生成跨裝置 RWD 斷點，並轉譯橫向/縱向排版。 | 消除手動為每個螢幕尺寸重複排版的繁瑣工序。 |
|
引擎功能 02 Stack Restructure |
自動掃描圖層關係，重組為 Flexbox 驅動的 Stacks 容器。 | 修正絕對定位造成的跑版問題，建立約束邊界 (Min/Max Width)。 |
|
引擎功能 03 Text & Style Prompts |
解析自然語言指令，微調全站或區域之字級、顏色與 CMS。 | 無需深層選取圖層，即可快速進行批量樣式與資料調整。 |
・ 自動響應式重構 (Make Responsive)
| 核心機制單元 | 詳細運作流程與技術動作 | AI 自動化轉譯成果 |
|---|---|---|
|
運作機制 (Mechanism) |
1. 選取匯入的 Frame 區塊。 2. 點擊右側控制面板的 Make Responsive 按鈕。 3. AI 深度掃描內部圖層結構關係。 |
• 自動將內層轉化為以 Flexbox 驅動的 Stacks。 • 自動建立邊界限制（如 Min Width / Max Width），確保拉伸不破版。 |
|
斷點推導 (Breakpoints) |
1. 點擊畫布頂部的 + Breakpoint。 2. AI 自動演算法推導並生成彈性畫布：
|
• 自動將 Desktop 的橫向排列（Row）轉譯為 Phone 的縱向排列（Column）。 • 自動調整欄位間距 (Gap) 與內距 (Padding)。 |
・ Framer 自然語言 Prompt 指令撰寫速查表
可於 Framer Canvas 頂部 AI 控制框或選取特定元件後輸入，進行局部或全域微調：
| Prompt 微調類別 | 💡 常用 Prompt 指令範例 (可直接複製) | AI 執行效益與調整範疇 |
|---|---|---|
| 佈局重構 | 「將這個 Card Grid 在 Phone 斷點改為單欄縱向排列，間距（Gap）設為 16px。」 | 重構手機端卡片網格，將原本的多欄改為單欄縱向流動，修正擠壓。 |
| 字體級距 | 「自動調整手機端標題字級，h1 降為 28px，h2 降為 22px，內文維持 16px。」 | 自動批量更換手機端排版階層，解決小螢幕文字過大折行問題。 |
| 視覺樣式 | 「將此按鈕加上 Hover 狀態：放大 1.05 倍，並加入 0.2 秒的背景光暈轉場。」 | 無需手動建立 Variant，自動生成 Hover 懸浮微互動與 Transition 動畫。 |
| CMS 欄位 | 「為這個 Blog 區塊生成 3 筆範例文章的 CMS 動態卡片與封面圖。」 | 自動建立 CMS 資料集與欄位綁定，充填真實範例圖文（Mock Data）。 |
・實作 SOP 5 大步驟
1 匯出與匯入
➔
2 AI 結構重組
➔
3 RWD 斷點適配
➔
4 微互動與動畫
➔
5 SEO 與發布
・ Step 1：Figma 至 Framer 複製與匯入(Copy & Import)
| 執行動作類別 | 詳細操作指引與流程說明 | 參數 / 快捷鍵 / QC 指標 |
|---|---|---|
| 1.1 Figma 稿件選取 | 開啟專題 Figma 稿件，確認目標 Section 區塊已完成 100% Auto Layout 與語意化命名。點選欲匯出的根層級 (Root Frame)。 |
Selection: Root Section 必須選取最高階層 Frame |
| 1.2 呼叫官方外掛 | 在 Figma 中開啟 Quick Actions 選單，搜尋並執行官方開發之 Figma to Framer 外掛插件。 |
Cmd + P (Mac) Ctrl + P (Win) 搜尋：Figma to Framer |
| 1.3 轉換與複製資料 | 點擊外掛 UI 面板上的 "Copy to Framer" 按鈕。外掛將自動將 Figma 的 Auto Layout 屬性與向量素材包裝為 Framer 可解析的剪貼簿 JSON 數據。 |
💡 提示：複製成功後，系統會顯示 "Copied to clipboard!" 提示。
|
| 1.4 貼入 Framer Canvas | 切換至已開啟的 Framer 專案畫布 (Canvas)，直接按下貼上快捷鍵，將數據無縫轉譯為 Framer 圖層結構。 |
Cmd + V (Mac) Ctrl + V (Win) 驗收：確認圖層完整載入 |
・ Step 2：AI 結構重組與 Stacks 修復
| 執行動作類別 | 詳細操作指引與流程說明 | 關鍵屬性 / 避坑要點 |
|---|---|---|
| 2.1 跑版檢查與重組 | 檢查貼上後的視覺效果。若出現圖層重疊或位置偏移，選取該 Frame，於右側控制面板的 Layout 區塊點擊 + 號，強制轉換為標準 Stack。 |
Layout: Stack 轉譯為 Flexbox 排版 |
| 2.2 尺寸約束調整 |
依據響應式邏輯調整尺寸屬性：
|
Width: Fill / Hug Height: Hug 避免寫死像素固定值 |
| 2.3 消除絕對定位 | 檢查圖層之 Position 屬性。除特殊裝飾性背景圖案外，其餘內容元件均需確保設定為 Relative，避免拉伸時發生碰撞錯位。 |
❌ Position: Absolute ✅ Position: Relative 根除跑版主因 |
| 2.4 邊界限制設定 | 為大尺寸 Banner 或卡片設定適當的邊界最大寬度（Max Width），防止超大螢幕延伸時版型過度拉寬變形。 |
Max Width: 1200px 保持寬螢幕最佳閱讀體驗 |
・ Step 3：AI 驅動 RWD 斷點適配 (Desktop / Tablet / Phone)
| 執行動作類別 | 詳細操作指引與流程說明 | 斷點數值 / 手動 QC 項目 |
|---|---|---|
| 3.1 新增跨裝置斷點 | 點擊 Framer Canvas 右上角的 + Breakpoint 按鈕，依序建立平板與手機螢幕適配畫布。 |
Desktop: 1200px+ Tablet: 810px Phone: 390px |
| 3.2 啟用 AI 自動重構 | 選取畫布上的 Section，點擊右側面板的 Make Responsive 按鈕。Framer AI 將自動推導橫向 (Row) 轉縱向 (Column) 排版，並自動更新 Phone 斷點佈局。 |
🤖 AI 動作：自動重算 Gap、Padding 並調整圖層折疊順序。
|
| 3.3 文字與圖片 QC |
切換至 Phone (390px) 斷點進行手動細節檢核：
|
QC: 檢測橫向滾動條 確保手機端無溢出 (No Overflow) |
| 3.4 導覽列組件切換 | 將頂部導覽列於 Phone 斷點切換為適應行動端的漢堡選單 (Hamburger Menu) 互動組件。 |
Navbar ➔ Mobile Overlay 確保手機端導覽體驗順暢 |
・ Step 4：AI 動畫與微互動 (Effects & Transitions)
| 執行動作類別 | 詳細操作指引與流程說明 | 動畫參數 / 模組化設定 |
|---|---|---|
| 4.1 滾動登場動畫 | 選取目標卡片或文字區塊，於右側控制面板點擊 Effects ➔ Appear Animation 或 Scroll Variant。 |
Trigger: Scroll Into View 提升頁面動態滾動質感 |
| 4.2 設定 Transition 參數 | 配置登場動畫參數：設定初始狀態為透明度 Opacity: 0、Y 軸偏移 Offset Y: +20px，並設定 0.4 秒的淡入位移轉場。 |
Duration: 0.4s Ease: Ease-Out 保持自然平滑的動畫曲線 |
| 4.3 懸浮 Hover 微互動 | 為按鈕或卡片加上 Hover 懸浮效果：設定滑鼠懸停時微幅放大 Scale: 1.03，並加入背景光暈或陰影加深。 |
Hover State: Scale 1.03 賦予視覺明確的可點擊反饋 |
| 4.4 頁面重複組件化 | 選取頂部 Header 或頁尾 Footer，按右鍵點擊 Create Component，將其轉為全站通用組件，實現修改單一組件即同步更新全頁面。 |
Cmd + Option + K 建立可重用 Component |
・ Step 5：SEO、OpenGraph 與一鍵部署
| 執行動作類別 | 詳細操作指引與流程說明 | 欄位填寫規範 / 發布網址 |
|---|---|---|
| 5.1 進入頁面設定 | 點擊 Framer 介面左上角 Settings 齒輪圖示 ➔ 選取 Page Settings，進入全站與單頁 SEO 控制台。 |
Settings ➔ Page Settings SEO 與社群卡片設定中心 |
| 5.2 填寫 Meta 搜尋資訊 |
設定網頁 Title 與 Description：
|
Title: 2026 數位展示館 優化搜尋引擎 (Google) 檢索 |
| 5.3 上傳 OG 與 Favicon 素材 | 上傳 OpenGraph Image（LINE / Facebook 社群分享預覽圖）與 Favicon（瀏覽器頁籤圖示），提升專案正式度與品牌辨識度。 |
OG Image: 1200 x 630 px Favicon: 32 x 32 px 社群分享卡片必備 |
| 5.4 一鍵正式上線部署 | 點擊畫布右上角的 Publish 按鈕，設定自訂的免費次網域（如 *.framer.app）或綁定自訂 Domain，點擊發布取得公開網址。 |
Demo: *.framer.app ✓ 產出公開 Demo URL |
・常見坑點與除錯對照表 (Troubleshooting)
本週作業
🚨 除錯原則：當轉譯或佈局出現異常時，優先檢查 Figma 圖層結構（Mask、Fixed Width、無嵌套包覆）與字體授權，通常 90% 以上的問題均可在前處理與屬性調整中修復。
| 異常現象 (Issue) | 根本原因 (Root Cause) | 排除 SOP 修正指引 (Solution) |
|---|---|---|
|
⚠️ 貼上後圖片變成空白或框線
|
ROOT CAUSE Figma 圖片採用了複雜遮罩（Mask）或未下載的雲端圖檔。 |
FIX SOP 在 Figma 中選取圖片 Frame，按下 Cmd + Option + C 複製為 PNG，再貼回 Framer。 |
|
⚠️ 手機端斷點出現橫向滾動條（跑版）
|
ROOT CAUSE 某些內層元素設定了超過 390px 的 Fixed Width 固定寬度。 |
FIX SOP 將該元素寬度改為 Fill 或設定 Max Width: 100%。 |
|
⚠️ Framer AI Make Responsive 失敗
|
ROOT CAUSE 原 Figma 稿件缺乏階層結構，全塞在同一層 Root Frame 中（無 Auto Layout / Stacks）。 |
FIX SOP 在 Framer 中手動選取相關元素，按下 Cmd + Option + G 包裹為 Stack 後再讓 AI 處理。 |
|
⚠️ 字體與 Figma 原稿不一致
|
ROOT CAUSE 原稿使用了本地特殊字體，Framer 雲端庫無此字型。 |
FIX SOP 於 Framer 左上角 Settings ➔ Fonts，手動上傳 .woff2 字體檔或切換為 Google Fonts。 |
・ Deliverable 作業驗收標準
本週作業
完成實作後，請勾選確認滿足以下 4 大核心提交驗收指標，並將公開連結與成果提交至課程平台。
| 驗收狀態 | 交付成果項目 (Deliverable) | 詳細驗收標準與規格細節 | 提交與 QC 審查規範 |
|---|---|---|---|
|
Framer 正式上線網址
(Public Demo URL)
|
發布至 Framer 免費次網域（如 *.framer.app）或自訂網域，且可順利透過一般瀏覽器直接開啟訪問。 |
|
|
|
3 斷點響應式覆蓋
(Responsive Breakpoints)
|
完整適配並涵蓋 3 大裝置斷點：
|
|
|
|
SEO 基礎配置
(Search Engine Meta)
|
於 Page Settings 完成基本 Search/Social 元數據設定：
|
|
|
|
至少 1 處動態效果
(Animations & Micro-Interactions)
|
頁面中包含至少一處動畫微互動效果：
|
|
📌 課程平台提交提醒：請登入課程後台，將 Public Demo URL 貼入本週作業提交欄位，助教團隊將依據上述 4 項標準進行線上評分與反饋！