你應該學多少前端？

AI 可以幫你寫 code，但你需要知道怎麼「看」和怎麼「說」。

💡

Vibe Coder 重點

在 AI 時代，前端學習的目標不是「能從零手寫」，而是「能跟 AI 高效協作」。 就像你不需要會蓋房子，但你需要看得懂設計圖，才能跟工人溝通。

你需要三個能力：看懂結構、定位問題、精確描述。

學習光譜

三個等級，你要站在哪裡？

🔴完全不懂(危險區)
  • AI 幫你做了一個頁面，看起來能動，但你不知道它把 API Key 寫死在前端了
  • 畫面跑版，你只能說「幫我修」，AI 改了 A 壞了 B，來回 15 次還沒搞定
  • 這就是「70% 問題」：AI 能幫你做到 70%，但最後 30% 的 debug 和調整需要你看得懂
← 你的目標
🟢Vibe Coder(甜蜜點)
  • AI 生成程式碼後，你掃一眼就知道它用了 flexbox 排版，結構沒問題
  • 手機版跑版時，你知道要去找 media query 而不是改 HTML
  • 你能說「.card 的 border-radius 改成 12px，gap 加到 16px」，一次到位
  • 你看得懂 AI 的產出，所以不會讓有安全漏洞的 code 上線
🔵手刻全端工程師(過度投資)
  • 能從零手寫整個 React + Tailwind + API 串接
  • 精通每個 CSS 屬性、JS 閉包、瀏覽器渲染機制
  • 花了 3 年學習，但 AI 30 秒就能產出同樣的 code
  • 適合想成為專業工程師的人，但不是 Vibe Coder 的最佳策略

學習範圍

你需要學 vs 不需要學

✅你需要學的（本課程會教）
  • HTML 標籤的意義：看到 <div> 知道是容器、<img> 知道是圖片、<a> 知道是連結
  • CSS 核心概念：margin 是外間距、padding 是內間距、flex 讓東西排成一行
  • DevTools 基本操作：按 F12 能看到任何網頁的 HTML 和 CSS
  • 分層 debug 思維：按鈕長得醜 → 查 CSS；按鈕按了沒反應 → 查 JavaScript
  • 精確描述問題的詞彙：能說「.header 的 z-index 要比 .modal 高」而不是「那個東西被擋住了」
❌不需要學的（讓 AI 做）
  • 背 150 個 HTML 標籤（常用的只有 20 個，其他讓 AI 幫你查）
  • 手寫 CSS Grid 的 12 欄系統（跟 AI 說「用 grid 排成三欄」就好）
  • 從零手寫表單驗證的 JavaScript（AI 最擅長這種重複性邏輯）
  • 記住 CSS 顏色代碼（#ff6b6b 是什麼紅？讓 AI 幫你挑）
  • 瀏覽器兼容性 polyfill（2025 年了，大部分都不用擔心了）

Prompt 對比

同樣的問題，不同的說法

點擊切換，感受「懂前端」和「不懂前端」的差距。

情境 1：導覽列擋住內容

情境 2：手機版跑版

情境 3：按鈕按了沒反應

情境 4：深色模式文字看不見

Vibe Coder 到底為什麼要學 HTML？

AI 不是會幫我寫嗎？

沒錯，AI 可以在幾秒鐘內生成一整頁 HTML。但這就像你請了一位裝潢師傅幫你裝修房子，如果你連「牆在哪裡、門在哪裡」都搞不清楚，你要怎麼跟師傅說「我要在這面牆開一扇窗」？

HTML 是每個網頁的骨架。你不需要能從零手刻一個完整頁面，但你需要能做到這三件事：

Vibe Coder 的 HTML 三種核心能力

① 讀懂結構 - 看到一段 HTML，能辨認出它在畫什麼

② 定位問題 - 畫面跑版時，知道問題出在哪一層

③ 給 AI 精確指令 - 用正確的標籤名稱告訴 AI 你要改什麼

下一課