最近在用Cursor写一个中后台项目的表单组件,发现有时候给的Prompt太笼统,AI生成的代码逻辑对但样式和交互细节经常跑偏。比如我让它写一个带搜索和分页的Table,结果它直接用了Ant Design的Table,但我其实是想用自己封装的一个基础组件。还有一次,我加了“用hooks实现”这种关键词,它反而生成了class组件。想问下大家,在写Prompt时,有没有什么技巧能让AI更理解项目里的技术栈和已有组件?比如要不要先把项目里的package.json或者组件结构贴进去?或者有没有类似“角色设定”的方法,先告诉它我是谁、在什么项目里?每次改来改去太费时间了,求有经验的大佬指点一下。
用Cursor写React组件,Prompt该怎么写才能让它少改几次?
全部回复
共 110 条确实,Prompt太笼统的话AI就爱自由发挥,我一般会先贴关键依赖和组件目录结构,再点名“基于现有Button和Table组件封装”,它跑偏概率能小不少。另外别光说“用hooks”,直接给个业务场景或数据流描述,比如“点击搜索后拉接口更新列表”,比关键词管用。角色设定我也试过,就一句“你是我们团队前端,熟悉内部UI规范”,效果有点玄学,但至少比裸奔好。
这个问题我太有同感了,之前也卡在“逻辑对但细节歪”这个坑里。后来我发现一个关键点:别把Cursor当全能AI,得把它当个“刚入职的实习生”,你给它讲清楚项目里的“约定俗成”比啥都重要。比如你那个Table的例子,我现在的做法是直接贴一小段现有封装组件的代码示例,再跟一句“所有表格必须用这个,别引第三方库”,它基本就不会跑偏了。
另外你说的角色设定确实有用,但别整太虚的,我一般开头就直接写“你是我们中后台项目的资深前端,熟悉内部封装的src/components下的所有基础组件”,然后顺手把项目目录结构里那几个关键文件路径列出来,它自己会去读。还有个小技巧,就是把你最不能接受的那种输出(比如class组件)直接写成“禁止使用class组件,一律函数式+hooks”,负面清单比正面描述更省事。
不过我觉得你遇到的另一个问题可能是Prompt里信息密度太高了,又是搜索又是分页,它容易顾此失彼。我习惯拆两步走:第一步只让它出核心逻辑和数据结构,第二步再单独让它细化交互。还有,如果你公司有内部的设计规范或者common样式文件,最好把那个文件路径或者几个关键样式变量也发过去,否则它自己猜出来的样式肯定跟你想要的差十万八千里。总之别嫌烦,前期多花一分钟把上下文喂足,后面能省你来回改十次的时间。
直接把项目里封装的组件import路径和核心props贴进prompt里,比让它自己猜靠谱多了。
我一般会把项目里关键的package.json和组件目录结构直接贴进Prompt,再明确写一句“优先使用src/components下的基础组件”,这样比笼统说“用现有组件”管用很多。另外角色设定挺有效的,比如开头加一句“你是这个中后台项目的资深前端”,它生成代码时就会更倾向匹配项目惯例。至于hooks变class的问题,我猜可能是上下文太长导致它忘了你的约束,可以把关键要求放在Prompt开头和结尾各强调一遍,中间别插太多无关细节。
这问题太真实了,我最近也在用Cursor搞内部组件库,一开始也是被它那套“自作主张”气到不行。后来发现一个笨办法挺管用:写Prompt前,直接把你要用的那个基础组件的props类型定义和一两行使用示例贴进去,再明确说“基于这个组件封装,不要引入其他UI库”。它反而能老实很多。至于角色设定,我个人感觉比贴package.json更有效的是给它一个“项目约束”段落,比如“项目统一用dayjs不用moment,样式变量必须走tokens”,相当于给它画个圈。另外你提到让它用hooks它写class,我怀疑是上下文里旧代码干扰了,可以试试在Prompt开头加一句“忽略所有历史代码风格,严格按以下要求来”。还有个细节,别只说“用hooks”,最好直接举例“用useState管理loading,用useEffect发请求”,说得越像代码,它越不容易跑偏。最后,如果改超过两轮,我一般直接删掉它生成的代码重写一遍Prompt,有时候比在错误代码上打补丁效率高多了。
直接把项目里封装的组件路径和props贴进prompt,再给它个角色设定,比如“你是该项目的资深前端”,效果立竿见影。
你这问题太真实了,Cursor默认会优先猜antd,因为训练数据里太常见了。我现在的做法是写prompt前直接甩一段核心代码进去,比如你封装Table的props定义,再补一句“严格按这个组件的API来,别引入其他UI库”,比贴package.json管用。还有你说“用hooks”它反而写class,我怀疑是上下文里旧代码带偏了,建议把新建文件的路径写清楚,或者干脆在prompt末尾加一句“只允许使用函数组件和useState/useEffect”,这样指令强约束比角色设定更直接。
直接把package.json和组件路径贴进Prompt,再指定“基于xxx组件实现”就行,比模糊描述管用多了。
先贴组件目录和package.json,再让它照着现有组件抄,比啥角色设定都管用。
我一般会在项目根目录放个.cursorrules文件,把技术栈和常用组件路径写进去,这样它就不会乱用Antd了。你提到的贴package.json有用,但更关键的是告诉它你封装组件的具体名字和props结构,不然它还是会瞎猜。我试过先让它读一遍我写的组件再提需求,改的次数明显少了。另外“用hooks实现”这种词有时候确实会翻车,不如直接写“用函数组件+useState”。