一直以來，我的工作就與程式有關，但一直對「怎麼用 AI 工具提升 Coding 能力」非常好奇。剛好之前參加過六角學院辦的工程師體驗營，對上課的氛圍很喜歡，所以這次就決定再挑戰一次 Vibe Coding 體驗營。
課程的氣氛讓人每天都有一點小成就感，也激發我持續探索新的工具和方法。從第一週到最後一週，我覺得最大的收穫是對前後端的整體概念更加清楚了，尤其是我本身是做資料科學和 AI 相關的背景，但對完整前後端的串接沒有那麼熟悉。透過這個小天氣工具，我對「前端 + 後端」如何協作有了更實際的理解，也開始動手做自己的個人網站和小工具。
課程最後必須實作一個天氣預報小工具，我做了一個「Yuna の氣象物語」，設計理念是日系手繪療癒風，並增加台灣所有縣市的 API 查詢功能，可透過下拉選單自己查詢天氣。
六角學院已經事先準備好部份程式碼了，我們要做的就是挑戰加入更多的 API ，或是修改前端介面。一開始我對整個介面設計完全沒有想法。最初，我嘗試用 ChatGPT 討論「森林小木屋風格」，結果產出完全不符合預期，就是一個很樸素的咖啡色配色。後來我才意識到，需要先釐清自己想要的風格，再讓 AI 幫助實作。
我和 Gemini 認真討論後，生成了後來的日系手繪風格背景圖，作為整個 UI 的基礎。背景圖放上去後，原本天氣主視窗也需要調整以搭配風格，這部份我也是先請 Gemini 提供修改的 prompt，再丟到 cursor 或 Antigravity 這類專門開發的工具。這部分雖然不涉及複雜框架，但考驗的是「審美 + 邏輯」。
這份主線任務的技術挑戰不大，但設計挑戰非常值得玩味。AI 工具可以協助你快速落地，但「我想要什麼」仍然需要自己先明確。
在國外購物，除了計算匯率，有時可能還會含稅（例如 Toronto 的 13% HST），手算非常麻煩。我決定自己從 0 開發一個小工具，這也是第一次真正從 0-1 做產品，同時串接不同國家的匯率轉換 API。
這一個任務我嘗試使用 PRD 規格驅動的方式來開發，我先跟 ChatGPT 討論好需求與規格，接著使用 Cursor + Google AntiGravity 作為開發輔助。
一開始還算蠻順利的，80% 的核心功能與設計大概在前 20% 的時間就完成。就在我以為可以在短短 1-2 天內開發完成時，有一個 bug 出現了，我在按下一些確定按鈕的時候 彈出視窗的位置總是跑掉，為了這個 bug 我大概又花了額外的 2-3 天，經過學習，我發現問題核心在 CSS 定位與瀏覽器渲染機制：
absolute、fixed 與參考點的關係。transform、filter 等會改變 fixed 的定位基準。<body> 直接子元素，避免 z-index 或定位衝突。getBoundingClientRect() vs offsetTop/offsetLeft，確保計算的是視窗座標。修正後，彈窗終於如想像般顯示，這段經驗也讓我深切理解到 Vibe Coding 的基礎還是在於扎實的軟體工程基本功，沒有這些，Vibe Coding 可能就不那麼 Vibe 了。
印象中，我以前很喜歡的一位機器學習領域的老師——吳恩達老師——曾經說過，他過去並不覺得那麼多人需要學程式，但隨著這些更強大的 AI 工具出現後，他反而鼓勵更多人去學程式。
我認為， Vibe Coding 的本質，其實就在於給更多人這個能力，去創造自己心中想做的工具。
當然，從工具到真正的產品，仍然需要技術、商業與系統化的思考，但透過這樣的 Coding 體驗營，對非工程師來說是一個非常好的入門起點。它鼓勵大家勇敢嘗試、玩出自己的風格，從這些小作品中獲得啟發，也讓自己更清楚地看到與頂尖工程師所能做出的產品之間的差距。
對我而言，這次課程讓我重新認識自己的不足——無論是前端、後端的開發，還是 UI/UX 的設計思維——但同時也給了我繼續前進的動能。它不只是一次課程，更像是一個起點，提醒我持續學習、持續挑戰自己，去把想法化為真正可以上線的產品。
一起來 Vibe Coding 吧！勇敢踏出第一步，你會發現自己比想像中能創造更多。