AI Coding 工具使用技巧,以 Cursor 為例
隨著AI技術(shù)的不斷發(fā)展,AI編程工具如Cursor正逐漸成為開發(fā)者的新寵。這些工具不僅能夠提高編程效率,還能幫助開發(fā)者解決復(fù)雜的開發(fā)問題。本文作者結(jié)合自己的實(shí)際使用經(jīng)驗(yàn),分享了如何高效使用Cursor進(jìn)行項(xiàng)目開發(fā)的技巧和思路。
這篇內(nèi)容主要分享我在用 Cursor 過程中的一些技巧,內(nèi)容包括怎么確認(rèn)需求、拆分任務(wù)、執(zhí)行落地,以及寫代碼和調(diào)試時(shí)的思路。
此外還會(huì)聊聊項(xiàng)目啟動(dòng)前的準(zhǔn)備、IDE 的配置,甚至是 App 上架的一些小經(jīng)驗(yàn),希望能給同在開發(fā)路上的你參考一下。
1. 技巧 & 思路
需求確認(rèn)
- 新建項(xiàng)目 idea.md 文件,而非 notepad(支持 MarsCode 等插件引用),通過與 chat 對話,去確認(rèn)、完善需求。
- 后續(xù)可以完善,并作為模板使用。
注意 ??:后續(xù)封裝代碼時(shí)要考慮刪除(畢竟需求都做完了,需要時(shí)再新建)。
需求分拆
- 基于需求分拆為可實(shí)現(xiàn)的小步驟,并新建 reference.md 文件。
- 目的是確保需求清晰,AI 能夠理解你的需求。Cursor 還沒有強(qiáng)到分拆、執(zhí)行這么多需求(上下文長度),幾句話讓 AI 實(shí)現(xiàn)和你想象中一模一樣的東西,所以這里核心要確認(rèn) AI 理解的需求是否為自己想要的。
步驟執(zhí)行
- 讓 Cursor 去編譯項(xiàng)目,并解決問題(減少從 Xcode 復(fù)制錯(cuò)誤代碼,再給 Cursor 修復(fù)的時(shí)間)。
- 用 html、css、js 的方式生成靜態(tài)頁面。修改、完善需求。
寫代碼(要有耐心):寫代碼 – 改 bug – 調(diào)試 – 驗(yàn)證。
其他 Rules
- 如果涉及有需要密碼驗(yàn)證的環(huán)節(jié),請及時(shí)打斷并詳細(xì)說明,我應(yīng)該執(zhí)行什么步驟。
- 如安裝依賴時(shí),不斷報(bào)錯(cuò)。
2. 持續(xù)學(xué)習(xí)如何更好與 AI 協(xié)作
2.1 新建文件 .cursorrules .cursorignore
請你幫我檢索 codebase,并生成 .cursorrules 以及 .cursorignore 文件
請你在執(zhí)行操作前,先復(fù)述一遍我的需求再進(jìn)行操作,讓我先確認(rèn)你清楚我的需求
2.2 需求確認(rèn)
我想要這個(gè) App 是一個(gè)簡單的、可本地化運(yùn)行的 App,請你作為產(chǎn)品專家,幫我完成需求的梳理,并將內(nèi)容填充到文件 `idea.md` 中。
2.3 需求分拆
現(xiàn)在需要輸出高保真、可交互的原型圖,并確保這些原型圖可以直接用于開發(fā)。
1. 用戶體驗(yàn)分析:請先分析這個(gè) App 的主要功能與用戶需求,確定核心交互邏輯。
2. 產(chǎn)品界面規(guī)劃:作為產(chǎn)品經(jīng)理,定義關(guān)鍵界面,確保信息架構(gòu)合理。
3. 高保真 UI 設(shè)計(jì):作為 UI 設(shè)計(jì)師,設(shè)計(jì)貼近真實(shí) iOS 設(shè)計(jì)規(guī)范的頁面,使用現(xiàn)代化的 UI 元素,使其具有良好的視覺體驗(yàn)。
4. HTML 原型實(shí)現(xiàn):使用 HTML + Tailwind CSS(或 Bootsrap)生成所有原型界面,并使用 FontAwesome(或其他開源 UI 組件)讓界面更加精明,解決真實(shí)的 App 設(shè)計(jì),拆分代碼文件,保持結(jié)構(gòu)清晰。
5. 每個(gè)界面應(yīng)作為獨(dú)立的 HTML 文件存放,比如 home.html, Profile.html, settings.html 等。
– index.html 作為主入口,不直接寫入所有頁面的 html 代碼,而是使用 iframe 的方式嵌入這些 HTML 片段,并將所有頁面直接平鋪展示在 index.html 頁面中,而不是跳轉(zhuǎn)鏈接。
– 真實(shí)感增強(qiáng),界面尺寸應(yīng)模擬 iPhone 16 Pro Max,并讓界面圓角化,使其更像真實(shí)的手機(jī)頁面。
– 使用真實(shí)的 UI 圖片,而非占位圖片,可以用 Unsplash、Pexels、Apple 官方 UI 資源中選擇。
– 添加頂部狀態(tài)欄(模擬 iOS 狀態(tài)欄),并包含 App 導(dǎo)航欄(類似 iOS 底部 Tab Bar)。 請按照
以上要求生成完整的 HTML 代碼,并確保其可用于實(shí)際開發(fā)。
此時(shí),可以隨時(shí)截圖 index.html 頁面的原型圖使用。
2.4 步驟執(zhí)行
請你參考文件 `prd.md` 中的需求和原型圖,幫我完成這個(gè) iOS App 的開發(fā)。
當(dāng)前位置在這個(gè) iOS 開發(fā)項(xiàng)目的根目錄中,已有文件不需要你重復(fù)創(chuàng)建,直接編輯就好,但你可以創(chuàng)建本地沒有且你需要的文件。
2.5 Bug 修復(fù)
新建文件 bug.md ,將 Xcode 的 bug 復(fù)制進(jìn)去, 讓 AI 處理。
2.6 使用技巧
清晰有邏輯的表達(dá)需求、讓 AI 復(fù)述需求、發(fā)送示例參考、發(fā)送自己的解決思路給 AI(可選)
1)Toglle AI Pane 技巧
檢測:Save all 支持先保存并測試,確認(rèn)后再選擇 Reject all 或 Accept all
回滾: Checkpoint created。 restore ,點(diǎn)擊 restore
預(yù)防:
- 讓 AI 復(fù)述需求指令。請你先復(fù)述一遍我的需求再進(jìn)行答復(fù),讓我確認(rèn)你清楚我的需求|延伸:可以試試將其更新到 .cursorrules 文件中。
- 讓這個(gè)需求指令足夠小,足夠單一化,不要讓 AI 猜你的想法。要有足夠的針對性,并且要明確范圍,最大程度縮小輻射范圍。在修改內(nèi)容時(shí),要盡可能 @相關(guān)文件,并且告訴 AI 要在什么范圍內(nèi)修改。
2)需求拆解:多需求,使用有序/無序列表的方式描述。
把需求拆解為多個(gè)功能 feature
3)把 AI 當(dāng)成小孩子:盡可能邏輯清晰,描述問題要加以引導(dǎo)。
必要時(shí),發(fā)送示例參考、發(fā)送自己的解決思路給 AI(可選)。
4)新項(xiàng)目的準(zhǔn)備 步驟
讓 composer 幫你檢索 codebase,然后生成 .cursorrules 文件??墒謩?dòng)添加想要索引忽略掉的文件。
打開「設(shè)置-features-Codebase indexing」,點(diǎn)擊「Resvnc Index」重新索引。
將文檔錄入 Docs 中備用,如「需求文檔、接口文檔、開發(fā)相關(guān)的技術(shù)文檔」等。
在項(xiàng)目根目錄中,新建.cursorrules 文件,作為 Prompt 前置詞。
- 在 chat 中,@相關(guān)文檔(項(xiàng)目文檔、需求文檔)讓 AI 檢索整個(gè)項(xiàng)目,并生成一個(gè) .cursorrules 文件,并適當(dāng)修改。
- 比如「請你先復(fù)述一遍我的需求再進(jìn)行答復(fù),讓我確認(rèn)你清楚我的需求」。
如果是版本差異間的 bug,可以 @git ,然后讓 chat 檢索差異,精準(zhǔn)獲得 bug 產(chǎn)生原因以及解決思路。
- 簡單 bug 直接讓 composer 修復(fù)。
- 復(fù)雜 bug 則需要新建 notepads 文件,詳細(xì)闡述 bug 產(chǎn)生可能性及解決方案。然后在 composer 中 @notepad 讓 AI 修復(fù)。
- 項(xiàng)目結(jié)束后,可以將 notepad 文件封存,下次就可以讓 AI 快速理解這個(gè)項(xiàng)目。一定要及時(shí)歸納,因?yàn)?notepad 是存放在 Cursor 的緩存中,換設(shè)備后就丟失了。
2.7 常用文件創(chuàng)建
readme.md 代碼簡介及代碼修改說明。
notepads 與 composer 的互通橋梁。
- feature.md 功能說明,過程需不斷補(bǔ)充。
- error.md 錯(cuò)誤說明,實(shí)時(shí)更新。先與 chat 溝通解決方案,并更新解決方案在當(dāng)前文件,讓 composer 去解決。
.cursorignore 將包含常見的需要忽略的文件和目錄。
.cursorrules 只針對這個(gè)項(xiàng)目的規(guī)則,需要 AI 工作時(shí)參考的 Rules。包括但不限于:前置、項(xiàng)目簡介、技術(shù)架構(gòu)、目錄結(jié)構(gòu)、代碼規(guī)范、命名規(guī)范、組件規(guī)范、樣式規(guī)范、國際化規(guī)范
3. IDE 使用技巧
Xcode 新建項(xiàng)目完畢后,要在 Cursor 中「暫存更改」,方便回溯到剛創(chuàng)建時(shí)的文件及文件夾結(jié)構(gòu)。
在源代碼管理工具中,后面的 “U” 通常表示文件的狀態(tài)。具體來說:
U:表示文件是“未跟蹤”(Untracked)。這意味著該文件存在于工作目錄中,但尚未被 Git 納入版本控制。
文件狀態(tài)的常見標(biāo)識(shí):
- U:未跟蹤文件
- M:已修改文件(Modified)
- A:已添加文件(Added)
- D:已刪除文件(Deleted)
- R:已重命名文件(Renamed)
4. App Store 上架技巧
4.1 Xcode
1)刪掉 iPad 版本。
2)最低 iOS 運(yùn)行版本為 iOS 16。注意,此時(shí)要再次編譯下,確認(rèn)是否有問題。
3)Display Name 即為 App Store 顯示名稱。
4)Version 為 1.0.0
5)創(chuàng)建圖標(biāo)。
- 可以讓 Cursor 創(chuàng)建一個(gè) 1024*1024 的 svg 圖片作為應(yīng)用圖標(biāo),比新建文件 icon.svg 來存儲(chǔ)內(nèi)容。
- 然后將 icon 導(dǎo)入 Xcode 中的 Assets 中。
6)最后,在 Xcode 中的打包項(xiàng)目,路徑:Product-Archive – Distribute App – App Store Connect – Distribute
7)Web 頁面「App Store Connect」
- 發(fā)布文案可以通過 Cursor 來寫。
- 隱私協(xié)議、技術(shù)支持文檔,可以放在飛書云文檔中。
我要把 App 發(fā)布上架到 App Store,請幫我完成上架信息的填寫,包括有
1. 推廣文本、描述、關(guān)鍵詞
2. 技術(shù)支持說明、隱私協(xié)議說明
3. 主標(biāo)題、副標(biāo)題
擴(kuò)展內(nèi)容
相關(guān)內(nèi)容
- 我用 Cursor + Trae 手搓了一個(gè) App,上架了 App Store: https://mp.weixin.qq.com/s/1N8Xf2GNXaVOaI9n192RCg
- 還在用 Prompt 生成 HTML?或許可以試試豆包 AI:https://mp.weixin.qq.com/s/Al8JLu9hQ-VCTKPUjUDMqw
- 暴論一句:MCP + A2A + Reasoning Model = Future: https://mp.weixin.qq.com/s/Rt_w71Gl8VIYh4GYp2PK2A
參考
- 【【Cursor 最直觀教程】手把手教小白如何 8 分鐘用 Cursor 完成 AI 微信小程序的開發(fā)上線】 https://www.bilibili.com/video/BV1oF4TegEne/
- 【我用 Cursor 做了個(gè) Cursor 教程博客網(wǎng)站】 https://www.bilibili.com/video/BV1ia2BYbER7/
- 【普通人也可以看的 AI 編程指南 | Cursor 教程|Cursor 使用技巧和思路|如何免費(fèi)使用 Cursor|AI 編程】 https://www.bilibili.com/video/BV1yorUYWEGD/
- 《LookAI – Cursor AI 編程教程及免費(fèi)學(xué)習(xí)資源》: https://www.lookai.top/cn/cursor/instruction/instruction
- 《Prompting Advice – Devin Docs》: https://docs.devin.ai/learn-about-devin/prompting
- 【不寫代碼,30 分鐘帶你完成 iOS APP 開發(fā)全流程】 https://www.bilibili.com/video/BV1K1XNYAEd3/
作者:Leon ,公眾號(hào):Stay Thinking
本文由 @Leon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖片由豆包 AI 生成
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
我覺得這個(gè)解釋還是太過于專業(yè),像我們這些小白,沒有專業(yè)的知識(shí)支撐,最后也只能一知半解,很難進(jìn)行下一步實(shí)踐