AI编程，Cursor助你成为出色的开发者

在[[用AI快速实现一个MVP]]这篇文章中，介绍了现在有很多 AI 工具（比如 v0、bolt.new、lovable），都可以帮助我们快速生成一个应用的初步界面，也就是我们常说的 MVP（最小可用产品）的前端部分。

虽然这样做效率很高，能让我们很快看到产品的样子。但是，这些工具主要擅长构建用户能看到和交互的界面。

当我们需要实现更复杂的功能，比如用户登录、数据存储，或者让应用连接到其他 AI 服务（比如获取智能回复）时，这类工具往往难以直接完成。

这时，我们就需要像 Cursor 这样的专业工具来进一步开发和完善代码。

Cursor 是什么？

Cursor 是一款集成了 AI 辅助功能的代码编辑器。
你可以把它理解为一个专门用来编写和修改软件代码的工具，它内置了一个 AI 功能，可以在你写代码时提供帮助。
Cursor 基于 VSCode 这个非常流行的代码编辑器开发，所以它本身功能强大，同时 AI 的加入让编码工作更高效。

简单来说，Cursor 可以帮你更快地编写新代码、理解已有的代码，以及修改和优化代码。

为什么要用 Cursor

从界面到功能：
像 v0 这样的工具帮你完成了应用的外观。 Cursor 则帮助你构建应用的“内在逻辑”和实际功能。
比如连接数据库、或是接入某个 API。
精细控制代码：
如果你只想修改某一部分代码，在 v0 这样的工具中是很难实现的。使用 Cursor，你就可以对代码进行任何细致的修改和调整。

实战案例

在之前的文章中，我们提到过用 AI 工具创建一个“实时工资计算器”的例子。这个计算器可以根据用户输入的月薪实时显示当前的收入。
现在，我们希望对它进行升级：当用户点击“下班”按钮时，除了显示当天的总收入，应用还会调用 Google 的 Gemini API，根据用户的当日收入，生成一句个性化庆祝语。

步骤

首先，从 v0 (或其他类似工具) 下载“实时工资计算器”的网站项目文件。
启动 Cursor，打开刚刚下载的项目文件夹。
先让 cursor 梳理一下项目代码，并运行项目。打开 AI 对话框，选择 agent 模式，输入下面的提示词，目的是让 cursor 先了解项目，然后把项目运行起来，以便我们看到调试的结果。

帮我看一下这个项目是干啥的，
然后运行这个项目

cursor-inut 4. 然后我就可以来细化功能了。这里以调用一个 Gemini API 为例。提示词如下

增加一个功能，用户点击结束工作后，调用Gemini API，根据今天的工作时长和收入写一段个性化的庆祝语

参考下面 Gemini API的示例代码

import { GoogleGenAI } from "@google/genai";
const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });
async function main() {
  const response = await ai.models.generateContent({
    model: "gemini-2.0-flash",
    contents: "Explain how AI works in a few words",
  });
  console.log(response.text);
}
main();