官方指南！Cursor “日產(chǎn)十億代碼”：大型項(xiàng)目 + Web 開發(fā) (MCP) 實(shí)戰(zhàn)！
Cursor 老大扔了個話：AI 每天生成 10 億行被接受的代碼，人類世界一天也就寫那么幾十億行。
還給了目前最受歡迎的模型和使用頻率增長最快的模型
社區(qū)：“?！薄ⅰ败浖袠I(yè)的改變”、“對新手簡直福音”。
有人已經(jīng)開始暢想未來：程序員角色會更像架構(gòu)師+QA，整個市場都被激活了。
瓶頸要從寫代碼變成審代碼了 (Amdahl 定律 yyds)。求 Cursor 加個編輯歷史上下文，讓 AI 更好地審 PR。
說到怎么用好 Cursor，特別是應(yīng)付復(fù)雜的代碼。
Cursor 官方專門發(fā)了篇博客，講怎么“馴服”大型項(xiàng)目。以及一篇Web開發(fā)的博客。如果你經(jīng)常看本公眾號文章，可能對下面提到的一些技巧已經(jīng)比較熟悉了。甚至用到的MCP都不謀而合。
那么我們先來講講。官方說的Cursor + 大項(xiàng)目實(shí)踐方式：
搞大型項(xiàng)目，遇到的坑跟小項(xiàng)目完全不是一個量級。Cursor 這幫人，一邊死磕自家代碼庫，一邊跟那些管著 “巨型項(xiàng)目” 的客戶取經(jīng)，總結(jié)出了一套馴服“巨型項(xiàng)目”的姿勢。
這篇博客，就是教你用這些姿勢降妖伏魔：??https://docs.cursor.com/guides/advanced/large-codebases??
?理解代碼庫
?明確目標(biāo) / 搞清改動
?制定計劃
?執(zhí)行變更
第一步：快速理解代碼庫 (用 Chat 模式)：
面對一個陌生的“巨型”代碼庫，最怕的就是抓瞎。與其 ??grep??? 來 ??grep?? 去不如直接用 Cursor 的 Chat 模式開聊。
( grep 是一個命令行工具，在 Unix/Linux 系統(tǒng)中非常常用，它的功能就是：在文件中搜索匹配某個字符串的行）
? 問問題
? 要細(xì)節(jié)
? 甚至要示例代碼
分分鐘搞懂這代碼是干啥的、怎么干的。
想讓 Cursor 更懂你的代碼結(jié)構(gòu)？記得在設(shè)置里開啟 "Include Project Structure"，能大幅提升性能。
第二步：給 Cursor “立規(guī)矩” (寫規(guī)則)：
想想你剛帶新人進(jìn)團(tuán)隊(duì)時，會教他啥？你對這個問題的回答可能是提高Cursor 理解的寶貴信息。
每個項(xiàng)目、每個組織，都有一些文檔里沒寫明白的“潛規(guī)則”。把這些“潛規(guī)則”用規(guī)則 (Rules) 記下來，是讓 Cursor 真正理解你的代碼庫的最好方法。
比如，寫個規(guī)則告訴 Cursor 怎么實(shí)現(xiàn)新功能/服務(wù)：
---
描述：添加一個新的 VSCode 前端服務(wù)
---
1. 接口定義：
- 使用 `createDecorator` 定義一個新的服務(wù)接口，并確保包含 `_serviceBrand` 以避免錯誤。
2. 服務(wù)實(shí)現(xiàn)：
- 在一個新的 TypeScript 文件中實(shí)現(xiàn)該服務(wù)，擴(kuò)展 `Disposable`，并使用 `registerSingleton` 將其注冊為單例。
3. 服務(wù)貢獻(xiàn)：
- 創(chuàng)建一個貢獻(xiàn)文件來導(dǎo)入和加載該服務(wù)，并在主入口點(diǎn)注冊它。
4. 上下文集成：
- 更新上下文以包含新服務(wù)，從而允許在整個應(yīng)用程序中訪問。
---?? 整體目的
讓你的功能模塊以服務(wù)的形式注入 VSCode 前端架構(gòu)中，其他模塊可通過依賴注入方式訪問該服務(wù)。
這種模式高度解耦、可測試、可復(fù)用，是 VSCode 插件和核心模塊開發(fā)的重要設(shè)計方式。
還可以根據(jù)文件類型（用 Glob 表達(dá)式）自動關(guān)聯(lián)規(guī)則，比如定義代碼格式：
---
globs: *.ts
---
- 使用 bun 作為包管理器。相關(guān)腳本請參考 [package.json](mdc:backend/reddit-eval-tool/package.json)
- 文件命名統(tǒng)一使用 kebab-case（短橫線連接的小寫命名）
- 函數(shù)名與變量名統(tǒng)一使用 camelCase（駝峰命名法）
- 所有硬編碼的常量使用 UPPERCASE_SNAKE_CASE（全大寫+下劃線分隔）
- 優(yōu)先使用 `function foo()` 的函數(shù)定義方式，而非 `const foo = () =>`
- 使用 `Array<T>` 的形式，而不是 `T[]`
- 推薦使用具名導(dǎo)出（named exports），例如 `export const variable ...` 或 `export function ...`，避免使用默認(rèn)導(dǎo)出（default export）這些規(guī)則主要用于保證團(tuán)隊(duì)代碼風(fēng)格統(tǒng)一、可維護(hù)性更高。
第三步：手搓 Plan (但可以找 AI 搭把手):
面對大改動，提前花點(diǎn)時間，仔細(xì)規(guī)劃，能大幅提升 Cursor 的輸出質(zhì)量。如果你發(fā)現(xiàn) Prompt 調(diào)來調(diào)去還是不行，不如退一步，從頭開始，像給同事寫 PRD 那樣，把計劃擼清楚。畢竟，知道 要改什么 才是最難的，這事兒還得人來。
但 AI 也能幫忙規(guī)劃：打開 Cursor 的 Ask 模式，把能找到的資料 (項(xiàng)目管理系統(tǒng)、內(nèi)部文檔、隨便寫的想法) 都扔進(jìn)去。想想你要用到的代碼、依賴。這可以是你想集成的代碼文件，也可以是整個文件夾。
制定一個關(guān)于如何創(chuàng)建新功能的計劃（類似于 @existingfeature.ts）
如有任何問題，請向我提問（最多 3 個）
請務(wù)必搜索代碼庫
@Past Chats（我之前的探索提示）
以下是來自 [項(xiàng)目管理工具] 的更多背景信息：
[粘貼的工單描述]讓 AI 幫你理解意圖、綜合信息、生成計劃，有問題還會主動提問。用 Claude-3.7-Sonnet, Gemini-2.5-Pro, O3這種“思考型模型” 效果更好。
有了 AI 輔助，就能迭代完善 Plan，然后再開始執(zhí)行。
第四步：挑對趁手工具 (這很重要):
高效使用 Cursor 的關(guān)鍵，是根據(jù)任務(wù)選對工具。想清楚 你要做什么，然后選一個最順手的。
? Tab： 適合需要完全掌控的快速修改。您希望坐在駕駛座上
? Cmd K： 在需要對代碼的特定部分進(jìn)行重點(diǎn)更改時大放異彩.
? Chat： 適合需要 Cursor 來了解更廣泛上下文的較大更改.
用 Chat 模式時 (雖然慢點(diǎn)，但威力巨大)，記得給它提供好上下文。用 ??@files??? 指向你要模仿的代碼，用 ??@folder?? 讓它更好理解你的項(xiàng)目結(jié)構(gòu)。別怕把大任務(wù)拆成小塊——開新 Chat 能讓思路更清晰，效率更高。
要點(diǎn)：
- ?縮小更改的范圍，不要嘗試一次執(zhí)行太多作
- ?盡可能包含相關(guān)上下文
- ?Tab, Cmd K, Chat，來做他們最擅長的事情
- ?經(jīng)常開新 Chat
- ?Ask 模式做計劃，Agent 模式來干活
Web 開發(fā)神器 Cursor, 這樣配置才叫 Pro。
搞 Web 開發(fā)講究的就是快。Cursor 這篇教你怎么把它跟 Figma、瀏覽器這些家伙打通，形成絲滑閉環(huán)，讓你迭代飛起。
不過，現(xiàn)在 AI 工具這么強(qiáng)大，我覺得如果不是特別大型的項(xiàng)目，也許可以跳過設(shè)計階段，直接用 AI 來做。這樣能省去不少設(shè)計時間，保持更高的效率。畢竟，用 AI 工具，很多設(shè)計環(huán)節(jié)都不需要自己一步步來了。
手動在設(shè)計工具里敲界面不高效，特別是獨(dú)立開發(fā)者，可能更傾向于直接用 AI 生成吧。
所以我以前也沒怎么介紹 Figma 這類工具。之前試用了一下 MCP，效果也就so，so。不如把時間花在怎么琢磨AI生成上。
上手先用 Chat 搭個框架。代碼骨架有了，就切到 Cmd+K 和 Tab 精雕細(xì)琢，保持心流?？纯催@波騷操作：用 Cursor 串聯(lián) Linear、Figma、瀏覽器，直接搞定貪吃蛇游戲 (雖然真項(xiàng)目更復(fù)雜，但思路就是這樣)。
打通項(xiàng)目管理：先拿 Linear 開刀 (用 MCP)。
- 咋整？把官方提供的代碼加到 mcp.json，設(shè)置里啟用，瀏覽器跳出來授權(quán)一下。 (MCP 現(xiàn)在可能得多試幾次，不行就去設(shè)置里 Reload 服務(wù))。
{
"mcpServers": {
"linear": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.linear.app/sse"
]
}
}
}- 成了沒？聊天里問一句 list all issues related to this project，能看到列表就對了。
設(shè)計稿搞進(jìn)來：Figma 也能用 MCP 連 (社區(qū)方案)。
- 開搞：去 framelink.ai 那邊看文檔，拿到你的 Figma API Key，然后把配置加進(jìn) mcp.json。
- 咋用？需要提供具體的 Figma 圖層或畫框鏈接，AI 才能訪問。
代碼風(fēng)格統(tǒng)一：別讓 AI 瞎寫。
- 復(fù)用是王道：你肯定有現(xiàn)成的組件庫、設(shè)計規(guī)范。多用 @ 引用它們，提示 AI。React/JSX 這類聲明式代碼，AI 理解起來效果尤其好。
---
描述：實(shí)現(xiàn)設(shè)計和構(gòu)建UI
---
從`/src/components/ UI `復(fù)用現(xiàn)有的UI組件。這些是我們可以構(gòu)建的基本元素
如果你找不到任何現(xiàn)有的解決該問題的組件，可以通過編排UI組件來創(chuàng)建新組件
詢問人們當(dāng)缺少組件和設(shè)計時他們想如何進(jìn)行- 上 Rules (.mdc)：把組件使用規(guī)范寫成規(guī)則喂給 AI。比如搞個 ui-components.mdc 文件，規(guī)定優(yōu)先用 /src/components/ui 下的現(xiàn)有組件，找不到合適的組件時要問你怎么辦。組件庫大了，規(guī)則就拆細(xì)點(diǎn)。
連接瀏覽器：看 Console、Network 請求。
官方也安利了此前我介紹的這個瀏覽器mcp：
??比Playwright更高效！BrowserTools MCP 讓Cursor直接控制當(dāng)前瀏覽器，AI調(diào)試+SEO審計效率狂飆！??
用 Browser Tools MCP 服務(wù)器 (去 browsertools.agentdesk.ai 看怎么裝)，把瀏覽器端的日志、網(wǎng)絡(luò)活動也拉到 Cursor 里。改完代碼直接看反饋，驗(yàn)證 bug 超方便。(官方說以后會內(nèi)置得更簡單)
干貨總結(jié)：
- Web 開發(fā)要快，打通工具鏈 (Cursor + Figma + Linear + 瀏覽器) 是關(guān)鍵。實(shí)現(xiàn)緊密的反饋循環(huán)。
- MCP 是神器，減少來回切換，干活更專注。
- 多復(fù)用、上規(guī)范 (Rules)，有助于AI 生成的代碼靠譜、統(tǒng)一。
- 任務(wù)拆細(xì)，指令給清，AI 才不會跑偏。
- 如果 AI 生成的結(jié)果不太理想，可以試試調(diào)整這兩點(diǎn)：
指令（Instructions）： 明確規(guī)則和要求，提供更清晰的提示詞，并讓 AI 訪問更多上下文信息（比如通過 MCP 服務(wù)器）。
系統(tǒng)（Systems）： 采用更清晰的模式、抽象和框架，這樣 AI 能更容易理解你的意圖，更好地提供幫助，并且更自主地工作。 - 運(yùn)行時信息 (Console, Network) 也能喂給 AI 當(dāng)參考。
- 別啥都想自動化，該手動精調(diào) (Tab, Cmd+K) 就手動。
- 把 Cursor 當(dāng)頂級副駕，最終方向盤還得自己握。
本文轉(zhuǎn)載自??AI進(jìn)修生??，作者：Aitrainee
