進階網頁設計｜課程講義

Advanced Web Page Design

Claude 網頁開發入門：從 0 到 1

Author

JinJin Wang

September 16, 2026

・為什麼選擇 Claude？

・ Claude 核心概念與功能特點

Claude 的 Artifacts (生成預覽功能) 是目前最強大的學習利器。它能讓你輸入文字後，直接在聊天介面右側彈出一個「即時預覽視窗」，讓你不用安裝任何程式，就能看到寫出來的網頁長什麼樣子。

核心概念說明
Artifacts (生成預覽)Claude 的靈魂功能，能在對話視窗右側即時渲染 HTML/React 網頁。
生成式代碼能理解自然語言，自動產出乾淨、標準的網頁結構。
迭代式學習支援「對話式修正」，你可以隨時說：「這個按鈕變小一點」，它會自動改好。
跨語言理解中文指令即可生成專業代碼，適合初學者學習程式架構。
event design
Claude 網頁開發核心架構

・ Claude 介面導覽

介面區塊功能用途
對話輸入框 (Chat)位於左側或底部，輸入開發指令與需求描述的地方。
Artifacts 預覽視窗位於右側，自動顯示網頁的實際長相，支援互動測試。
代碼檢視器 (Code)於 Artifacts 內切換至「Code」分頁，可查看並複製 HTML/CSS/JS 原始碼。
event design
Claude 介面導覽

・ 標準操作流程 (SOP)

階段 動作 關鍵指引
Step 1輸入指令 (Prompting)使用「角色 + 任務 + 技術 + 細節」的框架下達指令。
Step 2預覽與溝通 (Iterating)觀察右側 Artifacts，若不符合預期，繼續對話修正細節。
Step 3代碼檢視 (Inspection)進入 Code 頁面閱讀結構，培養對 HTML/CSS 的語感。
Step 4成品發布 (Publishing)確認成品滿意後，點選 Publish 產生連結，或複製原始碼至本地環境開發。

・ Prompt 工程：金字塔原則教學

・ 金字塔原則教學

寫 Prompt 時，請使用以下「金字塔原則」：

架構元件內容範例
角色 (Role)「你是一位專業的網頁前端工程師...」
技術 (Tech)「使用 HTML, Tailwind CSS 進行開發...」
目標 (Goal)「設計一個簡潔的個人履歷網頁...」
細節 (Details)「深色模式、響應式佈局、包含聯絡表單...」

撰寫 Prompt 的最高指導原則是「金字塔原則」：從最宏觀的背景設定，逐層收斂至最細節的技術要求。這樣可以確保 AI 輸出的內容既符合你的專業需求，又能精準執行細部操作。

架構元件 核心定義 內容範例
角色 (Role) 定義 AI 的專業身份，決定輸出風格與深度。 「你是一位擁有 10 年經驗的資深網頁前端工程師，擅長 React 與 Tailwind CSS...」
目標 (Goal) 明確定義任務的產出物是什麼。 「請設計一個現代化、簡潔的個人履歷網頁，目標是展示我的技術專長與經歷...」
技術 (Tech) 規範開發環境與使用的語言架構。 「使用 HTML, Tailwind CSS 進行開發，確保代碼模組化，並使用 Lucide React 圖標...」
細節 (Details) 補充限制條件、互動邏輯與特殊需求。 「啟用深色模式、響應式佈局 (Mobile-first)、包含聯絡表單驗證、按鈕 Hover 要有平滑特效...」

・Prompt 工程：金字塔原則詳細解析表

架構元件 詳細說明 核心價值 (Why it matters) 指令關鍵字
1. 角色 (Role) 定義 AI 的專業身份。設定為「程式設計導師」它會教你原理；設為「資深工程師」它會給你產業界標準代碼。 決定了 AI 的輸出風格與專業深度，避免得到平庸的答案。 你是一位...
2. 目標 (Goal) 定義範疇，避免過度發散。明確說出「做一個展示履歷的 Landing Page」而非「做一個網頁」。 鎖定 UI/UX 的方向性，讓 AI 的設計決策更精準。 目標是...
3. 技術 (Tech) 限制使用的工具與框架。例如指定 Tailwind CSS 保證樣式具備現代感與易維護性。 確保產出的程式碼符合你的開發環境，避免使用過舊或不適用的語法。 請使用...
4. 細節 (Details) 防禦性提示，加入「響應式」、「深色模式」、「驗證機制」等功能需求。 這是避免 AI 給出「空有其表」的網頁的關鍵，能大幅提升功能的實用性。 請包含...

