Hello，大家好，我是 Sunday。

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

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

圖片

提示詞 的不同會導致 Cursor 生成的代碼質量也不相同。甚至可以說 Cursor 是否好用和你的提示詞質量是密切相關的。

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

什么是提示詞？

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

圖片

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

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

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

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

提示詞的關鍵技巧

明確具體的需求

仔細觀察上面的提示詞，我們可以發現 好的提示詞會更加的準確。

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

比如：

• 不好的 提示詞：幫我寫個彈窗。
• 好的 提示詞：生成一個 Vue3 的彈窗組件，支持動態標題和內容，帶有關閉按鈕。

復雜功能，分步引導

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

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

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

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

提供清晰的上下文

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

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

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

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

嘗試利用“假設”

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

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

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

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

一些常用的提示詞方案

基礎場景

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

復雜場景

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

創意場景

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