Cursor 在前端需求開發工作流中的應用|得物技術

一、引言

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

TL;DR

  • 列舉 Cursor 的錯誤預期

  • 相比過去的開發流程,使用 Cursor 后的變化

  • Cursor 在現狀分析、方案設計和影響評估中的收益

二、就差一個程序員了

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

2.1 從需求到代碼

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

PRD → Cursor → Code(一步到位)

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

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

2.2 從規劃到執行

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

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

  • 對于已知的部分,Cursor 可以加速實現,減少重復勞動。

  • 對于未知的部分,Cursor 可以協助探索,但不能替代開發者的判斷。

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

三、現有問題

作為前端開發,我們的日常工作流程中大多圍繞需求文檔進行代碼產出。這需要介于

  1. 我們對業務需求的理解。

  2. 對所屬業務和項目現狀的認知。

  3. 從而進行方案設計和決策,整理思路將復雜問題分解成可執行的粒度。

但同時,這導致我們不得不面臨著一個矛盾:方案設計對效率的影響。一方面,方案設計是保證質量的必要環節;另一方面,生成和維護這些產物又會顯著降低開發效率。尤其是在快速迭代的項目需求中,這種矛盾更為突出。

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

前端方案中的各環節分布

傳統的解決方案通常是:

  • 模板化方案設計,減少重復工作。

  • 簡化方案設計,減少不必要的細節描述。

  • 提高團隊熟練度,使得方案設計生成更加高效。

作為附加項,現在我們能在這些基礎上借助 Cursor 進一步提升效能。

四、協作流程

4.1 反饋循環

在協作時,關鍵在于對 Cursor 補充上下文,并對 Cursor 提供的結論進行人工核驗,兩者構成反饋循環。前者是希望 Cursor 知道,后者是需要我們自己知道,從而保障產出的結果符合預期。

整體的 Cursor 協作流程分為規劃和執行兩個階段。規劃階段專注于產出方案,執行階段根據方案產出代碼,兩者交替執行。

4.2 流程對比

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

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

所以這里更推薦換一個心態來看待流程上的變化,不必為了使用工具而使用。過去我們面向 Google / GitHub / Stack Overflow 編程也并不是因為我們為了搜索而搜索,是因為在具體開發中遇到了不明確的信息需要確認,現在這個角色可以漸進地由 Cursor 替代,比起搜索引擎,Cursor 能充分地根據項目現狀分析出更貼切的答案,如同行車的導航和選購的得物,為此不必有太多的心理負擔。

五、場景應用

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

關于提示詞,可根據實際需要使用 notepads 或 rules 降低單次使用成本。

5.1 現狀分析

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

Cursor 離代碼上下文更近,我們可以在它的協助下抽絲剝繭,快速了解業務主線。這是一個學習的過程,當知道的越多,在后續的設計和開發中就越能正確地引導 Cursor。

具體可以從需求的目標改動點開始,梳理其所屬功能和實現方式,包含交互流程、數據管理和條件渲染等:

業務需求 ├── 1. 功能 │ ├── 2. 實現 │ ... └── 3. 字段 ...

目標

了解業務功能

了解代碼實現

了解字段依賴

提示詞參考

當前功能如何運作,用戶交互有哪些路徑,具體數據流向是怎樣的,請整理成 mermaid 時序圖。

當前代碼如何組織,核心模塊有哪些,組件間如何通信,梳理組件關系圖。

梳理當前表單字段的顯隱關系、聯動邏輯以及數據源。

效果

輸出所屬功能中的角色和角色之間的交互方式,能快速掌握業務模塊的大體脈絡。(表下圖一)

輸出組件職責和組件間的關系,以便在投入開發前以組件模塊維度確定改動范圍。(表下圖二)

能直觀地呈現表單字段間的聯動說明。(表下圖三)

圖一

圖二

圖三

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

5.2 改動方案

在了解了現狀后,開始面向需求進行改動方案設計。

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

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

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

因此在整體流程上:

1. 拆解需求,縮小關注范圍

2. 明確目標,清晰表達需求描述

  • Cursor 提供方案

  • 檢查是否有理解偏差,并不斷調整提示

  • 在確認方案后,最終由 Cursor 匯總成果

3. 漸進開發,分模塊由 Cursor 生成代碼,及時驗證效果和審核代碼

提示詞參考:

  • 方案設計

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

  • 代碼產出,在功能之外,留意識別邊界場景以及控制影響面

