他們寧愿花上幾個小時和代碼中的 bug 死磕，也不愿花20分鐘搭建一個高效的自動化流程。

這簡直不可理喻！

自從我開始用 Cursor —— 一款類似“編程高手朋友”的 AI 驅動的 IDE 后，我總結出一套五步技巧，快速上手、輕松開發。

接下來，我用一個具體項目——FIGxAI（類似 MidJourney 的平臺，基于 OpenAI 的圖像模型構建，目前因資金問題暫未上線）作為例子，詳細講解一下我的經驗。

為什么要花時間用 Cursor？

有一次，我因為從零開始寫一個 React 組件，結果整整浪費了一整個周六的時間，只因為少寫了一個 TypeScript 類型定義。從此，我再也不這么做了。但我發現很多開發者還是在重復這種錯誤，浪費大量時間和精力，而 Cursor 明明可以大幅提高效率。適當的前期設置，可以避免無休止的反復調整。這套方法，讓我更輕松地專注于快速交付代碼。

步驟一：別從零開始寫代碼

從頭開始搭建一個項目，就像烤蛋糕不看菜譜，肯定會出問題。 你應該選擇一個成熟的模板，包含以下工具：

• ESLint 防止低級錯誤。
• Shadcn UI 快速搭建美觀組件。
• Zod 表單校驗不再出錯。
• TailwindCSS 拒絕手寫 CSS。
• TypeScript 提升代碼穩定性，幫助 Cursor 更準確地給出建議。

在 FIGxAI 項目里，我用的是 Next.js 15，搭配 Tailwind、Shadcn UI、React Hook Form、Zod 和 Lucide 圖標。 示例如下：

package.json

{
  "name": "figxai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.0.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwindcss": "^3.4.1",
    "@hookform/resolvers": "^3.3.2",
    "zod": "^3.22.4",
    "lucide-react": "^0.263.0",
    "@radix-ui/react-slot": "^1.0.2",
    "swr": "^2.2.4"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "15.0.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "typescript": "^5"
  }
}

選擇 Next.js 模板或 GitHub 上的成熟項目模版，Cursor 特別適合 TypeScript 和 ESLint，它會自動避免一些基礎問題。別再掉進“空白項目”的陷阱。

步驟二：明確告訴 Cursor 你的需求

Cursor 很聰明，但畢竟不是你媽，它無法直接猜出你到底要做什么。我曾經沒寫清楚需求，結果寫出一個漂亮但完全沒功能的按鈕。因此，花15分鐘詳細列出你要做的內容，包括技術選型，很有必要。

以 FIGxAI 為例，我希望它擁有 MidJourney 的體驗，采用 OpenAI 的 gpt-image-1 模型，于是我列出清晰的功能需求：

FIGxAI 功能需求：

• 使用 OpenAI 的 gpt-image-1 模型。
• 布局包含底部聊天框和頂部滾動圖片時間軸。
• 響應式網格布局：手機1列、平板2列、桌面4列。
• 圖片自動加載，帶分頁和篩選功能（日期、狀態、排序）。
• 圖片支持下載及查看詳情彈窗。
• 提供完善的 Prompt 設置（如圖片質量、比例、壓縮率等）。
• 瀏覽器本地存儲圖片和 API 密鑰。
• 技術棧為 Next.js 15、Tailwind、Shadcn UI、React Hook Form、Zod、SWR 和 Lucide 圖標。
• 圖片懶加載、小體積、移動端友好。

清晰的需求列表，能讓 Cursor 更準確地執行任務，避免后續反復修改。

步驟三：使用任務管理工具

過去我用便簽管理任務，結果慘不忍睹。有次甚至忘了給客戶做設置頁面。現在我用 TaskMaster AI，它和 Cursor CLI 配合非常棒。具體做法：

• 為每個功能創建任務（如：“實現響應式圖片網格”）。
• 設置優先級并關聯具體需求。
• 通過 CLI 將任務導入 Cursor。

這樣，Cursor 始終專注一個目標，效率倍增。

步驟四：教 Cursor 你的代碼風格

Cursor 能自動識別你的代碼習慣，并生成規則，保證項目一致性。我過去的項目中，有的組件用 Tailwind，有的組件用內聯樣式，結果混亂不堪。

具體做法：

• 在 Cursor 聊天里輸入 /Generate Cursor Rules。
• 標記你的組件文件，比如 @Timeline.tsx，讓 Cursor 根據現有代碼自動生成規則。

例如 FIGxAI 項目中 Cursor 總結出：

• 使用 TypeScript 函數組件。
• Tailwind 統一樣式。
• Shadcn UI 統一按鈕和模態框。
• Lucide 圖標。

步驟五：保持干凈結構，不斷優化

代碼庫會不斷變化，規則也要隨之更新。此外，良好的文件夾結構也很關鍵。

FIGxAI 項目的結構：

figxai/
├── components/  # 組件
├── lib/         # 輔助函數
├── schemas/     # Zod校驗
├── app/         # Next.js 路由
├── public/      # 靜態資源
├── styles/      # 樣式

設置規則：

• 超過500行代碼的文件必須拆分。
• 工具函數放進 lib/，校驗放進 schemas/。

告訴 Cursor 持續建議新規則，自動保持項目整潔。

額外的小技巧：

• 文件過長必拆分，否則 Cursor 效率降低。
• 出錯時創建詳細任務描述，而非簡單一句“修復問題”。
• 新任務用新對話，防止混淆。

以 FIGxAI 的 Timeline.tsx 為例，充分利用這些規則，輕松實現無限滾動的響應式網格布局。

通過這套五步方法：模板搭建、需求明確、任務管理、風格統一和代碼結構清晰，Cursor 成為你的編程利器。只需花20分鐘設置，就能徹底改變你的開發體驗，讓你再也不愿回到過去低效的開發方式。