🎨 設計師專屬：網站開發 Prompt 模板

設計師製作網頁時，最在乎的是「視覺精準度」。以下這組 Prompt 幫助你將設計語言精確轉換為程式語言：

「你是一位資深的前端開發工程師，同時也是一位極具設計品味的 UI/UX 專家。你非常在意視覺層級 (Visual Hierarchy)、負空間 (Whitespace) 與細節質感。

目標是產出一個極簡風格的個人作品集 (Portfolio) Landing Page。

請使用 Next.js 與 Tailwind CSS 開發。在設計細節上，請滿足：
1. 採用精緻的網格系統 (Grid System)，並保留充足的負空間。
2. 字體排版需強調標題與內文的強烈對比，呈現雜誌感。
3. 圖片呈現需具備 Hover 時的平滑縮放與淡入特效。
4. 需確保響應式設計，並提供簡單的深色模式切換功能。
5. 並提供模擬 JSON 資料供前端渲染作品集。」
架構元件設計師視角的專業註解
角色 (Role)強調「設計品味」，讓 AI 不會產出過於工程導向、呆板的介面。
目標 (Goal)指定「極簡風格」與「作品集」，設定了整體的視覺調性。
技術 (Tech)Next.js 與 Tailwind 是目前最適合設計師「無痛轉前端」的現代化組合。
細節 (Details)這是設計師展現功力的關鍵：強調 Grid、Typography、Hover 效果，AI 就會自動加入 CSS transition。

💡 給設計師的實戰建議：

如果產出的介面顏色不對，請直接說：「請將背景色調整為 #FAFAFA，這是設計稿中的暖灰色調」；如果間距不對，請說：「請增加 Section 之間的 Padding，目前顯得太擁擠了」。使用你原本就熟悉的設計術語與 AI 對話，效果會最好！

💡 實戰公式：一鍵複製模板

請將此段模板複製，並填入你的需求：

「請扮演一位 [角色]，目標是產出一個 [目標]。請使用 [技術] 開發。在設計細節上，請滿足：[細節]。並提供模擬 JSON 資料供前端渲染。」

・10 種全場景網頁開發 Prompt 深度拆解庫

這份清單將 Prompt 拆解為「金字塔四大架構」，幫助學生精準指揮 Claude/v0 產出高品質代碼。

專案類型 金字塔架構拆解 (Role/Goal/Tech/Details) Prompt 實戰範例
1. Landing Page
  • Role: 專業前端
  • Goal: 個人形象展示
  • Tech: Tailwind CSS
  • Details: Hero區、技能標籤、RWD
 「請幫我設計一個個人 Landing Page，包含 Hero 區塊、技能標籤展示區、以及聯絡表單。使用 Tailwind CSS，配色採用專業的藍白色系，手機版要能自動變成單欄佈局。」
2. 數據儀表板
  • Role: 產品設計師
  • Goal: 銷售監控
  • Tech: Lucide React
  • Details: 側邊導航、排序表格、數據卡片
 「請設計一個數據儀表板 (Dashboard) 介面。包含左側導覽列、上方搜尋欄、以及中間的數據卡片區。使用 Lucide React 圖標，確保表格具備排序功能。」
3. BMI 計算器
  • Role: 工具開發者
  • Goal: 邏輯運算
  • Tech: HTML/CSS/JS
  • Details: 輸入欄位、狀態顏色判定
 「請幫我製作一個 BMI 計算器。包含身高體重輸入欄、計算按鈕。結果需根據數值顯示顏色（過輕、正常、過重）。程式碼需包含完整的 HTML/CSS/JS。」
4. 電商產品頁
  • Role: 電商專家
  • Goal: 商品導購
  • Tech: React State
  • Details: 商品大圖、規格切換、購物車按鈕
 「設計一個電商產品詳情頁。包含商品圖、規格選擇器（顏色/尺寸）、價格與『加入購物車』按鈕。滑鼠移到圖片需有放大效果。」
