・視覺骨架 課程推進架構
・ 視覺骨架 課程推進架構
・課程規劃:生成前端視覺
階段宗旨: 將 PART 1 擬定的 PAS 導購文案與提案企劃,轉化為具備「工程轉換力」的 Figma UI 設計稿。本階段強調視覺風格靈感建立、AI 圖像資產精準生成,以及基於 CSS Flexbox 邏輯的 Figma Auto Layout 實作。
| 週次與核心標籤 | 單元教學主題 | 使用的工具與角色 | 學生實作任務與 Deliverables | 重點 Prompt / 指令範例 |
|---|---|---|---|---|
|
W10 #參考 |
情緒板與視覺靈感對標 Visual Moodboard & Benchmarking |
Pinterest 視覺靈感庫 Figma Moodboard 整理 |
|
(Pinterest 搜尋關鍵字範例)
"SaaS landing page dark mode glassmorphism", "Minimalist eCommerce UI hero section" |
|
W11 #風格 |
AI 商業視覺資產生成 AI Asset & Image Generation |
ChatGPT (Image2 / DALL-E 3) Remove.bg 去背工具 |
|
「請使用 DALL-E 3 生成一張 3D 渲染風格的健康護腰靠墊,放在北歐風極簡書房桌面上,柔和自然光,高質感,淺灰色微光漸層背景。」
|
|
W12 ~ W13 #視覺 |
Figma Auto Layout 網頁骨架搭建 Design-to-Code Ready UI |
Figma Auto Layout Figma Plugins (Unsplash, Iconify) |
|
(Figma 佈局檢查原則)
• 容器設為 Vertical Flex • 間距 (Gap) 設為 24px / 32px • 邊距 (Padding) 設為 64px (Desktop) |
・ 5 個案例全流程對照表:視覺風格、AI 繪圖與 Figma 排版策略
| 網站案例名稱與類型 | W10:#參考 Moodboard 對標 (Pinterest 關鍵字與視覺風格) |
W11:#風格 AI 視覺資產生成 (ChatGPT DALL-E 3 圖像提示詞) |
W12-13:#視覺 Figma 網頁骨架 (Auto Layout & Flexbox 佈局策略) |
|---|---|---|---|
|
實體商品 案例 1:ErgoMinimal 極簡遠距護腰靠墊網 |
|
"Minimalist ergonomic memory foam lumbar cushion placed on an oak wooden desk, warm ambient morning light, Scandinavian interior design, studio lighting, highly detailed 3D render, photorealistic, neutral tones, 8k --ar 16:9"
|
|
|
數位服務 案例 2:AutoCollect SaaS 接案設計師自動催款平台 |
|
"Modern SaaS dashboard isometric preview, glowing neon purple glassmorphic cards, invoice tracking interface, dark mode UI, clean typography, 3D abstract shapes floating, tech style, 8k --ar 16:9"
|
|
|
實體商品 案例 3:CleanBite Eats 100% 無麩質舒肥即食餐網 |
|
"Gourmet gluten-free sous-vide chicken breast dish with fresh avocado and quinoa salad, commercial food photography, bright natural lighting, marble tabletop background, top view, Michelin star presentation --ar 16:9"
|
|
|
實體/訂閱 案例 4:SeniorCat Care 高齡貓 PH 顯色健檢貓砂網 |
|
"Cute senior fluffy cat resting comfortably next to a clean cat litter box, soft pastel lighting, warm and empathetic atmosphere, high resolution photography, cozy home environment --ar 16:9"
|
|
|
數位產品 案例 5:ExecSlide AI 麥肯錫級商務簡報組件網 |
|
"Professional business presentation slides floating in 3D space, sleek bar charts and infographics, dark blue background, luxury corporate style, high contrast, clean typography --ar 16:9"
|
|
・10 個不同類型網站案例:Pinterest 關鍵字與 ChatGPT 視覺指令對照表
使用說明: 本表涵蓋 10 種不同產業類型(硬體、SaaS、美食、寵物、數位資產、美妝、健身、作品集、豪宅房產、永續時尚)。可直接複製 Pinterest 關鍵字做為 Moodboard 靈感對標,或將 ChatGPT Prompt 輸入生成 Hero 區塊視覺圖與 Figma 設計模板藍圖。
| 案例類型與名稱 | 📌 Pinterest 視覺風格搜尋關鍵字 (W10:中英對照 Moodboard 對標) |
🤖 ChatGPT 網站設計模板生成指令 (W11~W12:中英對照 DALL-E / Web Design Prompt) |
|---|---|---|
|
01. 實體硬體 人體工學護腰靠墊 (Ergonomic Hardware) |
🇹🇼 中文關鍵字:
日本極簡居家、北歐木質書房、人體工學椅 UI 設計、無印風格網頁、極簡產品 Landing Page
🇺🇸 English Keywords:
Japanese Minimalist Interior, Nordic Wooden Study, Ergonomic Chair UI Design, Muji Style Web Design, Minimalist Hardware Landing Page
|
🇹🇼 中文 Prompt 指令:
請生成一個極簡日系風格的 Landing Page 視覺模板。整體採用暖米色 (#F5F5F0) 與石墨灰,包含雙欄 Hero 區塊:左側為強烈的大標題與 CTA 按鈕,右側為放置於橡木書桌上的 3D 渲染護腰靠墊,展現柔和自然光與高質感居家氛圍。
🇺🇸 English Prompt Instruction:
Generate a minimalist Japanese-style Landing Page design template. The overall scheme uses warm beige (#F5F5F0) and graphite gray, featuring a two-column Hero section: the left side has a bold headline and CTA button, while the right side displays a 3D rendered ergonomic lumbar cushion on an oak desk under soft natural morning light with a high-end cozy home ambiance.
|
|
02. SaaS 軟體 自動催款平台 (B2B SaaS Platform) |
🇹🇼 中文關鍵字:
現代暗黑玻璃擬態、SaaS 儀表板 UI、Linear 風格網頁、霓虹紫 UI 介面、科技風 Landing Page
🇺🇸 English Keywords:
Modern Dark Glassmorphism, SaaS Dashboard UI, Linear Style Web Design, Neon Purple UI Interface, Tech Landing Page
|
🇹🇼 中文 Prompt 指令:
請生成一個現代暗黑玻璃擬態 (Dark Glassmorphism) 風格的 SaaS 網頁模板。背景採用深藍黑 (#0F172A) 搭配發光霓虹紫漸層,Hero 區塊為置中大標題,下方懸浮著微透明的 3D 儀表板卡片與漸層邊框,展現高科技且俐落的前端介面。
🇺🇸 English Prompt Instruction:
Generate a modern Dark Glassmorphism SaaS website design template. The background uses dark slate blue (#0F172A) with glowing neon purple gradients. The Hero section features a centered bold title with a floating semi-transparent 3D dashboard card beneath it, complete with subtle gradient borders, exuding a sleek, high-tech frontend interface.
|
|
03. 健康餐飲 無麩質舒肥即食餐 (Health Food E-commerce) |
🇹🇼 中文關鍵字:
清新有機網頁設計、健康餐點商業攝影、綠色系 UI 佈局、簡約美食商城、舒肥料理 Landing Page
🇺🇸 English Keywords:
Fresh Organic Web Design, Healthy Food Commercial Photography, Green UI Layout, Minimalist Food E-commerce, Healthy Meal Landing Page
|
🇹🇼 中文 Prompt 指令:
請生成一個清新有機風格的健康餐包導購網頁模板。採用薄荷白 (#F0FDF4) 與森林綠主色,Hero 區塊左側呈現大膽的標題與品質認證標籤,右側為高解析度的米其林級舒肥雞胸肉餐盒攝影圖,整體氛圍明亮、自然且令人食欲大開。
🇺🇸 English Prompt Instruction:
Generate a fresh and organic style healthy meal landing page template. Use mint white (#F0FDF4) and forest green as primary colors. The Hero section features bold headlines and quality certification badges on the left, paired with a high-resolution commercial photograph of a Michelin-grade sous-vide meal box on the right, radiating a bright, natural, and appetizing vibe.
|
|
04. 寵物用品 高齡貓健檢豆腐砂 (Pet Care & Subscription) |
🇹🇼 中文關鍵字:
溫馨日系寵物網頁、馬卡龙色系 UI、可愛質感貓咪電商、寵物品牌設計、柔和綠配色網頁
🇺🇸 English Keywords:
Cozy Japanese Pet Website, Pastel UI Design, Cute Luxury Cat E-commerce, Pet Brand Identity Design, Soft Mint Pet UI
|
🇹🇼 中文 Prompt 指令:
請生成一個溫馨同理風格的高齡貓寵物貓砂網站模板。採用奶油白 (#FFFBEB) 搭配柔和薄荷綠,Hero 區塊左側展示同理心標題與貓爪圖示標籤,右側為一隻舒適趴在乾淨豆腐砂盆旁的可愛高齡貓攝影圖,展現溫暖、安心與高質感的日本品牌風格。
🇺🇸 English Prompt Instruction:
Generate a warm and empathetic pet cat litter website template for senior cats. Utilize cream white (#FFFBEB) paired with soft mint green. The left Hero section displays empathetic headlines with cat paw icons, while the right features a cozy photograph of a senior cat resting comfortably next to a clean litter box, embodying a warm, trustworthy, and premium Japanese brand vibe.
|
|
05. 數位產品 商務簡報組件庫 (Digital Asset Platform) |
🇹🇼 中文關鍵字:
高級商務簡報 UI、Pitch 風格網頁、黑色雜誌風排版、高對比圖表介面、專業諮詢風格 UI
🇺🇸 English Keywords:
Executive Business Presentation UI, Pitch Style Web Design, Editorial Luxury Layout, High Contrast Chart Interface, McKinsey Style Web Design
|
🇹🇼 中文 Prompt 指令:
請生成一個高級商務雜誌風格的數位簡報模板下載網頁。採用深石板灰 (#1E293B) 與天藍高光,Hero 區塊包含 48px 大字標題與置中 CTA 按鈕,下方呈列著懸浮在 3D 空間中的麥肯錫風格商業圖表簡報卡片,視覺極具專業力與高層信任感。
🇺🇸 English Prompt Instruction:
Generate an executive editorial-style digital template download web page. Use deep slate gray (#1E293B) accented with sky blue highlights. The Hero section contains a bold 48px title and centered CTA button, with a gallery of 3D floating McKinsey-style corporate presentation cards beneath it, delivering an ultra-professional and trustworthy corporate feel.
|
|
06. 美妝保養 高階極簡純素保養品 (Luxury Skincare) |
🇹🇼 中文關鍵字:
極簡美妝網頁設計、高級感柔色保養品 UI、Clean Beauty 電商、無印質感保養、優雅襯線體網頁
🇺🇸 English Keywords:
Minimalist Beauty Web Design, Luxury Nude Skincare UI, Clean Beauty E-commerce, Editorial Cosmetics Web, Serif Luxury Web Layout
|
🇹🇼 中文 Prompt 指令:
請生成一個 Clean Beauty 極簡高階保養品的商城 Landing Page 模板。使用溫暖裸粉色 (#FAF4F0) 與玫瑰金,Hero 區塊為優雅的襯線體 (Serif) 大標題,搭配高清磨砂玻璃瓶裝精華液的商業攝影圖與光影投射,傳達純素、奢華與純淨的視覺氛圍。
🇺🇸 English Prompt Instruction:
Generate a Clean Beauty luxury skincare e-commerce Landing Page template. Utilize warm nude pink (#FAF4F0) paired with rose gold accents. The Hero section features an elegant Serif headline alongside a high-resolution commercial photograph of a frosted glass serum bottle under soft shadow interplay, conveying a vegan, luxurious, and pure aesthetic.
|
|
07. 健身運動 身心靈瑜伽訂閱 App (Wellness & Fitness) |
🇹🇼 中文關鍵字:
現代健身 App 網頁、身心靈瑜伽 UI、活力漸層網頁設計、莫蘭迪色健身、流線型介面排版
🇺🇸 English Keywords:
Modern Fitness App Website, Mindful Yoga UI, Vibrant Gradient Web Design, Morandi Tone Fitness UI, Curved UI Layout
|
🇹🇼 中文 Prompt 指令:
請生成一個現代身心靈瑜伽訂閱平台的網頁視覺模板。採用低飽和莫蘭迪鼠尾草綠 (#E2E8F0 / #94A3B8) 與晨光橙漸層,Hero 區塊包含流暢的流線型 Auto Layout 卡片,右側為女性在日出時靜心瑜伽的高畫質影像,營造放鬆、平靜且充滿活力的風格。
🇺🇸 English Prompt Instruction:
Generate a modern mindful yoga subscription platform web design template. Use low-saturation Morandi sage green and sunrise orange gradients. The Hero section features smooth curved Auto Layout cards on the left, paired with a high-definition photograph of a woman practicing yoga at sunrise on the right, creating a calming, serene, and energizing atmosphere.
|
|
08. 個人作品集 UI/UX 設計師工作室 (Portfolio & Studio) |
🇹🇼 中文關鍵字:
個人作品集 UI 設計、極簡大字體網頁、互動式 Portfolio、新粗獷主義網頁、黑色前衛排版
🇺🇸 English Keywords:
Personal Portfolio UI Design, Minimalist Kinetic Typography Web, Interactive Portfolio, Neo-Brutalism Web Design, Edgy Dark Mode Portfolio
|
🇹🇼 中文 Prompt 指令:
請生成一個新銳 UI/UX 設計師的個人作品集 Hero 區塊模板。採用高對比純黑白色調 (#000000 與 #FFFFFF) 搭配螢光黃高光,主視覺為超大字級的動態英文字體 (Kinetic Typography) 與 Hover 懸浮作品卡片,展現前衛、充滿個人特色與極致的設計力。
🇺🇸 English Prompt Instruction:
Generate a cutting-edge UI/UX designer personal portfolio Hero section template. Use high-contrast monochrome (#000000 & #FFFFFF) accented with electric yellow highlights. The main layout features oversized kinetic typography paired with interactive floating project preview cards, showcasing an edgy, unique, and powerful design aesthetic.
|
|
09. 頂級房產 奢華豪宅建案預售網 (Luxury Real Estate) |
🇹🇼 中文關鍵字:
豪宅建築網頁設計、黑色奢華地產 UI、建築攝影網頁版面、尊榮建案 Landing Page、金色暗黑網頁
🇺🇸 English Keywords:
Luxury Real Estate Web Design, Dark Architectural UI, Architectural Photography Web Layout, Premium Property Landing Page, Gold Obsidian Web Design
|
🇹🇼 中文 Prompt 指令:
請生成一個頂級奢華住宅建案的官網 Landing Page 模板。採用曜石黑 (#0B0F17) 搭配香檳金邊框,Hero 區塊為全螢幕沉浸式的現代建築光影攝影圖,疊加微透明黑色漸層遮罩與典雅的金色襯線體標題,營造尊榮、頂級與建築美學的氣勢。
🇺🇸 English Prompt Instruction:
Generate an ultra-luxury real estate development landing page template. Use obsidian black (#0B0F17) with champagne gold border accents. The Hero section features a full-screen immersive architectural photography background overlaid with a subtle dark gradient mask and elegant gold Serif titles, evoking an exclusive, high-end, and architectural grandeur.
|
|
10. 永續服飾 獨立環保服飾品牌 (Sustainable Fashion) |
🇹🇼 中文關鍵字:
永續時尚網頁設計、大地色服飾電商 UI、雜誌風服裝商城、復古質感網頁、有機棉服飾 Landing Page
🇺🇸 English Keywords:
Sustainable Fashion Web Design, Earthy Fashion E-commerce UI, Editorial Apparel Store, Retro Aesthetic Web, Organic Apparel Landing Page
|
🇹🇼 中文 Prompt 指令:
請生成一個永續環保服飾品牌的時尚電商網頁模板。採用大地沙棕色 (#E5DDCB) 與橄欖綠,Hero 區塊採用雜誌排版風格 (Editorial Layout),左側為大版面的模特兒穿搭網美照,右側列出有機棉認證數據與動態購物卡片,展現質感、永續與文青時尚風格。
🇺🇸 English Prompt Instruction:
Generate a sustainable fashion e-commerce website template. Use earthy sand beige (#E5DDCB) and olive green. The Hero section utilizes an editorial magazine layout, featuring a large fashion model photograph on the left and organic cotton certification metrics alongside interactive product cards on the right, exuding a refined, eco-friendly, and chic aesthetic.
|
・10 個網站案例 Figma Auto Layout 排版策略對照表
Figma 到 Code 的轉譯核心: 善用 Auto Layout (Shift+A) 設定方向、間距(Gap)與內邊距(Padding),並精確指定 Hug(包裹內容)與 Fill Container(填滿容器),即可讓 Claude 在 PART 3 無縫生成完全不跑版的 React + Tailwind CSS 程式碼。
| 案例類型與名稱 | Hero 區塊 Auto Layout 設定 (Direction / Gap / Padding) |
核心元件與尺寸規則 (Sizing Rules: Hug / Fill / Fixed) |
RWD 手機端切換策略 (Desktop ➔ Mobile Adaptation) |
|---|---|---|---|
|
01. 實體硬體 ErgoMinimal 護腰墊 |
Direction: Horizontal Gap: 48px Padding: px-64 py-80 結構: 左側文字組合包,右側 3D 產品展示圖。 |
|
|
|
02. SaaS 軟體 AutoCollect 催款網 |
Direction: Vertical Gap: 32px Padding: px-32 py-96 結構: 置中標題與 CTA,下方堆疊浮動玻璃卡片。 |
|
|
|
03. 健康餐飲 CleanBite 無麩質餐 |
Direction: Horizontal Align: Space Between Padding: px-64 py-64 結構: 左右分割版面,配合圓形美食遮罩照片。 |
|
|
|
04. 寵物用品 SeniorCat 健檢貓砂 |
Direction: Horizontal Gap: 40px Padding: px-48 py-64 結構: 溫馨主視覺與貓爪標籤、比較表格區。 |
|
|
|
05. 數位產品 ExecSlide 簡報組件 |
Direction: Vertical Align: Center Gap: 48px 結構: 頂部文案,底部懸浮 3D 簡報 Gallery。 |
|
|
|
06. 美妝保養 Luxury Vegan Skincare |
Direction: Horizontal Padding: px-80 py-100 Align: Center 結構: 雜誌風優雅分割,左襯線體標題,右高光商品圖。 |
|
|
|
07. 健身運動 Mindful Yoga App |
Direction: Horizontal Gap: 32px Padding: px-48 py-64 結構: 不對稱雙欄,搭配弧形背景與浮動數據標籤。 |
|
|
|
08. 個人作品集 UI/UX Studio Portfolio |
Direction: Vertical Gap: 64px Padding: px-64 py-96 結構: 新粗獷主義 (Neo-Brutalist),超大字體與直向列表。 |
|
|
|
09. 頂級房產 Luxury Real Estate |
Direction: Vertical Align: Bottom Left Padding: px-80 py-80 結構: 全螢幕 100vh 沉浸式 Hero,暗色遮罩與金框。 |
|
|
|
10. 永續服飾 Eco Apparel Store |
Direction: Horizontal Gap: 32px Padding: px-48 py-64 結構: 雜誌版面 (Editorial Grid),左模特大圖,右數據卡片。 |
|
|
・課後作業檢查清單
生成前端視覺作業整理單
請將 PART 1 的提案企劃,轉化為視覺 Moodboard、AI 圖像資產與完整 Figma UI 稿,準備接軌 PART 3 的網頁程式碼生成。
| 執行週次 | 單元主題與作業目標 | 使用的工具與分工 | 交付成果物 (Deliverables) | 作業檢查狀態 |
|---|---|---|---|---|
| W10 |
作業四:視覺對標與 Moodboard 建立 • 收集競品網站與定案 60-30-10 配色比例。 |
Pinterest 視覺靈感庫 Figma Moodboard 整理 |
1. Pinterest 靈感畫板連結 2. 色彩與字體規範卡 |
|
| W11 |
作業五:AI 圖像與商業資產生成 • 撰寫提示詞生成 Hero 圖片、Icon 與去背資產。 |
ChatGPT DALL-E 3 生成 Remove.bg 去背工具 |
1. Hero 區塊高解析主視覺圖 2. 去背 PNG/SVG Icon 包 |
|
| W12 ~ W13 |
作業六:Figma Auto Layout 網頁骨架 • 全面套用 Auto Layout 完成響應式 UI 設計。 |
Figma Auto Layout (Flexbox) |
1. Figma 1x UI 設計稿連結 2. 導出 PNG 介面標註圖 |
|
|
🏆 單元最終完成物: 完成一份可供 AI 精確辨識(Design-to-Code Ready)的 Figma 網頁視覺藍圖,準備進入 PART 3 (Claude 導購網頁發布)。 |
Figma 響應式 UI 稿 | 準備對接 PART 3 | ||