歡迎來到 Day 2！昨天我們確立了專案藍圖 VibeFinance，今天我們要來打造屬於工程師的「鋼鐵人裝甲」——建置 AI 驅動的 IDE 環境。

傳統開發者花大量時間在記憶語法、翻閱 API 文件與手寫樣板程式碼（Boilerplate）。但在 Vibe Coding 模式下，IDE 不再只是文字編輯器，而是你的 AI 協同駕駛艙。選對工具並設定好系統指令，能讓開發速度提升 3 到 5 倍。

開發環境軍備競賽：工具組合與選型策略

目前市面上的主流 AI 開發工具有很多，我們該如何挑選？

我們的選擇：本專案將以 Cursor 作為主要 IDE，搭配 Claude 3.5 Sonnet / Claude 3.7 Thinking 模型，作為我們的核心開發引擎。

🤖 Human vs. AI 實戰示範：設定檔與套件地圖

有了 IDE，如果直接讓 AI「裸奔」，它往往會生成出不符合現代前端規範的程式碼（例如用舊版 Next.js Page Router 語法或寫出肥大的 inline style）。

1. AI Prompt

「我準備用 Cursor 開發一個 Next.js (App Router) + TypeScript + Tailwind CSS 的專案。請幫我推薦 5 個必裝的 VS Code / Cursor 擴充套件，並給出一個基礎的 IDE 設定，讓程式碼在儲存時自動格式化與排版。」

2. AI 產出的結果（節錄）

AI 提供了以下建議與設定檔：

• 推薦套件：Prettier, ESLint, Tailwind CSS IntelliSense, Auto Rename Tag, GitLens。
• settings.json 配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

3. 工程師的修正與判斷（Debug & Judgment Process）

• 工程師思考：AI 給的設定太過通用。在 Next.js 14+ / 15 的環境中，Prettier 對於 Tailwind CSS 的類別排序（Class Sorting）沒有預設處理，這會導致 AI 生成的 UI class 雜亂無章。此外，沒有針對 Cursor 的 indexing 設定做優化，會浪費大量 token 掃描 node_modules 與 .next 資料夾。

• 給 AI 的反覆引導與修正：

  「請進行以下修正：

  1. 在設定檔中加入 Prettier 的 Tailwind CSS 排序插件 (prettier-plugin-tailwindcss) 配置。
  2. 幫我撰寫一個 .cursorignore 檔案，確保 Cursor 在索引（Indexing）時排除 node_modules、.next、dist 與 coverage，以提升程式碼檢索精準度並節省效能。」

• 最終獲得的 .cursorignore：

  node_modules/
  .next/
  out/
  build/
  dist/
  coverage/
  *.log
  .env*
  

今日結語

把 IDE、擴充套件與 .cursorignore 建立好，就等於幫 AI 畫好了安全的邊界，避免它讀取無關的巨大檔案，進而產生幻覺（Hallucination）。

明天，我們將正式進入產品需求階段，看看如何用 AI 將模糊的產品構想，精準拆解成可執行的 User Stories 與需求規格！