5.2 Cursor代码生成：从基础到进阶

上一节我们搭建好了本地开发环境，现在是时候让Cursor大显身手了！本节将带你深入了解如何利用Cursor的核心AI能力——特别是Agent模式和提示词工程（Prompt Engineering）——来快速生成酒吧点单小程序的高保真原型界面，并学习如何清晰地表达需求，让AI为我们奠定项目的基础。

5.2.1 Cursor Agent模式简介

在Cursor中，Agent模式是一个强大的自动化助手。当你向它发出指令（Prompt）时，它不仅能生成代码，还能自动帮你创建和修改项目文件。对于需要创建多个文件（如多个HTML页面、CSS、JS）的小程序原型项目来说，Agent模式能显著提高效率，因为它会根据你的描述自动规划并执行文件操作。

要启用Agent模式，只需在Cursor右侧的聊天面板中选择 Agent选项。同时，建议选择一个能力较强的AI模型（例如Claude 3 Sonnet/Opus或GPT-4系列），以获得更好的代码生成质量和理解能力。Cursor中选择Agent模式和模型的界面如图5-2-1所示。

图5-2-1 在 Cursor 中选择 Agent 模式和合适的 AI 模型

简而言之，Agent模式让我们能通过自然语言指令，让Cursor像一个初级开发者一样，为我们处理创建文件、编写初始代码等基础工作。

注意：在使用Agent模式时，确保选择了最适合任务的AI模型。不同模型的代码生成能力和理解能力有显著差异。对于复杂项目，建议使用最强大的可用模型，如Claude 3 Opus或GPT-4。这可能会增加响应时间，但通常能生成更高质量、更符合要求的代码。

5.2.2 编写基础提示词

“提示词工程”（Prompt Engineering）是指设计和优化输入给AI模型的指令（Prompt），以获得期望输出的艺术和科学。要想让Cursor高效地为你工作，写好提示词至关重要。一个好的提示词应该像给一个聪明的实习生布置任务一样：清晰、具体、包含必要的上下文和要求。

我们以"基础提示词"为例，来分析一个有效提示词的构成，如图5-2-2所示。

我想开发一个酒吧点单小程序，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个小程序的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强：
- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

图5-2-2 一个优秀基础提示词的构成要素

提示词拆解分析：

一个有效的提示词应包含多个关键要素：首先是任务目标，如"开发酒吧点单小程序，输出高保真原型图"，清晰定义了最终交付物；其次是角色设定，提示词中指定了"产品经理"和"UI设计师"的角色，引导AI从专业角度思考；然后是工作流程，将任务分解为用户体验分析→产品界面规划→高保真UI设计→HTML原型实现等步骤，使AI能系统性思考；还有技术栈，明确指定了"HTML + Tailwind CSS"和"FontAwesome"等，为AI提供技术边界；文件结构详细说明了组织代码的方式；UI细节要求提供了界面尺寸、圆角、图片和状态栏等具体指导；最后交互模式指定了使用iframe嵌入展示的方式。

这些要素共同构成了一份清晰的需求文档，提供的细节越丰富、越结构化，AI理解得就越准确，生成的代码质量也就越高。

注意：编写提示词时，要避免过于笼统的描述。不要只说"我想要一个酒吧点单小程序"，而应明确指出需要哪些具体页面、使用什么技术栈、UI风格倾向等。细节越具体，AI生成的代码就越接近你的期望。如果有参考设计或现有项目，在提示词中明确提及也能帮助AI更好地理解需求。

5.2.3 Cursor生成初始代码与文件结构

有了精心准备的提示词，下一步就是让Cursor的Agent模式开始工作。将上一小节分析过的"基础提示词"复制到Cursor的聊天窗口中（确保已切换到Agent模式并选择了合适的模型），然后按下回车或点击发送按钮。你会看到Cursor开始分析你的请求，并在聊天窗口中展示它的执行计划，随后自动在项目文件夹中创建相应的文件，并填充生成的代码。

执行完成后，你应该能在Cursor的文件浏览器中看到类似如下的文件结构：

bar-ordering-prototype/
├── index.html
├── pages/
│   ├── home.html
│   ├── menu.html
│   ├── cart.html
│   ├── profile.html
│   └── order-history.html
├── css/
│   └── main.css
└── js/
    └── main.js

这些文件中包含初步的代码：index.html作为主入口，使用iframe嵌入其他页面并平铺展示；pages/目录下的各个HTML文件包含了不同功能界面；css/main.css包含补充Tailwind CSS的自定义样式；js/main.js包含基础交互功能。每个界面都会模拟iPhone 15 Pro的尺寸和圆角，包含顶部状态栏和底部导航栏，使用真实图片资源，并遵循现代UI设计规范。Cursor生成实例效果如图5-2-3所示。

图5-2-3 Cursor生成的界面实例

注意：AI生成的初始代码只是一个起点。尽管它已尝试满足所有要求，但可能还需进一步调整和完善。务必检查生成的代码，确保它符合预期，并为后续修改做好准备。尤其要注意图片资源引用路径、样式冲突和可能的兼容性问题，这些通常需要手动修复。

5.2.4 进阶提示词优化

通常，第一次生成的代码可能无法完全满足所有精细要求。这时，就需要对提示词进行优化和迭代，以获得更接近最终目标的结果。以下是一个针对酒吧点单小程序优化后的进阶提示词示例：

我正在开发一个高端酒吧点单小程序，需要输出超高保真的原型界面。请你以产品经理+UI设计师+前端工程师的身份，帮我完成一套完整的界面原型设计并生成可直接用于演示的HTML代码：

