偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Cursor 必備使用指南,我用 Cursor 開發(fā)十多個(gè)項(xiàng)目后,才明白這些道理!

開發(fā) 前端
當(dāng)你想要完成某個(gè)功能,但是 你也不知道這個(gè)功能具體是什么樣子時(shí),“假設(shè)” 就非常有用了。這種情況非常常見,比如:我想要做個(gè) APP,當(dāng)時(shí)我不知道這個(gè) APP 的登錄頁應(yīng)該設(shè)計(jì)成啥樣,一點(diǎn)思路都沒有。

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。
責(zé)任編輯:武曉燕 來源: 程序員Sunday
相關(guān)推薦

2023-08-24 07:31:16

2025-06-06 09:18:17

2025-01-03 08:50:23

2016-01-06 11:07:30

NoSQL存儲(chǔ)服務(wù)器集群

2025-04-21 03:30:00

2022-09-29 09:07:08

DataGrip數(shù)據(jù)倉庫數(shù)據(jù)庫

2017-12-25 16:31:33

前端程序員

2012-12-26 12:41:14

Android開發(fā)WebView

2011-07-21 14:57:34

jQuery Mobi

2009-12-28 17:40:10

WPF TextBox

2021-07-27 10:09:27

鴻蒙HarmonyOS應(yīng)用

2010-09-06 14:24:28

ppp authent

2019-01-14 08:52:25

開發(fā)經(jīng)驗(yàn)瀏覽器

2009-12-31 17:17:45

Silverlight

2021-01-12 15:19:23

Kubernetes

2025-07-02 09:00:24

ES運(yùn)維JSON

2025-04-27 02:25:00

DeepSeekCursor程序

2017-01-04 15:22:57

TrimPath模板引擎

2010-08-04 15:37:31

Flex圖表

2010-08-05 15:40:21

FlexBuilder
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)