MIXXIN Vibe Coder 入門課
← 課程總覽 第 1 堂 · 60 分鐘 第 02 堂 →
LESSON 01 · 午餐揪團頁主線

環境設定 + 第一個上線的畫面

從零到「開一個 PR、拿到一個會動的線上預覽網址」。今天不求你懂原理，只求你親手把一個網頁送上線——那個「哇，我真的做出東西了」的瞬間，就是這堂課唯一的目標。

完全零基礎 全程瀏覽器操作 不裝任何軟體 產出：一個上線網址
✓
完成定義 · Definition of Done
學員的分支上有一個 PR，PR 上有機器人自動回覆的預覽網址，點開網址看得到自己的頁面。做到這件事，這堂課就成功了。
給講師：這堂唯一的敵人是「卡在環境設定」。全程在雲端工作現場、以對話式協作為主，任何摩擦都砍掉，把情緒目標維持在「哇」。
0:00–0:08開場：展示第 10 堂完成品，建立期待
0:08–0:16三層分工快速講 + 現場「檢視原始碼」示範
0:16–0:26開通工作現場：登入 GitHub、開 Codespace
0:26–0:40用 AI 生成第一版午餐揪團頁（Prompt A）
0:40–0:50拆解程式碼：指認 HTML/CSS/JS
0:50–0:58開分支、commit、開 PR（跟著手勢做，原理留第 2 堂）
0:58–1:00收尾：拿到預覽網址、預告第 2 堂
01網頁怎麼跑出來

你在瀏覽器打一個網址，等於跟某台電腦要一份文件；那台電腦把文件（其實是純文字）寄回來；瀏覽器再把純文字畫成你看到的畫面。

💡一句話版本

畫面的來源是一份文件，文件本身其實是純文字。等一下我們做「檢視原始碼」，你就會親眼看到那份純文字長什麼樣。

你的瀏覽器 打一個網址 要文件 某台伺服器 寄回純文字 回文件 瀏覽器 把文字「畫」出來 👁
圖 1.1網頁怎麼跑出來：打網址就像跟某台電腦要一份文件，回來的其實是純文字，瀏覽器負責把它畫成畫面。
02HTML / CSS / JS 三層分工

那份文件裡有三種角色，用「一個人」來比喻最好記：

HTML
骨架
這個人有頭、有手、有腳——基本結構長怎樣。
CSS
外觀
穿什麼衣服、什麼髮型、什麼顏色。
JS
行為
會不會動、點一下會不會反應。
今天下課前，你要能指著自己的頁面說：「這段是骨架、這段是外觀、這段是行為。」不用背語法，能指認就好。
HTML 骨架 有頭、有手、有腳的基本結構 CSS 外觀 穿什麼衣服、什麼顏色、什麼髮型 JS 行為 會不會動、點了有沒有反應 = 今日午餐揪團 揪團卡 我要跟 揪團卡 我要跟
圖 2.1三層疊起來，就組成你看到的午餐揪團頁。骨架撐結構、外觀上色、行為讓按鈕會動。
03開通你的工作現場

你不用在自己電腦裝任何東西。GitHub 借你一台雲端電腦、開在瀏覽器分頁裡——大家的環境都一樣，不會卡在「我這台電腦怪怪的」。

💡你的「工作現場」

把它想成你和 AI 一起施工的現場：你的檔案放這、AI 改的東西落在這、預覽也從這出來。（工程師管這個東西叫 IDE；名字你不用記，記得它是「現場」就好。）

🗣️你主要用「說的」，偶爾「看一眼」

接下來整堂課，你大多時候是用白話跟 AI 說你要什麼，它改完，你回到現場看一眼它動了哪裡。你不用會「操作」這個編輯器，但要會「看」它——因為你的工作是看得懂 AI 在幹嘛、該喊卡的時候喊卡。

開通步驟

  • 登入 GitHub 帳號（課前應已開通並受邀進教學用 repo）
  • 打開課程提供的 template repo 頁面
  • 點右上角綠色 Code 按鈕 → 切到 Codespaces 分頁 → 按 Create codespace on main
  • 等 10–30 秒，瀏覽器分頁裡長出你的工作現場——之後就在這裡跟 AI 協作
