進階網頁設計｜課程講義

Advanced Web Page Design

生成導購網頁——由 AI 注入程式靈魂

Author

JinJin Wang

September 16, 2026

・由 AI 注入程式靈魂 課程推進架構

・ 由 AI 注入程式靈魂 課程推進架構

event design
生成導購網頁 課程推進架構

・由 AI 注入程式靈魂 詳細課程大綱

階段宗旨： 進入真正的工程程式碼生成與部署發布。學生將把 PART 2 的 Figma UI 設計稿上傳給 Claude，運用 Vision Prompt 金字塔寫法，自動生成高品質 React + Tailwind CSS 程式碼，並設定微互動動態、部署至 Cloudflare Pages / Vercel，最後建立長期的 AI 網站維護流程。

週次與核心標籤 單元教學主題 使用的工具與角色 學生實作任務與 Deliverables 重點 Prompt / 指令範例
W14

#參考 		網頁參考與組件拆解
Web Inspiration & Component Structuring 		Web Design Clip 網頁動向對標
Claude 組件架構設計
  • 參考 Web Design Clip 上的優秀微互動與動畫設計。
  • 將設計稿拆解為獨立 React 組件（Header, Hero, FeatureCard, FAQ）。
  • 規劃資料結構，將文案抽離為 JSON 陣列。
「請分析我上傳的 Figma 設計稿，將其拆解為 React 組件樹，並將導覽選單與 FAQ 抽離為獨立的 JSON 資料陣列。」
W15 ~ W16

#描述 		Claude 視覺轉譯與程式碼生成
Claude Vision Prompt & Interactive UI 		Claude (Artifacts)
Lucide Icons 圖示庫
  • 上傳 Figma 截圖，套用「三大轉譯策略」撰寫 Vision Prompt。
  • 指定 React + Tailwind CSS，並加入 Hover 浮起與 Smooth Scroll 特效。
  • 於 Claude Artifacts 中除錯並優化響應式 (RWD)。
「這是我在 Figma 做的網頁設計圖。請使用 React 與 Tailwind CSS 幫我還原。按鈕 hover 時要有輕微浮起 (hover:-translate-y-1)，標題 32px，並包含平滑捲動 (scroll-smooth)。」
W17 ~ W18

#網站 		部署發布與 AI 網站維護
Deployment & AI Maintenance 		Cloudflare Pages / Vercel
Claude AI 自動除錯與內容更新
  • 將 Artifacts 的代碼部署至 Cloudflare Pages 或 Vercel。
  • 綁定自訂網域並設定 Open Graph (OG) 社群分享卡片。
  • 學習用 Claude 進行網站維護（新增商品、修改文案、熱點修復）。
  • 交付物：公開可存取的線上導購網站 URL 與發表。
「請幫我修改這份 React 代碼：在 FAQ 區塊新增第 5 個問答，並幫我寫好 HTML head 中的 Open Graph (OG) 社群分享標籤。」

・10 個案例全流程對照表：Claude 轉譯 Prompt、微互動注入與維護策略