🎯 项目核心：打造一款精致、高品质的酒吧饮品点单体验

✅ 用户体验设计要求
- 目标用户为高端酒吧顾客，UI风格需精致、高级、现代化；
- 完整用户流程：浏览菜单→查看饮品详情→加入购物车→结算支付→查看订单状态；
- 核心差异化功能：鸡尾酒DIY定制、酒单智能推荐、饮品故事浏览、会员积分系统；
- 关键页面必须包含：登录、首页推荐、完整菜单(分类导航)、饮品详情、购物车、支付、个人中心、订单历史；

✅ UI设计规范（必须严格遵循） 
- 严格遵循iOS 17最新设计语言，包括磨砂玻璃效果、微妙阴影、动态岛交互等；
- 主色调：深蓝(#1A237E)、金色(#FFD700)、黑色背景，营造高级夜店氛围；
- 图像素材：使用高质量鸡尾酒、烈酒图片，可从Unsplash获取真实图片URL；
- 字体：SF Pro Display或类似现代无衬线字体，大小层次分明；
- 每个界面顶部都需包含精确模拟的iOS状态栏（电量、信号等图标真实）；
- 底部Tab bar设计精美，包含5个核心导航项：首页、菜单、订单、收藏、我的；
- 购物车使用悬浮按钮，含实时数量提示；

✅ 前端实现技术要求
- 使用HTML + Tailwind CSS + 少量JavaScript实现所有界面，确保代码简洁高效；
- 必须添加简单动画效果：按钮点击反馈、页面转场效果、添加购物车动效；
- 重点界面添加轻量级交互，如：饮品详情页可切换图片、订单页显示进度条等；
- 所有页面必须是独立HTML文件，按功能模块存放于pages目录下；
- 必须实现index.html作为展示页，以网格布局展示所有页面预览，并可点击放大查看；
- 图片资源使用外部URL（不要写入base64），确保加载速度和代码简洁性；

✅ 额外增强要求
- 为鸡尾酒添加真实配方和制作步骤，提升专业感；
- 模拟酒水价格区间应贴合高端酒吧的实际价位（单杯30-200元不等）；
- 加入会员等级系统UI展示，如铜牌/银牌/金牌/黑钻会员权益展示；
- 个人中心页面展示真实用户数据统计（消费次数、偏好饮品等）；
- 结算页模拟多种支付方式选择，包括微信、支付宝、Apple Pay等；

请首先做简要产品分析和界面规划，然后按照以上要求完成所有HTML界面的生成，确保每个界面都符合高端酒吧品牌体验和现代移动应用设计标准。

对比基础版，加强版提示词的优化点：

进阶提示词相比基础版有多项重要改进：首先，目标更具体，从普通"酒吧点单小程序"升级为"高端酒吧点单小程序"，明确了产品定位和目标用户；其次，体验要求更全面，详细描述了完整用户流程和核心差异化功能，使AI更好地理解产品业务逻辑；第三，UI规范极度细化，指定了具体色彩代码、字体选择、交互规范，甚至提到"iOS 17最新设计语言"等具体设计元素；第四，前端技术要求明确，除基础框架外，还要求添加动画效果和轻量级交互，使原型更具真实感；最后，增加内容真实性，要求添加真实配方、合理价格区间、会员等级系统等，提升原型的专业感和真实性。

这些优化策略可总结为：目标用户明确化、增加业务逻辑细节、设计语言具体化、提升交互真实性和增强内容真实度，从而获得更符合需求的原型结果。

注意：在迭代提示词时，不要完全推翻之前的设计方向，而是在原有基础上进行增强和细化。这样可以保持设计的一致性，同时提高AI理解意图的准确性。如果需要调整方向，明确指出哪些部分需要保留，哪些需要改变，这样会得到更好的结果。

5.2.5 使用Cursor进行代码迭代与修改

即使使用了优化的提示词，AI生成的代码也往往需要进一步的人工调整和修改才能完全满足需求。Cursor提供了两种主要的修改方式来进行这种迭代。

首先是继续对话：在Agent模式下，你可以直接在聊天窗口中对当前生成的代码提出修改意见，如"首页的饮品推荐卡片太小了，请将它们调整得更大一些，并添加价格标签"或"购物车页面的结算按钮颜色不够突出，请将它改为金色，并增加投影效果"等。

其次是选中代码编辑（@Edit / Ctrl+K / Cmd+K）：这是更精确的修改方式。在编辑器中选中你想要修改的代码片段，然后按下 Ctrl+K或 Cmd+K，或右键点击选择 @Edit Code。在弹出的输入框中输入修改指令，例如"将这个按钮的背景色改为金色，并添加悬停效果"或"优化这个菜单列表的布局，使其更容易浏览"。

通过这两种方式，你可以像与设计师和前端开发人员协作一样，不断指导Cursor调整界面布局、颜色、字体、交互效果，修复显示问题，甚至重新规划页面结构，逐步将AI生成的初始原型完善成接近最终产品的高保真界面。

注意：在进行代码迭代时，建议先解决结构性问题，再处理样式细节。先确保页面结构和功能组件已正确放置，然后再优化颜色、字体和间距等视觉细节。这种"从大到小"的迭代方法可避免在修改过程中产生冲突或返工。另外，定期测试修改效果，确保每次迭代都是向前而非向后，尤其要注意跨浏览器兼容性问题。

将Cursor视为你的设计和开发伙伴，有效的沟通和迭代是高效利用其能力的关键。