AI 互動行銷頁實戰 — 目標九宮格 — 課程總覽
前課教零件,這門課把零件組成一個真的產品:一條會自己收名單的 AI 行銷漏斗。
這次我們要做什麼
一個叫「目標九宮格 Goal Grid」的完整產品:訪客在九宮格中央寫下核心目標,AI 補滿八個子目標、再展開成 64 個具體行動;接著挑一種風格,AI 生成桌布背景、前端把九宮格文字疊上去,變成一張專屬桌布直接下載;下載旁邊放一個誘因明確的 email 表單 ——「留下 email,立即拿 30 天行動追蹤模板」,送出當場給連結。
成品已上線,先玩再上課:https://yazelin.github.io/ai-goal-grid-course/app/
這不只是一個工具頁,而是一條完整的 AI 行銷漏斗:
免費價值(AI 幫你填九宮格 + 專屬桌布)
↓ 不設牆,先給
帶走成品(PNG 直接下載)
↓ 旁邊放誘因
留下 email(換 30 天行動追蹤模板,當場兌現)
↓
你的名單(D1 資料庫 + 後台 + CSV 匯出)
順帶一提:這個方法本身的故事 —— 源自原田メソッド、大谷翔平高一填過的那張表 —— 以及為什麼產品「不能」叫大谷九宮格,是第 01 章的教材。那是一堂行銷人必修的命名安檢課。
跟前課的差別
| 前課(AI 互動行銷頁實作課) | 本課 | |
|---|---|---|
| 教什麼 | 零件:landing、視覺、特效、遊戲、部署、Worker、名單 | 把零件組成一個真產品 |
| demo 形式 | 每章獨立小品 | 漸進建造同一個 app,每章結束你手上的東西都更完整 |
| 後端 | 一個功能一個 Worker | 一個 Worker 三個職責(AI 補格 / 生圖代理 / 名單) |
| 終點 | 一頁會動的活動頁 | 一條會自己收名單的漏斗,整套可以換皮成你的產業 |
完課後你拿到什麼
- 一個上線的「目標九宮格」:訪客玩得動、AI 叫得動、名單收得到,整套部署在你自己的帳號上、用你自己的額度。
- 一套可換皮的漏斗模板:把「九宮格 + 桌布」換成你產業的免費價值(測驗、診斷、產生器),骨架完全相同。
- 真產品等級的功課:長任務等待 UX、防刷額度、降級設計 —— 這些是「做一頁」跟「做一個產品」之間的差距。
- 每章一份可重現的 AI prompt 範本:就算不抄本課的程式碼,也能叫 AI 重做一次。
章節地圖
| 章 | 主題 | 對應 demo |
|---|---|---|
| 00 | 課程總覽(本章)+ 前課銜接(00b) | — |
| 00c | 金鑰申請指南:OpenAI / Groq key 申請、用 ChatGPT 介面手動生圖 | — |
| 01 | 產品定位與命名:IP/商標研究實錄 | — |
| 02 | 九宮格 UI 與資料模型(CSS Grid + 「null = 留給 AI」) | demos/01-grid-ui/ |
| 03 | AI 補格:Worker + LLM JSON 輸出 + prompt 設計 | demos/02-ai-fill/ |
| 04 | 圖片上傳與前端縮圖(FileReader / canvas / base64) | — |
| 05 | AI 桌布背景:長任務 job + 輪詢 + 等待 UX | demos/03-wallpaper/ |
| 06 | canvas 文字合成(文字=資料、背景=藝術;改字成本對照) | demos/03-wallpaper/ |
| 07 | AI 編輯迴圈:edit 端點 + 參考圖 + 可攜帶的 prompt | demos/03-wallpaper/ |
| 08 | 防刷與額度:Turnstile + 四層防線 | demos/04-quota/ |
| 09 | Email 收集與 admin 後台(D1 + CSV) | demos/05-email/ |
| 10 | 進階 9×9 + 發佈與 SEO/AEO | app/ |
demo 跟前課的「獨立小品」不同:demos/01-grid-ui/ 是第 02 章結束時你手上的東西,demos/02-ai-fill/ 在它上面加 AI,一路疊到 app/ 的完整版。每個 demo 都是單檔、雙擊能開。
需要準備什麼
這門課假設你已經會前課的四件事:把資料夾部署成 GitHub Pages、知道 Cloudflare Worker 在幹嘛、會用【】分節的 prompt 範本跟 AI 要東西、看過 demo 09 的 email 收集模式。任何一項不確定,先花十分鐘看銜接章 00b-recap.md,每一項都附前課傳送門。
帳號(都免費):
- GitHub:前課就有的,Pages 部署用。
- Cloudflare:Worker、D1 資料庫、Turnstile 人機驗證都在這(第 03 章起會用到)。
- Groq:免費 AI API key,AI 補格用(到第 03 章再申請即可)。
- AI 聊天工具:ChatGPT / Claude / Gemini 任一,你的「工讀生」。
生圖(第 05 到 07 章)不用先準備:課程示範站有共用額度(防刷限量,每人每天生圖 3 次),也可以走「複製 prompt → 自己貼到 ChatGPT/Gemini 生圖 → 把圖匯回來」的零後端路線 —— 這條降級路線本身就是第 07 章的教材。等到你要自己部署整套時,生圖是三層架構:主路接 OpenAI Images API(需要一把按張計費的 OpenAI API key)、備援接自架生圖服務(沒設 OpenAI 金鑰才走)、最後是上面那條零後端降級。金鑰怎麼申請、費用怎麼估,見銜接章 00c(金鑰申請指南)。
課程的四個原則
前三個沿用前課,第四個是本課新增:
- 零 build:全部是純 HTML/CSS/JS,雙擊能開,不安裝任何開發工具。
- 免費 tier:Pages、Worker、D1、Turnstile、Groq 全部從免費額度起步。
- prompt 是核心技能:每章附「給 AI 的 prompt 範本」,你帶走的不是程式碼,是跟 AI 要東西的方法。
- 降級路線是設計的一部分:AI 服務全掛的時候,訪客還是要能走完核心體驗(風格漸層照樣出桌布、生圖 prompt 可以外帶)。真產品跟 demo 的差別,就在這種地方。