把行程變成可愛網站

這是什麼

把旅遊行程貼給 Claude，再加一段描述風格的指令，它就會做出一個可以用手機看的行程網站：首頁有插圖和出發倒數，每天一條時間軸，交通方式用彩色小標籤，還有可以打勾的待辦清單。

我做了一個高雄版示範，順便把這類網站最常遇到的三個小問題一起修掉。

誰需要

• 要帶家人、長輩出遊，想把行程整理得一眼就看懂的人
• 揪團出去玩，不想在 LINE 群組貼一長串文字的人
• 想要一個好看的網頁，但完全不會寫程式的人

要不要錢

Claude 免費版可以試。行程很長、要改很多次的話，可能會用完當天的額度。做出來的網站是一個 HTML 檔，可以直接傳給朋友用手機打開。

怎麼開始

1. 把行程整理好。Notion、手機筆記、LINE 訊息都可以，直接貼文字最穩。
2. 把下面整段指令貼給 Claude，最後一行換成你的行程。
3. 打開它做好的網頁，哪裡不喜歡直接說，例如「插圖換成海邊」「顏色換成藍白色」。

幫我把下面的行程做成一個旅遊網站，整個網站放在一個 HTML 檔裡。
畫面感覺：
- 像日本的手繪繪本，可愛但不花俏，背景一律用淺色
- 背景用米白色 #FFFCF6；每個區塊都有 3px 的深灰色外框 #3E3A39，邊角要圓，顏色用平塗、不要漸層
- 主要用這四個顏色：粉橘 #F2A497、奶黃 #F6D27A、淺藍 #A8D3E6、淺綠 #B9DAA5
- 字型用粉圓體，從這個網址載入：https://fonts.googleapis.com/css2?family=Huninn&display=swap
- 插圖請用 SVG 自己畫，畫目的地有代表性的東西，例如地標、交通工具、風景
網站要有：
- 固定在最上面的選單
- 首頁：插圖、旅行名稱、離出發還有幾天
- 交通資訊卡片
- 每天的行程：上面可以切換日期，下面是時間軸；交通方式用不同顏色的小標籤，最推薦的點標上「必去」
- 可以打勾的準備清單、住宿資訊
動畫：插圖輕輕晃動，切換日期時有一點彈跳；手機開了「減少動態效果」就不要動。
以手機畫面為主，全部用繁體中文。
另外三點一定要做到：
1. 字型一定要用上面那個網址載入
2. Google 地圖連結一律用 https://www.google.com/maps/search/?api=1&query=地點名稱 這種短網址
3. 「捲到哪裡，選單就亮哪裡」請用 IntersectionObserver 做，不要每捲一下就重新計算
行程：
（把你的行程貼在這裡）

我實際怎麼用

我拿這段指令做了一個「高雄兩天一夜」的示範行程：第一天駁二、打狗英國領事館、坐渡輪去旗津看夕陽；第二天美麗島站光之穹頂、衛武營、高雄流行音樂中心。這是示範，不是我真的訂好的旅程。

成品在這裡：高雄兩天一夜示範網站，用手機打開最準。

這類網站最常出問題的三個地方，我在指令裡先處理掉：

• 字型沒出來。 常聽到「Google 的粉圓體沒有繁體字」，我實際檢查，常用的繁體字都有，問題多半是字型沒被正確載入。所以指令裡直接寫死載入網址，示範網站的字就正常出來了。
• 地圖連結太長，手機點了打不開。 改用 Google 官方的短網址格式，只帶地點名稱，示範網站裡每個景點都是這樣。
• 手機往下滑會卡。 如果每滑一點就重算一次「現在在哪一區」，手機會卡。改成讓瀏覽器在區塊進出畫面時才通知，滑起來就順了。

小提醒

• 地址、營業時間、票價，AI 可能寫錯。 出發前自己對一次，示範網站裡我只寫地點名稱，沒有寫價錢。
• 個資不要放上公開網站。 訂房代號、護照號碼、電話，只留在自己手機裡。
• 想換風格，只改「畫面感覺」那幾行就好。 例如換成高雄港的藍白色、或拿掉插圖，其他內容不用動。