Vibe Coding 心得 - Sparkfit-Lab 開發日誌

-

我的 Sparkfit-Lab 開發日誌：一場與 AI 協作的 Vibe Coding 實驗

最近我完成了一個名為 Sparkfit Lab 的前端專案，這不僅是一次技術實踐，更是一場關於「Vibe Coding」與 AI 協同開發的深度探索。在這篇文章中，我想與大家分享我是如何利用 Gemini CLI、Cursor AI 等工具，以前所未有的效率打造專案，以及在這趟旅程中的心得與反思。

專案連結：https://github.com/kirinchen/sparkfit-lab

緣起：用 AI 定義專案的「Vibe」

專案的起點，並非一行程式碼，而是一段與 AI 的對話。我首先打開 Gemini，透過對話的方式，共同撰寫了一份詳細的 spec.md (規格文件)。這不僅是定義功能，更是在設定整個專案的「Vibe」——我希望它帶給使用者什麼樣的感覺？是充滿活力的、激勵人心的，還是專業而簡潔的？

接著，我將這份充滿「Vibe」的規格文件與特製的 Prompt 交給了 Gemini CLI。這一步，是整個開發流程的魔術時刻。

我的 AI 協作工作流：從建築師到雕刻家

我的開發流程像一場由不同樂器組成的協奏曲，每個工具各司其職：

  1. Gemini CLI：專案的建築師

    我讓 Gemini CLI 讀取 spec.md 與我的核心 Prompt，它便為我搭建起整個專案的基礎框架與核心架構。無論是建立大型功能模組，還是進行結構性的修改，Gemini CLI 就像一位經驗豐富的架構師，快速而準確地將我的藍圖化為實體。

  2. Cursor AI：細節的雕刻家

    當大的框架底定後，我便轉向 Cursor AI 進行微調。Cursor 如同一把精巧的雕刻刀，非常適合處理具體的、小範圍的修改。例如，當我想調整某個區塊的版面佈局時，只需在 Cursor 中圈選對應的程式碼，下達「幫我把這裡的排版改成…」之類的明確指令，它便能心領神會地完成任務。

  3. 手動編碼：最後的守門員

    AI 並非萬能。當 AI 的建議陷入死胡同，或者需要進行一些細微的設定調整時（例如：在特定條件下隱藏某個按鈕），就輪到我的雙手登場了。這時候，開發者自身的技術底蘊就成了專案品質的最後一道防線。

旅程中的重要心得

1. AI 間的「狀態同步」：新時代的開發挑戰


我遇到一個經典問題：我在 Cursor 中做了一個重要修改（將計數器動畫改為嵌入 YouTube 影片），但忘了「知會」Gemini CLI。結果，當我下一次請 Gemini CLI 進行大範圍更新時，它因為不知道這個異動，又把舊的動畫功能加了回來！

這點出了 AI 協作中的一個核心挑戰：狀態管理 (State Management)。我們的程式碼庫是「唯一事實來源 (Single Source of Truth)」，但每個 AI 工具在自己的會話中都維護了一份對程式碼的「記憶」。當多個 AI 同時工作時，如何確保它們的記憶與最新的程式碼庫同步，成了一項新課題。

解法：

  • 強制刷新記憶： 如您所說，使用 /memory refresh 或類似指令，強制 AI 重新讀取專案。

  • 跨平台溝通： 將一個 AI 的決策（如對話紀錄）導入另一個 AI，讓它們「知道」彼此的工作。

2. 前端開發的 Vibe：有畫面，好溝通

這次經驗再次印證了前端專案的優勢：視覺化的回饋極為即時。我可以馬上看到 AI 修改後的畫面效果，直觀地判斷這個「Vibe」對不對。這種「所見即所得」的開發循環，讓我和 AI 的溝通變得異常高效。

3. 技術底子是 AI 時代的加速器，而非替代品


有人可能認為 AI 會降低技術門檻，但在我看來，AI 反而對開發者自身的技術能力提出了更高的要求，只是要求的面向改變了：

  • 從「寫作者」到「總編輯」： 您需要具備極強的 Code Review 能力，快速判斷 AI 產出的程式碼是否高效、安全、可維護。

  • 從「建築工」到「設計師」： 您需要更懂系統架構與設計模式，才能給出高品質的 Prompt，引導 AI 搭建出優良的結構，而非一堆程式碼的集合。

  • 除錯能力的躍升： 修正自己寫的 Bug 是一回事，修正一個你不完全熟悉、由 AI 寫出的複雜 Bug，則是另一回事。這需要更深厚的除錯功力。

進階思考：從「寫」程式到「指揮」程式


除了上述心得，這次經驗也引發了我更深層的思考：

觀點一：開發者的角色轉移 — AI 的「指揮家」

