Hello，大家好，我是 Sunday。

但是，也有些同學(xué)在使用 Cursor 的時候會遇到一些問題，其中，最大的問題就是 都說這東西很好用，但是我應(yīng)該怎么才能讓它寫出我想要的代碼呢？

當(dāng)我們在和 Cursor（AI） 溝通時，都會需要使用到 提示詞工程（Prompt Engineering）

圖片

提示詞 的不同會導(dǎo)致 Cursor 生成的代碼質(zhì)量也不相同。甚至可以說 Cursor 是否好用和你的提示詞質(zhì)量是密切相關(guān)的。

因此，這篇文章咱們就主要來說一下 如何撰寫高質(zhì)量的提示詞，讓 Cursor 更智能地為你工作！

什么是提示詞？

在 Cursor 中，直接點擊右上角的按鈕，找到 COMPOSER，這里就是輸入提示詞的地方

圖片

提示詞（Prompt）是你與 Cursor 溝通的方式。它決定了 Cursor 代碼輸出的質(zhì)量。

一個好的提示詞可以讓代碼生成更加準(zhǔn)確，相反則會得到你不想要的代碼。

舉個例子，假如你想要得到一個登錄頁面：

• 不好的 提示詞：“幫我寫一個登錄頁面?！?這樣說，Cursor 可能生成一個默認的 HTML 文件，功能簡單，樣式也很普通。
• 好的 提示詞：“請為我生成一個 Vue3 登錄頁面，帶有表單驗證、響應(yīng)式布局，并使用 TailwindCSS?！?這樣 Cursor 才可以為你生成你真正想要的代碼。

提示詞的關(guān)鍵技巧

明確具體的需求

仔細觀察上面的提示詞，我們可以發(fā)現(xiàn) 好的提示詞會更加的準(zhǔn)確。

沒錯，當(dāng)我們使用 Cursor 這種工具時，需要 明確需求，避免模糊描述。你的提示詞越清晰，越完善，得到的結(jié)果才會更加傾向于你想要的。

比如：

• 不好的 提示詞：幫我寫個彈窗。
• 好的 提示詞：生成一個 Vue3 的彈窗組件，支持動態(tài)標(biāo)題和內(nèi)容，帶有關(guān)閉按鈕。

復(fù)雜功能，分步引導(dǎo)

除了以上的簡單需求之外，我們可能還會期望 Cursor 幫我們生成復(fù)雜的功能，比如：完成一個登錄頁面

一個登錄頁面中會包含：UI樣式、交互方式、表單校驗 等等。這算是一個 大功能 了。

那么針對于大功能，很難通過一次提示詞得到想要的代碼，所以我們需要通過 分步引導(dǎo) 的方式，讓 Cursor 循序漸進的幫我們生成對應(yīng)的代碼，比如：

• 第一步：生成一個表單頁面，包含用戶名和密碼字段。
• 第二步：為該表單添加前端校驗邏輯。
• 第三步：為表單添加提交到后端的接口調(diào)用。

提供清晰的上下文

所謂 上下文 指的就是代碼的背景信息和場景描述。

比如，告訴 Cursor 你正在做一個什么項目，使用了什么技術(shù)棧，以及代碼之間的關(guān)系是什么樣子的。

特別是在 多個模塊代碼互相調(diào)用時，就會非常有用了！ 比如：

• 不清晰 的提示詞：生成一個表單組件。
• 清晰 的提示詞：使用 React 和 Ant Design 庫生成一個登錄表單組件，包含用戶名、密碼輸入框和登錄按鈕，按鈕點擊時調(diào)用 login API，表單校驗使用 /utils/validate.js 下的 validatePassword 方法

嘗試?yán)谩凹僭O(shè)”

當(dāng)你想要完成某個功能，但是 你也不知道這個功能具體是什么樣子時，“假設(shè)” 就非常有用了。

這種情況非常常見，比如：我想要做個 APP，當(dāng)時我不知道這個 APP 的登錄頁應(yīng)該設(shè)計成啥樣，一點思路都沒有。

那么此時，就可以嘗試這么提問 Cursor：你是一個資深前端開發(fā)工程師，請幫我完成一個電商應(yīng)用的登錄頁面，使用簡單的風(fēng)格

這樣的提示詞或許可以為你提供思路！

一些常用的提示詞方案

基礎(chǔ)場景

• 生成頁面組件：請創(chuàng)建一個使用 Vue3 和 TailwindCSS 的登錄頁面組件。
• 代碼優(yōu)化：優(yōu)化這段代碼，提升性能，并減少冗余邏輯。
• Bug 排查：根據(jù)這段代碼的錯誤信息，幫我找到問題所在并修復(fù)。

復(fù)雜場景

• 設(shè)計系統(tǒng)架構(gòu)：請設(shè)計一個適用于前后端分離的文件目錄結(jié)構(gòu)。
• 自動化測試：生成一段 Jest 測試代碼，用于測試 React 表單組件的校驗功能。
• 代碼重構(gòu)：重構(gòu)這段 Vue2 代碼為 Vue3，并使用 Composition API。

創(chuàng)意場景

• 生成動效代碼：幫我寫一個帶有漸變過渡效果的 CSS 動畫。
• UI 調(diào)整建議：請針對這個頁面提供優(yōu)化建議，讓它更加簡潔和易用。
• 生成 mock 數(shù)據(jù)：為這個接口設(shè)計一組返回的數(shù)據(jù)，格式為 JSON。