Cursor 必備使用指南,我用 Cursor 開發(fā)十多個(gè)項(xiàng)目后,才明白這些道理!
Hello,大家好,我是 Sunday。
但是,也有些同學(xué)在使用 Cursor 的時(shí)候會(huì)遇到一些問題,其中,最大的問題就是 都說這東西很好用,但是我應(yīng)該怎么才能讓它寫出我想要的代碼呢?
當(dāng)我們?cè)诤?Cursor(AI) 溝通時(shí),都會(huì)需要使用到 提示詞工程(Prompt Engineering)
圖片
提示詞 的不同會(huì)導(dǎo)致 Cursor 生成的代碼質(zhì)量也不相同。甚至可以說 Cursor 是否好用和你的提示詞質(zhì)量是密切相關(guān)的。
因此,這篇文章咱們就主要來說一下 如何撰寫高質(zhì)量的提示詞,讓 Cursor 更智能地為你工作!
什么是提示詞?
在 Cursor 中,直接點(diǎn)擊右上角的按鈕,找到 COMPOSER,這里就是輸入提示詞的地方
圖片
提示詞(Prompt)是你與 Cursor 溝通的方式。它決定了 Cursor 代碼輸出的質(zhì)量。
一個(gè)好的提示詞可以讓代碼生成更加準(zhǔn)確,相反則會(huì)得到你不想要的代碼。
舉個(gè)例子,假如你想要得到一個(gè)登錄頁面:
- 不好的 提示詞:“幫我寫一個(gè)登錄頁面?!?這樣說,Cursor 可能生成一個(gè)默認(rèn)的 HTML 文件,功能簡(jiǎn)單,樣式也很普通。
- 好的 提示詞:“請(qǐng)為我生成一個(gè) Vue3 登錄頁面,帶有表單驗(yàn)證、響應(yīng)式布局,并使用 TailwindCSS。” 這樣 Cursor 才可以為你生成你真正想要的代碼。
提示詞的關(guān)鍵技巧
明確具體的需求
仔細(xì)觀察上面的提示詞,我們可以發(fā)現(xiàn) 好的提示詞會(huì)更加的準(zhǔn)確。
沒錯(cuò),當(dāng)我們使用 Cursor 這種工具時(shí),需要 明確需求,避免模糊描述。你的提示詞越清晰,越完善,得到的結(jié)果才會(huì)更加傾向于你想要的。
比如:
- 不好的 提示詞:幫我寫個(gè)彈窗。
- 好的 提示詞:生成一個(gè) Vue3 的彈窗組件,支持動(dòng)態(tài)標(biāo)題和內(nèi)容,帶有關(guān)閉按鈕。
復(fù)雜功能,分步引導(dǎo)
除了以上的簡(jiǎn)單需求之外,我們可能還會(huì)期望 Cursor 幫我們生成復(fù)雜的功能,比如:完成一個(gè)登錄頁面
一個(gè)登錄頁面中會(huì)包含:UI樣式、交互方式、表單校驗(yàn) 等等。這算是一個(gè) 大功能 了。
那么針對(duì)于大功能,很難通過一次提示詞得到想要的代碼,所以我們需要通過 分步引導(dǎo) 的方式,讓 Cursor 循序漸進(jìn)的幫我們生成對(duì)應(yīng)的代碼,比如:
- 第一步:生成一個(gè)表單頁面,包含用戶名和密碼字段。
- 第二步:為該表單添加前端校驗(yàn)邏輯。
- 第三步:為表單添加提交到后端的接口調(diào)用。
提供清晰的上下文
所謂 上下文 指的就是代碼的背景信息和場(chǎng)景描述。
比如,告訴 Cursor 你正在做一個(gè)什么項(xiàng)目,使用了什么技術(shù)棧,以及代碼之間的關(guān)系是什么樣子的。
特別是在 多個(gè)模塊代碼互相調(diào)用時(shí),就會(huì)非常有用了! 比如:
- 不清晰 的提示詞:生成一個(gè)表單組件。
- 清晰 的提示詞:使用 React 和 Ant Design 庫生成一個(gè)登錄表單組件,包含用戶名、密碼輸入框和登錄按鈕,按鈕點(diǎn)擊時(shí)調(diào)用 login API,表單校驗(yàn)使用 /utils/validate.js 下的 validatePassword 方法
嘗試?yán)谩凹僭O(shè)”
當(dāng)你想要完成某個(gè)功能,但是 你也不知道這個(gè)功能具體是什么樣子時(shí),“假設(shè)” 就非常有用了。
這種情況非常常見,比如:我想要做個(gè) APP,當(dāng)時(shí)我不知道這個(gè) APP 的登錄頁應(yīng)該設(shè)計(jì)成啥樣,一點(diǎn)思路都沒有。
那么此時(shí),就可以嘗試這么提問 Cursor:你是一個(gè)資深前端開發(fā)工程師,請(qǐng)幫我完成一個(gè)電商應(yīng)用的登錄頁面,使用簡(jiǎn)單的風(fēng)格
這樣的提示詞或許可以為你提供思路!
一些常用的提示詞方案
基礎(chǔ)場(chǎng)景
- 生成頁面組件:請(qǐng)創(chuàng)建一個(gè)使用 Vue3 和 TailwindCSS 的登錄頁面組件。
- 代碼優(yōu)化:優(yōu)化這段代碼,提升性能,并減少冗余邏輯。
- Bug 排查:根據(jù)這段代碼的錯(cuò)誤信息,幫我找到問題所在并修復(fù)。
復(fù)雜場(chǎng)景
- 設(shè)計(jì)系統(tǒng)架構(gòu):請(qǐng)?jiān)O(shè)計(jì)一個(gè)適用于前后端分離的文件目錄結(jié)構(gòu)。
- 自動(dòng)化測(cè)試:生成一段 Jest 測(cè)試代碼,用于測(cè)試 React 表單組件的校驗(yàn)功能。
- 代碼重構(gòu):重構(gòu)這段 Vue2 代碼為 Vue3,并使用 Composition API。
創(chuàng)意場(chǎng)景
- 生成動(dòng)效代碼:幫我寫一個(gè)帶有漸變過渡效果的 CSS 動(dòng)畫。
- UI 調(diào)整建議:請(qǐng)針對(duì)這個(gè)頁面提供優(yōu)化建議,讓它更加簡(jiǎn)潔和易用。
- 生成 mock 數(shù)據(jù):為這個(gè)接口設(shè)計(jì)一組返回的數(shù)據(jù),格式為 JSON。