自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Cursor 在前端需求開發(fā)工作流中的應(yīng)用

開發(fā)
本篇文章圍繞個人開發(fā)流程中的已有問題,分享如何使用 Cursor 來提升這部分的開發(fā)體驗(yàn),在工作中持續(xù)保持好的節(jié)奏和狀態(tài)。

一、引言

很高興與大家分享現(xiàn)階段 Cursor 在我的工作中的使用體驗(yàn)。首先是預(yù)期管理,本篇文章不會分享 x 個你可能不知道的小技巧,也不會讓你擁有無需自行編碼的能力,同時不涉及 Cursor 工程化方面內(nèi)容。僅僅是圍繞個人開發(fā)流程中的已有問題,分享如何使用 Cursor 來提升這部分的開發(fā)體驗(yàn),在工作中持續(xù)保持好的節(jié)奏和狀態(tài)。

TL;DR

  • 列舉 Cursor 的錯誤預(yù)期
  • 相比過去的開發(fā)流程,使用 Cursor 后的變化
  • Cursor 在現(xiàn)狀分析、方案設(shè)計(jì)和影響評估中的收益

二、就差一個程序員了

最近團(tuán)隊(duì)在大力推廣 Cursor AI,隨著幾個版本迭代體驗(yàn)下來,其精準(zhǔn)的自動補(bǔ)全深得我心,具體可以體現(xiàn)在 Tab 鍵的使用率已逐漸高于 Command + C/V。既然這么懂我,那么能否更進(jìn)一步,根據(jù) PRD 直接輸出代碼呢?

從需求到代碼

Cursor 能夠理解代碼上下文,從而根據(jù)簡短的描述生成符合上下文的代碼,于是我嘗試直接將 PRD 提供給 Cursor 來生成代碼:

PRD → Cursor → Code(一步到位)

幾個需求嘗試下來,總的來說分為兩類問題:

圖片

這就像你去理發(fā)店,希望 Tony 老師稍微剪短一點(diǎn),結(jié)果卻被剪得稍微短了點(diǎn)。而這需要我們在開始之前對齊認(rèn)知,補(bǔ)充描述和參照。在這個前置階段,即使發(fā)現(xiàn)對方理解有偏差,也還能及時糾正。俗稱“對齊顆粒度”。

從規(guī)劃到執(zhí)行

Cursor 產(chǎn)出的代碼由它所接收的上下文決定,如果沒有準(zhǔn)確描述需求意圖,它會通過推斷做出假設(shè),導(dǎo)致產(chǎn)出不準(zhǔn)確。因此我們在使用 Cursor 時,關(guān)鍵在于區(qū)分開發(fā)過程中的規(guī)劃階段執(zhí)行階段。在這個分層的視角下,不管是自身的關(guān)注點(diǎn)還是 AI 的角色定位都變得更加清晰:

圖片

Cursor 在這個過程中,不應(yīng)該被視為開發(fā)者的替代品,而是一面能夠放大開發(fā)者能力的鏡子:

  • 對于已知的部分,Cursor 可以加速實(shí)現(xiàn),減少重復(fù)勞動。
  • 對于未知的部分,Cursor 可以協(xié)助探索,但不能替代開發(fā)者的判斷。

在理解了 AI 的角色后,我們需要重構(gòu)目前的開發(fā)工作流,讓 AI 成為真正有效的助手。最關(guān)鍵的轉(zhuǎn)變是:不再試圖讓 AI 替代開發(fā)流程中的任何環(huán)節(jié),而是讓它協(xié)助完成每個環(huán)節(jié)。這意味著不是把 PRD 扔給 AI,等待完整代碼,而是和 AI 一起理解 PRD 和代碼現(xiàn)狀,共同設(shè)計(jì)方案,明確步驟,然后分步實(shí)現(xiàn)。

三、現(xiàn)有問題

作為前端開發(fā),我們的日常工作流程中大多圍繞需求文檔進(jìn)行代碼產(chǎn)出。這需要介于

  1. 我們對業(yè)務(wù)需求的理解。
  2. 對所屬業(yè)務(wù)和項(xiàng)目現(xiàn)狀的認(rèn)知。
  3. 從而進(jìn)行方案設(shè)計(jì)和決策,整理思路將復(fù)雜問題分解成可執(zhí)行的粒度。

