AI编程小试牛刀-强大的Cursor+Claude3.7-实现一个项目跟踪小系统

大家好，我是人月聊IT。

今天跟大家分享一个AI编程从0到1的小案例，大家可以重点参考我每个步骤的提示词，也可以注意我分阶段的生成步骤。

这个案例很简单，就是一个简单的售前项目跟踪系统，我希望对团队售前项目进行跟踪，每个售前项目有负责人，有参与人。售前项目本身也有前期，立项，招投标等各个阶段状态。我希望参与售前项目的每个人都能够将项目相关信息反馈到项目下面，而且反馈的信息可以类似传统论坛一样进行回复和评论，以记录售前项目跟踪完整的时间线索。

这个功能我在前面两周分别试用了Cursor+Claude3.7 Sonnet，字节国内版的Trae，阿里的通义灵码，包括Marscode等各自AI辅助编程工具。只有Cursor在不手工修改或新增任何一行代码的情况下能够帮我生成从登录开始的完整系统。其它工具要么是生成出来系统运行异常，要么就是界面风格排版混乱，基本没法使用。

所以今天我跟大家分享完整的系统生成过程。

首先我在前面思考的时候还是需要将大任务进行拆分，每次不适合给AI太长的提示词并生成所有功能。而应该分阶段生成。这样在运行出现错误的时候也方便查找错误并灵活修正bug。

因此我将整个生成过程分为三个大阶段，如下：

1. 生成登录功能和菜单框架，首页
2. 生成基础信息维护功能（用户，项目，部门）
3. 生成项目跟踪功能

为了方便操作，我没有采用标准的前后端分离的微服务架构，而是采用python语言，Flask框架来进行生成，同时数据库也采用最简单的Sqlite嵌入式数据库来进行处理。

图片

一. 生成登录功能和前端框架

首先我们要生成登录功能和前端框架。同时在这里给出我们基础的开发语言，数据库，开发框架的基础要求。具体提示词如下：

我准备用python+flask来开发一个项目跟踪系统，数据库采用嵌入数据库sqlite来存储数据。现在请先帮我生成整个代码框架结构，具体要求如下：

1. 生成登录界面，登录功能对应后台user数据库表，这个表至少包括user_id，user_name，password三个字段信息。同时对于admin账号是默认账号，密码默认admin。当是admin登录的时候不用校验数据库，直接检验密码后登录。

2. 登录后进入到首页，首页布局为左右布局，左边是类似微软 outlook bar的菜单布局方式。支持一级菜单和二级菜单。当前一级菜单两个（项目跟踪，基础信息管理），对于基础信息管理菜单有二级菜单三个（部门信息，用户信息，项目信息）

3. 注意整体界面需要美观，符合通用的web系统的易用性展示。你可以选择常用的css文件或bootstrap进行界面美化。

4. 注意顶部需要有一个top bar栏位，深蓝色底色。右上方可以查看到个人信息，也可以注销退出。

5. 当前二级菜单点击后进入到一个欢迎页面，这个页面暂时未静态页面，体现welcome几个字。

6. 可以同时打开多个二级菜单，因此主页面上方需要有tab标签的方式进行展示，而且可以进行切换。

请先基于以上需求生成整个项目相关的源代码文件。具体生成完成的登录界面和Outlook Bar风格菜单如下：

图片

图片

可以看到整体生成完全符合我的要求。而且左边的OutlookBar菜单栏布局也相当美观和简洁。而且其它AI编程工具生成的时候很难生成出这个效果。顶部栏位，注销退出也完全实现。

二. 生成基础信息维护功能

在这里涉及到部门信息维护，用户信息维护，项目信息维护。其中用户信息维护需要选择部门，项目信息维护需要选择负责人和参与人。我希望是CRUD功能全部在已给功能菜单实现。

这种单表的生成对于Cursor基本没有任何问题。

具体的提示词如下：

