AI 互動行銷頁實戰 — 目標九宮格 — 課程總覽目錄
AI GOAL GRID COURSE — 課程總覽
AI 互動行銷頁實戰:
目標九宮格
前課教零件,這門課把零件組成一個真產品 — 一條會自己收名單的 AI 行銷漏斗。
這次我們要做什麼
- 訪客在九宮格中央寫下核心目標
- AI 補滿八個子目標,再展開成 64 個具體行動
- 挑一種風格 → AI 生成桌布背景,前端把九宮格文字疊上去
- 一張專屬桌布直接下載 — 不設牆
- 下載旁邊:留 email 換「30 天行動追蹤模板」,當場兌現
不只是工具頁,是一條漏斗
免費價值(AI 幫你填九宮格 + 專屬桌布)
↓ 不設牆,先給
帶走成品(PNG 直接下載)
↓ 旁邊放誘因
留下 email(換 30 天行動追蹤模板,當場兌現)
↓
你的名單(D1 資料庫 + 後台 + CSV 匯出)
每一段都是課程的一章:價值怎麼給、誘因怎麼設、名單怎麼存。
先玩再上課
成品已上線 — 先玩五分鐘,再回來看它是怎麼蓋的。
yazelin.github.io/ai-goal-grid-course/app/
跟前課的差別
| 前課(AI 互動行銷頁實作課) | 本課 |
|---|
| 教什麼 | 零件:landing、視覺、特效、部署、名單 | 把零件組成一個真產品 |
| demo 形式 | 每章獨立小品 | 漸進建造同一個 app |
| 後端 | 一個功能一個 Worker | 一個 Worker 三個職責 |
| 終點 | 一頁會動的活動頁 | 一條會自己收名單的漏斗 |
完課後你拿到什麼
- 一個上線的「目標九宮格」:部署在你自己的帳號、用你自己的額度
- 一套可換皮的漏斗模板:把九宮格換成你產業的免費價值,骨架相同
- 真產品等級的功課:長任務等待 UX、防刷額度、降級設計
- 每章一份可重現的 AI prompt 範本 — 不抄程式碼也能叫 AI 重做一次
章節地圖(上):蓋地基
| 章 | 主題 | 對應 demo |
|---|
| 00 · 00b | 課程總覽 + 前課銜接 | — |
| 01 | 產品定位與命名:IP/商標研究實錄 | — |
| 02 | 九宮格 UI 與資料模型(null = 留給 AI) | demos/01-grid-ui |
| 03 | AI 補格:Worker + LLM JSON 輸出 | demos/02-ai-fill |
| 04 | 圖片上傳與前端縮圖 | — |
章節地圖(下):成為產品
| 章 | 主題 | 對應 demo |
|---|
| 05 | AI 桌布背景:長任務 job + 輪詢 + 等待 UX | demos/03-wallpaper |
| 06 | canvas 文字合成(含 AI 畫中文字翻車示範) | 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 是同一個 app 的成長切片
- 前課 demo 是獨立小品;本課 demo 是漸進建造同一個 app
- demos/01-grid-ui = 第 02 章結束時你手上的東西
- demos/02-ai-fill 在它上面加 AI,一路疊到 app/ 完整版
- 每個 demo 都是單檔、雙擊能開
需要準備什麼(都免費)
- GitHub — 前課就有,Pages 部署用
- Cloudflare — Worker、D1、Turnstile 都在這(第 03 章起)
- Groq — 免費 AI API key,AI 補格用(第 03 章再申請即可)
- AI 聊天工具 — ChatGPT / Claude / Gemini 任一,你的「工讀生」
- 生圖不用先準備:示範站有共用額度,也有零後端的 prompt 外帶路線
課程四原則
- 零 build — 純 HTML/CSS/JS,雙擊能開,不裝開發工具
- 免費 tier — Pages、Worker、D1、Turnstile、Groq 全部免費起步
- prompt 是核心技能 — 帶走的不是程式碼,是跟 AI 要東西的方法
- 降級路線是設計的一部分(本課新增)— AI 全掛,訪客仍能走完核心體驗
重點回顧
- 本課終點:一條會自己收名單的漏斗,整套可換皮成你的產業
- demo 漸進建造同一個 app — 每章結束,你手上的東西都更完整
- 四原則:零 build、免費 tier、prompt 核心、降級設計
- 先去玩成品,帶著「這要怎麼做」的問題進下一章
下一章 00b — 前課銜接:四個會一直用到的零件
← → 翻頁