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。