🎯 任務說明
調整「個人氣象預報」網頁風格，透過 AI 協作完成 Vibe Coding。
須先完成後端環境部署 + 串接氣象局 API。
🔧 本次的環境
- 開發工具：VS Code、Git、Zeabur
- AI 工具：Google Gemini PRO
- API：中央氣象署開放資料平臺 API 文件
- 圖片來源：Gemini
- 前置作業
Vibe Coding 成果
🔗 GitHub Page 、 Repo
🪄 AI 提詞
【v 1.0】 初版提詞
- 上傳檔案：含有 css style 及 js script 的 index.html
你是一個專業的前端工程師，特別擅長版面與風格設計。
我是一個vibe coder，正在製作個人的天氣預報網站。
請查看附檔我目前的前端程式碼。
我想要調整網頁風格，改為「Cyberpunk」的世界風格。
希望符合以下設計。
1.背景圖片改為Cyberpunk 城市外觀，或霍格華茲特快車行駛於鄉野間的背景。
2.整體的主色與輔色皆配合第一點調整。
3. 目前的 icon 和 emoji 改為有Cyberpunk風格的圖樣。
4. 穿搭建議、錯誤提示訊息、等待網頁載入的文字改為Cyberpunk世界觀的陳述。
例如："會下雨，請攜帶雨具"；"晴天，今天也要迎接新的挑戰！"; "系統連線異常，天氣資料讀取失敗"
5. 利用視差滾動，在滑鼠懸浮在天氣卡片上時，產生漂浮的效果。
6. 可能的話，把滑鼠游標增加 霓虹 的螢光特效。
7. 背景圖檔設定
晚上時間(18:00PM後)請以【bg1】呈現
早上時間(06:00AM)，晴天的情況請以【bg3】呈現，雨天的情況請以【bg2】呈現
不要直接給我程式碼，先和我說明你對需求的理解，以及你的調整構想。
背景圖片參考：(給AI [電馭叛客2077]、[銀翼殺手2049] 圖片連結)
【v 1.0】 AI 返還結果
- 符合程度：85%
- 盲點確認：
- 因事前已找好相關的背景素材，再提交需求的時候一併提供參考，
- 所以只有再確認【陰天】的情況如何設定。
【v 2.0】 修正HTML上的連結
- 在本地端跑"Go Live"確認網頁呈現RWD無問題，確認背景切換邏輯OK。
// 1. 晚上或是預設狀況 -> bg1
if (isNight) {
bgImage = 'bg1.jpg';
} else {
// 白天邏輯
if (weatherText.includes("雨")) {
// 2. 雨天 -> bg2
bgImage = 'bg2.jpg';
} else if (weatherText.includes("晴") && !weatherText.includes("多雲")) {
// 3. 純晴天 (排除晴時多雲) -> bg3
bgImage = 'bg3.jpg';
} else {
// 4. 陰天、多雲、晴時多雲 -> 回歸 bg1
bgImage = 'bg1.jpg';
}
}
- 上架Github測試網頁RWD等正常，完成。
💡 小結： Promt 建議事前規劃
【設計需求提供方式】
- 提供明確的風格主題 + 參考圖片，先確認整體骨幹，再修正局部細節。
- 請 AI 依據主題，設定主色及輔色，給出明確的提示or參考物件。
- 文字方面，如果有語氣/口吻上的期望，建議提供 2 ~ 3 則具體的文字範例。
- 如果要請 AI 產圖，建議在 單獨的對話中 說明圖片需求、尺寸及檔案格式(比例&4K)。
【降低使用額度】
- 若 emoji 或文字內容不滿意，可嘗試自己手動調整。
- 微小錯誤可以請 AI 只提供需要修改的局部程式碼，並指出要調整的行數自行替換。
