學期專題：模擬一家數位設計公司去競標
各組扮演一家數位設計公司，從下面的競標題目擇一，整學期都圍繞同一個題目。期中證明「我們做得出來」，期末證明「我們真的做出來了」——期末網站必須以期中提案的架構與精稿為藍本。
競標題目（擇一）
OO 縣市「新世代地方創生與觀光島嶼」官方入口網建置案
三週提案講義的示範案例「島嶼新浪潮」即為此題，流程可直接對照。
數位發展部「AI 世代全民數位素養推廣」主題專題網
重點在資訊架構、教學內容分眾與互動測驗。
台灣當代美術館（MoCA）「虛擬國際雙年展」線上展覽館
重點在視覺張力、展品瀏覽體驗與動態效果。
自訂網站建置／改版案
需先和老師討論確認，並自行整理一份 RFP 摘要（需求、受眾、預算、工期）。
從期中到期末：同一個專題的兩個交付階段
視覺提案：服務建議書＋提案簡報
以 三週提案講義（UNIT 05–07）的 Lv.1–Lv.10 產出為主體，排版成投標文件，再濃縮成上台用的簡報。
- 服務建議書 PDFA4，約 15–20 頁
- 提案簡報 PDF16:9，10–15 頁
- Figma 檔案連結架構圖、線框、情緒板、精稿、設計系統
建置上線：把提案做成真的網站
以 Claude 與（或）Figma Make 為主要工具，依期中提案建置網站並部署成公開網址。
- 公開網址P0 頁面全部可瀏覽、可操作
- 提案 vs. 成品對照說明差異與取捨
- 期末簡報＋Live Demo附 1 分鐘備用操作影片
分組與角色
視覺擔當
情緒板、Figma 精稿與設計系統；期末負責視覺還原度與 RWD。
企劃／文案擔當
需求分析、資訊架構、服務建議書；期末負責真實內容與文案。
互動／AI 技術擔當
Figma Make 原型、Claude 建置與部署；期末負責上線與 Live Demo。
歷屆期中服務建議書、期末網站彙整在 114-1 期中、期末作業彙整（FigJam）↗；更多案例見 web01 第 5 章。
每週作業與里程碑
每週的課後作業都是期中、期末的「零件」。照著這張表做，W09 與 W18 只需要組裝，不用從零開始。各週詳細要求以該單元頁的「課後作業」為準，繳交至 Moodle。
| 週次 | 單元 | 本週要交的零件 | 會用在 |
|---|---|---|---|
| P1 | 策略與架構 · W01–W05 | ||
| W01 | 解構現代網頁設計 | 分組、選定競標題目、A4 主題發想企劃書 | 期中 · 需求理解 |
| W02 | 解讀 RFP 與需求分析 | Persona、競品 SWOT、功能規格清單（P0／P1） | 期中 · 受眾洞察／功能範疇 |
| W03–04 | 資訊架構與 Figma 製作 | Figma Sitemap＋User Flow＋主要頁面線框 Frame、服務建議書大綱 | 期中 · 資訊架構 |
| W05 | 視覺風格與 RWD 規範 | 情緒板＋UI Style Guide（色彩、字體、斷點） | 期中 · 品牌調性／設計系統 |
| P2 | 三週提案＋期中 · W06–W09 | ||
| W06 | 提案①看懂需求、拆出結構 | Lv.1–4：需求理解摘要、Persona＋競品＋功能規格、Sitemap、四個 P0 頁面線框（成果存進收件匣） | 期中 · 需求理解／資訊架構 |
| W07 | 提案②長出視覺 | Lv.5–6：情緒板與色票、顏色變數／文字樣式／按鈕元件、四個頁面精稿 | 期中 · 品牌調性／設計系統／精稿 |
| W08 | 提案③能點、能測、能交 | Lv.7–10：Figma Prototype（核心任務點得完）、十項無障礙測試、公司實績、甘特圖、簡報骨架（提案成長圖 ≥ 10／12） | 期中 · 建議書全稿＋簡報素材 |
| W09 | 期中作業：網站建置標案競標提案 | 期中提案發表：服務建議書＋提案簡報＋Figma 連結 | 期中成績 |
| P3 | 建置上線（Claude × Figma Make）· W10–W17 | ||
| W10 | 從設計到網頁的 AI 橋樑：工具選型與架構 | 依評審回饋修正提案；選定建置路線，交一頁建置計畫 | 期末 · 建置路線 |
| W11–12 | Figma Make AI 靈感與元件生成：從 AI 骨架到高質感 UI | W11 首頁可互動版本；W12 至少 2 個 P0 頁面串接，發佈 figma.site 網址 | 期末 · 網站 |
| W13–15 | Claude 網頁開發入門：從 0 到 1 | W13 首頁；W14 全部 P0 頁面可瀏覽；W15 RWD＋串接＋第一次公開部署，保留 AI 對話紀錄 | 期末 · 網站／AI 協作紀錄 |
| W16–17 | 實作衝刺與期末檢核 | W16 補齊內容並通過 24 項檢核（內容、RWD、無障礙、部署）；W17 簡報初稿、1 分鐘備用 Demo、模擬 Q&A | 期末 · 驗收／簡報 |
| W18 | 期末成果發表 | 10 分鐘發表＋Live Demo＋Q&A，同儕互評 | 期末成績 |
期中：視覺提案——服務建議書＋提案簡報
期中不是交一份 Figma 檔，而是交一份評審拿得到手的投標文件，再加一場站上台的提案簡報。內容以 三週提案講義（UNIT 05–07）做出來的成果為主體，換成你們這組的題目重跑一次 Lv.1–Lv.10。
2026.11.05（W09）
上課前上傳 Moodle，當天發表。
10 分鐘＋Q&A
每組 10 分鐘簡報，接著 3–5 分鐘評審提問。
Lv.1–Lv.10
視覺素材來自 Figma Agent，圖表來自 FigJam AI。
要交的東西
| 交付物 | 內容與規格 | 格式 |
|---|---|---|
| 服務建議書 必交 | 書面投標文件，資訊密度可以高，附完整表格與數字佐證。章節見 3-2。A4 直式，約 15–20 頁，全份套用同一套品牌變數。 | |
| 提案簡報 必交 | 由服務建議書濃縮改編，一頁一個重點、字級遠看也清楚。大綱見 3-3。16:9，10–15 頁。 | PDF（Figma Slides 可附分享連結） |
| Figma 檔案 必交 | Sitemap、線框、情緒板、精稿（桌機＋手機）、設計系統（色彩／字體變數），畫框命名清楚。 | 可檢視連結（URL） |
| Figma Prototype 互動原型 加分 | Lv.7：核心任務可以從首頁點到完成（換頁、按鈕 Hover、送出回饋），簡報中附 Prototype 連結 QR code。 | 發佈網址 |
服務建議書章節：每一章對回三週提案講義的哪一關
服務建議書拆成「需求理解＋四大部分」。第 3 部分不用重做，就是 Lv.3–Lv.8 的成果，只需摘要排版；第 1、2、4 部分是 Lv.10 新做的頁面。
| 章節 | 內容重點 | 對應關卡 | 建議頁數 |
|---|---|---|---|
| 0．封面・目錄・需求理解 | 案名、公司名稱；RFP 核心需求摘要，讓評審知道「我們懂你要什麼」 | Lv.1 | 2–3 |
| 1．公司簡介與基本資訊 | 品牌識別＋一句話定位、關鍵數字、核心服務、認證、聯絡窗口 | Lv.10-1 | 1–2 |
| 2．承做經驗與代表性實績 | 3 個跟本案相關的案例，每個至少一個可量化成效數字 | Lv.10-2 | 1–2 |
| 3．UI/UX 規劃與 RWD | Persona 與 SWOT、Sitemap、線框、情緒板、設計系統、桌機／手機精稿、互動原型、無障礙檢核 | Lv.2–Lv.8 | 6–9 |
| 4．專案管理與維運 | 甘特圖（天數加總符合 RFP 工期）、組織圖（職稱＋職掌）、交付項目 | Lv.10-4 | 2–3 |
只列案名沒有數字、甘特圖只寫「設計／開發」兩大塊、提案文件跟網站精稿用兩套不同風格——評審會直接扣分。報價單（價格）不在本次範圍。
提案簡報大綱（15 頁版，可濃縮為 10 頁）
| 頁 | 投影片重點 | 素材來源 |
|---|---|---|
| 1–2 | 封面（案名、公司、日期）／議程 | Lv.6 品牌識別 |
| 3–4 | 我們如何理解這個案子／提案核心主張（3 個品牌關鍵字＝差異化賣點） | Lv.1、Lv.5 |
| 5–7 | 團隊優勢／案例佐證（一頁講完關鍵數字）／關鍵團隊與職掌 | Lv.10-1、10-2、10-4 |
| 8–10 | Persona 受眾洞察／競品 SWOT 突破點／使用者旅程 | Lv.2、Lv.3 |
| 11–13 | 資訊架構 Sitemap／P0・P1 功能範疇／設計系統 | Lv.3、Lv.2、Lv.6 |
| 14–15 | 前端展示（桌機／手機精稿＋互動 QR code）／結語與 Q&A | Lv.6、Lv.7 |
現場網路可能不穩：第 14 頁的互動示範請準備截圖或短影片當備案。
範例：三週提案講義 島嶼新浪潮的實際產出
點縮圖可放大翻閱。左邊是 A4 書面服務建議書（20 頁），右邊是同一份內容改編的 16:9 提案簡報（15 頁）——注意兩者資訊密度的差別。
期中自我檢核
建議書服務建議書
簡報提案簡報與發表
期末：把期中提案建置成真實可用的網站
期末的評審問題只有一個：「你們期中答應的東西，做出來了嗎？」工具收斂成 Claude 與 Figma Make 兩套，可以只用一套，也可以混用。重點是網站能公開瀏覽、內容是真的、P0 功能都能操作。
Cloudflare Pages、GitHub Pages、Netlify 的免費方案比較、Cloudflare 後台逐步圖解、Wrangler 指令一行上傳與更新，都整理在 補充講義 19：網站部署上線。
三條建置路線（W10 決定）
Figma Make 為主
適合視覺導向、頁數少、想最大程度保留精稿樣子的組別。
- 直接從 Figma 精稿生成
- 用 Prompt 補互動與狀態
- 以 Figma Make 發佈網址上線
Claude 為主
適合功能導向、頁數多、需要篩選、表單、資料列表的組別。
- 精稿截圖＋設計變數交給 Claude
- 逐頁生成 HTML/CSS/JS（或 React）
- GitHub → Vercel／Cloudflare 部署
Figma Make 起稿 → Claude 精修
用 Figma Make 快速做出互動原型，再交給 Claude 整理結構、補齊頁面與部署。
- 原型速度＋程式可控性
- 最容易兼顧還原度與功能
- 需記錄兩邊各負責哪些頁面
網站最低規格
| 項目 | 要求 | 對照期中 |
|---|---|---|
| 頁面範圍 | 期中標為 P0 的頁面全部完成（至少 3 頁），導覽可互相連通 | 功能範疇、Sitemap |
| 視覺還原 | 色彩、字體、間距沿用期中設計系統；與精稿的差異需在簡報說明 | 設計系統、精稿 |
| 互動 | 至少 2 個有意義的互動（篩選、表單回饋、地圖、輪播、展開等），不是只有 hover | 互動原型 |
| RWD | 手機、平板、桌機三種寬度都不跑版，手機版導覽可用 | RWD 規範 |
| 無障礙 | 文字對比達 WCAG AA、圖片有替代文字、可用鍵盤操作主要功能 | 無障礙檢核 |
| 內容 | 使用真實或擬真內容，不留 Lorem ipsum；有網站標題、favicon、分享縮圖（OG） | — |
| 上線 | 公開網址，任何人不用登入就能打開 | — |
要交的東西
| 交付物 | 內容與規格 | 格式 |
|---|---|---|
| 網站網址 必交 | Figma Make 發佈網址，或 Vercel／Cloudflare／GitHub Pages 網址 | URL |
| 專案原始檔 必交 | Figma Make 檔案連結，或 GitHub repo／程式壓縮檔 | URL／ZIP |
| AI 協作紀錄 必交 | Claude 對話分享連結或 Prompt 紀錄，挑 3 段「卡關→解決」的關鍵對話 | URL／PDF |
| 期末簡報 必交 | 10–12 頁，結構見 4-4 | |
| 備用操作影片 必交 | 約 1 分鐘，示範主要流程，以防現場網路異常 | MP4 |
期末簡報結構（10 分鐘）
期中提案回顧
- 一頁摘要：題目、受眾、核心主張、評審給的回饋。
建置路線與分工
- 選了 A／B／C 哪條路線、為什麼；誰負責哪些頁面。
提案 vs. 成品對照
- 精稿與網站並排，說明保留了什麼、改了什麼、為什麼。
Live Demo
- 現場操作網站主要流程，手機版至少展示一段。
AI 協作與除錯
- 3 段關鍵對話：怎麼下指令、遇到什麼問題、怎麼解決。
驗收與後續維運
- RWD／無障礙檢核結果，未完成項目與後續規劃，接著 Q&A。
期末自我檢核
網站網站本身
發表簡報與繳交
評分標準
期中比照政府標案的評選方式（Lv.1 評分權重，扣除「價格」改為「簡報與攻防」）；期末看的是「提案有沒有被兌現」。學期成績中平時、期中、期末的比例，依教學大綱公告為準。
| 評分構面 | 佔比 |
|---|---|
| 設計與技術能力 需求理解、資訊架構、視覺精稿與設計系統、RWD 與無障礙規劃 | 40% |
| 專案管理能力 甘特圖工期合理、組織圖職掌清楚、交付項目明確 | 20% |
| 公司經驗與團隊 公司簡介、代表性實績有數字佐證、文件視覺一致 | 20% |
| 簡報與評選攻防 時間掌控、一頁一重點、回答評審提問 | 20% |
| 評分構面 | 佔比 |
|---|---|
| 提案兌現度 P0 頁面與功能是否都做到；與期中提案的差異說明合理 | 25% |
| 視覺與 RWD 品質 設計系統還原、三種寬度不跑版、對比與可讀性 | 25% |
| 互動與 AI 實作 互動有意義且穩定；Claude／Figma Make 協作紀錄清楚 | 25% |
| 上線與發表 公開網址可用、內容完整、Live Demo 與 Q&A 表現 | 25% |
繳交方式與常見問題
一律上傳 Moodle
每組由一位代表上傳，連結類（Figma、網址、Claude 對話）請整理在同一份文件或繳交欄位中，權限設為「知道連結的人可檢視」。
檔名規則
組別_專題名稱_交付物.pdf
例：G03_島嶼新浪潮_服務建議書.pdf、G03_島嶼新浪潮_期末簡報.pdf