本簡報以 16:9 橫向為主
請旋轉手機
或改用平板 / 桌機觀看
Part 1–4 我們把 AI 當成文書、資料、工具的助手。
Part 5 起，AI 變成你的前端工程夥伴——D10 把 HTML/CSS/JS 三件事用一天說清楚，再用兩個 PRAC 練「給 AI 的指令」與「把成品丟上線」。
不會寫沒關係， 看得懂就改得動， 改得動就敢交出去。
Part 4 我們學會用 AI 把工具長出來。
D10 反過來：讀 AI 寫的東西、指揮 AI 改它、最後把它推到網路上——讓「我做的工具」變成「網址可以分享的工具」。
多數前端教學要你從空白頁面刻出網站——那需要數百小時。
我們反過來：當 AI 幫你生出一份程式碼，你能讀懂、知道改哪、判斷有沒有問題。這是讓 AI 協作效率提高 3–5 倍的基本功。
CH5-1 教你讀。
CH5-2 教你說——同一段程式碼，「幫我改一下」會被 AI 全頁重構，「只改 .hero 標題的 font-size，從 32 到 40」就乾乾淨淨。
遇到前端問題的第一句話， 不是「怎麼辦」， 是「這是 H、C、還是 J 的問題」。
問題分層 → 描述精準 → AI 不亂改。三件事，一條軸線。
AI 沒有你腦子裡那個頁面。描述越模糊，自由發揮越大——你想改一個按鈕，它順手重構整個 Hero。
這節教你怎麼把「幫我改一下」變成「AI 不會改錯地方的指令」。
「盲貼程式碼」是把 AI 當成黑盒子， 「協作改頁面」是把 AI 當成執行夥伴—— 你判斷與決策，它實作。
位置 · 意圖 · 限制——三段式講話，AI 不會亂改地方。
接下來兩個 PRAC，立刻把這套口訣練成肌肉。
接下來 2.5 小時：挑一個 Part 4 的工具（或 CH5-1 作業的 v1）→ 列 3 個想改的點 → 用「位置＋意圖＋限制」生成指令 → 一次只改一個 → 存成 v2。
重點不是「改了多少」，是「每次給 AI 的指令品質」。
改版動機越具體，指令越容易寫。一次改一件事——出錯時才知道是哪步造成的。
接下來 3 小時：把 v2 推到 GitHub → 連到 Vercel → 跑通第一次部署 → 拿到一個可以分享的 URL。
卡住就把錯誤訊息丟給 LLM——那是你最快的救生圈。
靜態部署只需要兩個東西：一個 GitHub repo、一個 Vercel / Netlify 帳號——都免費。
流程完全相同——選一個跑，這次的目標是「有一個可以丟群組的網址」。
D11 / 9 小時：CH5-3 講Git 工作流（branch / commit / 回滾）+ CH5-4 講含後端的部署（Node / FastAPI 起底）+ PRAC5-3 串第一個 API + PRAC5-4 把完整專案上線。
前端不是會寫才開始， 是能改就開始； 能上線就敢交。
讀 → 改 → 上線——這條軸線會在 D11 / D12 不斷重複，每次多一層工程能力，最後變成 Part 5 的收官作品。
把今天的 v2 與網址放進「我的作品集」。明天我們從 Git 工作流開始，加上後端與 API——從靜態頁推到完整服務。