【Vibe Coding】Windsurf 教學｜ 在 60 秒內做出 MyFitnessPal 飲食追蹤 App？
想打造飲食紀錄 App 卻不會寫程式？這篇帶你用 AI 工具 Windsurf，只花 60 秒就做出 MyFitnessPal 的 MVP 雛型。從 prompt 編寫、AI 建構，到 QR Code 預覽與手機啟用，全流程零程式碼，適合初學者快速上手，也揭示 OpenAI 為何砸 30 億收購這套開發神器。
你可能是第一次接觸「Vibe Coding」，這個專欄的宗旨很簡單：不談那些讓人頭痛的程式碼，只關心一件事——如何用最酷、最快、最「有感」的方式，把你腦中的絕妙點子，變成可以握在手上的真實 App。
今天，我們要介紹一款堪稱「開發界黑魔法」的工具——Windsurf。
Windsurf 是什麼？
想像一下，你不是在寫程式，而是在和一個超強的智慧助理聊天。你用說的、打字的方式，告訴它你想做一款怎樣的 App，然後——奇蹟發生了，它就在你眼前把 App「變」了出來。
這，就是 Windsurf。它不僅是一款 AI 編碼輔助工具，更是開發體驗的全面革新，甚至成為 OpenAI 投資 30 億美元收購的標的，正改寫軟體工程的未來。
Vicky Tsai
從 Codeium 到代理式 IDE：Windsurf 的進化
Windsurf 的前身是 Codeium，一款以快速、免費著稱的 AI 自動補全工具。轉型為 Windsurf 後，它從單純的「副駕駛」模式，進化成為真正能主動執行任務的「AI 代理」（Agentic IDE）。你不再只是提示一句，而是可以讓它處理整個工作流程，從理解需求、產出程式碼、執行終端指令到部署都一手包辦。
其關鍵技術之一，是內建的 SWE-1 模型系列，包括 SWE-1-lite、SWE-1-mini 等不同層級，可針對重構、除錯、自動完成等任務動態選擇模型，並大幅降低運行成本。
而最受注目的，是它的「心流感知（Flow Awareness）」：AI 不只是被動等待指令，而是能理解你正在進行的任務、幫你接手未完成的程式碼、在你離開後持續推進專案，真正實現「與 AI 協作」的編程體驗。
實作挑戰：60 秒做出你專屬的 MyFitnessPal
介紹完理論，接下來實際演練，教你用 Windsurf 打造一款 MVP 級的飲食紀錄 App，靈感來自知名的 MyFitnessPal。
為什麼從 MVP 開始？
與其一次堆滿所有功能，不如先打造最小可行產品（Minimum Viable Product, MVP），這不僅是敏捷開發的基本概念，也是讓 AI 更好理解你需求的關鍵。MVP 能幫助你：
- 專注使用者最核心的痛點
- 快速進入測試與驗證階段
- 提升開發效率，減少技術債
步驟一：請 AI 解構 App 架構（用 MVP 思維）
我們打開 Windsurf，選擇模型後對它說：
please describe the app MyFitnessPal in simple MVP form
Windsurf 很快地回應以下幾個核心功能：
- 基本資料頁：輸入身高、體重、年齡等，計算每日攝取熱量上限。
- 食物紀錄頁：簡單表單記錄每一餐的品項與卡路里。
- 主畫面：顯示今日總攝取量與剩餘熱量。
- 進度圖表：追蹤體重變化與飲食趨勢。
步驟二：讓 AI 建構出完整 App
接下來輸入第二個 prompt：
implement this as a simple expo app幾秒內，螢幕上就開始飛出一個個檔案、資料夾、元件程式碼。你會看到完整的 React Native + Expo 專案架構，自動完成無需干預，支援 iOS 與 Android。
為什麼選用 Expo？
當我們想在不同平台快速預覽 App 原型時，Expo 是絕佳的選擇。它能：
- 快速部署 iOS/Android 雙平台
- 免除繁瑣的原生設置，適合 MVP 測試
- 搭配 Expo Go App，立即在手機上體驗結果
步驟三：掃描 QR Code，使用 Expo Go 即刻啟動
打開手機，下載「Expo Go」App，掃描螢幕上的 QR Code，幾秒內你就能進入 App 介面，自由點擊、輸入與操作。
Windsurf 背後的戰略價值：OpenAI 為什麼砸 30 億？
Windsurf 的價值不只在工具本身，而在於它成為開發者日常工作流的數據管道。每一次提示、生成、修改、除錯，都是寶貴的 AI 訓練資料。
對 OpenAI 而言，這是一場從「模型供應商」向「開發平台擁有者」的戰略跳躍——IDE 是開發者的終極入口。
我的心得：寫程式，也可以很有「Vibe」
這次體驗讓我再次確信，所謂「Vibe Coding」，不是酷炫或表面，而是能讓人保持心流、專注創意的工作方式。當 AI 可以接住你的想法並放大它，創作就不再被卡住。
Windsurf 讓我真正感受到「AI 版本的 VS Code / Xcode」會是什麼樣子。它不只是寫程式，而是全方位參與你的開發流程——從想法拆解、原型生成、終端執行到部署預覽，全都整合在同一套互動式 IDE 中。
後續我也希望能試著串接 LLM API，加入影像辨識功能，讓 App 不只紀錄食物，還能「看懂」食物——進一步自動辨識照片內容並估算熱量。這會是我對「個人化 AI 工具」下一步的實驗方向，也是我對 Vibe Coding 精神的延伸實踐。
Source
圖源：https://athletechnews.com/wp-content/uploads/2023/05/myfitnesspal-dashboard-feature.png