5. 知識部落格
  • Role: 內容編輯
  • Goal: 高閱讀性
  • Tech: Tailwind Typography
  • Details: 分類標籤、卡片式清單、閱讀時間統計
 「設計一個部落格列表頁。包含精選文章區、分類標籤、卡片式列表。字體需採用襯線體以提升閱讀舒適度。」
6. 任務管理系統
  • Role: 應用工程師
  • Goal: 生產力工具
  • Tech: React Hooks
  • Details: 新增/刪除邏輯、狀態篩選
 「製作一個待辦事項 (To-do List) 頁面。包含輸入欄、勾選完成、刪除任務與狀態統計。使用 React State 管理任務狀態。」
7. 餐廳訂位頁
  • Role: 服務體驗設計
  • Goal: 預約轉化
  • Tech: Form Validation
  • Details: 日期選擇、時段表單、優雅視覺
 「設計一個餐廳訂位預約頁。包含日期選擇器、人數選擇器、時段預約表單。風格優雅高級，表單需包含簡單的輸入驗證。」
8. 活動報名頁
  • Role: 活動策展人
  • Goal: 報名註冊
  • Tech: Countdown Logic
  • Details: 倒數計時、講者介紹、動態按鈕
 「設計一個研討會報名頁。包含活動倒數計時器、講者介紹卡片、報名表單。設計需強調緊迫感與專業度。」
9. 天氣查詢 App
  • Role: UI 開發者
  • Goal: 資訊呈現
  • Tech: API Concept
  • Details: 氣象圖示、溫度數值、城市搜尋
 「設計一個天氣查詢 App 介面。顯示當前溫度、天氣圖示、未來 3 天預報。包含輸入城市名稱查詢的功能。」
10. 作品集藝廊
  • Role: 藝術總監
  • Goal: 視覺展示
  • Tech: CSS Masonry
  • Details: 瀑布流排版、懸停互動動畫
 「設計一個攝影作品集藝廊。使用 Masonry (瀑布流) 排版，滑鼠懸停圖片時顯示作品名稱與攝影師說明。響應式排列。」

💡 給學生的操作心法：

  • Landing Page 關鍵： 在於「視覺」，所以你要多著墨於「配色」、「版面配置」。
  • Dashboard 關鍵： 在於「層次」，所以你要明確告訴 AI 要有哪些「功能區塊」。
  • 計算工具 關鍵： 在於「邏輯」，所以你要明確列出「輸入」是什麼、「結果呈現」的變化（顏色變化）是什麼。

・實戰案例：極簡咖啡廳 Landing Page 開發

我們將以「設計一個現代化咖啡廳網頁」為例，演練 Claude 的開發四步驟。

  1. Step 1：定義需求 (運用上述 Prompt 模板)。
  2. Step 2：觀察 Artifacts (Claude 會產出預覽，檢查是否符合需求)。
  3. Step 3：迭代微調 (直接對 Claude 說：「把按鈕放大」、「把顏色改亮一點」)。
  4. Step 4：發布成品 (若滿意，可點擊 Artifacts 右下角的「Publish」或複製程式碼貼入 Vercel 部署)。
event design
實作教學重點：Claude 開發心法

・ Step 1：定義需求 (運用 Prompt 模板)

在 Claude 輸入框中，根據金字塔原則下達指令：

「你是一位專業的前端工程師。目標是設計一個極簡的咖啡廳 Landing Page。技術使用 Tailwind CSS。細節要求：暖色系配色、Hero 區塊包含一杯咖啡的高清背景圖、下方放置『今日特選』三個卡片，並確保手機版為單欄佈局。」
輸入 Prompt 指令...

・ Step 2：觀察 Artifacts (預覽產出)

按下 Enter 後，右側會出現 Artifacts 視窗，即時渲染出咖啡廳網頁的雛形。

網頁雛形 (Hero + 特選卡片) ← 檢查是否符合需求

・ Step 3：迭代微調 (優化細節)

發現特選卡片的圖片太小？直接在聊天框補充指令：

「特選卡片的圖片看起來太小了，請把它放大一點，並把背景色改為更淺的奶油色，讓文字對比更強烈。」
Claude 自動重繪代碼

