🗺️ 學習地圖・先看這張再出發（約 1 分鐘）
整趟旅程長這樣：觀念 → 上手 → 安全 → 上線
共三階段、8 個章節。照箭頭走，第 5 章個資紅線必讀，趕時間可只走「最小路徑」。
🧭
0. 觀念3 分鐘三個名詞搞懂
➜
📝
1. 註冊 Zen5 分鐘拿到 API Key
➜
💻
2. 安裝5 分鐘Win/Mac/Linux
➜
🔌
3. 登入選模型5 分鐘切到免費模型
➜
🚀
4. 第一次用10 分鐘做出第一個網頁
➜
🔴
5. 個資紅線 ★必讀！什麼不能貼
➜
☁️
6. 上線部署進階 20 分Cloudflare
➜
🎓
7. 畢業測驗＋領證書感
🏃 趕時間最小路徑（20 分）
0 → 1 → 2 → 3 → 5（必讀）→ 4 做一半也算成功。6 可下次再來。
0 → 1 → 2 → 3 → 5（必讀）→ 4 做一半也算成功。6 可下次再來。
🌟 完整路徑（40 分）
照 0～7 走完，你會：免費練功＋分辨敏感資料＋把網站發佈成公開網址＋一句話更新。
照 0～7 走完，你會：免費練功＋分辨敏感資料＋把網站發佈成公開網址＋一句話更新。
基礎操作安全必讀進階部署驗收
CHAPTER 0・先搞懂 3 分鐘
🧭 OpenCode、Zen、Muse Spark 到底是什麼？
用一句話記起來，後面就不會迷路。
🖥️ OpenCode
開源 AI 寫程式助手，住在你的「終端機（黑視窗）」裡。會讀檔、寫檔、跑指令、建網站。你打中文，它幫你做事。
官網：opencode.ai｜指令：
開源 AI 寫程式助手，住在你的「終端機（黑視窗）」裡。會讀檔、寫檔、跑指令、建網站。你打中文，它幫你做事。
官網：opencode.ai｜指令：
opencode🌟 OpenCode Zen
OpenCode 官方挑過的「模型市集／API 閘道」。不用自己去申請 OpenAI、Anthropic 金鑰，一組 Zen API Key 就能切換幾十種模型。
登入：
OpenCode 官方挑過的「模型市集／API 閘道」。不用自己去申請 OpenAI、Anthropic 金鑰，一組 Zen API Key 就能切換幾十種模型。
登入：
opencode auth login --provider zen🤖 Muse Spark 1.3 / 1.3 Contributor Free
Meta 的寫程式專用模型。
• muse-spark-1.3：付費版，每百萬 token 輸入 $1.25 / 輸出 $4.25
• muse-spark-1.3-contributor-free：限時免費 $0，代價是「你同意對話內容可被拿去訓練未來模型」。
設定裡寫法：
Meta 的寫程式專用模型。
• muse-spark-1.3：付費版，每百萬 token 輸入 $1.25 / 輸出 $4.25
• muse-spark-1.3-contributor-free：限時免費 $0，代價是「你同意對話內容可被拿去訓練未來模型」。
設定裡寫法：
opencode/muse-spark-1.3-contributor-free⚠️ 一句話警告（整頁最重要）
看到 contributor-free / Free = 你的提示詞會被拿去訓練。
練習、公開資料、 side project 可以用；學生個資、成績、家長電話、病歷、身分證，絕對不行。 詳見第 5 章。
看到 contributor-free / Free = 你的提示詞會被拿去訓練。
練習、公開資料、 side project 可以用；學生個資、成績、家長電話、病歷、身分證，絕對不行。 詳見第 5 章。
💡 為什麼要用 Zen + Muse Spark Free？
| 方案 | 要綁卡嗎 | 價格 | 適合誰 |
|---|---|---|---|
| Zen + Muse Spark 1.3 Free（本教學） | 註冊 Zen 要登入，免費模型免扣款 | $0 | 零基礎、想先練功、做公開小網站 |
| Zen 付費模型（Claude/GPT/Grok…） | 要加值 | 按量計費 | 要處理敏感資料、要最強效能 |
| 自己帶 Key（BYOK） | 看各家 | 各家計費 | 學校已有 OpenAI/Anthropic 帳號 |
CHAPTER 1・註冊（約 5 分鐘）
📝 步驟 1：註冊 OpenCode Zen，拿到 API Key
手把手：只要瀏覽器 + Email，免寫程式。
- 打開 Zen 授權頁
前往 👉 https://opencode.ai/auth（官方登入／註冊入口）。
點 Sign in / Sign up，用 Google / GitHub / Email 註冊。網址：https://opencode.ai/auth - 進入 Dashboard → 複製 API Key
登入後找 API Keys / Billing / Zen。按 Create Key，名稱取如my-laptop-zen，複製那串sk-...。🔑 Key 只顯示一次！立刻存到密碼管理器。外洩了就去後台 Revoke → 重建。絕對不要貼到公開 GitHub / 截圖傳群組。 - （若被要求）加值方式說明
官方文件寫「sign in，加 billing details」。免費模型本身 $0，但系統可能請你綁定付款或設定 每月限額 / 自動儲值。建議：把 Monthly limit 設 $5～$20、關掉高額自動儲值，避免誤用付費模型噴錢。 - 確認免費模型還在
到 👉 Zen 模型與價格表 搜尋muse-spark-1.3-contributor-free，確認 Input/Output 都是 Free。免費是「限時」，做重要專案前再看一次。
✅ 自我檢查
CHAPTER 2・安裝（約 5 分鐘）
💻 步驟 2：安裝 OpenCode
選你的系統，點頁籤 → 複製 → 貼到終端機執行。
推薦：先裝 WSL（體驗最好），或直接用以下任一方式：
:: 方法A：Chocolatey（系統管理員終端機）choco install opencode
:: 方法B：Scoop scoop install opencode
:: 方法C：npm（需先裝 Node.js 20+）npm install -g opencode-ai
裝完驗證：
opencode --version 有出現版號就成功。沒出現？關掉重開終端機再試。# 方法A：Homebrew（推薦，最跟得上更新）brew install anomalyco/tap/opencode
# 方法B：npmnpm install -g opencode-ai
# 方法C：官方腳本curl -fsSL https://opencode.ai/install | bash
# WSL / Ubuntu / Debian 通用curl -fsSL https://opencode.ai/install | bash
# 驗證 + 開啟opencode --version
opencode
WSL 用戶：先
wsl --install，進 Ubuntu 再跑上面指令。專案檔放 ~/projects/ 效能最好，勿放 /mnt/c 深層。CHAPTER 3・登入＋選模型（約 5 分鐘）
🔌 步驟 3：登入 Zen，切到 Muse Spark 1.3 Free
- 登入（二選一，會一種即可）
方法 A（最簡單，推薦新手）：opencode auth login --provider zen照指示在瀏覽器按授權即可，免貼 Key。
方法 B（TUI 內）：先打opencode進入 → 輸入/connect→ 選 OpenCode Zen / opencode → 貼上第 1 章的sk-...→ Enter。 - 選模型
在 TUI 輸入：/models找到 muse-spark-1.3-contributor-free 按 Enter。或啟動時直接指定：opencode --model opencode/muse-spark-1.3-contributor-free📌 記憶法：設定檔裡模型 ID 一律長這樣opencode/<model-id>。例如opencode/muse-spark-1.3-contributor-free。 - 驗證成功
問它：你好，請用繁體中文自我介紹，並說出你現在用的模型名稱。有回中文就通了！左下角也會顯示目前模型。
🆘 卡住了？
invalid_api_key / 沒反應
Key 前後有空白？重貼一次。方法 A 登入失敗就改方法 B。Windows 請用 WSL 重試一次，多數問題會消失。想換付費模型怎麼做？
同樣/models 切到 opencode/claude-opus-4-6 或 opencode/gpt-5.2，但會扣 Zen 餘額。處理個資時請換付費／自帶 Key，見第 5 章。CHAPTER 4・第一次實戰（約 10 分鐘）
🚀 步驟 4：讓 AI 幫你建第一個網頁
- 開專案資料夾
mkdir my-first-site; cd my-first-site opencode（Windows PowerShell 請分兩行打：mkdir my-first-site再cd my-first-site） - 初始化（讓 AI 讀懂專案）
進 TUI 打：/init它會產生AGENTS.md，記得 commit。這是 AI 的說明書。 - 學會 5 個神鍵
按鍵／指令 功能 什麼時候用 Tab Plan ↔ Build 模式切換 大事先 Plan，小事直接 Build @ 選檔案 要 AI 讀某檔時，如 @index.html/undo//redo還原／重做 AI 改壞了，一秒反悔 /share分享對話連結 問人、交作業 Esc 中斷 AI 暴走時喊停 - 貼上你的第一個任務（複製這段）
請幫我建立一個繁體中文的個人自我介紹一頁式網站 index.html，包含：大標題、照片區、學經歷、作品集三張卡片、聯絡按鈕。風格要簡潔現代、手機也能看。完成後告訴我你新增了哪些檔案。不要使用任何真實個資，用假資料即可。✅ 你會看到 AI 列出檔案、問你是否執行 → 按 Yes。做完用瀏覽器開index.html就能看！最後一句「不要用真實個資」是刻意加的，好習慣從現在開始。
📋 進階咒語庫（點複製直接用）
🔍 問程式碼：「請解釋 @index.html 裡導覽列是怎麼做的，用條列式＋新手聽得懂的話。」
🛠 加功能（先 Plan）：按 Tab 切到 Plan →「我想加一個深色模式切換鈕，先給我計畫不要動程式。」滿意後再按 Tab →「好，執行。」
🐞 修錯：「瀏覽器主控台出現 XXX 錯誤，請讀 @index.html 幫我修，修完說明原因。」
CHAPTER 5・必讀 ⚠️ 個資紅線（2 分鐘救你一命）
🔴 有個資的資料，避免使用 Muse Spark（Free）！
官方原話翻譯：「Muse Spark 1.3 Contributor Free：以 允許你的提示詞與補全內容用於訓練未來 Meta 模型 為條件，提供大幅折扣（免費）。」
意思：你貼什麼，就可能變成別人模型的養分，且無法收回。 免費不是無代價。
意思：你貼什麼，就可能變成別人模型的養分，且無法收回。 免費不是無代價。
🚫 絕對不要貼（舉例）
- 姓名＋學號／身分證／生日
- 電話、地址、email、家長資料
- 成績、輔導紀錄、病歷、特教資料
- 人臉照片、未公開作品、帳號密碼、API Key
- 學生作文含可識別資訊、班級點名表
✅ 可以安心練的
- 假資料（王小明、0912-345-678 範例）
- 公開課綱、公開新聞、開源程式
- 去識別化後的統計（平均、級距）
- 你自己的 side project、練習網頁
🛡 3 秒自保 SOP（每次貼之前唸一次）
要處理敏感資料怎麼辦？三選一：
① 切付費模型（Zen 裡
② 自帶 Key（BYOK，用學校／公司的 OpenAI、Anthropic Key）
③ 本機模型（Ollama 等，資料不出電腦，最嚴格時用這個）
下指令前先
① 切付費模型（Zen 裡
muse-spark-1.3 付費版、Claude、GPT，不拿來訓練）② 自帶 Key（BYOK，用學校／公司的 OpenAI、Anthropic Key）
③ 本機模型（Ollama 等，資料不出電腦，最嚴格時用這個）
下指令前先
/models 確認左下角模型名稱，不要在 Free 模式貼機密。CHAPTER 6・高階篇 ⭐
☁️ 申請 Cloudflare＋讓 OpenCode 幫你代理部署網頁
目標：把第 4 章做的 index.html 變成全世界都看得到的網址（https://xxx.pages.dev），而且以後只要跟 OpenCode 說一句話就能更新。
🧠 觀念 30 秒：Cloudflare Pages = 免費放靜態網頁的空間。API Token = 你授權給 OpenCode 的「代客鑰匙」。你給它最小權限，它就能幫你建專案、上傳、部署，不用你手動拖檔案。
Part A — 申請 Cloudflare（約 8 分鐘）
- 註冊 Cloudflare
到 👉 dash.cloudflare.com/sign-up 用 Email 註冊、收驗證信。不用綁卡、不用買網域，免費方案就夠。 - 抄下 Account ID
進 Dashboard → 右側邊欄或網址列找 Account ID（一串 32 碼）。之後部署一定會用到，先存記事本。
路徑：Workers & Pages → Overview → 右欄 Account details → Account ID - 建立 API Token（最小權限，最重要一步）
到 👉 My Profile → API Tokens → Create Token → Create Custom Token：
按 Continue → Create Token → Copy。⚠️ 只顯示一次，跟密碼一樣收好。欄位 填什麼 Token name opencode-pages-deployPermissions Account → Cloudflare Pages → Edit（必備）
若要用 wrangler 自動建專案，再加 Account → Workers Scripts → Edit＋Zone／Account Settings Read 視需求Account Resources 選你的帳號（不要選 All 除非你只有一個） TTL / IP 過濾 可留白；教室共用電腦建議設短 TTL - 裝 wrangler（Cloudflare 官方部署工具）
npm install -g wrangler wrangler --version需 Node.js 18+。裝完跑wrangler login會開瀏覽器授權一次（跟 Token 雙軌並行沒關係）。
Part B — 把鑰匙交給 OpenCode（安全做法）
❌ 錯誤：直接在對話貼
Bearer xxx 明文。⭕ 正確：放 .env＋.gitignore，讓 AI 讀環境變數。就算 Free 模型會訓練，也不會外洩你的真 Key（但仍建議用完即刪、設權限最小）。# 在專案根目錄做（以 my-first-site 為例）# 1) 建 .env（把 <> 換成你的）CLOUDFLARE_API_TOKEN=<你的token>
CLOUDFLARE_ACCOUNT_ID=<你的account-id>
# 2) 建 .gitignore，確保不上傳.env
# 3) 叫 OpenCode 讀 env 來部署
進階：opencode.json 用
{env:CLOUDFLARE_API_TOKEN} 語法引用，AI 就不用看明文也能做事。先在 .gitignore 寫入 .env 再做任何事！Part C — 一句話叫 OpenCode 部署（代理部署示範）
回到 opencode（確認模型仍是 Free 練習用假網站；正式含個資網站請先切付費模型），貼這段：
我的 Cloudflare Account ID 和 API Token 已放在 .env（CLOUDFLARE_ACCOUNT_ID / CLOUDFLARE_API_TOKEN），請幫我：1) 檢查 wrangler 是否安裝，沒有就告訴我指令；2) 用 wrangler pages 建立專案 my-first-site（若已存在就直接用）；3) 把目前資料夾部署到 Cloudflare Pages 生產環境；4) 部署完給我公開網址和驗證方式。全程不要把 token 明文印出來。
✅ 成功長這樣
終端機出現
用無痕視窗開網址，看得到網站 = 大功告成。之後改字 → 再跟 AI 說「幫我重新部署」即可。
終端機出現
✨ Deployment complete! https://my-first-site-xxx.pages.dev用無痕視窗開網址，看得到網站 = 大功告成。之後改字 → 再跟 AI 說「幫我重新部署」即可。
🔧 手動備案（AI 卡住時自己來）
npx wrangler pages deploy . --project-name=my-first-site它會問帳號授權，照著按 Yes 就好。🔐 用完 Token 要不要刪？（建議刪／輪換）
練習完到 API Tokens 頁按 Roll / Delete，下次要用再建一條。這樣就算對話紀錄外洩，舊 Key 也沒用。正式專案請用 最小權限＋短效期＋只給特定專案。💬 之後都叫 AI 更新？範例
「幫我把首頁標題改成『陳小華的作品集』，改完重新部署到 Cloudflare Pages，給我新網址。」
「幫我查現在 Pages 上 my-first-site 有幾個部署，太舊的預覽部署幫我列出來就好，不要刪生產環境。」
「幫我查現在 Pages 上 my-first-site 有幾個部署，太舊的預覽部署幫我列出來就好，不要刪生產環境。」
CHAPTER 7・驗收
🎓 3 題測驗＋畢業檢查
Q1. 有學生姓名＋電話的 Excel，可以貼給 muse-spark-1.3-contributor-free 請它整理嗎？
Q2. 要選免費模型，正確的模型 ID 是？
Q3. Cloudflare API Token 要給 Pages 部署權限，正確的是？