指揮畫面：精準指路 → 讓它動 → 改得更好
第 2 堂你把全班的地點都湊進了自己的頁面，現在有一頁密密麻麻的卡片。今天學兩招：先用「區塊的名字」精準指揮 AI 改對地方，再讓頁面有一個會反應的互動（點一下就有事情發生）。最後把這兩招帶回家——回去把你自己的午餐頁改得更順、更好用。
| 開場 | 回顧第 2 堂：你已經把全班地點湊進頁面，今天學怎麼精準指揮它 |
| 精準指路 | 用區塊的名字精準指揮 AI 改對地方（名詞注入） |
| 讓它動 | 讓自己的頁面有一個互動：點卡跳 popup 或「我要跟」+1 |
| 回去改寫 | 把兩招帶回自己的頁面，挑一個地方改得更好 |
你想改頁面上某一塊時，最容易脫口而出的是「上面那個」「那一條」「右邊那塊」——但 AI 看不到你的螢幕，它只能猜，猜錯就改到別的地方去了。
頁面不是一整塊，是一堆有名字的區塊拼起來的。你叫得出區塊的名字，AI 就一次命中——這就是「精準指路」。
你頁面上這些區塊，各有各的名字，先認得它們：
📍 想看這六個地名壓在一個真實頁面上長什麼樣？打開這張標註示範——每一塊都用半透明色塊圈起來、標上名字，對照著看最快記住。
叫不出名字怎麼辦？兩招都行：直接問 AI「螢幕上這個框叫什麼？」，或在那塊上按右鍵 → 檢查，讓瀏覽器指給你看。不用記，能問出來、指得到就夠了。
你寫的（其實多半是 AI 幫你生成的）HTML 是一份食譜；瀏覽器讀完食譜、煮出一鍋菜擺到螢幕上——你眼睛看到、右鍵「檢查」看到的那鍋活的畫面，工程師就叫它 DOM，裡面每一塊叫 element。你要指路、要改的，都是這鍋菜。這兩個詞知道有這回事就好、不用背——重點永遠是「叫得出區塊的名字」。
除了叫得出名字，還有兩種「版面怪怪的」狀況，你只要形容得出來、AI 就能修，一樣不用懂術語：
想親眼看到這些「盒子」？剛剛查地名用的右鍵 → 檢查（打開開發者工具，也就是有人講的 console）也能看盒子：選中任何一塊，工具會把它的內距、邊框、外距用不同顏色一層一層框出來——那張圖就是「盒子模型」本人。你不用會改，看過一次，之後跟 AI 講「這裡太擠」「間距拉開」時，你心裡就有畫面了。
- 挑你頁面上一個區塊，用它的名字下一句精準指令給 AI（例如：把導覽列標題改成你的班級揪飯團名字）
- 看 AI 是不是一次就改到對的地方——沒有的話，把區塊名講得更明確再試一次
- 打開開發者工具（右鍵 → 檢查），選一張卡片，看它的盒子（內距／外距）被顏色框出來長什麼樣
起手式 · 用自己的話改
幫我改頁面上的「導覽列」（頁面最上面那一條）： 把標題文字改成「三重揪飯團」，其他地方都不要動。 如果你不確定我說的是哪一塊，先問我，不要猜。
「精準指路」讓你改得動長相；接下來要讓頁面會反應——點一下就有事情發生。
狀態＝畫面現在記得的事。使用者點一下 → 這份記憶更新 → 畫面照著新記憶重畫一次。
最常見的兩種「會反應」：popup（彈出視窗）——點一張揪團卡，跳出一個小視窗看這攤的詳情；「我要跟」+1——按一下，那張卡的人數立刻加一、畫面馬上更新。挑一個讓 AI 幫你加上去。
- 用下面的 Prompt B 或 C，讓自己的頁面多一個互動：點卡跳 popup，或「我要跟」按一下人數 +1
- 自己點點看——畫面有沒有當場反應，就是這一拍要的手感
起手式 · 用自己的話改
在我的午餐揪團頁裡，幫我加一個互動： 點一張揪團卡的時候，跳出一個小視窗（popup）， 顯示這一攤的餐廳名稱、地址、發起人等詳細資訊， 視窗上要有一個關閉按鈕可以把它收起來。
每一張揪團卡都有一個「我要跟」按鈕和一個顯示人數的數字。 幫我加上功能：點一下按鈕，那張卡的人數就 +1， 畫面要立刻更新顯示新的數字，不用重新整理頁面。
作業＝回去改寫自己的頁面：挑一個地方，用今天學的「精準指路」和「讓它動」把它改得更好，開一個 PR。下面兩個起手式可以直接拿去改成你的話。PR 描述請回答一句：「我改了頁面的哪裡、用什麼指令做到的？」
起手式 · 用自己的話改
在我的「（換成你那攤的店名）」這張揪團卡裡，加一個『推薦菜色』： 列出（菜一）、（菜二）、（菜三）這幾道， 讓大家一看就知道去那家該點什麼。
我的揪團卡資訊太多了。 列表上每張卡只留（欄位一）、（欄位二）、（欄位三）、（欄位四）， 其他（地址、電話、營業時間…）改成點開卡片才顯示。
講師 / 助教檢核重點
- 學員能用區塊的名字精準指揮 AI（而不是「上面那個」）
- 頁面上有一個可以運作的互動（popup 或「我要跟」+1）
- 學員回去挑了自己頁面一個地方、用今天的招式改得更好（加功能或精簡呈現）
- 沒有學員在背 DOM / element 的定義（若有，提醒：能叫出區塊名就好）