・ Step 4：發布成品 (Vercel 或直接部署)

當畫面滿意後，查看右側視窗下方的選項：

  • 點擊 Artifacts 右下角的 Publish，直接獲取臨時公開網址。
  • 點擊 Code 分頁，複製 React/HTML 代碼，貼入你的 GitHub 專案並透過 Vercel 部署。
🚀 Publish / Deploy

・網頁開發與選品實戰地圖

網頁開發與選品實戰地圖

這份地圖將「市場調查」與「技術開發」銜接，讓學生從 W01 開始規劃，W18 成功發布網站。

階段週期核心任務關鍵工具
PART 1: 選品與調查 W01 ~ W09 市場分析、競品研究、成本估算、選定銷售商品。 Claude NotebookLM ChatGPT
PART 2: 生成前端視覺 W10 ~ W13 風格定義、UI 介面參考、設計構圖 (Wireframe)。 Pinterest ChatGPT (Image)
PART 3: 生成導購網頁 W14 ~ W18 將設計轉為 Code、互動實作、串接部署、上線發布。 Web Design Clip Claude/v0 Cloudflare

流程示意圖

PART 1: 選品 (W01-W09) Claude / NotebookLM / ChatGPT PART 2: 視覺 (W10-W13) Pinterest / ChatGPT Image PART 3: 導購 (W14-W18) Web Design Clip / Claude / Cloudflare

💡 重點：

  • W01-W09 (紮根期)： 強調 AI 的「分析能力」。利用 NotebookLM 整理龐大的市場資料，確保選品方向正確，這直接決定了網站賣不賣得出去。
  • W10-W13 (美感期)： 強調 AI 的「生成與參考」。不一定要從頭設計，善用 Pinterest 與 ChatGPT 圖像生成，先產出 Moodboard (風格板)。
  • W14-W18 (實作期)： 將前兩階段的「數據」與「視覺」合體。這就是我們之前強調的 Claude/v0 實作流程，將設計圖與市場定位，透過 Prompt 轉化為 Cloudflare 上的真實網頁。

・給初學者的心法

本週作業

不要害怕看程式碼： 當 Claude 產出 Artifacts 後，切換到 Code 模式看一看。試著找找看 <h1> 是哪裡，或者哪一段是顏色設定。這就是你學習網頁設計的第一步。

除錯小技巧： 如果網頁跑版了，直接對 Claude 說：「目前手機版看起來很亂，請幫我修正它的 CSS，讓它在手機上排版更順暢。」

・ Claude x Figma 協作：
設計轉程式碼的黃金工作流

設計師（Figma）與工程師（Claude）的分工合作：Figma 負責「規劃藍圖」，Claude 負責「施工建造」。

・ 協作流程概覽

event design
Figma × Claude 設計轉程式碼工作流
階段任務目標
設計 (Figma)規劃 Auto Layout 與組件確保設計符合開發邏輯 (Flexbox)
匯出 (Capture)取得介面快照或元件數據提供 AI 視覺參考
開發 (Claude)輸入截圖 + Prompt 生成代碼快速產出與設計一致的 UI
迭代 (Refine)人工修正與對齊細節優化細部互動與數據串接

設計師與前端開發的鴻溝，可以透過「結構化設計」與「視覺提示」有效彌合。以下是標準化的專業工作流程：

階段 具體行動步驟 (Actionable Steps) 核心邏輯 (Why it works)
1. 設計 (Figma) 規劃架構
  • 廣泛使用 Auto Layout，模擬 HTML Box Model。
  • 定義 Design System (字體、色票、間距單位)。
  • 組件化設計 (Button, Card, Navbar)。
 Auto Layout 的「排列與間距」邏輯，直接對應 CSS 的 Flexbox 與 Grid。定義清晰的設計系統，能讓 Claude 生成更乾淨的 CSS 變數。
2. 匯出 (Capture) 準備素材
  • 針對關鍵頁面進行高畫質截圖。
  • 標註重要樣式 (如：顏色 HEX 碼、字級大小)。
  • 整理需要導出的 SVG 圖標。
 Claude 具備強大的「視覺辨識能力」。提供精確的截圖與關鍵參數，可大幅降低 AI 在「還原度」上的猜測誤差。
