ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: inherit;line-height: 1.75;color: rgb(15, 76, 129);font-weight: bold;">见字如面,与大家分享实践中的经验与思考。ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">模糊的提示词也是AI乱写的一大痛点之一,你是否曾对着Cursor输入了一大段描述,却得不到想要的代码?是否为了让AI理解你的意图而不断重复尝试?ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">接下来我会分别从三个方面带大家掌握高效的提示词技巧,能让你的开发效率提升3倍以上。文中有详细的模板、源码和在线网站预览。ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: start;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;font-style: italic;border-width: 0.2px 0.2px 0.2px 4px;border-style: solid;border-color: rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.04) rgb(15, 76, 129);border-radius: 6px;color: rgba(0, 0, 0, 0.6);background: rgb(247, 247, 247);">ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);">ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);">ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 20.8px;line-height: 1.75;display: table;color: rgb(255, 255, 255);background: rgb(15, 76, 129);text-align: center;border-radius: 8px 24px;box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px;">提示词基本结构与原则ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">一个好的 Cursor 提示词通常包含三个部分:目标说明+上下文信息+具体要求。例如: 创建一个React登录组件,使用TailwindCSS样式,需要包含邮箱验证功能和记住密码选项。 效果演示: 提示词的的黄金原则具体胜于模糊:指定语言、框架和功能 简洁胜于冗长:每次聚焦一个明确任务 结构胜于无序:使用标记符号组织信息
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)
常见错误与避免方法 | | |
|---|
| | 使用Material UI创建数据表格,支持排序和分页 | | | 修复登录表单提交后出现的401错误,详细错误日志:... | | | |
最后掌握高效的提示词技巧,不仅能节省时间,更能显著提升Cursor为你生成的代码质量。记住:具体、结构化、迭代改进是提升 AI 回应质量的关键。
|