[[#table-of-contents|← 回目錄]]
Part F：緊急救援
部署後出問題，從上往下檢查，不要反過來：
| 順序 | 檢查 | 指令 |
|---|---|---|
| ① | DNS | dig 網域 +short |
| ② | Routes | Cloudflare 面板 → Workers Routes |
| ③ | 部署狀態 | Cloudflare → Deployments |
| ④ | config.yml | grep "repo:" public/admin/config.yml |
| ⑤ | 頁面標題 | grep "Layout title=" src/pages/*.astro |
| ⑥ | 殘留檔案 | ls .github/workflows/deploy.yml |
| ⑦ | 程式碼 | 最後才檢查 |
詳見 [[#trouble-deploy-order|§7.17 部署除錯優先順序]]
Part G：Email Routing — 免費專業信箱
Cloudflare Email Routing 讓你用 info@你的網域 收信，自動轉到你的 Gmail。
前提條件
| 條件 | 檢查 |
|---|---|
| 網域 DNS 在 Cloudflare 管理 | nameserver 指向 Cloudflare |
| Cloudflare Proxy 已開 | DNS 記錄旁是橘雲圖示 |
| 有一個真實信箱當目的地 | Gmail / Yahoo 任何 Email |
限制
Email Routing 只能收信（轉到 Gmail），不能直接寄信。要從 info@你的網域 寄出，在 Gmail 設定「寄件地址」（免費，5 分鐘）。
設定步驟
① Cloudflare 面板 → 你的網域 → Email → Email Routing → Get started
② Add destination → 輸入你的 Gmail → 收驗證信 → 點確認連結
③ 回到 Cloudflare → Routes → Add route
→ Custom address: 填 info（前面框，不要 @，系統自動帶網域）
→ Action: Send to an email
→ Destination: 輸入你的 Gmail
④ 點儲存 → 完成
驗收測試
用另一個信箱寄一封信到 info@你的網域，看你的 Gmail 收到沒。
| 測試結果 | 對策 |
|---|---|
| ✅ 收到 | 完成 |
| ⚠️ 收到但在垃圾郵件 | 正常。 新網域前幾封信可能被 Gmail 歸類為可疑。手動點「這不是垃圾郵件」，用幾次就會改善 |
| ❌ 沒收到 | 檢查 MX 記錄 → dig 你的網域 MX +short → 應回傳 route.mx.cloudflare.net |
從 Gmail 寄出（選配）
Gmail → 右上齒輪 → 查看所有設定 → 帳戶和匯入
→ 「以這個地址寄送郵件」→ 新增另一個電子郵件地址
→ 輸入 info@你的網域
→ SMTP 伺服器: smtp.gmail.com
→ 你的 Gmail 帳號 + 應用程式密碼
→ 驗證 → 完成
設定完後做的
| 動作 | 說明 |
|---|---|
把網站聯絡頁的 mailto 改成 info@你的網域 | 專業感 +100 |
| 測試寄信 → 確認 Gmail 收到 | 30 秒 |
| 告知客戶他的專業信箱 | 「你好，你的信箱是 info@你的網域」 |
關於 mailto 按鈕的注意事項
手機點「聯絡我」按鈕時，如果沒裝郵件 App 會跳「沒有預設郵件程式」。這是 mailto: 連結的原罪，不是網站 bug。未來可用 Formspree 表單服務取代（免費 50 封/月）。
[[#table-of-contents|← 回目錄]]
第 3 章：定義好規則，才開始寫程式
👤 你：定義設計規則、審核規範表 — 🤖 AI：建 AGENTS.md + 視覺規範表，跑審計腳本
這章是你跟 AI 的「前置合約」。規則訂清楚，後面 10 章就不會偏離。 在所有頁面開始前必須先定義視覺規範。 一但前置對了 → 全部對。一但前置錯了 → 無止盡修 bug。
A. 前置作業哲學
在兩個真實專案（ming-travel-blog、ming-website）中，學到最重要的一件事：所有後續的 bug，都是因為一開始沒有定義清楚規則。
| 踩過的坑 | 根因 | 如果前置有規範 |
|---|---|---|
| 修了 4 次光暈問題 | 全站用了 5 種不同 shadow 公式 | 先規定「只用一種 0_0_20px」 |
| 修了 4 次 transition 不生效 | global.css 有 !important 100ms 覆蓋 | 先規定「禁止 !important 全局覆蓋」 |
| 修了聯絡頁 3 次格式 | 每次從零設計卡片布局 | 先規定「參考模板 contact.astro」 |
| 改了 N 次價格格式 | K 縮寫 vs 完整數字混用 | 先規定「永遠完整數字」 |
核心服務哲學：客戶永遠不用改變他們自己的習慣。是我們要做到他們無須學習成本就能達成。
這句話貫穿整份手冊的設計決策：
- 後台上傳照片會卡？→ 瀏覽器自動壓縮，不是叫客戶先壓縮
- 手機上看不到表格？→ 自動換成卡片格式，不是叫客戶轉橫向
- 不會 Markdown？→ 後台使用說明頁有完整教學，不是叫客戶去 Google
結論：先把規則寫死，OpenCode 從第一行程式碼就照著走。 規則不是限制，是讓每個人（你、AI、客戶）都知道邊界在哪裡。邊界內自由發揮，邊界外不會發生。
B. 開始前必填的視覺規範表
OpenCode 在寫任何程式碼之前，必須先產出這張表給你確認：
| # | 項目 | 值 | 範例 |
|---|---|---|---|
| 1 | 主色 | ___ | #E27D60（暖橘）或 #06B6D4（青色） |
| 2 | 輔色 | ___ | #E8A87C、#fcd34d |
| 3 | 亮背景色 | ___ | #FDFBF7 |
| 4 | 暗背景色 | ___ | #1C1917 |
| 5 | 標題字體 | ___ | Inter（粗體） |
| 6 | 內文字體 | ___ | Noto Sans TC |
| 7 | 卡片圓角 | ___ | rounded-2xl |
| 8 | hover 光暈公式 | ___ | hover:shadow-[0_0_20px_rgba(主色,0.15)] dark:hover:shadow-[0_0_20px_rgba(主色,0.25)] |
| 9 | transition 時間 | 1200ms | 全站只用這一個值 |
| 10 | badge 光暈風格 | ___ | rounded-md + dark:shadow-[0_0_15px_rgba(255,255,255,0.1)] |
| 11 | 背景 blur 規格 | ___ | <div class="absolute ... w-[300px] h-[300px] blur-[80px] bg-[主色]/5 ... -z-10"></div> |
規則：這張表填完，你確認後，才能開始寫第一行程式碼。每次建新頁面都從這張表取值。
B2. 手機優先設計原則（必須在開始設計前確定）
| # | 原則 | CSS / HTML 寫法 | 說明 |
|---|---|---|---|
| 1 | 對比表 | 桌上 <table> + 手機直式卡片，用 hidden md:block / md:hidden 切換 | 不要讓客戶左右滑表格 |
| 2 | 方案卡片 | grid-cols-1 md:grid-cols-3 | 手機單欄、桌面三欄 |
| 3 | 聯絡頁左右區塊 | 左側 flex flex-col h-full、右側表單 flex-1 | 確保手機上兩邊等高 |
| 4 | CTA 按鈕 | w-full sm:w-auto | 手機全寬、桌面自適應 |
| 5 | 手機最小字體 | @media (max-width: 768px) { font-size: 17px } | 不讓客戶瞇眼讀內容 |
| 6 | 背景 blur 數量 | 每個區塊最多 1 個 <div class="absolute ... blur-[80px] ..."> | 手機效能考量 |
每次開始新頁面時，在提示詞中加入：
「手機版和桌面版都要考慮。
對比表在手機上用直式卡片，不要用左右滑動表格。
方案卡片在手機上單欄、桌面三欄。
確保所有頁面在手機上字體不小於 16px。」
C. 技術規範（寫入 AGENTS.md）
以下 6 條規則必須寫入每個專案的 AGENTS.md，OpenCode 每次 session 都會讀到：
| # | 規則 | 違反的後果 |
|---|---|---|
| 1 | 禁止 global.css 有 !important 全局 transition-duration | 所有 per-element duration 設定失效，除錯極難 |
| 2 | 禁止價格用 K 縮寫 | 視覺不專業、客戶混淆 |
| 3 | 行銷頁禁技術名（GitHub、Astro、Sveltia、Home Assistant…） | 客戶比價、覺得「不就是買零件」 |
| 4 | 建完每頁就跑審計腳本（見段落 D） | 及早發現不一致 |
| 5 | push 前跑全站審計 | 確認 shadow / duration / tech-name 全部一致 |
| 6 | 每次結束存 PROJECT_NOTES | 下次 session 才能接續 |
D. 審計腳本（建完每頁就跑）
# 1. shadow 公式審計 — 應該只有 1 種輸出（0_0_20px）