第 10 章 — 進階 9×9 與發佈目錄  

AI 互動行銷頁實戰 — 目標九宮格 · 第 10 章

進階 9×9 與發佈:
展開 81 格,讓全世界(和 AI)看見

AI 序列展開 64 個行動、9×9 桌布版型;然後用 publish.sh + llms.txt + JSON-LD,把課程發佈成搜尋引擎和 AI 都讀得懂的站。

核心觀念

64 個空格瞪著你 ——
AI 把勸退門檻變成一鍵。

大谷那張表看過的人成千上萬,真正填完 81 格的極少。AI 不是替你想得更好,是生出一版夠好的草稿,你只負責改與刪 — 改一個字的門檻,遠低於想一個詞。

資料模型:actions 是 8×8

// localStorage 'goal-grid-state-v1'
state.cells   = Array(9);  // null | {text, source:'user'|'ai'}
                           // index 4 = 核心目標
state.actions = Array(8);  // null | Array(8) of (null | {text, source})
                           // actions[i] = 子目標 i 的八個行動

「null = 留給 AI、有物件 = 使用者鎖定」的同一套模型,從 3×3 直接沿用到 64 格。展開走第 03 章建好的 /fill 端點的第二種模式(mode:'expand'):送核心目標 + 子目標 + 已填行動,拿回八個行動 — prompt 拿大谷當示範:「運」底下寫「撿垃圾」「打招呼」這種可每日檢核的小事。

序列展開:八次呼叫,一個迴圈

// app/js/main.js — runExpand(節錄)
const coreGoal = state.cells[4].text;
for (let s = 0; s < 8; s++) {
  aiProgressEl.textContent = `展開中 ${s + 1}/8`;
  const existing = (state.actions[s] || Array(8).fill(null))
    .map((a) => (a ? a.text : null));
  if (existing.every(Boolean)) continue;   // 這列已滿,不重抽
  const subGoal = state.cells[posOfSubIndex(s)].text;
  const actions = await api.expandSub(coreGoal, subGoal, existing);
  actions.forEach((text, j) => {
    if (!existing[j]) setAction(state, s, j, text, 'ai');
  });
  persist();                               // 每完成一列就存檔
}

為什麼序列,不用 Promise.all

9×9 桌布:主體與全圖分離

直式:3×3 中心 0.30H、全圖寬 0.92W 中心 0.74H;橫式:3×3 置左 0.27W、全圖置右 0.5W。

發佈

dev 私有 repo 是工作檯,
公開 repo 是櫥窗。

做完的東西沒被看見等於沒做。設計文件、驗證截圖、Worker 原始碼、管理 token 全留在工作檯;一支 publish.sh 只把櫥窗該有的東西搬出去。工作檯可以亂,櫥窗永遠乾淨。

publish.sh:三十行搬運工

# scripts/publish.sh(節錄)
set -euo pipefail
PUB_REPO="https://github.com/yazelin/ai-goal-grid-course.git"
PUBLISH_PATHS=(index.html .nojekyll slides demos course app \
               assets sitemap.xml llms.txt robots.txt)
git clone -q --depth 1 "$PUB_REPO" "$TMP/pub"
# 清空(留 .git)後重放發佈集
find "$TMP/pub" -mindepth 1 -maxdepth 1 ! -name .git -exec rm -rf {} +
for p in "${PUBLISH_PATHS[@]}"; do [ -e "$p" ] && cp -r "$p" "$TMP/pub/"; done
rm -rf "$TMP/pub/app/test"               # 開發資產不發佈
cp README-public.md "$TMP/pub/README.md"
git add -A
git diff --cached --quiet && echo "publish: 沒有變更,跳過" \
  || { git commit -q -m "publish: 教材更新"; git push -q origin main; }

三個設計決定

AEO:讓 AI 搜尋引擎讀懂你的課

JSON-LD:機器讀的身分證

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "AI 互動行銷頁實戰 — 目標九宮格",
  "description": "教行銷人員把 AI 行銷頁零件組成完整產品的實戰課程。",
  "provider": { "@type": "Person", "name": "Yaze Lin",
                "url": "https://yazelin.github.io/" },
  "isAccessibleForFree": true,
  "inLanguage": "zh-Hant"
}
</script>

鐵則:schema 寫的必須是頁面上真的有的東西 — 亂填會被搜尋引擎降權。

兩個容易踩的發佈坑

驗收

重點回顧 — 也是全課最後一章

課程完結 — 成品:yazelin.github.io/ai-goal-grid-course/app/

← → 翻頁