很好，现在先帮我完成用户信息这个功能，这个功能挂接到前面建立的用户信息这个二级菜单上面。用户信息为维护包括用户编码，用户名，用户姓名，密码，账号状态几个信息。具体要求如下：

1. CRUD都通过该功能实现。

2. 可用通过用户名称或姓名进行用户信息模糊查询。

3. 账号状态包括三个，正常，冻结，废弃。从下拉列表选择，只有账号状态是正常的时候才能够正常登录系统。

4. 用户实际登录，系统就是检索的这个用户信息表，因此需要检查原有登录功能是否需要配套变更。

5. 如果用户登录失败，需要给出明确提升信息。登录校验成功才跳转到主界面，如果是admin账号，不要检查用户信息表，这个规则不变。

6. 整个功能布局仍然简洁，易用，符合主流的界面风格。

很好，现在帮我完成部门信息维护功能。

1. 部门信息维护实现方式和用户信息维护类似，只有部门编码，部门名称两个字段。

2. 同时实现CRUD功能，修改的时候只能修改部门名称。

3. 基础信息管理一级菜单下面的部门信息二级菜单，直接链接到这个功能。

处理变更，用户信息需要增加所属于部门。很好，现在需要对用户信息维护功能进行变更。

1. 用户信息新增或修改的时候需要增加一个所属部门的数据项，这个显示为下拉列表，具体显示值为部门信息维护的部门名称，而后台存储值存储部门编码信息。

2. 查询列表要显示所属部门名称信息。

很好，现在帮我完成项目信息维护功能。

1. 部门信息维护实现方式和用户信息维护类似

2. 项目信息维护包括项目编码，项目名称，客户名称，项目负责人，项目参与人，项目状态，项目发现日期。

3. 项目负责人从用户信息中选择，显示用户姓名，后台存储用户编码。

4. 项目参与人也从用户信息中选择，显示用户姓名，后台存储用户编码。但是参与人可以选择多个，选择的时候通过一个多选表格进行多选。选择完成后界面显示选择的所有人员姓名，用逗号分隔。

5. 项目状态包括三个选型项，商机阶段，立项阶段，投标阶段。

6. 项目发现日期选择一个具体的日期，只需要到某天。发现日期必须小于或等于当天。

增加顶部的Tab切换页签

很好，还有一个地方需要你修改。就是我点二级菜单的时候，我希望在主页面上面有一个tab标签栏方便我在功能间切换。

如果这个二级菜单功能一级打开过tab标签，就定位到这个tab标签栏；如果没有打开过，就新增加一个tab标签栏。tab标签栏上文字内容即二级菜单名。

最终生成功能截图如下：

图片

图片

图片

图片

三. 生成项目跟踪功能

注意这个功能具备一定的复杂性。其一体现在项目跟踪首页我希望是一种卡片式布局的方式进行展示；其二是对于项目跟踪详情页面我希望是可以进行评论，对评论还可以多级回复，形成跟踪过程列表。

因此在这里整个提示词编写需要更加细化和准备。但是能够做到得就是我提示词得编写进来不会涉及到太多底层代码技术实现。

具体的提示词如下：

很好，现在需要在项目跟踪一级菜单下增加一个二级菜单，菜单名为项目跟踪。进入项目跟踪后的页面功能设计如下：

1. 表格化布局，表格居中，一行三列的方式进行布局。

2. 每个表格中实际由一个标签卡，这个卡片在单元格中居中，占单元格宽度为80%， 高度为120px的绝对值。

3. 将所有项目信息以标签卡的方式全部显示出来，卡片的底色和你在项目信息维护中项目状态的底色一致。

4. 标签卡里面需要显示三行信息。具体为：

       项目名称：{从项目信息中获取到的实际的项目名称}

       客户名称：{从项目信息中获取到的实际的客户名称}

       项目状态：{从项目信息中获取到的实际的项目状态信息}