3. 開發 (Claude) 視覺提示 (Vision Prompting)
  • 上傳截圖並下達 Prompt：描述版面結構與元件邏輯。
  • 指定技術框架 (React + Tailwind CSS)。
  • 要求 Claude 拆解組件，而非一次產出整頁。
 透過 Prompt 將「圖片」轉換為「結構」。將複雜頁面拆解為小組件 (Component) 開發，能有效避免 AI 產生冗長且難以維護的代碼。
4. 迭代 (Refine) 人工校準
  • 人工修正 AI 產出的間距 (Padding/Margin)。
  • 串接真實的資料來源 (Data Binding)。
  • 優化互動效果 (Hover, Click Events)。
 AI 負責「架構與基礎樣式」，人工負責「最後一哩路的細節對齊」。這是一個協作過程，AI 是你的實習生，你需要做最後的 Code Review。

💡 小撇步：

  • 設計師的心態轉變：請務必告訴學生，Figma 不是畫圖，而是「編寫網頁結構」。如果在 Figma 裡連 Auto Layout 都沒用好，Claude 就無法讀懂結構。
  • Claude 的強項：Claude 特別擅長理解「層級」。若學生能清楚交代「這個區塊是 Hero section」、「這裡是一個 List」，AI 的產出效率會提升數倍。
  • 除錯心法：如果在 Figma 看起來很漂亮，但 Claude 產出跑版，通常是因為「絕對定位 (Absolute)」太多。建議學生回頭簡化 Figma 的層級，改成「堆疊式 (Stack)」的設計。

・ Figma 到 Claude 實作指南：從設計藍圖到 AI 程式碼生成

event design
實作流程：從 Figma 設計圖到 Claude 程式碼
  1. Figma 準備：善用 Auto Layout
    在 Figma 中，請確保所有元件都加上 Auto Layout。這能讓 AI 更精準地判斷元素的間距 (Gap) 與排列 (Direction)。
  2. 截圖與標註 (Export)
    截下你想開發的頁面，建議包含明確的顏色代碼或字型規格。
  3. Claude 視覺 Prompt 實戰
    上傳圖片並輸入指令：
    「這是我在 Figma 做的網頁設計圖。請參考圖片的佈局、配色與間距，使用 React 與 Tailwind CSS 幫我還原成網頁。
    注意：標題使用 32px 字級，按鈕 hover 時要有輕微浮起效果。」
實作步驟 關鍵動作與技術細節 工程觀念 (Why) 實戰與 Prompt 範例
STEP 01
Figma 準備：
善用 Auto Layout
  • 選取元件按下 Shift + A 建立 Auto Layout。
  • 明確設定元件的方向 (Horizontal / Vertical)。
  • 給定明確的 Gap (間距) 與 Padding (內邊距)。
  • 設定元素的尺寸適應規則：Hug Contents (包裹內容) 或 Fill Container (填滿容器)。
 Auto Layout 的底層邏輯完全對應網頁開發的 CSS Flexbox。當設計稿有結構化的排版時，Claude 才能精準推導出 flex-row, gap-4, p-6 等現代化網頁類別。 Figma 檢查清單：
  • 外框容器：Vertical Auto Layout
  • 元素間距：24px
  • 外圍內邊距：32px
  • 禁止使用「絕對定位 (Absolute Positioning)」干擾結構。
STEP 02
截圖與標註
(Export & Specs)
  • 選取對應的 Frame，匯出 2x PNG / JPG 高解析度快照。
  • 複製關鍵樣式的數據（如主色調 HEX 碼、字體級階）。
  • 將圖標 (Icon) 獨立匯出為 SVG，或準備好 Lucide Icon 的名稱。
 雖然大型視覺模型 (Vision LLM) 能識別圖像版面，但對精確顏色 (HEX) 和文字大小 (Font Size) 的辨識可能有微小視覺偏差。手動補充精確數值能達成 100% 視覺還原。 交付規格準備：
  • 主色調： ■ #6366F1
  • 標題字級： 32px (Bold)
  • 內文字級： 16px (Regular)
  • 圓角規格： 12px (rounded-xl)
