zexuanw958-svg/travel-plan-viz

旅行計劃視覺化

把一趟旅行變成單檔案 HTML 頁面：互動地圖、每日時間軸、出發前訂票提醒。機械邏輯用自帶引擎（assets/map.js、assets/reminders.js），美學交給設計步驟（frontend-design / huashu-design，或內置準則兜底）。

第一步：判斷模式

• 使用者只給了目的地+天數（如「香港 4 天 3 晚」）→ 模式 A（從零規劃）。
• 使用者已提供行程（文字或舊 HTML 檔案）→ 模式 B（解析已有計劃）。

模式 A：從零規劃

1. 讀 references/research-guide.md，聯網調研目的地。
2. 在對話裡用 markdown 提出詳實逐日計劃（早/中/晚、景點、交通、住宿）。
3. 與使用者來回迭代，直到使用者明確確認。
4. 進入「調研補全 + 生成」。

模式 B：已有計劃

1. 解析使用者給的行程（若是舊 HTML，從中提取結構化資料）。
2. 順手提建議（Agent 增值，但別硬來）：把使用者的計劃對照「完善行程」的維度（行前須知/天氣應對、提前訂票項、點到點交通、節奏與緩衝、當地必吃、片區住宿是否合理等）快速體檢，在對話裡給最多 3–4 條具體、可選的優化建議。原則：
   • 只挑真實存在的缺口；計劃本就完整就直說「挺完整」，不要硬湊、不要說教、不要替使用者重排行程。
   • 一句點出問題 + 一句給方向即可，簡潔；建議預設口頭給，保持 HTML 成品乾淨（使用者想把建議也放進頁面再加）。
   • 這是我們區別於「純提示詞轉 HTML」的地方——發揮 Agent 的判斷力，但點到為止。
3. 進入「調研補全 + 生成」（生成不被建議阻塞；採納哪些由使用者定）。

調研補全 + 生成

1. 按 references/research-guide.md 聯網補全：座標、真實圖片 URL、評分、評論、營業時間/休息日、門票參考價、需提前訂項及 leadDays；行前須知（天氣/颱風/穿搭/支付/App/購票時機）、點到點交通（方式/票價/耗時）、時令限定活動、每餐必點菜+參考價；航班給 3-5 個待選班次、飯店按片區+價位推薦、並準備免責聲明與全程小貼士。排程體現天氣/季節邏輯（戶外排涼爽時段）。不查即時票價。
2. 組織成 assets/page-contract.md 裡定義的 trip 資料結構。
3. 用設計步驟產生風格化 HTML：優先呼叫專業設計 skill——frontend-design 或 huashu-design（花叔Design），任一已安裝即用；兩者都沒有時，按 references/design-guidelines.md 的內置美學準則自己出。無論哪種方式都要嚴格遵守 assets/page-contract.md 的區塊與約束：
   • 內聯 assets/map.js、assets/reminders.js 內容到 HTML（保證單檔案）。
   • 頁頂清單用 computeReminders + renderChecklistHTML。
   • 展示行前須知區塊；航班區展示待選班次（已預訂的高亮），飯店區按片區+價位展示，附近顯著展示免責聲明。
   • 時間軸卡片展示營業時間/門票參考價/交通/時令活動等可選欄位；展示每日餐飲（必點菜+價）、當日與全程小貼士、單日二選一方案（若有）。
   • 地圖用 initTravelMap，引入 Leaflet CDN 的 CSS/JS。
   • 時間軸上 needsBooking 項插入 reminderBadgeHTML(leadDays)。
   • 每趟行程用不同配色。
4. 儲存為 <行程名>-旅行計劃.html 到工作目錄。
5. 告訴使用者：之後可把該 HTML 檔案丟回來，說「把第三天的 X 挪到第四天」，會在原始結構上修改。

不做

即時票價/機票價格、代訂票、多語言 UI、後端。全程靜態單檔案。