5. 你需要将查询到的所有项目信息按这种标签卡的方式全部展示出来。项目信息多就应该循环显示多行。

6. 在标签卡的右下角有个名称为更多的超链接，这个超链接先挂接欢迎页面。

7. 注意标签卡布局要美观，简介，中间要有一定的间隙。

8. 该页面上方预留150px的空白。

注意标签卡里面的项目状态具体内容直接文字显示接口，不要有底色。我现在需要的是整个标签卡根据项目状态不同采用不同的底色背景色进行显示。同时标签卡占单元格的宽度修改为90%。

另外整个标签卡布局，根据你的经验，看下是否还有更加美观，简洁好看的风格进行布局。这个有点类似主流bootstrap最佳实践里面的首页的指标块布局风格。

注意标签卡里面的项目状态具体内容直接文字显示接口，不要有底色。我现在需要的是整个标签卡根据项目状态不同采用不同的底色背景色进行显示。同时标签卡占单元格的宽度修改为90%。

另外整个标签卡布局，根据你的经验，看下是否还有更加美观，简洁好看的风格进行布局。这个有点类似主流bootstrap最佳实践里面的首页的指标块布局风格。

具体生成界面风格如下：

图片

在项目跟踪面板实现后，是增加跟踪详情页面。这个页面相当来说比较复杂。具体提示词如下：

很好，前面完成的项目跟踪标签卡展示风格满足我的要求。

原来每个标签卡有一个更多的超链接，但是链接的欢迎页面。

现在我的需求是需要链接到具体的项目跟踪详情界面。这个界面实现要求如下：

1. 点击更多超链接后跳转到项目跟踪详情界面，这个界面仍然是内嵌在tab标签上面打开。

2. 跟踪详情页面上方预留150px的空白。

3. 详情页面仍然表格布局，该大表格只有1列2行。居中排列，占比80%

4. 表格第一行为项目信息卡片，类似项目跟踪里面的标签卡。标签卡里面分为三行四列显示，具体内容如下：

       项目名称|{实际从库里面查询到的项目名称}|客户名称|{实际从数据库查询到的客户名称}

       项目负责人|{实际的负责人姓名}|项目参与人|{实际的项目参与人信息}

       项目发现日期|{实际的项目发现日期}|项目状态|{实际的项目状态}

5. 上面项目标签卡信息的显示注意排版对齐。

6. 大表格的第2行为针对项目的评论和回复信息，这个实现方式类似于传统论坛，或者类似新浪微博针对主题贴的回复评论。注意这里既可以针对项目评论，也可以针对别人的评论继续评论或回复，能够通过缩进方式体现递进关系。每一个回复或评论都能够体现出回复人姓名，回复时间。

7. 为了美观好看，每一个人都增加一个圆形头像logo，注意暂时没有图片，因此圆形头像logo里面直显示用户姓名中的姓。

8. 注意针对项目标签卡的评论的展现方式，注意易用性和美观，原则就是和传统论坛针对帖子的评论回复思路完全一样。

9. 注意进行评论或回复的时候最好不要全部刷新整个页面，而是能够通过前端js脚本实现界面不刷新情况加载。

10. 所有针对某个特定项目的回复，评论信息要全部保存。点击某个项目进入到更多项目详情界面的时候，能够显示所有历史评论和回复信息。

注意，这里有个关键，我继续反问Cursor需求是否有描述不清楚或存在歧义的地方。这样可以让我进一步澄清 AI在生成代码时候的疑惑。

请先不要输出代码，先分析下我上面需求，有没有我没有描述清楚的地方或你需要进一步确认的地方。注意，反问Cursor有无需求部清楚的地方。

我来分析一下您的需求，并提出一些需要确认的地方：以下是我最终确认信息，请理解。确认信息在每行最后面的括号里面。

关于项目详情页面的布局：

您提到"大表格只有1列2行"，这里是否应该理解为使用 Bootstrap 的栅格系统，而不是传统的 HTML 表格？（是的）