網站案例名稱與類型 W15-16：#描述 Claude Code Prompt
（React + Tailwind CSS 轉譯指令）		 組件微互動與 State 狀態
（Micro-interactions & React State）		 W17-18：#網站 部署與 AI 維護策略
（Cloudflare / Vercel & Maintenance）
01. 實體硬體
ErgoMinimal 護腰墊
「請參考 Figma 截圖，使用 React 與 Tailwind 建立 ErgoMinimal 護腰墊頁面。主色 bg-[#F5F5F0]，按鈕為 bg-[#4A5568] hover:bg-[#2D3748] transition-all。卡片需有 rounded-2xl shadow-sm，包含免工具 30 秒開箱 Modal 彈窗。」
  • 影片彈窗 State： isModalOpen 控制開箱影片播放。
  • 數量選擇器： quantity 計數器與金額動態試算。
  • Hover 微互動： 按鈕懸浮時升起 hover:-translate-y-0.5。
  • 部署平台： Cloudflare Pages
  • SEO 設定： 嵌入 Open Graph (OG Image) 與購物 Schema。
  • AI 維護： 使用 Claude 定期更新優惠折扣 Banner 文字。
02. SaaS 軟體
AutoCollect 催款網
「使用 React + Tailwind 建立暗黑玻璃擬態頁面。背景 bg-[#0F172A]，玻璃卡片使用 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl。包含『月繳/年繳』切換 Toggle 切換定價數據。」
  • 定價切換： isYearly 切換年繳 8 折價格。
  • 表單驗證： 14 天免費試用 Email 輸入框驗證與成功提示。
  • 滾動漸顯： 頁面捲動時載入動畫 (Fade-in)。
  • 部署平台： Vercel App Deployment
  • Webhook 對接： 將試用 Email 發送至 Formspree / Webhook。
  • AI 維護： 透過 Claude 指令快速新增 FAQ 題目與功能說明。
03. 健康餐飲
CleanBite 無麩質餐
「使用 React 與 Tailwind 開發清新風格餐包網。主色 bg-[#F0FDF4] 與 text-[#166534]。加入 6 入組合包點擊選購器，點擊不同餐包卡片時，右側即時更新預覽圖片與營養標籤。」
  • 選購器 State： selectedItems 陣列計算點選的 6 款餐包。
  • 購物車 Slide-over： 點擊購買彈出右側側邊購物車。
  • 認證 Badge Hover： Hover 秀出零過敏原檢驗報告 Tooltip。
  • 部署平台： Cloudflare Pages
  • 動態菜單更新： 將菜單抽離為 menuData.json，交由 Claude 每週替換新菜色。
04. 寵物用品
SeniorCat 健檢貓砂
「請參考設計圖建立 SeniorCat 導購頁。採用暖米色 bg-[#FFFBEB] 與清爽綠 text-[#059669]。FAQ 區塊需實作 Accordion 手風琴展開收合效果，比較表格要支援滑鼠懸浮高亮比對。」
  • Accordion State： openFaqId 控制 FAQ 單一展開。
  • 顯色對照 Tooltip： 游標移至 PH 值顏色時顯示對應貓咪健康狀態。
  • 訂閱頻率選擇器： 切換「1個月/2個月」自動配送頻率。
  • 部署平台： Vercel
  • 信任機制維護： 頁面底端標註「一鍵無壓力退訂連結」，運用 Claude 自動產生條款頁。
05. 數位產品
ExecSlide 簡報組件
「使用 React 建立高級商務簡報下載頁。深灰色 bg-[#1E293B]，簡報 Gallery 採用 Grid 網格，點擊簡報卡片時可開啟 Lightbox 全螢幕預覽高清投影片，並包含一鍵複製 Prompt 按鈕。」
  • Lightbox 預覽： activeSlideIndex 實現全螢幕簡報左右切換。
  • Copy to Clipboard： 點擊「複製 Prompt」後跳出成功吐司訊息 (Toast notification)。
  • 部署平台： Vercel / Cloudflare
  • 數位金流對接： 將下單按鈕對接 Stripe Checkout 或 Gumroad 金流發貨。
06. 美妝保養
Luxury Vegan Skincare
「請開發 Clean Beauty 保養品 Landing Page。背景 bg-[#FAF4F0]，標題採用 font-serif。商品圖片需有 hover:scale-105 放大鏡效果，並包含成分分頁 Tabs (成分/使用方法/檢驗) 切換。」
  • Tabs 切換： activeTab 切換「全成分 / 使用步驟 / 實驗數據」。
  • 浮動購買列： 捲動超過 Hero 區時，頂部出現 Sticky Buy Bar 快速下單列。
  • 部署平台： Cloudflare Pages
  • Instagram 牆： 透過 Claude 定期更新 IG 顧客好評 Embed 組件。
07. 健身運動
Mindful Yoga App
「使用 React + Tailwind 開發瑜伽訂閱頁。背景為漸層鼠尾草綠，課程列表支援篩選器 (Filter: 初階/中階/高階)，點擊課程卡片可觸發微型音訊/影片試聽 Player 彈窗。」
  • Filter State： selectedLevel 動態過濾 displayedCourses。
  • Audio/Video Player： HTML5 Audio/Video 控制試聽播放與進度條。
  • 部署平台： Vercel
  • PWA 支援： 設定 Web App Manifest，支援使用者「新增至手機主畫面」。
08. 個人作品集
UI/UX Studio Portfolio
「開發新粗獷主義作品集。純黑 bg-black text-white，加上粗邊框 border-2 border-white。作品列表 Hover 時右側即時浮現該專案全彩縮圖，包含滾動進度條 (Scroll Progress Bar)。」
  • Cursor Hover 預覽： 滑鼠懸浮作品標題時，固定定位 (Fixed) 圖片隨游標移動。
  • Scroll Progress： scrollPercent 計算頂部進度條寬度。
  • 部署平台： Vercel + GitHub Actions
  • CMS 整合： 使用 Markdown / MDX 檔案管理，交由 Claude 自動寫稿更新新作品。
09. 頂級房產
Luxury Real Estate
「開發曜石黑豪宅建案預售頁。背景 bg-[#0B0F17]，金色標題 text-[#D4AF37]。背景圖片需包含 Parallax 視差滾動效果，並包含 360 度賞屋 Modal 與預約看房表單 (Form)。」
  • 賞屋 Modal： 全螢幕 3D / 圖片藝廊動態切換。
  • 預約表單 Validation： 日期選擇器與姓名電話格式驗證。
  • 部署平台： Cloudflare Pages
  • CRM 串接： 將表單資料自動同步至 Google Sheets / CRM，並發送簡訊通知。
10. 永續服飾
Eco Apparel Store
「使用 React 建立雜誌風服飾電商。主色 bg-[#E5DDCB]，商品區塊支援顏色切換器 (Color Swatch)，點擊色彩小圓點時，模特兒照片自動更換為對應顏色的實穿圖。」
  • Color Swatch State： selectedColor 控制商品圖片路徑更新。
  • 尺寸對照 Modal： 點擊「尺寸指南」彈出尺寸對照表。
  • 部署平台： Cloudflare Pages
  • 庫存 JSON 管理： 庫存數據解耦為 JSON，運用 Claude 定期進行補貨標籤更新。

・課後作業檢查清單

請將 PART 2 的 Figma UI 設計稿上傳給 Claude 生成 React + Tailwind CSS 代碼，注入微互動狀態，並完成 Cloudflare / Vercel 部署與上線發表。

執行週次 單元主題與作業目標 使用的工具與分工 交付成果物 (Deliverables) 作業檢查狀態
W14 作業七：網頁參考與組件架構拆解
• 參考 Web Design Clip，拆解 React 組件樹與 JSON 資料。 		Web Design Clip 動向對標
Claude 組件架構規劃 		1. React 組件架構圖
2. Data JSON 資料陣列檔
W15 ~ W16 作業八：Claude 轉譯與微互動生成
• 發送 Vision Prompt 生成代碼，注入 Hover 與 State 狀態。 		Claude Vision Artifacts
Lucide Icons 圖示庫 		1. React + Tailwind 完整代碼
2. Artifacts 互動預覽錄影
W17 ~ W18 作業九：部署發布與 AI 網站維護
• 部署至 Cloudflare / Vercel，設定 OG 卡片與 AI 維護流程。 		Cloudflare Pages / Vercel
Claude AI 除錯與內容維護 		1. 實體線上網頁 URL 連結
2. 期末簡報 PPT & 成果展示
🏆 課程最終總成果 (Graduation Deliverable)：
達成從「商業選品（Part 1）」➔「Figma 視覺骨架（Part 2）」➔「AI 注入程式靈魂與部署上线（Part 3）」的全流程，擁有一套公開上線的高轉換率導購網站！ 		正式公開網站 URL 🎉 課程圓滿修畢