給講師：Codespaces 個人免費額度每月約 60 小時、單堂課綽綽有餘；若額度或權限卡住，退路是在 repo 頁面按鍵盤 .（句點）開 github.dev 先撐著。開課前務必自己完整跑過一次，把任何摩擦提前砍掉。
雲端 IDE / 瀏覽器開發環境的氛圍照：螢幕上有程式碼、乾淨的工作桌
圖 3.1整堂課都在瀏覽器裡的工作現場完成，不用在自己電腦上裝任何東西。
04用 AI 生成第一版頁面

打開 AI 助手，跟它描述你想要的午餐揪團頁，讓它幫你生出程式碼。下面 Prompt A 是起手式——照著改成你自己的話，不用逐字照抄。貼上、送出，看看它給你什麼。

遇到 AI 回覆不理想時，不要重寫整個 prompt——追加一句話修正它就好（例如「卡片再大一點」「顏色換暖一點」）。
兩人一起看筆電討論畫面的氛圍照（比喻與 AI 結對）
圖 4.1把 AI 當成結對夥伴：你描述想要什麼，它生程式碼，你再用一句話微調。
05拆解程式碼

現在回頭看 AI 給你的東西。你不用看懂每一行，但要做到一件事：指認出哪一段是骨架（HTML）、哪一段是外觀（CSS）、哪一段是行為（JS）。

🎯你的工作不是背語法

是看得懂它在做什麼、講得出正確的詞來指揮它。讀不懂某一段？用下方 Prompt C 請 AI 用白話解釋。

<div class="card">鼎泰豐</div> 骨架 HTML .card { background: #F5B947; } 外觀 CSS button.onclick = () => count++ 行為 JS
圖 5.1拆解時要做的事：把 AI 給的每一段，對上骨架 / 外觀 / 行為其中一類。
06開分支 · commit · 開 PR

這段先跟著手勢做，原理下一堂會完整講。今天只要記住一句話：

🔀一句話心法

「開分支」是幫自己開一個安全的副本，「PR」是跟大家說「我改好了，可以看看囉」。

送出 PR 之後，系統會自動幫你把這個版本部署到一個網址。稍等一下，PR 頁面上會出現一個連結——那就是你的頁面現在活在網路上的樣子。

main（大家共用的正式版） 你的分支：安全的副本，隨便改都不影響 main commit commit PR 合回 → 預覽網址
圖 6.1開分支是開一個安全副本、PR 是說「我改好了可以看看」；PR 一開，系統就自動生出你的預覽網址。
Wow 時刻 → 打開那個連結，這是你的網址，全世界只要有連結都能看到。傳給旁邊的同事，互看彼此做的版本！
一群人圍著筆電、開心指著螢幕的氛圍照
圖 6.2互傳預覽網址、互看彼此的頁面——這是第 1 堂想留給大家的「我真的做出東西了」的一刻。
·AI Prompt speed dial起手式 · 用自己的話改
A生成第一版頁面 
我要做一個「今日午餐揪團」的網頁，純 HTML/CSS/JS（不要用任何框架），給我一個檔案就好。
需求：
- 標題「今日午餐揪團」
- 3 張揪團卡（餐廳名稱、發起人、人數、「我要跟」按鈕）
- 乾淨現代卡片式排版，溫暖橘黃色系
- 手機電腦都要正常顯示

請直接給我完整可執行的程式碼。
B個人化調整（課後選配） 
把標題改成「[你的名字]的午餐揪團」，
主色改成藍綠色系，
再幫我多加一張揪團卡，餐廳名稱用「鼎泰豐」。
C讀不懂程式碼時 
請用最白話的方式，跟一個完全沒學過程式的人解釋：
這段程式碼裡，哪些是 HTML（骨架）、哪些是 CSS（外觀）、哪些是 JS（行為）？
請逐段標註，不要用專業術語。
·作業與檢核

作業：每人一個 PR，描述填「我改了什麼、為什麼」。選配：完成 Prompt B 的個人化調整並更新 PR。

講師 / 助教檢核重點

  • 每位學員的 PR 都有自動預覽連結，畫面正常
  • 學員能口頭指認「這是骨架 / 外觀 / 行為」
  • 沒有學員卡在環境設定超過 5 分鐘