我的工作內容，正從「逐行編碼」轉變為「下達指令、審核結果、整合系統」。我花在撰寫 for 迴圈的時間變少了，但花在思考如何用精準的自然語言描述需求、設計高品質 Prompt 的時間變多了。我們正從工程師 (Engineer) 轉變為 AI 指揮家 (AI Orchestrator)。

觀點二：警惕「AI 生成的技術債」

AI 優化的是「當下任務的完成度」，它不一定會為你考慮程式碼的長期可維護性。如果不加以引導和審核，AI 可能會生成大量看似能動、實則難以維護的「義大利麵式程式碼 (Spaghetti Code)」。身為開發者，我們必須成為品質的守門員，在享受速度的同時，主動管理和重構 AI 產出的程式碼，避免未來留下技術債。

觀點三：Prompt Engineering — 新時代的核心技能

這次經驗讓我深刻體會到，「問對問題」比「會寫答案」更加重要。如何將一個模糊的「Vibe」或複雜的業務邏輯，轉化成 AI 能理解、能執行、且能產出高品質結果的 Prompt，這本身就是一門專業技術，也就是所謂的「提示工程 (Prompt Engineering)」。

結論：效率的倍數級提升

總體而言，這套 AI 協作流程讓我的開發效率提升了數倍。它將我從繁瑣的樣板程式碼 (boilerplate) 中解放出來，讓我能更專注於專案的靈魂——也就是「Vibe」的塑造與使用者體驗的設計。

這是一次令人興奮的嘗試，也讓我對未來的軟體開發充滿期待。它不是要取代開發者，而是賦予我們更強大的力量，讓我們能將精力集中在更高層次的創造與思考上。

留言

張貼留言

這個網誌中的熱門文章

Google Map 單車路徑計算坡度和角度小工具

-
圖片
  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點...
閱讀完整內容

angular 如何Http 如何設定 CORS (Cross-Origin Resource Sharing)

-
如果要對所有送出的 Request 做調整 之前我在寫後台的,就可以使用AOP的方式實作, 而Angular也有類似的架構 如果我們用  @angular/common/http  Angular只要實作 HttpInterceptor  interface就可以了 實作 HttpInterceptor 在cmd輸入 ng g service BasicAuthHtppInterceptor 已建立BasicAuthHtppInterceptorService ,修改內容如下 import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http' ; @Injectable ({ providedIn: 'root' }) export class BasicAuthHtppInterceptorService implements HttpInterceptor { constructor ( ) { } intercept(req: HttpRequest< any >, next: HttpHandler) { req = req.clone({ setHeaders: { /*有關CORS的參數就可以改在這裡了*/ 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS, PATCH' , 'Access-Control-Max-Age' : '86400' } }); return ...
閱讀完整內容

10月24日 「方程式編輯器」讓你用Word打數學算式、根號、平方

-
圖片
「方 程式編輯器」是微軟Office 2003內建的一個外掛功能，原本不存在於Word軟體內，不過可以在安裝Office或更新Office時重新安裝「方程式編輯器」這個功能，重開之 後，就可以透過「方程式編輯器」來輸入數學符號、開根號、平方…等等，對於一些相關科系或者中小學老師製作講義，都相當方便唷！ 安裝方法： 第1步 如果你電腦中的Office軟體在一開安裝時有勾選「方程式編輯器」這個項目的話，可以不用執行下面的安裝步驟。 如 我你的Office裡面找不到「方程式編輯器」這功能，則請依照下面方法，先由〔開始〕→【控制台】→「新增或移除程式」，開啟「新增或移除程式」對話 盒，找到之前安裝的「Microsoft Office Professional Edition 2003」項目後，在〔變更〕上按一下滑鼠左鍵。 第2步 出現Office的安裝畫面後，點選「新增或移除功能」，再按一下〔下一步〕。(此時會需要你插入你所購買的Office安裝光碟) 第3步 接著，勾選「選擇應用程式的進階自訂」，然後再按〔下一步〕。 第4步 接著先點選「Office」工具，拉開下拉選單後，點一下【方程式編輯器】，再點選【從我的電腦執行】，最後再按一下〔更新〕，即可將「方程式編輯器」功能安裝到你的電腦中，讓我們可以透過這個編輯器來編輯數學方程式。 使用方法： 第1步 確定你的電腦有安裝「方程式編輯器」功能後，重新開啟Word視窗，當我們要輸入數學算式時，依序按下〔插入〕→【物件】，準備開啟「方程式編輯器」。 第2步 出現「物件」對話盒後，切換到〔建立新物件〕活頁標籤中，再點選【Microsoft 方程式編輯器 3.0】，最後再按下〔確定〕。
閱讀完整內容