從 Prompt 到產品：
AI 開發工具 與寫作框架
點子與執行之間的距離，從未如此之近。這篇文章會聊得深一些，分享我如何選擇工具，以及如何像個「人」一樣，跟 AI 好好溝通。
Executive Summary: 懶人包
- 這篇在幹嘛？ 把 Vibe Coding 從一個酷炫的概念，變成你可以一步步照著做的實戰指南。
- 會看到什麼？ 我會分享怎麼選 AI 工具、我私藏的「R.G.F.D.S.」Prompt 框架，還有怎麼解決那些 AI 也搞不定的「鳥事」，比如版本衝突、App 權限問題，以及我怎麼用 Gemini 偷懶做 UI 設計。
- 核心觀點： Vibe Coding 的高手，厲害的不是他多會寫 Code，而是他懂得怎麼「問對問題」，並且有能力解決 AI 預料不到的「環境問題」。
Part 1: 選擇你的 AI 副駕
市面上的 AI 工具五花八門，但說實話，如果讓我推薦第一款工具給新手，我會毫不猶豫地選 Cursor。它不是一個外掛，它本身就是一個為了「跟 AI 一起寫 Code」而生的編輯器，用起來最順手。
下面這個表，能讓你快速看懂免費版和付費版到底差在哪。
| 功能 | 免費版 (Free Tier) | 付費版 (Pro Tier) |
|---|---|---|
| 基本問答 (Chat) | ✓ (有次數限制) | ✓ (次數多很多) |
| 理解整個專案 (@Repo) | ✗ (一次只能看一個檔案) | ✓ (天與地的差別) |
| @ 符號引用檔案/函式 | ✗ | ✓ (效率倍增器) |
| 模型選擇 | 基本款 | ✓ (可選最強的 GPT-5.2 codex, Sonnet 4.5 等等) |
Pro 版的「理解整個專案」功能，是那種你一旦用過就回不去的功能。當你第一次體驗到，你只需要說一句話，AI 就自動幫你把專案裡 10 個相關檔案都改好的時候，你就會明白那感覺有多爽，就像從走路直接升級成開車，對於很多 AI 工具來說價錢算可以接受。
Leo 的建議：
所以我的建議很簡單：先用免費版，把它用到「嫌貨」為止。 當你開始覺得「天啊，一直複製貼上好煩」、「如果 AI 能一次看懂所有檔案就好了」的時候，恭喜你，你已經把免費版的價值榨乾了。這時候再升級，每一分錢都會花得心甘情願。
Part 2: 指揮 AI 的藝術
說起來有點不好意思，這套「R.G.F.D.S.」框架，是我撞了無數次牆、跟 AI 吵了無數次架之後，才慢慢摸索出來的。如果你不想體驗那種 AI 一直給你錯誤程式碼的挫敗感，希望這套框架能幫到你。
R – Role (角色)
你可能覺得這有點多此一舉，但相信我，先給 AI 一個「人設」，效果真的有差。這就像你不會找一個廚師來修水管一樣，告訴 AI「你是一位資深 iOS 工程師」，它就會用更專業的視角來思考問題。
G – Goal (目標)
用「人話」告訴 AI，你最終想要完成什麼。別說：「做個頁面。」要說：「我想做一個讓使用者記錄每天喝了幾杯水的頁面。」
F – Features (功能)
這是最關鍵的一步。把你的需求，拆成一個個小到不能再小的功能點，用清單的方式列出來。重點：一條只說一件事。
D – Data (數據)
告訴 AI 你的數據長什麼樣，打算怎麼管。是存在手機裡，還是要連資料庫？先講清楚，能省掉很多後面重工的麻煩。
S – Style (風格)
你希望 App 長得是「無印良品風」還是「電競風」？程式碼要不要寫註解？這些都可以在這裡先跟 AI「喬好」。
Leo’s Pro Tip: 我的雙 AI 協作流
這算是我自己偷懶的小撇步。我常常覺得，Cursor 這種程式 AI 是個超級理工男，邏輯一百分，但美感零分。反而像 Gemini 這種看過山珍海味的通用 AI，對 UI 設計更有 sense。
所以我會：
- 先去問 Gemini：「嘿，幫我想個喝水 App 的 UI，要簡潔、療癒的風格，給我點配色和排版建議。」
- 再回來指揮 Cursor：帶著 Gemini 給的「設計稿」，回頭來寫 Prompt，`S – Style` 這部分就能寫得超具體。
當然，如果你自己對設計很有想法，那這一步就可以跳過。
下面這個範例，就是用了上面說的技巧，你可以感受一下，一個指令可以有多清晰：
You are an expert Flutter developer who writes clean, readable Dart code.[G]oal:
Create a simple “Daily Water Intake Tracker” page for users to track their water consumption.[F]eatures:
1. Display the current water count, default to 0.
2. An “Add” button that increases the count by 1.
3. A “Reset” button that sets the count back to 0.
[D]ata:
Use a simple state variable within a `StatefulWidget`. No database needed for now.
[S]tyle:
(Based on Gemini’s suggestion) Use a light cyan (#E0F7FA) as the page background. The count display should use a dark grey font (#37474F). The buttons should be `FloatingActionButton` widgets with a background color of #00BCD4.
Part 3: 實戰演練：當 AI 給你的不是你要的
先說好，完美的 Prompt 幾乎不存在。Vibe Coding 更像是一場「對話」，而不是下達一個「命令」。
1. 迭代式優化 (Refinement)
AI 給了第一版後，別急著否定它。把它當成一個還不錯的草稿，然後告訴它你想怎麼改。
2. AI 輔助除錯 (Debugging)
好了，最刺激的環節來了。你滿心期待地按下運行，結果… App 直接給你一片紅，也就是我們常說的「死亡紅屏」。先別砸電腦，這時候才是 AI 最能幫上忙的地方。
相信我，AI 看這種錯誤訊息，比你 Google 半小時還有用。它通常能一針見血地告訴你問題所在。
Part 4: 跨越鴻溝：解決 AI 無法預見的三大障礙
AI 是個寫 Code 天才，但它有個缺點：它活在無菌室裡，不知道真實世界的開發有多「髒」。學會處理這些 AI 沒想到的鳥事，是你真正「出師」的標誌。
1. 架構的缺失 (The Architectural Void)
這是我看過最多新手（包括當年的我）踩過的最大的一個坑。東一個 Prompt、西一個 Prompt，最後把所有程式碼都寫在同一個檔案裡，變成一坨「義大利麵」。一開始很快，但不出三天，你自己就看不懂了。
所以，在動手前，請先讓 AI 幫你搭好「骨架」，也就是 MVC 或 MVVM 這類開發架構。這就像蓋房子前要先有藍圖。
記住，你是總設計師，AI 是施工隊。 藍圖必須由你先確定。
2. 依賴地獄 (Dependency Hell)
每個開發者都懂的痛。你只是想加個新功能，結果一堆套件版本互相打架。AI 不會知道你專案裡已經裝了哪些東西，所以你要把「上下文」告訴它。
3. 權限之牆 (The Permission Wall)
這又是另一個 AI 不會主動提醒你，但上架時 100% 會卡關的地方。想用相機、定位？你得先跟手機作業系統「報備」。
步驟 A：靜態聲明
先告訴 AI 你想幹嘛，它會告訴你「咒語」怎麼寫。
步驟 B：動態請求
然後，再讓 AI 寫出「彈出視窗問用戶同不同意」的程式碼。
Part 5: FAQ: 一些你想知道的進階問題
Q1: 所以，我真的能完全不動手寫 Code，只靠 Prompt 做出 App 嗎？
A: 對於簡單的工具 App，幾乎可以。但 Vibe Coding 的目標不是讓你「不動手」，而是讓你從「語法工人」變成「產品建築師」。你的價值在於思考架構、定義問題，而不是計較一個分號。
Q2: AI 一直誤解我的意思，我快氣死了，怎麼辦？
A: 我完全理解這種挫敗感。99% 的情況下，問題都出在我們的指令太模糊。試試 R.G.F.D.S. 框架，特別是「功能」那部分，堅持「一次只說一件事」，你會發現跟 AI 溝通順暢很多。
Q3: 程式碼都是 AI 寫的，以後怎麼維護？
A: 你的 Prompt 就是最好的開發文件。我會把每個重要功能的 Prompt 都存起來。以後想改，就從修改 Prompt 開始。而且，你隨時可以叫 AI 幫你「重構」或「加註解」，讓專案保持清爽。
Q4: AI 會幫我寫測試嗎？
A: 會，而且它超會！你可以直接把你的程式碼丟給它，然後說：「幫我用 `flutter_test` 寫測試，確認數字一開始是 0，按了會變 1，再按重置會變回 0。」它寫的測試碼通常又快又好。