兩週怎麼用：先補齊，再驗收，最後預演
W10–W15 你已經用 Figma Make 與 Claude 做出網站並第一次公開部署。這兩週不再學新工具，只做三件事：補齊缺的、檢核到通過、練習講清楚。
W16 · 上半補齊內容對照期中提案的 Sitemap，補上缺的 P0 頁面，換掉所有佔位文字與圖片。你 + AI
W16 · 下半逐項驗收用下方 24 項清單檢查；沒通過的，貼修正指令請 AI 只改那一項。你 + Claude／Make
W17簡報與預演10 分鐘簡報初稿、1 分鐘備用 Demo 影片、模擬 Q&A，同儕互評。全組
原則
衝刺期不要大改版面。每次只改一個問題、改完立刻重新檢查；大改版是期末前最常見的失敗原因。
期末前檢核總表：24 項，五個類別
勾選會存在這台瀏覽器裡。W16 結束時應通過 A、B 兩類；W17 預演前五類全部通過。
A 內容內容與 P0 對照（6 項）
B RWD三種寬度（5 項）
C 無障礙WCAG AA 基本盤（6 項）
D 部署效能與上線（4 項）・還沒上線？看 部署講義
E 簡報簡報與 Demo（3 項）
三組修正指令：沒通過就貼這個
用你正在使用的工具（Figma Make 或 Claude 同一個對話）貼上。一次只貼一組，改完重新跑一次檢核。
3-1
RWD 修正（對應 B 類）
請檢查全站在 375、768、1280 三種寬度的版面，只修正下列問題，不要改視覺風格：
1) 找出所有造成水平捲軸的元素並修正（優先檢查固定寬度、圖片、表格）。
2) 375px 時導覽改為漢堡選單，按鈕與連結的點擊區至少 44×44px。
3) 768px 使用 2 欄，1280px 內容最大寬度 1200px 並置中。
修正後用條列告訴我：改了哪些檔案、哪些選擇器。
3-2
無障礙修正（對應 C 類）
請依 WCAG 2.2 AA 檢查並修正整個網站，不要改版面與配色（對比不足時只微調色碼並告訴我）：
1) 所有互動元素可用鍵盤操作，且有清楚的 :focus-visible 樣式。
2) 有意義的圖片補上 alt，裝飾圖用 alt=""。
3) 表單欄位都有 label，錯誤訊息以文字顯示並用 aria-live 通知。
4) 加入 @media (prefers-reduced-motion: reduce) 關閉動畫與捲動效果。
5) 頁面有 <main>、<nav>、<footer> 地標與正確的標題層級。
最後列出修改清單與無法自動確認、需要我手動檢查的項目。
3-3
效能與分享設定（對應 D 類）
請優化網站載入速度，不要改視覺：
1) 圖片加上 loading="lazy" 與明確 width／height，首屏大圖除外。
2) 把大於 300KB 的圖片列出來，建議壓縮尺寸（我自己處理）。
3) 移除未使用的 CSS／JS 與 console.log。
4) 補上 <title>、meta description 與 Open Graph 分享圖。
輸出：改了什麼、預期對 Lighthouse 效能的影響。
怎麼驗證
Chrome 開網址 → 按 F12 → 左上角手機圖示切換寬度（375／768／1280）→ Lighthouse 分頁按 Analyze。出現紅色警告時，把警告原文貼給 AI，比描述「看起來怪怪的」更準。
W17 預演與期末簡報：10 分鐘怎麼分配
| 時間 | 內容 | 要點 |
|---|---|---|
| 1 分鐘 | 問題與提案回顧 | 用期中提案一句話說明客戶痛點與主張。 |
| 2 分鐘 | 建置過程：用了哪些 AI 工具 | Make／Claude 各做哪部分，一張流程圖。 |
| 4 分鐘 | Live Demo | 手機＋桌機各走一遍核心任務；準備好備用影片。 |
| 2 分鐘 | 驗收結果與反思 | Lighthouse 分數、遇到的問題與補救指令。 |
| 1 分鐘 | 下一步與致謝 | 如果有三週，你會先改什麼？ |
4-1
可能被問到的問題
這個網站哪些是 AI 做的、哪些是你做的？
準備好指令紀錄與你修改的地方。
手機上看起來怎麼樣？無障礙怎麼處理？
直接用手機開網址，並說出你做了哪三項無障礙檢查。
如果客戶要自己改內容，怎麼辦？
說明內容放哪個檔案、怎麼更新、怎麼重新發佈。
為什麼選這個工具路線？
回到 UNIT 09 的選型理由。