80% 的宽度是否应该理解为在大容器中居中显示，宽度为容器的 80%？（是的）

关于项目信息卡片：

三行四列的布局是否应该理解为每行包含两对"标签|值"的形式？（是的）

是否需要为不同的标签使用不同的图标来增强视觉效果？（需要）

项目状态是否应该保持与项目跟踪页面相同的颜色标识？（是的，和跟踪页面相当的背景色，是整个卡片背景色，而不是仅仅项目状态）

关于评论系统：

评论的层级关系是否应该限制最大层级数？(限制最多5级）

是否需要添加评论的分页功能？（暂时不添加）

评论是否需要支持富文本格式（如表情、链接等）？（不需要）

是否需要添加评论的编辑和删除功能？（暂时不需要)

评论是否需要支持点赞功能？(暂时不需要）

关于用户头像：

除了显示姓氏外，是否需要添加背景色来区分不同用户？（需要）

是否需要为头像添加鼠标悬停效果，显示用户完整信息？(需要）

关于评论交互：

是否需要添加评论的实时更新功能（如新评论自动显示）？（不需要）

评论框是否需要支持 @ 用户功能？（不需要）

是否需要添加评论的排序功能（如按时间、点赞数等）？（默认按时间倒序排列，不需要排序功能）

关于数据存储：

评论数据是否需要支持软删除？（不需要）

是否需要记录评论的修改历史？（不需要）

是否需要添加评论的举报功能？（不需要）

关于性能考虑：

评论是否需要实现懒加载？（需要）

是否需要限制单次加载的评论数量？（不需要限制）

是否需要实现评论的缓存机制？（不需要）

关于权限控制：

是否需要限制评论的权限（如登录用户才能评论）？（不需要限制）

是否需要添加评论的审核机制？（不需要）

是否需要限制评论的频率（防刷）？（不需要）

评论的懒加载是否应该：

初始只加载第一级评论（加载1到3级评论）

点击"展开回复"时才加载子评论，还是初始就加载所有评论，但子评论默认折叠？（加载所有）

评论提交后：

是否立即显示在评论列表顶部（是的）

还是需要手动刷新页面（不需要）

用户头像的背景色：是否需要根据用户名固定生成相同的颜色，还是随机生成不同的颜色（固定）

在我完成了上面所有的需求澄清后，Cursor帮我一次生成了完整的项目详情页面跟踪和评论功能，包括对评论的回复。注意上面只有括号里面的内容是我回复给Cursor确认的内容，其它内容都是Cursor输出给我希望我进一步确认的需求。

具体界面参考如下：

图片

最后，为了方便核对数据，我还让 Cursor帮我生成了一个对数据库表数据进行查询的简单功能。从查询到的数据来看，数据库设计和数据存储也完全满足数据库设计范式要求。

整个试用下来，感觉Cursor具备明显优势的地方如下：

1. 界面和UI布局可用性很高，基本不会出现排版混乱情况

2. 不需要复杂技术词汇作为提示语，很接近自然语言需求描述

3. 出现异常时候，自我解决和修复能力极强，基本不用自己修改

以上是我试用Cursor从0到1开发一个简单小应用的尝试。从整体来看比我1年多前使用Cursor已经有了明显提升。特别是生成的代码的自我测试和bug修复能力，UI界面的美观性，对整个源代码项目长上下文的理解等。

包括我今天在腾讯云架构师沟通群里面也一直在强调一个观点，就是开发人员的思维要朝需求和产品经理方面去转，而不是蒙着头搞底层技术或算法。以后对程序员全栈能力要求会越来越高，知识的广度并知识的深度更加重要，而且程序员还要朝需求和产品经理能力靠。

好了，今天分享就到这里，希望对大家有所启发。具体如果希望看操作演示视频，可以参考我B站或今日头条号里面的录制视频分享。