課程教材

請輸入課程密碼

學生密碼可查看學生教材；老師密碼可查看完整講師版。

一對一實體課 6 小時

把講義、投影片與操作路徑放在同一個地方

今天會完成

MVP Brief、網站底座、本機預覽、公開網址

這不是工程課，也不是外包交付。你會自己操作，講師陪你拆需求、下指令、看結果、修問題，走過第一次 AI 協作開發流程。

01 MVP Brief

把模糊想法變成 AI 看得懂的任務。

02 工具啟動

GitHub、Vercel、Node.js、Claude Code、Codex、MCP。

03 網站底座

第一版首頁與主要 CTA。

04 部署上線

取得可分享的公開網址。

Day 1 時間表

MVP 心智模型
MVP Brief 定稿
AI 協作方法
優先安裝：帳號、工具、MCP
開始製作網站底座
個人化與檢查
GitHub + Vercel 部署
Day 2 任務 Brief

時間可依現場狀態彈性調整；Day 1 的重點是工具鏈打通、今天開始做出自己的 MVP 底座，並整理線上微調與第二次實體要處理的卡點。

投影片模式

課堂投影片

先用文字版投影片跑課程，之後補官方截圖與 demo 專案截圖。

1 / 12

學生講義

課後遇到問題可以回來查

這裡不是填寫表單，而是 Day 1 之後的操作手冊：工具用途、標準流程、常見卡點、交接提示詞都放在這裡。

Day 1 工作流

遇到問題時，先回到這條流程，不要直接重做整個專案。

ChatGPT 整理 MVP Brief Codex 主開發 每步更新交接紀錄 Claude Code Review / 接手 本機測試 GitHub Vercel 線上微調

MVP Brief 應包含什麼

  • 專案名稱、目標使用者、網站目的、主要 CTA。
  • 必要頁面、核心功能、風格參考。
  • 不要做的事、先用人工流程處理的事。
  • 安全性與資料邊界。
  • Codex 每步紀錄規則。
  • Claude Code 交班規則。

工具用途速查

ChatGPT

整理需求、MVP Brief、功能取捨、安全邊界。

Codex

主開發：改檔案、跑指令、debug、部署前檢查。

Claude Code

副駕：review、解釋程式碼、接手、整理下一步。

MCP

讓 AI 連到文件或工具。Day 1 先用 read-only 官方文件 MCP。

GitHub

放程式碼，方便版本管理與 Vercel 部署。

Vercel

部署網站，取得公開網址。

安全邊界速查

  • 不要把 API key、token、密碼寫進程式碼。
  • 不要把個資或客戶資料 commit 到 GitHub。
  • 第一版先不做登入、付款、會員、後台，除非明確需要。
  • 表單、預約、名單可以先用外部工具或人工流程。
  • 接 MCP 前先確認它能讀什麼、能寫什麼、需要什麼授權。

遇到問題先看這裡

AI 改太多

請它列出改了哪些檔案、每個檔案做了什麼、如何檢查。

部署失敗

複製 Vercel 錯誤訊息，要求最小修正，不要重做專案。

額度用完

用交接 prompt，把 Codex 紀錄交給 Claude Code 接手。

想加功能

先放進延後清單，檢查是否影響 MVP 的主要 CTA。

老師講義

授課講稿、節奏提醒與卡點處理

這一版給講師看，包含每段要講什麼、要觀察什麼、什麼時候該停下來處理。

Day 1 主線

前面工具都要帶，但每一段都要回到「今天開始做 MVP」這個主線。

  • ChatGPT：跑 MVP Brief，加入安全邊界與交接規則。
  • Codex：主開發，建立專案、改檔案、跑檢查、記錄每一步。
  • Claude Code：副駕與接手，做 review、解釋、整理下一步。

開場講法

今天不追求完整產品。完整產品會永無止盡，我們先做一個可上線、可展示、可繼續改的 MVP 起點。

同時，今天不是只學單一工具，而是學一套 AI 協作流程：用 ChatGPT 想清楚，用 Codex 做出來，用 Claude Code 接手檢查與維護。

MVP Brief 要盯的事

  • 目標使用者是否具體。
  • 主要 CTA 是否只有一個。
  • 不要做的事是否有寫清楚。
  • 安全性與資料邊界是否先規劃。
  • Codex 每步紀錄與 Claude Code 交班規則是否寫進 brief。

工具啟動提醒

  • GitHub、Vercel、Node.js、Codex、Claude Code、MCP 都要帶到。
  • 不要把安裝變成死背指令，重點是學員知道每個工具負責什麼。
  • MCP 先接 read-only 官方文件，不一開始接高權限資料源。
  • 如果遇到帳號、2FA、權限問題，先記錄卡點，再判斷是否影響今天開始做。

Codex 操作規則

每次讓 Codex 做事，都要要求它先提計畫、再修改，完成後更新交接紀錄。

  • 任務目標
  • 修改檔案
  • 測試方式
  • 測試結果
  • 風險與待確認事項
  • 下一個最小任務

常見卡點處理

  • 學員一直想加功能：放進延後清單，回到 MVP 主線。
  • AI 改太多：請它列出變更檔案與檢查方式。
  • 部署失敗：貼錯誤訊息，要求最小修正，不重做專案。
  • 額度用完：用交接 prompt 讓 Claude Code 接手。
  • 安全邊界模糊：先不收資料、不做登入、不做付款。

第二次實體定位

第二次實體不是固定教新單元，而是處理線上比較難處理、需要面對面一起判斷和打通的問題。

  • 環境或部署長期卡住。
  • MCP 或權限問題。
  • AI 把專案改亂，需要一起整理。
  • 核心功能流程需要一起拆。
  • 需要現場看 UX、資料流或安全風險。

Prompt 集

可直接複製使用

現場檢查

完成一項打一勾

Day 1 作業

Day 2 前完成

  1. 補齊首頁真實文案。
  2. 準備個人照片、品牌素材或服務截圖。
  3. 確認主要 CTA 要連到哪裡。
  4. 寫出 Day 2 核心功能的使用者流程。
  5. 記錄目前網站最想修改的 3 件事。
  6. 嘗試自己請 AI 改一個小地方。