MIXXIN INTERNAL COURSE · 午餐揪團頁主線
Vibe Coder 入門課
給完全沒有網頁開發背景的 Mixxin 同仁：十節課、每節 60 分鐘，親手把一個「午餐揪團頁」從零做到全公司共用。目標不是把你變成工程師——是讓你看得懂系統的形狀、能精準指揮 AI、知道什麼時候該喚工程師。
··課程地圖
01
環境設定 + 第一個上線的畫面
靜態午餐揪團頁上線，拿到預覽網址
WOW拿到自己頁面的公開預覽網址
02
把工作現場搬到你的電腦：GitHub Desktop × Claude Code
本機環境：一個負責「說」、一個負責「看」
WOW第一次在自己電腦上：說→看→送出，並用 issue + PR 交付
03
三層的深水區：DOM 是活的
看懂自己已做出來的東西
WOW親眼看到「檢視原始碼」跟「Elements」對不起來
04
讓畫面動起來：互動與狀態
「我要跟」按鈕（但重整歸零）
WOW點擊即時反應（也嚐到重整歸零的不甘心）
5A
資料（上）：資料驅動畫面 + localStorage
重整後「我要跟」還在
WOW重整後狀態還在
5B
資料（下）：Fetch 抓外部資料
加一個抓真實外部資料的 widget
WOW頁面出現抓真實世界資料的 widget
06
認識 React
整頁重構成元件化架構
WOW一份資料自動長出整排卡片，程式碼變乾淨
07
冰山下面：信任邊界 + 引爆寫入
「我要跟」首次寫進全公司共用的資料
WOW同事的裝置上看得到自己剛加的紀錄
8A
跟 AI 一起做：MCP × Skill
AI 自主用 chrome-devtools-mcp 除錯
WOWAI 自己開瀏覽器找出並修好一個 bug
8B
全覽 Dashboard（結業）
全公司揪團狀況同框顯示
WOW全班的揪團資料同框顯示在 Dashboard 上
··這門課的規則
DELIVER
作業都走 PR
第 2 堂起，每份作業＝一張 issue ＋ 一個 PR。這個 repo 就是你們交作業的地方。
RADAR
危險雷達
祕密？信任判斷？共用真相？中一項就停手交給工程師——第 7 堂會完整建立。
AI-FIRST
AI 是結對夥伴
所有 Prompt 都是起手式，鼓勵用自己的話改；讀不懂就請 AI 白話解釋。