🚀 【開發筆記】用 AI 工作流，4 步驟打造專屬日本旅遊網站
最近正在規劃 2026 的大阪行程，身為工程師，比起翻部落格，我更想用自己的技術堆疊蓋一個網站。透過 Claude Code 與 MCP (Model Context Protocol) 的加持，開發效率簡直是降維打擊。
分享這次的高效開發 4 步驟：
1️⃣ 找對專家：Claude Code 自訂系統提示
開發前先定義角色。我直接下指令 claude --system-prompt "You are a Japan travel expert"。 這讓 AI 不只是個寫 code 的機器人，而是變身成日本旅遊通。從交通銜接、景點順序到在地美食建議，它給出的建議比一般搜尋更有邏輯且精準。
2️⃣ 設計升級：UI/UX Pro Max 輔助
網站好不好用，細節在 UI。這次導入了 ui-ux-pro-max-skill 這套 AI Skill。 它能提供跨平台的設計情境建議，幫我決定旅遊資訊的視覺層級（Hierarchy），確保手機看地圖、筆電查飯店都能有最好的體驗。
3️⃣ 數據賦能：Google Map MCP Server 串接
這是最關鍵的一步！利用 cablate/mcp-google-map。 以往串接地圖 API 需要翻很久文件，現在透過 MCP 協議，LLM 能直接理解 Google Maps 的 API 能力，抓取景點資訊、計算距離、匯入座標變得異常簡單。
4️⃣ 零成本上線：GitHub Pages 靜態佈署
最後，直接透過 GitHub Pages 進行佈署。不用煩惱伺服器維護，快速生成專屬網址。