但同時,這導(dǎo)致我們不得不面臨著一個矛盾:方案設(shè)計(jì)對效率的影響。一方面,方案設(shè)計(jì)是保證質(zhì)量的必要環(huán)節(jié);另一方面,生成和維護(hù)這些產(chǎn)物又會顯著降低開發(fā)效率。尤其是在快速迭代的項(xiàng)目需求中,這種矛盾更為突出。

有時即使是一個小需求,可能也需要經(jīng)過大量前置分析,才能進(jìn)入開發(fā)。舉個例子,以下是某個小需求的前端方案截圖,通過不同的顏色區(qū)分了各流程的占比。從圖中可以看出,各模塊中綠色和藍(lán)色所對應(yīng)的「現(xiàn)狀分析」和「改動方案」后占據(jù)了主要的篇幅,與相應(yīng)的時間占用成正比。

前端方案中的各環(huán)節(jié)分布


傳統(tǒng)的解決方案通常是:

  • 模板化方案設(shè)計(jì),減少重復(fù)工作。
  • 簡化方案設(shè)計(jì),減少不必要的細(xì)節(jié)描述。
  • 提高團(tuán)隊(duì)熟練度,使得方案設(shè)計(jì)生成更加高效。

作為附加項(xiàng),現(xiàn)在我們能在這些基礎(chǔ)上借助 Cursor 進(jìn)一步提升效能。

四、協(xié)作流程

反饋循環(huán)

在協(xié)作時,關(guān)鍵在于對 Cursor 補(bǔ)充上下文,并對 Cursor 提供的結(jié)論進(jìn)行人工核驗(yàn),兩者構(gòu)成反饋循環(huán)。前者是希望 Cursor 知道,后者是需要我們自己知道,從而保障產(chǎn)出的結(jié)果符合預(yù)期。

圖片

整體的 Cursor 協(xié)作流程分為規(guī)劃和執(zhí)行兩個階段。規(guī)劃階段專注于產(chǎn)出方案,執(zhí)行階段根據(jù)方案產(chǎn)出代碼,兩者交替執(zhí)行。

圖片

圖片


流程對比

相較于以往,在使用 Cursor 后的工作模式差異如下:

圖片

圖片

乍一看使用 Curosr 后流程更加繁瑣,而實(shí)際上也確實(shí)如此。

所以這里更推薦換一個心態(tài)來看待流程上的變化,不必為了使用工具而使用。過去我們面向 Google / GitHub / Stack Overflow 編程也并不是因?yàn)槲覀優(yōu)榱怂阉鞫阉?,是因?yàn)樵诰唧w開發(fā)中遇到了不明確的信息需要確認(rèn),現(xiàn)在這個角色可以漸進(jìn)地由 Cursor 替代,比起搜索引擎,Cursor 能充分地根據(jù)項(xiàng)目現(xiàn)狀分析出更貼切的答案,如同行車的導(dǎo)航和選購的得物,為此不必有太多的心理負(fù)擔(dān)。

五、場景應(yīng)用

重新回到在需求開發(fā)工作中的問題,占據(jù)我代碼之外的主要工作是“現(xiàn)狀分析”、“改動方案”和“影響評估”,因此主要分享這三個場景中的 Cursor 使用體驗(yàn)。

關(guān)于提示詞,可根據(jù)實(shí)際需要使用 notepads 或 rules 降低單次使用成本。

現(xiàn)狀分析

在需求開發(fā)過程中,我們時常會接觸到陌生的業(yè)務(wù)模塊,如何理解現(xiàn)狀往往是最耗時也最容易被忽視的部分。如果對現(xiàn)狀不夠了解,當(dāng)需求相對復(fù)雜或者項(xiàng)目本身存在較多的歷史債務(wù)時,我們很難輸出符合預(yù)期的方案,更難以保證最終代碼的質(zhì)量。對于新接手項(xiàng)目的開發(fā)者而言,這一階段常常伴隨著無數(shù)次的"代碼考古"和"問詢前人"。

Cursor 離代碼上下文更近,我們可以在它的協(xié)助下抽絲剝繭,快速了解業(yè)務(wù)主線。這是一個學(xué)習(xí)的過程,當(dāng)知道的越多,在后續(xù)的設(shè)計(jì)和開發(fā)中就越能正確地引導(dǎo) Cursor。

