Vibe Coding 全圖解教

這裡幫你將這 6 個開發步驟的提示詞，改寫為**超直白、口語化且精準的「一句話白話提示詞」**，方便你在與 AI 溝通（Vibe Coding）時直接複製使用： ----- *步驟 1（架構與前後端）：* 👉 「請用 Vue 3 CDN + Tailwind 做一個 Windows 風格的單頁待辦 App，並寫好以 Google 試算表為資料庫的 GAS 讀寫後端。」 *步驟 2（跨域同步）：* 👉 「前端打 GAS 遇到 CORS 阻斷，請把 POST 資料改包裝成 form 格式並加上 no-cors，確保資料能順利存進 Google 試算表。」 *步驟 3（樹狀分類與篩選）：* 👉 「請幫側邊欄做『主分類與子專案』的樹狀結構，並修正篩選邏輯：點擊主分類時要同時顯示底下所有子專案的任務。」 *步驟 4（ID 型態轉換與抽屜防呆）：* 👉 「從 Google 試算表讀取資料時請把所有 ID 強制轉成字串防比對失敗，並確保點擊任務時右側抽屜能完整載入與編輯備註。」 *步驟 5（深淺色主題修復）：* 👉 「請修正淺色模式文字太淡的問題，全面設定深淺色動態對比，讓側邊欄與文字在兩種模式下都清晰好讀。」 *步驟 6（天氣小工具與中文地名）：* 👉 「請串接 Open-Meteo 天氣小工具，支援自動定位與手動改地點，並內建中文城市轉英文的對照表防查詢報錯。」