🅰️ 沒有行程資料

請 AI 先規劃目的地、天數、同行對象、節奏與預算；任何不確定資訊都標成「待確認」，不要把猜測當事實。

🅱️ 已有 PDF／截圖／LINE

直接上傳或貼上現有資料，要求 faithful organization；日期、航班、住宿、時間與金額不可自行改寫。

🖼️ 圖像設計的 4 個規則

• 先做 1200×630：同一張圖可作網站 HERO／OG，重要主體放在中央安全區。
• 不要把字交給圖片生成：標題、Logo、價格與 CTA 用 HTML 疊字，避免亂碼。
• 先確認素材：實拍、生成式示意圖與品牌 Logo 的使用權要分開標示。
• 色彩不要套版：請依目的地與季節提出 4～6 色色票並說明理由，不要直接套用預設的暖米白＋赭棕。

🗺️ A. 中心地點 → 自動地圖

1. 準備完整中心地點，例如住宿或札幌車站的「名稱＋地址」。
2. 把中心地點貼給 AI，要求使用 encodeURIComponent 產生地圖網址。
3. 頁面自動設定 iframe 與「在 Google 地圖中開啟」連結；不需要 API Key，也不要自行猜座標。

📋 B. Google Form 與成功頁（選修）

1. 至 forms.google.com 建立「北海道札幌 6D5N 親子行程意願表」（練習欄位：稱呼/暱稱、同行人數、孩童年齡層、最期待活動、備註；不蒐集敏感個資）。
2. 點擊右上角「發布 / Publish」，確認任何知道連結的人可填寫。
3. 點擊「複製填答者連結」，另準備自己的 thank-you.html。
4. 無痕測試：確認表單免登入可開啟；未驗證前不要放進公開頁。

🤖 AI QA Prompt

1. 檢查 HTML 標籤是否閉合、JS 是否完整。
2. 找出假連結、虛構資料與未標示的估算。
3. 檢查 overflow-wrap、min-width: 0 與手機安全區。
4. 若有錯，只回傳完整修正後 HTML，不要只貼片段。

👀 人工手機驗收

1. 頁面不可水平捲動；表格等寬內容可在卡片內橫滑，這是正常做法。標題、內文、按鈕不可擠壓。
2. 逐一點 CTA、地圖、外部連結與下載；底部內容不能被遮住。
3. 對照資料卡：日期、航班、住宿、時間、金額不能漏或變形。
4. 截圖首屏、最長卡片、底部 CTA，作為下一輪 AI 救援證據。

📱 GitHub Pages 手機 5 步驟

1. 在 GitHub 建立 Public repository。
2. 用網頁版新增／上傳 index.html，確認位於根目錄。
3. 按 Commit changes，開啟 Settings → Pages。
4. 選 Deploy from branch、main、/(root)。
5. 開啟產生的 github.io HTTPS 網址，再用手機驗收。

🔍 常見手機卡點速查

• 打開畫面全白？
  ① 分段貼上漏了一段或順序錯：確認 3 段都在。② AI 輸出被截斷：回覆「請從最後一個完整標籤續接，不要重來」。③ 標籤未閉合：用 AI QA Prompt 檢查。不要請 AI「重給完整代碼」，手機上通常會再截斷一次。
• GitHub Settings → Pages 找不到或按鈕太小？
  切換瀏覽器的「要求電腦版網站」再操作。
• Pages 部署後網址仍是 404？
  先等 1～2 分鐘，再重新整理；確認 index.html 位於 repository 根目錄。
• 對話中斷了？
  把手機備忘錄裡的「旅程資料卡」貼進新對話，再要求 AI 從最後完整標籤續接。
• 不確定 3 段是否貼完？
  檢查檔案最後一行是否為 </html>；電腦路徑另見：純文字檔可能是 index.html.txt，Netlify 404 則確認根目錄。