具體可以從需求的目標(biāo)改動點(diǎn)開始,梳理其所屬功能和實(shí)現(xiàn)方式,包含交互流程、數(shù)據(jù)管理和條件渲染等:

業(yè)務(wù)需求
    ├── 1. 功能
    │   ├── 2. 實(shí)現(xiàn) 
    │   ... └── 3. 字段
    ...



目標(biāo)



了解業(yè)務(wù)功能



了解代碼實(shí)現(xiàn)



了解字段依賴



提示詞參考



當(dāng)前功能如何運(yùn)作,用戶交互有哪些路徑,具體數(shù)據(jù)流向是怎樣的,請整理成 mermaid 時序圖。



當(dāng)前代碼如何組織,核心模塊有哪些,組件間如何通信,梳理組件關(guān)系圖。



梳理當(dāng)前表單字段的顯隱關(guān)系、聯(lián)動邏輯以及數(shù)據(jù)源。



效果




輸出所屬功能中的角色和角色之間的交互方式,能快速掌握業(yè)務(wù)模塊的大體脈絡(luò)。



圖片





輸出組件職責(zé)和組件間的關(guān)系,以便在投入開發(fā)前以組件模塊維度確定改動范圍。



圖片





能直觀地呈現(xiàn)表單字段間的聯(lián)動說明。



圖片



通過對上述三個層面的不斷往復(fù),Cursor 提供的直觀輸入能幫助我們擺脫掉一知半解的狀態(tài),消除不確定性也就消除了焦慮。

改動方案

在了解了現(xiàn)狀后,開始面向需求進(jìn)行改動方案設(shè)計(jì)。

在問答中,Cursor 傾向于直接滿足表面的需求,但可能會忽略一些深層的系統(tǒng)設(shè)計(jì)考慮。當(dāng)遇到復(fù)雜的問題時,建議先讓 Cursor 分析問題本身,而不是直接要求它給出解決方案。通過引導(dǎo)它進(jìn)行更全面的思考,能防止 Cursor 胡編亂造,確保它理解需求,同時也能暴露自身的思考局限,減少返工。具體做法可以先提示 “在我讓你寫代碼之前不要生成代碼” 以及 “先逐步分析需求再說明你打算怎么做”;

另一方面,由于 Cursor 背后 LLM 的 Context Window 存在上下文長度限制,意味著 Cursor 跟我們一樣都存在“短期記憶”,這體現(xiàn)在當(dāng)對話超出范圍后,Cursor 會在輸出方案和代碼時,遺忘此前的要求和結(jié)論,造成不準(zhǔn)確。因此,為了將短期記憶轉(zhuǎn)換成長期記憶,需要我們對復(fù)雜任務(wù)進(jìn)行必要的拆解,每次只專注于單個粒度下的問答,當(dāng)確認(rèn)方案后,再讓 Cursor 匯總并記錄到外置文檔,以便在后續(xù)的對話中補(bǔ)充上下文(也可以借助 @Summarized Composers 實(shí)現(xiàn))。在面對下一個任務(wù)時,開啟新的會話進(jìn)行問答,多輪下來形成由不同模塊組裝而成的方案設(shè)計(jì)。

這樣一來,在生成代碼階段,Cursor 所需要面對的只是局部復(fù)雜度中的改動,這能很大程度上減緩我們在代碼審核和驗(yàn)證上的投入成本。Cursor 也能始終保持在長度限制范圍內(nèi),面對精煉后的方案設(shè)計(jì)進(jìn)行決策和產(chǎn)出。

因此在整體流程上:

1. 拆解需求,縮小關(guān)注范圍

2. 明確目標(biāo),清晰表達(dá)需求描述

  • Cursor 提供方案
  • 檢查是否有理解偏差,并不斷調(diào)整提示
  • 在確認(rèn)方案后,最終由 Cursor 匯總成果

3. 漸進(jìn)開發(fā),分模塊由 Cursor 生成代碼,及時驗(yàn)證效果和審核代碼

提示詞參考:

  • 方案設(shè)計(jì)
我們先探討方案,在我讓你寫代碼之前不要生成代碼
如果此處要加個 xxx 該怎么做,請先逐步分析需求
在想明白后向我說明為什么要這么設(shè)計(jì)


  • 代碼產(chǎn)出,在功能之外,留意識別邊界場景以及控制影響面
