AI GOAL GRID COURSE — 00b 前課銜接

四個會一直用到的零件

本課假設你上過「AI 互動行銷頁實作課」。這份用半頁複習四個核心,每段附前課傳送門。

零件 1:GitHub Pages — 資料夾變網址

• repo 放 index.html → Settings → Pages → Branch 選 main、/ (root)
• 一兩分鐘後拿到 https://你的帳號.github.io/repo名/
• 改版 = 重新 commit,稍等就生效
• 本課的成品 app 與所有 demo 都是這樣上線的
• 複習:前課模組 5「上線:部署決策樹 + GitHub Pages」

零件 2:Worker — 幫頁面藏 key 的免費代理

訪客瀏覽器 ──> Cloudflare Worker(key 藏在 Secret)──> AI API
 GitHub Pages          免費 10 萬次/天

API key 等於信用卡:放進網頁,任何人按 F12 都看得到。解法是中間加一個 Worker,key 藏在 Secret 裡。複習:前課模組 6「頁面即時呼叫 AI」。

本課升級:一個 Worker 三個職責

goal-grid Worker
 ├ POST /fill    → AI 補格(Groq)
 ├ POST /image   → 生圖代理(長任務 job)
 └ POST /signup  → 收名單(D1 資料庫)

前課一個 Worker 做一件事;本課從第 03 章起,逐章把這三條路由蓋出來。

零件 3:AI prompt 範本的用法

• 用【】分節把 brief 寫清楚:要什麼、資料長怎樣、風格、驗收標準
• 整段貼給 ChatGPT / Claude → 存檔開啟、逐項驗收
• 修改靠對話下指令,一次只改一兩件事
• 你是總監,AI 是工讀生,驗收清單就是你的武器
• 複習:前課模組 1「第一個活動頁」、模組 8「Prompt 兵法」

零件 4:demo 09 的 email 收集模式

報名頁 ──POST email──> Worker ──寫入──> D1(UNIQUE 去重)
                         │ email 格式驗證 / honeypot / 每 IP 限流
admin 後台 ──Bearer token──> 看名單 / 匯出 CSV

本課第 09 章直接沿用這個模式,再加上 Turnstile 與「留 email 當場拿模板」的誘因設計。複習:前課模組 9「收 email 名單」。

30 秒自我檢查

• 我能在十分鐘內把一個資料夾變成公開網址 (不行 → 模組 5)
• 我說得出「為什麼 API key 不能放進網頁」 (說不出 → 模組 6)
• 我貼過【】分節的 prompt,並照清單驗收過成品 (沒有 → 模組 1、8)
• 我知道 honeypot 跟 admin token 各在防什麼 (不知道 → 模組 9)

重點回顧

• 四個零件全程用:Pages 上線、Worker 藏 key、【】prompt、email 收集模式
• 本課把它們組成一個產品:一個 Worker 三個職責
• 四項自我檢查都打勾,就可以開工