為什麼分三層 + 跟 AI 改網頁的三個層級指令
我先講一句你可能會傻眼的話：
那這篇還教什麼？
我教的是「為什麼 AI 寫的網頁，
長那個樣子」。
知道為什麼長那樣，
你才知道要叫 AI 改哪一塊。
知道改哪一塊，
你才能下對指令、一次就改對，
不會跟 AI 來回 10 輪還在原地。
這篇是我們系列的轉捩點 —
從這裡開始，
你會「跟 AI 講同一種語言」。
假設你打開 Antigravity（或任何 AI 工具），
第一句話就跟它說：
三秒鐘後 AI 給你三個檔案：
你打開檔案夾，
腦袋第一個問題會是：
「為什麼一定要三個檔案？
不能寫成一坨嗎？」
這個問題就是這篇要回答的核心。
三層分開寫的真正理由很實際 —
跟教科書怎麼說無關，
而是因為「分開」對 AI 跟對你都有具體的好處。
想像一下：
如果所有東西寫在一個檔案裡，
你跟 AI 說「按鈕變藍色」，
AI 為了找到那個按鈕，
得在一坨 1000 行的程式裡掃半天，
還可能順手改壞旁邊的東西。
分成三層之後：
這件事對 vibe coder 超重要 —
你會發現 AI 改一個東西的時候，
比較不會亂改其他地方。
如果你做的是「一個有很多頁的網站」，
會有 5、10、20 個不同的 HTML 檔。
如果樣式全部塞在 HTML 裡，
你要改一次顏色，
得改 20 個檔案。
分出 CSS 之後，
你只改一個 style.css，
20 個頁面同時變色。
這也是為什麼後面我們講 GitHub、講部署的時候，
你會發現「分層」省下的時間會越來越誇張。
AI 工具有「context」的概念 —
它一次能讀的字數是有限的。
如果你的網頁都擠在一個檔案，
AI 每次改任何東西都得把整個檔讀一次。
分層之後，
「只想改顏色」的時候 AI 只讀 style.css，
速度快、用的額度少、出錯機率低。
你不用記語法，
但你要記得這個分工。
因為下一段 Part B 我們就要用這個分工，
來教你怎麼下指令。
現在你有了第一版網頁，
跑起來大概 80 分。
你想把它改成 100 分。
vibe coder 90% 的時間花在「改」這件事上 —
真正從零做的時間其實很少。
改的時候，
你的指令要對上層級。
對錯了，AI 就會做出你不想要的東西。
「加」「放」「插入」「新增」這類動作。
這些都是「畫面上多了一個東西」，
所以 AI 要動的是 HTML。
下這類指令的時候，
盡量把「這個東西要長在誰旁邊」講清楚。
例如：
位置 + 內容講清楚，
AI 一次就放對。
「變」「改成」「再大一點」「換顏色」「圓角」「靠右」這類動作。
這些都是「東西還是同一個，但長相不一樣了」，
所以 AI 要動的是 CSS。
下這類指令的時候，
用「形容詞」比用「數字」好。
因為你不會記得 padding 是 16px 還是 20px，
但你知道「再寬鬆一點」「太擠了」。
AI 對形容詞 + 對比的反應，
比對「padding: 24px」這種精確指令還要好。
「點」「按」「滑」「跳出」「自動」「送出」這類動作。
這些都是「你要互動才會發生的事」，
所以 AI 要動的是 JavaScript。
下這類指令的時候，
把觸發條件 + 反應動作 + 結束狀態三件事講清楚。
三個都講清楚，
AI 不會亂自由發揮。
同樣是「按鈕」，
三種改法分屬三個不同的層級。
看完這個範例，
你就會永遠記得怎麼分。
同一個按鈕、三種改法、三個檔案。
看懂這個分工之後，
你下次叫 AI 改東西的時候，
會自動知道你的指令會落在哪一層。
三件事擠在一句話。
AI 通常會做完前兩件，
第三件做一半，
然後你會抓不到哪裡沒做好。
vibe coder 寫不出比 AI 更好的數字，
講感覺就好。
AI 不知道你要換 HTML 那層的「換掉這個按鈕的位置」，
還是 CSS 那層的「換一個樣式」。
下次想叫 AI 改網頁，
套這個結構：
把這個模板存起來，
第一週你會覺得很機械，
第二週你會發現 AI 改錯的次數變得很少，
第三週這個結構會內化成你跟 AI 對話的本能。
你不需要記語法。
你需要記住三層的分工、跟對應的指令模式。
剩下的全部是 AI 的工作。
講完三個層級的指令之後，
你大概會發現一件事：
有些東西，
你嘴巴怎麼形容都形容不到位。
「我要的卡片跟你做的差很多，
但我不知道怎麼跟你講⋯⋯」
這個感覺出現的時候，
更精準的文字幫不了你，
你需要的是「直接畫給 AI 看」。
下一篇 EP.6，
我們就要動到 Figma —
vibe coder 用最少的學習成本，
把腦袋裡的畫面變成 AI 看得懂的設計。