網頁設計課程講義

一、期末作業應繳交成果物清單
(Final Deliverables Checklist)

歸屬模組	成果物名稱	內容規範與規格要求	繳交格式
PART 1：商業靈魂	商業提案企劃書	包含產品定位、Persona 受眾描繪、競品 SWOT 防禦矩陣、單位財務模型 (Unit Economics) 與 PAS 高轉換導購文案。	企劃書 PDF 檔
PART 2：視覺骨架	Figma 響應式 UI 設計稿	包含 Moodboard 風格情緒板、DALL-E 3 生成之商業資產圖庫、全面套用 Auto Layout 之 Desktop & Mobile UI 藍圖。	Figma 可檢視連結 (URL)
PART 3：程式靈魂	Vibe Coding 導購網站	透過 Claude Vibe Coding 轉譯生成，具備 React + Tailwind CSS 結構、動態微互動（Hover, Modal, State 購物車）與 RWD 適應力。	Cloudflare / Vercel 正式 URL
期末總整合	期末簡報 PPT & 展示錄影	整合 Part 1 ~ Part 3 執行過程的 10 分鐘發表簡報（12~15 頁），附帶 1 分鐘實體網站操作展示影片（以防現場網路異常）。	簡報 PPTX / PDF + MP4 影片

二、期末報告簡報結構與單元內容
(Presentation Deck Outline)

簡報單元	單元主題	簡報應涵蓋之核心內容與圖表	建議頁數
Unit 01	商業選品與痛點對標	專案名稱、選品理念與目標 TA (Persona) 描繪。 痛點地圖：受眾的焦慮點與產品 USP (獨特賣點)。	2 ~ 3 頁
Unit 02	競品解構與財務推演	NotebookLM 競品負評解構與防禦矩陣。 單位經濟模型：定價、成本、毛利率與目標 CAC 試算。	2 ~ 3 頁
Unit 03	視覺 Vibe 與 Figma 骨架	Pinterest Moodboard 與 60-30-10 配色 / 字體規範。 ChatGPT (DALL-E 3) AI 圖像資產生成對照。 Figma Auto Layout (Flexbox) 結構展示圖。	3 ~ 4 頁
Unit 04	Vibe Coding 轉譯與互動	Claude Master Vibe Prompt 指揮對話過程與除錯紀錄。 微互動展示：Modal 彈窗、State 購物車與 Hover 動態。	2 ~ 3 頁
Unit 05	Live Demo & 未來維護	現場 Live Demo 演示與 Cloudflare / Vercel 網址展示。 AI 自動化內容更新策略（如每週菜單/庫存更新計畫）。	2 ~ 3 頁

三、期末報告執行週次單元規劃
(W17 ~ W18 Schedule)

執行週次	單元名稱	課堂教學與學生實作內容	當週里程碑
W17	期末發表預演與 AI 演練 Demo Rehearsal & Q&A	進行 Cloudflare / Vercel 部署最後驗收與跨裝置 RWD 測試。 撰寫期末簡報 PPT，並使用 ChatGPT / Claude 模擬評審 Q&A。 錄製 1 分鐘 Live Demo 備用操作影片。	完成網站上線與簡報初稿
W18	期末成果發表會 Final Demo Day	每組進行 10 分鐘口頭發表 + 實體網站 Live Demo 展示。 接受現場 3 分鐘 Q&A 提問與講師講評。 進行同儕互評與期末專案總結。	完成期末發表與最終交付

四、期末報告與作業總評分標準
(Final Grading Rubrics)

評分構面	評分佔比	詳細評分標準與驗收指標	評分關注點
1. 商業策略與文案企劃	25%	選品定位明確，PAS 文案能否精準抓住受眾焦慮與痛點，財務 Unit Economics 推演邏輯合理且目標毛利率 > 60%。	商業邏輯與轉化力
2. 視覺 UI 與規範完整度	25%	符合 Moodboard 視覺對標，配色與字體階層規範統一，Figma 檔案完全採用 Auto Layout 且無跑版情況。	設計美學與工程規範
3. Vibe Coding 與技術實作	25%	對話式 Prompt 引導品質佳，網站成功生成 React + Tailwind 代碼，包含高質感的微互動（Hover, Modal, State 試算）。	AI 指揮力與互動體驗
4. 網站部署與 Demo 發表	25%	網站順利部署至 Cloudflare / Vercel 並可公開存取，Open Graph 社群卡片設定完整，簡報表達清晰流暢。	完成度與現場表現