大多數(shù)開發(fā)者寧愿浪費(fèi)數(shù)小時(shí)，也不肯花20分鐘學(xué)會(huì)用 Cursor
他們寧愿花上幾個(gè)小時(shí)和代碼中的 bug 死磕，也不愿花20分鐘搭建一個(gè)高效的自動(dòng)化流程。
這簡直不可理喻！
自從我開始用 Cursor —— 一款類似“編程高手朋友”的 AI 驅(qū)動(dòng)的 IDE 后，我總結(jié)出一套五步技巧，快速上手、輕松開發(fā)。
接下來，我用一個(gè)具體項(xiàng)目——FIGxAI（類似 MidJourney 的平臺(tái)，基于 OpenAI 的圖像模型構(gòu)建，目前因資金問題暫未上線）作為例子，詳細(xì)講解一下我的經(jīng)驗(yàn)。
為什么要花時(shí)間用 Cursor？
有一次，我因?yàn)閺牧汩_始寫一個(gè) React 組件，結(jié)果整整浪費(fèi)了一整個(gè)周六的時(shí)間，只因?yàn)樯賹懥艘粋€(gè) TypeScript 類型定義。從此，我再也不這么做了。但我發(fā)現(xiàn)很多開發(fā)者還是在重復(fù)這種錯(cuò)誤，浪費(fèi)大量時(shí)間和精力，而 Cursor 明明可以大幅提高效率。適當(dāng)?shù)那捌谠O(shè)置，可以避免無休止的反復(fù)調(diào)整。這套方法，讓我更輕松地專注于快速交付代碼。
步驟一：別從零開始寫代碼
從頭開始搭建一個(gè)項(xiàng)目，就像烤蛋糕不看菜譜，肯定會(huì)出問題。 你應(yīng)該選擇一個(gè)成熟的模板，包含以下工具：
- ESLint 防止低級(jí)錯(cuò)誤。
- Shadcn UI 快速搭建美觀組件。
- Zod 表單校驗(yàn)不再出錯(cuò)。
- TailwindCSS 拒絕手寫 CSS。
- TypeScript 提升代碼穩(wěn)定性，幫助 Cursor 更準(zhǔn)確地給出建議。
在 FIGxAI 項(xiàng)目里，我用的是 Next.js 15，搭配 Tailwind、Shadcn UI、React Hook Form、Zod 和 Lucide 圖標(biāo)。 示例如下：
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 上的成熟項(xiàng)目模版，Cursor 特別適合 TypeScript 和 ESLint，它會(huì)自動(dòng)避免一些基礎(chǔ)問題。別再掉進(jìn)“空白項(xiàng)目”的陷阱。
步驟二：明確告訴 Cursor 你的需求
Cursor 很聰明，但畢竟不是你媽，它無法直接猜出你到底要做什么。我曾經(jīng)沒寫清楚需求，結(jié)果寫出一個(gè)漂亮但完全沒功能的按鈕。因此，花15分鐘詳細(xì)列出你要做的內(nèi)容，包括技術(shù)選型，很有必要。
以 FIGxAI 為例，我希望它擁有 MidJourney 的體驗(yàn)，采用 OpenAI 的 gpt-image-1 模型，于是我列出清晰的功能需求：
FIGxAI 功能需求：
- 使用 OpenAI 的 gpt-image-1 模型。
- 布局包含底部聊天框和頂部滾動(dòng)圖片時(shí)間軸。
- 響應(yīng)式網(wǎng)格布局：手機(jī)1列、平板2列、桌面4列。
- 圖片自動(dòng)加載，帶分頁和篩選功能（日期、狀態(tài)、排序）。
- 圖片支持下載及查看詳情彈窗。
- 提供完善的 Prompt 設(shè)置（如圖片質(zhì)量、比例、壓縮率等）。
- 瀏覽器本地存儲(chǔ)圖片和 API 密鑰。
- 技術(shù)棧為 Next.js 15、Tailwind、Shadcn UI、React Hook Form、Zod、SWR 和 Lucide 圖標(biāo)。
- 圖片懶加載、小體積、移動(dòng)端友好。
清晰的需求列表，能讓 Cursor 更準(zhǔn)確地執(zhí)行任務(wù)，避免后續(xù)反復(fù)修改。
步驟三：使用任務(wù)管理工具
過去我用便簽管理任務(wù)，結(jié)果慘不忍睹。有次甚至忘了給客戶做設(shè)置頁面。現(xiàn)在我用 TaskMaster AI，它和 Cursor CLI 配合非常棒。具體做法：
- 為每個(gè)功能創(chuàng)建任務(wù)（如：“實(shí)現(xiàn)響應(yīng)式圖片網(wǎng)格”）。
- 設(shè)置優(yōu)先級(jí)并關(guān)聯(lián)具體需求。
- 通過 CLI 將任務(wù)導(dǎo)入 Cursor。
這樣，Cursor 始終專注一個(gè)目標(biāo)，效率倍增。
步驟四：教 Cursor 你的代碼風(fēng)格
Cursor 能自動(dòng)識(shí)別你的代碼習(xí)慣，并生成規(guī)則，保證項(xiàng)目一致性。我過去的項(xiàng)目中，有的組件用 Tailwind，有的組件用內(nèi)聯(lián)樣式，結(jié)果混亂不堪。
具體做法：
- 在 Cursor 聊天里輸入
/Generate Cursor Rules。 - 標(biāo)記你的組件文件，比如
@Timeline.tsx，讓 Cursor 根據(jù)現(xiàn)有代碼自動(dòng)生成規(guī)則。
例如 FIGxAI 項(xiàng)目中 Cursor 總結(jié)出：
- 使用 TypeScript 函數(shù)組件。
- Tailwind 統(tǒng)一樣式。
- Shadcn UI 統(tǒng)一按鈕和模態(tài)框。
- Lucide 圖標(biāo)。
步驟五：保持干凈結(jié)構(gòu)，不斷優(yōu)化
代碼庫會(huì)不斷變化，規(guī)則也要隨之更新。此外，良好的文件夾結(jié)構(gòu)也很關(guān)鍵。
FIGxAI 項(xiàng)目的結(jié)構(gòu)：
figxai/
├── components/ # 組件
├── lib/ # 輔助函數(shù)
├── schemas/ # Zod校驗(yàn)
├── app/ # Next.js 路由
├── public/ # 靜態(tài)資源
├── styles/ # 樣式設(shè)置規(guī)則：
- 超過500行代碼的文件必須拆分。
- 工具函數(shù)放進(jìn)
lib/，校驗(yàn)放進(jìn)schemas/。
告訴 Cursor 持續(xù)建議新規(guī)則，自動(dòng)保持項(xiàng)目整潔。
額外的小技巧：
- 文件過長必拆分，否則 Cursor 效率降低。
- 出錯(cuò)時(shí)創(chuàng)建詳細(xì)任務(wù)描述，而非簡單一句“修復(fù)問題”。
- 新任務(wù)用新對話，防止混淆。
以 FIGxAI 的 Timeline.tsx 為例，充分利用這些規(guī)則，輕松實(shí)現(xiàn)無限滾動(dòng)的響應(yīng)式網(wǎng)格布局。
通過這套五步方法：模板搭建、需求明確、任務(wù)管理、風(fēng)格統(tǒng)一和代碼結(jié)構(gòu)清晰，Cursor 成為你的編程利器。只需花20分鐘設(shè)置，就能徹底改變你的開發(fā)體驗(yàn)，讓你再也不愿回到過去低效的開發(fā)方式。