STEP 03
Claude 視覺
Prompt 實戰
  • 點擊 Claude 對話框中的夾檔圖示，上傳剛匯出的設計截圖。
  • 套用「金字塔原則」寫出包含 Role, Goal, Tech, Details 的指令。
  • 明確交代佈局、顏色代碼與微互動特效 (Hover)。
 將圖像數據與文字約束結合（Multimodal Prompting），引導 Claude 進入專業前端工程師的角色，透過預設的 React + Tailwind 寫出高度模組化且易於維護的 UI。 Prompt 實戰指令範例：
「這是我在 Figma 做的網頁設計圖。
請參考圖片的佈局、配色與間距，使用 React 與 Tailwind CSS 幫我還原成網頁。

細節要求：
1. 標題使用 32px 字級 (text-3xl / font-bold)。
2. 按鈕 hover 時要有輕微浮起效果 (transition-transform, hover:-translate-y-1)。
3. 請確保完全響應式 (RWD) 佈局。」

・Figma 轉 Claude 的必備 Prompt 範例

event design
Figma 轉 Claude 三大必備 Prompt 轉譯策略
情境 指令建議
基礎佈局「請分析圖中的版面結構，將其分為 Header, Main, Footer，並確保它是響應式的。」
精準還原「這張圖中按鈕的 padding 是 16px，請在 Tailwind CSS 中使用正確的 spacing class (如 p-4) 來還原。」
元件化「將導覽列提取為獨立的 Header 元件，並將導航連結設為陣列結構。」

透過以下三個核心情境指令，能幫助學生快速將 Figma 設計圖轉化為高維護性、完全還原的現代化網頁代碼：

情境分類 實際案例應用 Prompt 指令建議 (複製即用) AI 程式碼生成效果 (Technical Output)
情境 1
基礎佈局
(Layout) 		☕ 案例：SaaS 產品官網 / 咖啡廳首頁 當你上傳了一張包含完整首頁的長圖，希望 Claude 不要把所有 HTML 混在一起，而是拆出清晰的網頁區塊。
「請分析圖中的版面結構，將其分為 Header, Main, Footer 語意化標籤。

請確保它是響應式的（RWD）：桌機版為多欄配置，手機端（Mobile）自動改為單欄佈局，且 Header 導覽列需自動轉換為漢堡選單。」
  • 生成 <header>, <main>, <footer> 語意結構。
  • 自動套用 Tailwind grid-cols-1 md:grid-cols-3。
  • 提供手機端選單開關（Toggle state）。
情境 2
精準還原
(Pixel Perfect) 		💳 案例：訂閱方案按鈕 / 行動呼籲卡片 設計師在 Figma 中精細設定了卡片與 CTA 按鈕的邊距、圓角與 Hover 狀態，需要 AI 精確還原像素數值。
「這張圖中按鈕的 padding 是 16px，請在 Tailwind CSS 中使用正確的 spacing class（如 p-4）來還原。

