网页开发可真是一门棘手的技艺。如果你想构建比简单着陆页更复杂的应用，你将需要掌握一些网页UI库和框架。让我们试试不用写代码能不能体验一下网页的“vibe coding”的乐趣。

之前，我展示过如何使用Cursor AI构建一个功能齐全的iOS应用。

但在本文中，我想要专注于网络并专注于构建一个真正的网络应用——一个具有指标和KPI的仪表盘。我将使用Next.js，这是一个基于React的流行框架，来创建这个应用。

由Cursor AI创建的酒店绩效看板。

• 运行 Windows、Linux 或 MacOS 的机器
• 在您的机器上安装了 Node.js，并且 Node.js 版本应在 18.18 或以上

咱们得建一个文件夹用来存项目。

与为 iOS 进行 vibe 编码不同的是，后者需要同时使用 Xcode 和 Cursor AI 进行开发，而 web 的 vibe 编码则只需要使用 Cursor AI。

要创建一个新的 Next.js 项目，可以打开终端（在底部的任务栏），然后输入以下命令：

    npx create-next-app@latest

运行此命令可以创建一个新的 Next.js 应用程序。

一旦你输入了项目名称并完成设置向导的步骤，Next.js 就会为你生成一个新的项目。

创建一个新的项目之后，首先确保项目运行正常。为此，你可以运行一个命令。

npm run dev  # 这是一个用于启动开发环境的命令。

这个命令会在您的机器上启动一个开发服务器，您可以在浏览器中打开提供的网址检查是否一切正常。

新创建的 Next.js 项目默认首页。

生成的代码质量很大程度上取决于AI助手是否了解项目和所涉及的技术这一点，包括项目背景和技术背景。

在定义上下文时，我推荐做三件事，

首先，根据我在Cursor AI在Next.js开发中的使用经验，我建议将修改范围限制在特定文件上，而不是让Cursor AI有机会修改整个项目。每次我没有限制上下文在特定的文件或目录时，Cursor AI倾向于创建一个全新的Next.js项目或修改大量文件，这导致了不必要的反复。因此，我建议首先将主页文件添加到上下文中。

在新打开的聊天窗口里，你可以看到页面中的 page.tsx 文件，这也是我们将要求 Cursor AI 进行修改的文件。

其次，我推荐大家参考Next.js的官方文档。这会帮助Cursor AI在生成代码时可以依赖最新的官方文档。

点击标签栏中的文档图标，选择Docs，接着在列表中选择Next.js，或者点击“添加新文档”按钮来输入Next.js官方文档的网址链接。

第三，我建议添加Cursor Rules——AI助手生成代码时应该遵循的具体规则。你可以在这里Cursor.directory找到这些规则。我通常会在项目根目录下放一个cursorrules文件。

光标规则文件（cursorrules）被添加到项目的根目录。

我认为你给AI助手的第一个提示最重要。你必须清楚地说明你想要构建什么及其原因。就我而言，我正在为一家酒店连锁公司制作一个包含指标和KPI的仪表盘。这就是我要列出具体想看到的图表的原因。

以下是我使用提示词的一个预览（以下是前三个图表的示例）：

我想在 page.tsx 页面添加一个酒店连锁的绩效仪表板。

仪表板将包含六个图表。每个图表我都会提供具体细节以及展示它的原因。

1. 随时间变化的入住率  
展示原因：因此可以追踪房间入住状况，揭示季节性趋势，并有助于预测。  
图表类型：折线图  
计量周期：过去12个月（按月）  
X轴：月份  
Y轴：入住率（%）

2. 按酒店分店的收入  
展示原因：可以快速比较酒店表现，识别表现不理想或表现优异的地点。  
图表类型：水平条形图  
计量周期：当前月份（可以切换为季度或年度视图）  
X轴：收入（美元$）  
Y轴：酒店名称

3. 预订来源分布  
展示原因：了解客人从何处预订，从而制定营销策略并考虑佣金成本。  
图表类型：环形图  
计量周期：最近30天  
分类：网站、OTA（例如 Booking.com）、直接致电、旅行社

另外，请注意的是，我希望让AI助手知道，我希望在页面.tsx上看到修改（项目首页）。

根据我的经验，使用Cursor AI迭代和改进Next.js项目通常比iOS项目花费更多时间。每个由Cursor AI为我编写的Next.js项目中的第二个最初都包含一些错误。

Next.js项目中的依赖问题。

但好的是你可以调整你的设计，让Cursor AI帮你找到并修正这些错误。其中一些错误可以在不离开AI助手窗口的情况下解决，但有些则需要你深入代码才能搞清楚怎么回事。

这款设计最初是由Cursor AI设计的。

我也发现很多时候，并不需要复杂的提示来优化项目的视觉呈现。一个提示

让界面更漂亮

这几乎和更复杂的指令差不多，效果也差不多。

通过使用CSS来改进page.tsx，让它看起来更漂亮

Cursor AI精心打造的设计

如你所见，Cursor AI 可以帮助你快速可视化你想要构建的东西。它能够创建一个你可以与利益相关者分享来获取反馈的解决方案。同时，你可能需要与 AI 助手进行几次迭代才能让项目达到功能完备的状态。就我演示的那个例子来说，Cursor 提供的解决方案在功能和视觉上仍有一些问题。它可能是设计过程中的一个好起点，但不太可能是一个可以立即交付给客户的最终解决方案。

由尼克·巴奇所著