在寫代碼時遵循最小改動原則,避免影響原先的功能
即使識別到歷史問題也不要自行優(yōu)化,可以先告知我問題描述和對當(dāng)前需求的影響,不要直接改跟本次需求無關(guān)的代碼

影響評估

除去開發(fā)之前的方案耗時,在完成開發(fā)后,我們所要解決的是如何保障自測質(zhì)量的問題。對于研發(fā)而言,需要關(guān)注的是在這個需求迭代內(nèi),改動點(diǎn)所關(guān)聯(lián)的調(diào)用鏈路,而在這個路徑依賴下不斷冒泡所涉及到的具體功能就是影響面。

因此可以從兩個方面提高自測可信度

  • 自下而上:基于改動代碼和依賴項(xiàng)進(jìn)行白盒測試,這需要研發(fā)自身投入必要的時間進(jìn)行代碼審核;
  • 自上而下:識別改動最終涉及到的頁面和功能進(jìn)行黑盒測試,逐個回歸和確認(rèn)功能是否符合預(yù)期。

圖片

借助 Cursor 可以很低成本地分析改動,并按需產(chǎn)出測試用例,通過 @git 指令讓 Cursor 參與到對當(dāng)前功能分支或具體 commit 的評估:

圖片




目標(biāo)





代碼審查





功能驗(yàn)證





提示詞





@git 逐個文件分析并總結(jié)改動點(diǎn),評估是否引入了新的問題。





@git 基于代碼變更輸出自測用例清單。 





效果






在列舉出每個文件的改動意圖后,會告知潛在問題和修改意見。




圖片






圍繞改動,生成新舊功能在不同場景中的測試用例。




圖片



六、小結(jié)

過去,成為一名優(yōu)秀開發(fā)者需要經(jīng)歷漫長的積累:從反復(fù)查閱文檔、在搜索引擎中篩選有效信息,到系統(tǒng)掌握編程語言、算法與網(wǎng)絡(luò)原理,每一步都在構(gòu)建扎實(shí)的「知識護(hù)城河」。而 AI 時代顛覆了這一邏輯 —— 當(dāng)大模型能快速生成代碼、解析技術(shù)方案時,開發(fā)者的核心能力似乎從“記憶與執(zhí)行”轉(zhuǎn)向成了“正確地提問,讓 AI 提供答案”。

客觀來看,AI 降低了信息獲取的門檻,能更快地落地想法、驗(yàn)證思路。不變的是,好的答案源于好的問題,而提出好問題依舊需要積累專業(yè)領(lǐng)域下的知識,知道的越清楚才能在提問時描述得越清晰。

所有事都有吃力不討好的部分,隨著 Cursor 等 AI 工具在工程中的應(yīng)用,我們可以逐漸將這部分職能分配出去,利用我們的知識儲備,描述問題,引導(dǎo)過程,審核結(jié)果。工具的使用始終是為了節(jié)省人類體力和腦力的開銷,從而在提升體驗(yàn)的同時提升生產(chǎn)力,以更充沛的精力聚焦在工作成果和個人成長上。

責(zé)任編輯:龐桂玉 來源: 得物技術(shù)
相關(guān)推薦

2011-05-25 17:04:41

ibmdwLotus

2015-03-13 15:58:11

Adobe

2021-03-29 11:20:39

前端代碼工作流

2022-10-26 08:00:43

Activiti工作流BPM

2021-10-14 11:34:05

技術(shù)工作流引擎

2022-07-14 10:06:20

工作流引擎營銷自動化vivo

2010-05-28 15:16:33

SharePoint 工作流

2016-10-28 15:01:35

Cookie前端實(shí)踐

2009-11-18 09:14:49

Visual Stud

2024-05-10 06:59:06

2024-04-25 08:00:00

DevOps架構(gòu)軟件開發(fā)

2013-04-23 10:28:08

IBeamMDAAWF

2015-07-14 09:26:28

微型工作流引擎設(shè)計(jì)

2019-01-03 09:45:20

Go 前端 Web

2011-09-20 09:41:29

.NET 4.5

2009-04-15 11:00:31

Workflow工作流角色

2012-07-23 10:36:46

工作流

2010-01-04 17:42:50

SilverLight

2009-03-03 09:13:36

工作流BPM業(yè)務(wù)流程

2023-01-04 08:02:16

工作流架構(gòu)設(shè)計(jì)
點(diǎn)贊
收藏

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