這篇講的東西

先講結論:這門課教的不是「怎麼做一個九宮格產生器」,是「怎麼把一個免費小工具,做成一條會自己收名單的行銷漏斗」。九宮格只是這次選的題目。

為誰做的

上一門「AI 互動行銷頁實作課」教的是零件:landing、視覺、特效、部署、Worker、收名單,每章一個獨立小品。上完之後最常見的問題是:零件我都會了,然後呢?

這門進階課就是回答「然後呢」。它適合兩種人:一種是上過前課、想把零件組成一個真產品的;另一種是手上有專業(教練、顧問、講師、店家),想做一個「免費給價值、自然換名單」的入口頁,但不想從零摸索的。整套做法可以把「九宮格 + 桌布」換成你產業的免費價值(測驗、診斷、產生器),骨架完全相同。

方法論的部分我在 K-Rider 那篇拆過了:開規格、下發包、做驗收,把 AI 當外包團隊。那篇講的是「怎麼發包」,這門課是把同一套方法用在一個行銷產品上,一章一章帶你走。

成品是什麼

訪客在九宮格中央寫下核心目標,AI 補滿八個子目標;想更狠一點,展開成 9×9,64 個具體行動。接著挑一種風格,AI 生成桌布背景,前端用 canvas 把九宮格文字疊上去,變成一張專屬桌布直接下載。下載旁邊放一個誘因明確的 email 表單:留下 email,立即拿 30 天行動追蹤模板,送出當場給連結。

免費價值(AI 幫你填九宮格 + 專屬桌布)
   ↓ 不設牆,先給
帶走成品(PNG 直接下載)
   ↓ 旁邊放誘因
留下 email(換 30 天行動追蹤模板,當場兌現)
   ↓
你的名單(D1 資料庫 + 後台 + CSV 匯出)

九宮格這個方法本身有個好故事:它源自原田メソッド,就是大谷翔平高一填過的那張「目標達成シート」。但這個產品不能叫「曼陀羅九宮格」,因為マンダラチャート在日本是註冊商標。這段商標研究實錄直接變成第 01 章的教材,我覺得是整門課最划算的一章:還沒寫半行程式,先上一堂行銷人必修的命名安檢課。

課程長什麼樣

主線 11 章(00 到 10),外加前課銜接章 00b 和金鑰申請指南 00c。跟前課「每章獨立小品」最大的不同是,demo 採漸進建造:demos/01-grid-ui/ 是第 02 章結束時你手上的東西,demos/02-ai-fill/ 在它上面加 AI 補格,一路疊五個 demo,疊到 app/ 的完整版。每個 demo 都是單檔、雙擊能開,全程零 build。

章節挑幾個講:

  • 03 AI 補格:Worker + LLM JSON 輸出。後端只有一個 Worker,三個職責(/fill 補格、/image 生圖代理、/signup 收名單)。
  • 05 到 07 生圖:長任務 job + 輪詢 + 等待 UX。生圖不是按了就回來,訪客願意等多久、等的時候看什麼,這是「做一頁」跟「做一個產品」的差距。
  • 06 canvas 文字合成:文字是資料、背景是藝術。桌布上的字用 canvas 疊,不讓 AI 畫,理由很實際:改一個字不用重生一張圖,改字成本是零。
  • 08 防刷與額度:Turnstile 無感人機驗證 + 每 IP 每日配額(補格 12 次、生圖 3 次)+ in-flight 鎖 + 輸入長度上限,四層防線。示範站就是這樣擋的,你部署自己的那套也是。
  • 09 email 收集與後台:D1 資料庫 + admin 頁 + CSV 匯出,名單真的收得到、拿得走。

帳號全部從免費額度起步:GitHub Pages、Cloudflare(Worker / D1 / Turnstile)、Groq。生圖那幾章不用先準備金鑰,示範站有共用額度(就是上面那個每天 3 次),也可以走「複製 prompt、自己貼到 ChatGPT 或 Gemini 生圖、把圖匯回來」的零後端路線。這條降級路線本身就是第 07 章的教材:AI 服務全掛的時候,訪客還是要能走完核心體驗。

老實說

示範站的生圖走的是長任務排隊,尖峰可能要等一陣子,等待畫面會告訴你進度。額度也真的很小(每人每天 3 次),因為每一張都是我的成本。課程的立場從頭到尾一致:示範站給你試手感,要玩真的,就照課程把整套部署到你自己的帳號、用你自己的額度,那才是這門課要給你的東西。

分工線

照慣例把話說清楚:課程主軸、九宮格這個題目、3×3 加 9×9 的範圍、命名決策、防刷要做到哪層、每一條驗收標準,是我定的;課程文字、demo、app、Worker 的程式碼(含測試),是 AI 在我的規格和驗收下寫的。這門課教的「甲方思維」,就是這個專案自己的做法。

學習路徑

  1. 先玩成品,體會訪客視角:https://yazelin.github.io/ai-goal-grid-course/app/
  2. 沒上過前課,從前課開始:https://yazelin.github.io/ai-marketing-pages-course/
  3. 前課的東西還記得,直接進本課:https://yazelin.github.io/ai-goal-grid-course/course/
  4. 想看「發包給 AI」的方法論全貌,回頭讀 K-Rider 那篇

先去玩,填一張自己的九宮格,再回來看它是怎麼被做出來的。