在寫代碼時遵循最小改動原則,避免影響原先的功能 即使識別到歷史問題也不要自行優化,可以先告知我問題描述和對當前需求的影響,不要直接改跟本次需求無關的代碼

5.3 影響評估

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

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

  • 自下而上:基于改動代碼和依賴項進行白盒測試,這需要研發自身投入必要的時間進行代碼審核;

  • 自上而下:識別改動最終涉及到的頁面和功能進行黑盒測試,逐個回歸和確認功能是否符合預期。

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

目標

代碼審查

功能驗證

提示詞

@git 逐個文件分析并總結改動點,評估是否引入了新的問題。

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

效果

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

圍繞改動,生成新舊功能在不同場景中的測試用例。(表下圖二)

圖一

圖二

六、小結

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

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

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

文 / 魏命名

關注得物技術,每周一、三更新技術干貨

要是覺得文章對你有幫助的話,歡迎評論轉發點贊~

未經得物技術許可嚴禁轉載,否則依法追究法律責任。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/76307.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/76307.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/76307.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

PyQt學習記錄

PyQt學習記錄 要在界面上 創建一個控件,就需要在程序代碼中 創建 這個 控件對應類 地一個 實例對象。 在Qt系統中,控件(widget)是 層層嵌套 的,除了最頂層的控件,其他的控件都有父控件。 幾個函數 函數mo…

react: styled-components實現原理 標簽模版

styled-components是針對react中一個前端廣泛使用的css-in-js樣式庫B站 利用標簽模版 利用ES6中的 標簽模版文檔標簽模板其實不是模板,而是函數調用的一種特殊形式。“標簽”指的就是函數,緊跟在后面的模板字符串就是它的參數。 let a 5; let b 10;…

網絡安全應急響應之文件痕跡排查:從犯罪現場到數字狩獵的進化論

凌晨3點,某金融企業的服務器突然告警,核心數據庫出現未知進程訪問。安全團隊緊急介入時,攻擊者已抹去日志痕跡。在這場與黑客的時間賽跑中,文件痕跡排查成為破局關鍵。本文將帶您深入數字取證的"案發現場",揭…

多模態大語言模型arxiv論文略讀(七)

MLLM-DataEngine: An Iterative Refinement Approach for MLLM ?? 論文標題:MLLM-DataEngine: An Iterative Refinement Approach for MLLM ?? 論文作者:Zhiyuan Zhao, Linke Ouyang, Bin Wang, Siyuan Huang, Pan Zhang, Xiaoyi Dong, Jiaqi Wang,…

idea插件:AICommit,智能生成Git提交信息

AICommit:智能生成Git提交信息的IDEA插件指南 一、AICommit插件介紹 AICommit是一款專為開發者設計的IntelliJ IDEA插件,它利用人工智能技術自動生成清晰、規范的Git提交信息(Commit Message)。該插件能夠分析你的代碼變更,理解修改的上下文…

js 拷貝-包含處理循環引用問題

在 JavaScript 中,拷貝對象和數組時需要特別注意,因為對象和數組是引用類型,直接賦值只會復制引用,而不是實際的數據。以下是幾種常見的拷貝方法及其應用場景: 1. 淺拷貝(Shallow Copy) 淺拷貝…

oracle將varchar2 轉為clob類型存儲。 oracle不支持直接使用sql,將 varchar2 到clob的類型轉換,需要下面操作

