cursor对话关键词技巧

提示词基本结构与原则

一个好的 Cursor 提示词通常包含三个部分:目标说明 + 上下文信息 + 具体要求

例如:

复制代码
创建一个React登录组件,使用Tailwind CSS样式,需要包含邮箱验证功能和记住密码选项。

效果演示:

提示词的的黄金原则

  1. 具体胜于模糊:指定语言、框架和功能

  2. 简洁胜于冗长:每次聚焦一个明确任务

  3. 结构胜于无序:使用标记符号组织信息

5个实用的提示词模板

1. 代码生成模板

复制代码
用[编程语言]创建[功能描述],要求:
1. [功能要点1]
2. [功能要点2]
3. [功能要点3]
风格参考:[项目中已有的文件路径]

试一试:复制以下提示词到Cursor。

复制代码
用JSX创建一个立即注册页面,要求:
1. 使用 React Jsx 语法
2. 在登录页面点击立即注册之后可以跳转到该页面
3. 页面 UI 风格和登录页面保持一致
4. 预留 API 调用逻辑,便于后续实现
风格参考:项目中已有的 components/login.jsx

效果展示

在登录页面点击立即注册跳转到注册页面,同时还可以点击立即登录跳转回去。注册页面自动帮你生成元素:用户名、邮箱地址、密码、确认密码、服务条款和隐私政策。如果你觉得不符合你的预期,可以在功能点中具体要求。

2. 代码解释模板

复制代码
解释以下代码的功能和工作原理:
[粘贴需要解释的代码]
主要关注:
- [关注点1]
- [关注点2]

试一试:复制以下提示词。

复制代码
解释以下代码的功能和工作原理:
参考@引用的代码片段
主要关注:
- 邮箱和密码的校验逻辑
- 登录界面的样式设计

效果展示

3. 代码重构模板

复制代码
重构以下代码,提高其[性能/可读性/可维护性]:
[粘贴需要重构的代码]
重点改进:
1. [改进点1]
2. [改进点2]
但保持原有的功能不变

试一试:复制以下提示词。

复制代码
重构以下代码,提高页面的 UI 设计:
参考@引用的代码片段或者文件
重点改进:
1. 设计一个美观的背景图,采用渐变色
2. 登录界面加入一个平台名称,如:Eric技术圈,同时在这个名称前面生成一个图标
但保持原有的功能不变

效果展示

不仅帮你修改了登录页面,同时也将注册页面一起调整了背景色。

4. 调试辅助模板

复制代码
以下代码出现[错误描述]问题:
[粘贴有问题的代码]
错误信息:[粘贴错误信息]
我尝试过:[你已尝试的解决方案]
帮我找出问题并修复

因在使用的过程中并没有碰到错误,这里就不贴例子了,可自行尝试。

5. 功能扩展模板

复制代码
基于现有代码:
[粘贴现有代码]
添加[新功能描述]功能,需要与现有代码风格保持一致

试一试:复制以下提示词。

复制代码
基于现有代码:
参考@引用的文件
添加如下功能:
1. 该页面当前只支持邮箱地址登录,加上手机号码登录
2. 两种登录方式,可以快速切换
3. 手机号登录不需要密码,通过获取验证码登录
4. 手机号码需要进行校验,暂时支持+86中国区,11 位数字
需要与现有代码风格保持一致

效果演示

目前 AI 的能力已经很强了,以上的生成效果几乎都是一次性生成出来的,没有出现过错误。我将代码直接部署到了云服务器,大家可以直接体验。

源码:https://github.com/flyeric0212/react-login-demo\[1\]

网址:https://login-demo.flyeric.top/\[2\]

提示词错误案例

案例一:模糊提示词

优化前

复制代码
帮我写一个登录功能

AI 可能的回应生成一个基础但可能不符合项目需求的通用登录功能

优化后

复制代码
使用React和Formik创建登录组件,包含:
1. 邮箱和密码输入框(带验证)
2. 记住我选项
3. 提交按钮(带加载状态)
样式需使用项目现有的tailwind.css类,参考src/components/Button.js的风格

AI可能的回应生成符合项目具体技术栈和风格的完整登录组件

案例二:功能实现

优化前

复制代码
写个图片上传

优化后

复制代码
实现React图片上传组件,要求:
1. 支持拖放和点击选择
2. 预览功能
3. 文件大小限制(最大2MB)
4. 仅允许jpg/png格式
集成现有的API:uploadImageToServer(file)

常见错误与避免方法

错误类型 示例 改进方法
过于宽泛 写个好看的UI 使用Material UI创建数据表格,支持排序和分页
隐含假设 修复登录问题" 修复登录表单提交后出现的401错误,详细错误日志:...
术语混淆 做个响应式的程序 创建在移动端和桌面端都能良好显示的React组件
相关推荐
KEEN的创享空间3 小时前
AI编程从0到1之10X提效(Vibe Coding 氛围式编码 )09篇
openai·ai编程
AlienZHOU4 小时前
为 AI Agent 编写高质量 Skill:Claude 官方指南
agent·ai编程·claude
恋猫de小郭4 小时前
移动端开发稳了?AI 目前还无法取代客户端开发,小红书的论文告诉你数据
前端·flutter·ai编程
KaneLogger5 小时前
【翻译】打造 Agent Skills 的最佳实践
agent·ai编程·claude
王小酱6 小时前
Everything Claude Code 文档
openai·ai编程·aiops
雮尘7 小时前
如何在非 Claude IDE (TARE、 Cursor、Antigravity 等)下使用 Agent Skills
前端·agent·ai编程
刘贺同学7 小时前
Day12-龙虾哥打工日记:OpenClaw 子 Agent 到底看到了什么?
aigc·ai编程
程序员鱼皮9 小时前
离大谱,我竟然在 VS Code 里做了个视频!
github·aigc·ai编程
Kayshen11 小时前
我用纯前端逆向了 Figma 的二进制文件格式,实现了 .fig 文件的完整解析和导入
前端·agent·ai编程