有些同学在使用 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。