Hello，大家好，我是 Sunday。
但是，也有些同学在使用 Cursor 的时候会遇到一些问题，其中，最大的问题就是 都说这东西很好用，但是我应该怎么才能让它写出我想要的代码呢？
当我们在和 Cursor（AI） 沟通时，都会需要使用到 提示词工程（Prompt Engineering）
图片
提示词 的不同会导致 Cursor 生成的代码质量也不相同。甚至可以说 Cursor 是否好用和你的提示词质量是密切相关的。
因此，这篇文章咱们就主要来说一下 如何撰写高质量的提示词，让 Cursor 更智能地为你工作！
什么是提示词？
在 Cursor 中，直接点击右上角的按钮，找到 COMPOSER，这里就是输入提示词的地方
图片
提示词（Prompt）是你与 Cursor 沟通的方式。它决定了 Cursor 代码输出的质量。
一个好的提示词可以让代码生成更加准确，相反则会得到你不想要的代码。
举个例子，假如你想要得到一个登录页面：
- 不好的 提示词：“帮我写一个登录页面。” 这样说，Cursor 可能生成一个默认的 HTML 文件，功能简单，样式也很普通。
- 好的 提示词：“请为我生成一个 Vue3 登录页面，带有表单验证、响应式布局，并使用 TailwindCSS。” 这样 Cursor 才可以为你生成你真正想要的代码。
提示词的关键技巧
明确具体的需求
仔细观察上面的提示词，我们可以发现 好的提示词会更加的准确。
没错，当我们使用 Cursor 这种工具时，需要 明确需求，避免模糊描述。你的提示词越清晰，越完善，得到的结果才会更加倾向于你想要的。
比如：
- 不好的 提示词：帮我写个弹窗。
- 好的 提示词：生成一个 Vue3 的弹窗组件，支持动态标题和内容，带有关闭按钮。
复杂功能，分步引导
除了以上的简单需求之外，我们可能还会期望 Cursor 帮我们生成复杂的功能，比如：完成一个登录页面
一个登录页面中会包含：UI样式、交互方式、表单校验 等等。这算是一个 大功能 了。
那么针对于大功能，很难通过一次提示词得到想要的代码，所以我们需要通过 分步引导 的方式，让 Cursor 循序渐进的帮我们生成对应的代码，比如：
- 第一步：生成一个表单页面，包含用户名和密码字段。
- 第二步：为该表单添加前端校验逻辑。
- 第三步：为表单添加提交到后端的接口调用。
提供清晰的上下文
所谓 上下文 指的就是代码的背景信息和场景描述。
比如，告诉 Cursor 你正在做一个什么项目，使用了什么技术栈，以及代码之间的关系是什么样子的。
特别是在 多个模块代码互相调用时，就会非常有用了！ 比如：
- 不清晰 的提示词：生成一个表单组件。
- 清晰 的提示词：使用 React 和 Ant Design 库生成一个登录表单组件，包含用户名、密码输入框和登录按钮，按钮点击时调用 login API，表单校验使用 /utils/validate.js 下的 validatePassword 方法
尝试利用“假设”
当你想要完成某个功能，但是 你也不知道这个功能具体是什么样子时，“假设” 就非常有用了。
这种情况非常常见，比如：我想要做个 APP，当时我不知道这个 APP 的登录页应该设计成啥样，一点思路都没有。
那么此时，就可以尝试这么提问 Cursor：你是一个资深前端开发工程师，请帮我完成一个电商应用的登录页面，使用简单的风格
这样的提示词或许可以为你提供思路！
一些常用的提示词方案
基础场景
- 生成页面组件：请创建一个使用 Vue3 和 TailwindCSS 的登录页面组件。
- 代码优化：优化这段代码，提升性能，并减少冗余逻辑。
- Bug 排查：根据这段代码的错误信息，帮我找到问题所在并修复。
复杂场景
- 设计系统架构：请设计一个适用于前后端分离的文件目录结构。
- 自动化测试：生成一段 Jest 测试代码，用于测试 React 表单组件的校验功能。
- 代码重构：重构这段 Vue2 代码为 Vue3，并使用 Composition API。
创意场景
- 生成动效代码：帮我写一个带有渐变过渡效果的 CSS 动画。
- UI 调整建议：请针对这个页面提供优化建议，让它更加简洁和易用。
- 生成 mock 数据：为这个接口设计一组返回的数据，格式为 JSON。
