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