另外，按鈕背景色請設為 #6366F1，圓角為 8px (rounded-lg)，且 Hover 時要有輕微的放大與升起動畫。」
  • 將 16px 精確映射為 p-4 或 px-6 py-4。
  • 精確套用 bg-[#6366F1] 與 rounded-lg。
  • 寫出 transition-transform hover:-translate-y-1 hover:scale-105。
情境 3
元件化
(Componentize) 		📌 案例：後台儀表板導覽 / 多項目作品集 設計稿中有許多重複出現的元件（如 5 個導覽連結或 6 張作品卡片），希望 AI 寫出優雅的 React 動態渲染結構。
「請將導覽列提取為獨立的 Header 元件。

請將導覽連結抽離為陣列結構（如 navItems = [{label: '首頁', href: '/'}]），並使用 JavaScript 的 .map() 方法進行動態渲染，保持程式碼簡潔好維護。」
  • 建立可獨立複用的 <Header /> React 元件。
  • 聲明 const navItems = [...] 資料陣列。
  • 透過 navItems.map(item => <a key={...}>) 渲染 DOM。

🎓 課堂實作提點 (Instructor's Tip)：

在課堂演練時，建議鼓勵學生將這三個情境組合成一個複合型 Prompt 發送給 Claude！例如：「請幫我實作這張設計圖的基礎佈局（情境 1），其中按鈕的 Padding 為 16px 需精準還原（情境 2），並請將選單抽離為陣列進行動態渲染（情境 3）。」這樣產出的代碼品質最接近產業真實標準。

・ 給學生的除錯關鍵提醒

  • 像素與屬性對齊：Figma 中的 Absolute Position (絕對定位) 在 HTML/CSS 容易導致跑版。請在 Figma 中多使用 Auto Layout。
  • 圖標轉換：Figma 的 SVG 圖標，Claude 可能無法直接讀取內容，請告知它：「請使用 Lucide React 套件中的 Icon 來替代圖片」。
  • 視覺對照：產出後的 UI，請對照 Figma 的 "Inspect" 面板（右側數據），檢查 padding 與 gap 是否相符。
💡 實作挑戰建議

下次實作時，試著把你的 Figma 作品匯出成圖片，丟給 Claude，並加上這句話：
「請將此圖片轉換為可執行的 React 元件代碼，並使用 Tailwind CSS 確保完全響應式。」

・作業規劃：從 Figma 設計稿到 AI 實體網頁發布

本單元總體作業目標

學生需挑選一個主題（如個人作品集、主題咖啡廳、SaaS 產品或數據儀表板），運用 Figma Auto Layout 完成介面設計，並透過 金字塔原則 Prompt 指揮 Claude 產出響應式 Web UI，最後完成優化部署。

階段與作業名稱 作業目標與使用工具 具體實作步驟與細節 成果繳交與評分標準
作業一（基礎打底）
Figma Auto Layout 結構與標註準備 		目標：
建立符合網頁 Flexbox 邏輯的設計稿，並導出 AI 可讀的規格標註。

工具：
Figma
  1. 設計包含 Header、Hero 區塊、卡片展示區與 Footer 的一頁式網頁（Landing Page）。
  2. 全面使用 Auto Layout (Shift + A) 設定 Padding、Gap 與 Alignment。
  3. 導出 2x PNG 高解析度截圖。
  4. 整理標註文件：主色 HEX 碼、標題/內文字級（如 32px/16px）。
 繳交項目：
  • Figma 設計稿公開連結
  • 介面高清截圖 (PNG)
評分標準 (30%)：
Auto Layout 完整度 15% 設計視覺層級 10% 標註明確度 5%
作業二（AI 實作）
金字塔 Prompt 撰寫與 Claude 程式碼生成 		目標：
運用視覺提示（Vision Prompting）指揮 Claude 還原網頁雛形。

工具：
Claude (Artifacts)
  1. 將作業一的截圖上傳至 Claude。
  2. 依據金字塔原則撰寫 Prompt（包含 Role, Goal, Tech, Details）。
  3. 要求使用 React + Tailwind CSS 開發。
  4. 利用 Artifacts 預覽區檢視產出的網頁是否跑版。
 繳交項目：
  • 發送給 Claude 的 Prompt 完整文字紀錄
  • Claude 生成的 Artifacts 初版畫面截圖
評分標準 (35%)：
Prompt 架構完整度 15% 設計還原度 10% 技術指定準確度 10%
作業三（優化與發布）
三大策略進階微調與 Cloudflare/Vercel 發布 		目標：
微調組件與互動細節，並將專案部署至公開網路。

工具：
Claude、Cloudflare / Vercel
  1. 運用三大 Prompt 轉譯策略：
    • 佈局：調整手機版 RWD 漢堡選單
    • 精準：補強 Hover 浮起/漸變動畫
    • 元件：將卡片資料抽離為 JSON 陣列
  2. 點擊 Artifacts 的 Publish 或複製 Code 部署至 Vercel / Cloudflare Pages。
 繳交項目：
  • 最終發布的線上網站 URL 連結
  • 專案 GitHub / Code 原始碼檔案
評分標準 (35%)：
RWD 響應式呈現 10% 微互動與動態品質 15% 網站成功部署上線 10%
💡 作業批改與加分項（Bonus Points）：

  • 設計感加分 (+5%)： 在 Prompt 中主動加入微光漸層、玻璃擬態（Glassmorphism）或精緻負空間要求者。
  • 代碼品質加分 (+5%)： 成功引導 Claude 將組件化（Componentize）與資料陣列 mapping 寫得乾淨無冗餘者。