進階網頁設計課程講義
全流程網頁設計參考網站分類整理
一、視覺靈感與 Moodboard 對標（W10 視覺風格定調）
| 網站名稱 | 官方連結 | 對接課程模組 | 核心特色與 Vibe Coding 運用方式 |
|---|---|---|---|
| pinterest.com | Part 2：#參考 | 全球最大的視覺靈感庫。用於建立專案情緒板（Moodboard），可搜尋關鍵字對標配色風格與字體氣質。 | |
| Dribbble | dribbble.com | Part 2：#視覺 | 頂尖設計師社群。專注於精緻 UI/UX 介面、微互動動畫、3D 渲染與 Icon 設計，適合尋找靈感亮點。 |
| Behance | behance.net | Part 2：#風格 | Adobe 旗下品牌作品集平台。包含完整的品牌視覺識別 (VI)、網頁改版個案研究 (Case Study)。 |
| Awwwards | awwwards.com | Part 2：#視覺 | 國際權威網頁設計得獎平台。收錄前衛的三維互動網頁、動態特效與高質感的品牌 Landing Page。 |
二、Landing Page 與導購 UI 藝廊（W14 網頁參考與組件拆解）
| 網站名稱 | 官方連結 | 對接課程模組 | 核心特色與 Vibe Coding 運用方式 |
|---|---|---|---|
| Web Design Clip | webdesignclip.com | Part 3：#參考 | 課程核心工具！ 日本極優網頁集錦。特別適合對標細緻的日系排版、微互動特效與商業導購頁。 |
| Lapa Ninja | lapa.ninja | Part 1 & Part 3 | 專注於 Landing Page 結構的圖庫，提供數千個高轉換率網頁範例，並直接提供截圖檔供 AI 分析。 |
| SiteInspire | siteinspire.com | Part 2：#風格 | 側重極簡風格、雜誌排版 (Editorial) 與簡約風商業官網，可以依主題、類型與配色快速篩選。 |
| Commerce Cream | commercecream.com | Part 1：選品對標 | 專為 Shopify 與高質感獨立品牌設計的電商藝廊，展示高客單價商品的視覺陳列與導購動線。 |
三、色彩調和與設計系統（W10~W12 規範建立）
| 網站名稱 | 官方連結 | 對接課程模組 | 核心特色與 Vibe Coding 運用方式 |
|---|---|---|---|
| Coolors | coolors.co | Part 2：#風格 | 一鍵生成專業色板的強大工具，可直接複製 HEX 色碼（如 `#F5F5F0`）貼入 Tailwind CSS 或 Figma。 |
| Realtime Colors | realtimecolors.com | Part 2：#視覺 | 即時預覽配色在真實網頁元件（Header、Button、Card）上的視覺效果，快速驗證 60-30-10 配色計畫。 |
| Color Hunt | colorhunt.co | Part 2：#風格 | 熱門色彩組合社群，可按「Minimalist」、「Pastel」、「Dark Mode」等 Vibe 標籤快速尋找配色方案。 |
四、AI 資產生成、Icon 與媒體庫（W11 視覺資產生成）
| 網站名稱 | 官方連結 | 對接課程模組 | 核心特色與 Vibe Coding 運用方式 |
|---|---|---|---|
| ChatGPT (DALL-E 3) | chatgpt.com | Part 2：#風格 | 生成高解析度 Hero 主視覺圖、3D 產品渲染圖與北歐風場景，支援直接用中文下達圖像 Prompt。 |
| Iconify / Lucide | iconify.design | Part 3：#描述 | 海量向量 Icon 庫，相容 Figma 外掛，且能直接在 React 代碼中作為 Lucide-react 元件無縫導入。 |
| Unsplash | unsplash.com | Part 2：#視覺 | 高品質免費商業攝影圖庫，可用於補充情境背景圖、模特兒穿搭照與人物 Persona 頭像。 |
| Remove.bg | remove.bg | Part 2：資產處理 | AI 自動去背神器，5 秒內將 DALL-E 3 生成的產品圖去除背景，轉為透明 PNG 供 Figma 與網頁使用。 |
五、Vibe Coding 工具與程式組件庫（W15~W18 網頁發布）
| 網站名稱 | 官方連結 | 對接課程模組 | 核心特色與 Vibe Coding 運用方式 |
|---|---|---|---|
| v0.dev (by Vercel) | v0.dev | Part 3：Vibe Coding | 输入 Prompt 或上傳 Figma 截圖，自動生成符合 Shadcn UI + Tailwind CSS 的高品質 React UI。 |
| Claude (Artifacts) | claude.ai | Part 3：#描述 | 核心程式靈魂工具！ 在對話中直接生成 React 代碼並於右側 Artifacts 即時渲染與測試互動。 |
| Tailwind CSS | tailwindcss.com | Part 3：前端樣式 | 當代主流 Utility-first CSS 框架，讓 AI 生成簡潔、響應式 (RWD) 且好維護的樣式代碼。 |
| Cloudflare Pages | pages.cloudflare.com | Part 3：#網站 | 一鍵部署託管平台，提供免費的高速 CDN 與自訂網域綁定，讓學生作品立即上線公開營運。 |