MIXXIN Vibe Coder 入門課
LESSON 01 · 午餐揪團頁主線

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

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

完全零基礎 全程瀏覽器操作 不裝任何軟體 產出：一個上線網址
✓
完成定義 · Definition of Done
學員的分支上有一個 PR，PR 上有機器人自動回覆的預覽網址，點開網址看得到自己的頁面。做到這件事，這堂課就成功了。
給講師：這堂唯一的敵人是「卡在環境設定」。以 Claude Code 桌面版對話生成 + GitHub 網頁上線為主、先不碰 git，任何摩擦都砍掉，把情緒目標維持在「哇」。
0:00–0:08開場：展示第 10 堂完成品，建立期待
0:08–0:16三層分工快速講 + 現場「檢視原始碼」示範
0:16–0:26開通工作現場：登入 GitHub、打開 template repo
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開通你的工作現場

這堂你會用到兩個地方：Claude Code 桌面版 App（你「說」的地方，跟它要程式碼）和 GitHub 網站（檔案放這、也從這上線）。今天交件走 GitHub 網頁上傳——用最少步驟，先嘗到「做出東西、送上線」的甜頭。

💡你的「工作現場」

兩個地方各司其職：Claude Code 桌面版幫你生出網頁程式碼；GitHub 網站存放你的檔案、按上傳就上線。今天還不碰 git、不用把 repo 同步到本機——那個（裝 GitHub Desktop、用 git 送出）留到 第 2 堂。

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

整堂課你大多時候是用白話跟 Claude Code 說你要什麼，它給你程式碼，你再看一眼、看不懂就請它解釋。你不用會寫，但要會看——因為你的工作是看得懂它在幹嘛、該喊卡的時候喊卡。

開通步驟

  • 打開（課前裝好的）Claude Code 桌面版 App，確認登得進去
  • 登入 GitHub 帳號（課前應已開通並受邀進教學用 repo）
  • 打開課程提供的 template repo 頁面，認得 Add file → Upload files（等一下把 Claude Code 生的 HTML 從這裡交上去）
給講師：這堂刻意不碰 git／不綁本機 repo——用 Claude Code 桌面版生 HTML、再走 GitHub 網頁上傳，把摩擦壓到最低、情緒維持在「哇」。Claude Code 桌面版請課前先裝好並登入（需付費方案）；本機 git 同步（GitHub Desktop）留到第 2 堂。
雲端 IDE / 瀏覽器開發環境的氛圍照：螢幕上有程式碼、乾淨的工作桌
圖 3.1這堂用 Claude Code 桌面版生程式碼、GitHub 網站上傳上線，先嘗到做出東西的甜頭。
04用 AI 生成第一版頁面

打開 Claude Code 桌面版 App，跟它描述你想要的午餐揪團頁，讓它幫你生出程式碼。下面 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 分鐘