將一個現有表中的 VARCHAR2 列數據遷移到一個 CLOB 列的過程。以下是對每一步操作的說明: 1. 添加一個新的 CLOB 類型列 首先,向表中添加一個新的 CLOB 類型的列。這個列將用來存儲原本的 VARCHAR2 數據。 ALTER TABLE your_table ADD (new_column CL…

Dynamics 365 Business Central Recurring Sales Lines 經常購買銷售行 來作 訂閱

#D365 BC ERP# #Navision# 前面有節文章專門介紹了BC 2024 Wave 2 支持的更好的Substription & Recurring Billing。 其實在D365 BC ERP中一直有一個比較簡單的訂閱模塊Recrring Sales Lines。本文將介紹一下如何用Recurring Sales Lines來 實施簡易的訂閱Substription。具…

算法比賽中常用的數學知識

一、求某個整數的正約數個數與正約數之和 1.1求某個正整數N的正約數個數 public class Main {public static void main(String[] args) {System.out.println(count(360));//結果為24}public static long count(long number){long count1;for(long i2;i<Math.sqrt(number);…

虛擬Ubuntu系統 開機提示:SMBus Host controller not enabled 后正常啟動,去除這個提示提升開機速度。

如題&#xff0c;虛擬機中的Ubuntu系統開機提示&#xff1a;SMBus Host controller not enabled&#xff0c;雖然能正常啟動&#xff0c;但不僅影響開機速度&#xff0c;而且還膈應人。 使用命令查看模塊 lsmod | grep piix4 發現i2c_piix4有問題&#xff0c; 禁止 i2c_piix4…

NLP基礎知識 與 詞向量的轉化方法 發展

目錄 1.NLP 基礎知識點 為什么需要自然語言處理? 自然語言處理有哪些分類? 自然語言處理有哪些實際應用? 為什么需要自然語言處理? 自然語言處理有哪些分類? 自然語言處理有哪些實際應用? 自然語言處理的技術/工作原理是什么? 2.NLP文本轉化為詞向量的方法 2…

【FPGA基礎學習】狀態機思想實現流水燈

目錄 一、用狀態機實現LED流水燈1.狀態機思想簡介1. 1基本概念1.2.核心要素1.3分類與模型 2.LED流水燈 二、CPLD與FPGA1.技術區別2.應用場景3.設計選擇建議 三、HDLbits組合邏輯題目 一、用狀態機實現LED流水燈 1.狀態機思想簡介 1. 1基本概念 ? 狀態機&#xff08;Finite …

CSS語言的游戲AI

CSS語言的游戲AI探討 隨著技術的飛速發展&#xff0c;游戲行業也在不斷地革命和演變。游戲中的人工智能&#xff08;AI&#xff09;作為一種重要的設計元素&#xff0c;其復雜性和智能程度對游戲的體驗、玩法和整體表現都有著深遠的影響。近年來&#xff0c;CSS&#xff08;Ca…

docker配置redis容器時配置文件docker-compose.yml示例

1.配置數據節點&#xff08;主從節點&#xff09; version: 3.7 services:master:image: redis:5.0.9container_name: redis-masterrestart: alwayscommand: redis-server --appendonly yesports:- 6379:6379slave1:image: redis:5.0.9container_name: redis-slave1restart: a…

【WPF】IOC控制反轉的應用:彈窗但不互相調用ViewModel

全稱&#xff1a;Inversion of Control&#xff0c;控制反轉 場景&#xff1a;A頁面需要調用B/C頁面等&#xff0c;防止直接在VM中新建別的頁面實例&#xff0c;使用IOC設計架構&#xff1b; 創建Service&#xff0c;在Service中實現頁面的實例創建和定義頁面輸入輸出參數。 在…

MySQL學習筆記十五

第十七章組合查詢 17.1組合查詢 MySQL允許執行多個查詢&#xff08;多條SELECT語句&#xff09;&#xff0c;并將結果作為單個查詢結果集返回。這些組合查詢通常稱為并&#xff08;union&#xff09;或復合查詢&#xff08;compound query&#xff09;。 以下幾種情況需要使…

【MySQL】安裝

下載 MySQL :: MySQL Downloads 安裝 mysql 驗證

ffpyplayer+Qt,制作一個視頻播放器

ffpyplayerQt&#xff0c;制作一個視頻播放器 項目地址FFmpegMediaPlayerVideoWidget 項目地址 https://gitee.com/chiyaun/QtFFMediaPlayer FFmpegMediaPlayer 按照 QMediaPlayer的方法重寫一個ffpyplayer # coding:utf-8 import logging from typing import Unionfrom PySide…

Spring Boot 國際化配置項詳解

Spring Boot 國際化配置項詳解 1. 核心配置項分類 將配置項分為以下類別&#xff0c;便于快速定位&#xff1a; 1.1 消息源配置&#xff08;MessageSource 相關&#xff09; 控制屬性文件的加載、編碼、緩存等行為。 配置項作用默認值示例說明spring.messages.basename指定屬…

拍攝的婚慶視頻有些DAT的視頻文件打不開怎么辦

3-12 現在的婚慶公司大多提供結婚的拍攝服務&#xff0c;或者有一些第三方公司做這方面業務&#xff0c;對于視頻拍攝來說&#xff0c;有時候會遇到這樣一種問題&#xff0c;就是拍攝下來的視頻文件&#xff0c;然后會有一兩個視頻文件是損壞的&#xff0c;播放不了&#xff0…