Vibe Coding - 打造賽博龐克風格網頁

🎯 任務說明

調整「個人氣象預報」網頁風格，透過 AI 協作完成 Vibe Coding。
須先完成後端環境部署 + 串接氣象局 API。

🔧 本次的環境

開發工具：VS Code、Git、Zeabur
AI 工具：Google Gemini PRO
API：中央氣象署開放資料平臺 API 文件
圖片來源：Gemini
前置作業
1. Fork 此後端程式碼，調整目標縣市，並於 Zeabur 完成部署。
2. Fork 此前端程式碼，替換API_URL連結。

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 只提供需要修改的局部程式碼，並指出要調整的行數自行替換。