如何拆解用户功能？详解30分钟用Cursor写订餐小程序过程

有一天某个读者朋友的咨询启发了我，因此用Cursor写了个小程序。需求非常简单：公司内部订餐用，需要带有统计功能。

考虑到这个订餐小程序可能不会有配套的后台，因此需求一共拆分成两部分：管理员页面——用作上传菜品、统计、分发管理员工权限；用户页面——选择每一餐的餐品下单，供后勤人员分配餐点用。

由于这是内部系统用的，因此无论是管理员页面还是员工用户页面，都需要用工号+姓名（配置权限或分配餐点时用）+密码校验。

管理员页面的功能拆解

1.登录-上传菜品：支持手动输入和Excel导入（如果是三餐制那需要的菜品就非常多了，因此需要批量上传的功能）

2.设定三餐菜品的选择时间（预留时间给后勤人员准备食材）

3.查看三餐菜品统计（数量反馈给后勤人员制作餐点，行政人员核算原材料成本）

4.餐点统计导出（分析菜品情况，哪些可以去除，哪些菜品可以考虑新增，分析每日就餐员工数量，增加或减少，方便行政人员统计分析）

5.员工账号分配（新增/修改/删除离职人员账号、分配管理员权限）

员工页面的功能拆解

1.登录（工号+姓名+密码校验）

2.选择每餐菜品-支持三餐选择时间内，不限次数的修改-

3.查看个人的历史选择菜品（可以作为彩蛋功能，月/年度报告统计个人用餐情况，做员工内部文化激励用）

需求捋顺了，那就可以解构成prompt给Cursor了。这是我的解构——

根据以上提示，和Cursor磨合了大概30分钟，管理页面和员工使用页面就做出来了。

打开小程序的首页

由于在测试过程中出现了输入框高度和函数复写的问题，导致初始时输入框无法输入，所以底部增加了普通用户登录和管理员登录的选项，实际上输入框是能正常使用的。

员工登录展示

员工登录选餐

管理员登录页面展示

管理员页面修改每餐餐品

管理员手动输入新增菜品

新增菜品支持删除

每餐统计功能界面

权限管理功能页面

新增/修改员工权限

重置员工密码

修改员工权限

至此，前端页面已经全部调试完成，由于我懒得用微信云开发，这个测试的demo里关于历史数据的统计是空白的，每次重新进入后数据都会清空。实际上让后端给个API做统计用，接入也会非常迅捷。

下面是操作录屏：

管理员界面

用户界面

事实上纯小白（比如我）用Cursor写前端的难度已经远比更早之前的Cursor要低得多，尤其是它已经接入了Claude 3.7的推理模式和常规模式。

以上的Demo是用thinking（推理）模式搓出来的，在整个过程可以看到它的思维链，但不同于DS R1的长篇大论，它更精炼，在开始进行操作时，会针对性一步步罗列出来，不知道大家的使用习惯如何，就我个人喜欢逐点罗列再解决的思考模式来说，我认为这是非常大的改进。

简练的思维链

逐点安排如何修改

这一点对于新手或者正在熟悉代码的朋友来说，非常重要，能够很大程度帮助使用者阅读代码。

据闻白嫖Cursor的教程逐渐也行不通了，就官方这个极快的跟进速度和迭代，我个人觉得小氪一点无伤大雅。

以上的Demo不是说一点问题都没有，比如标题栏需要去除，页面顶部的排版还需要再优化等等，但相对来说使用的时间更少，关键点在于如何梳理好需求、将功能一一拆解并给出一个大框架，这样这些AI Coding的工具才能更好发挥效用，人力修补的过程也会大大缩短——比如Demo的一版出现的输入框复用问题无法输入、管理员界面的高度不够导致视觉错乱、输入菜品名称无法保存这些问题，再我调整了prompt之后将页面全部拆开、再大致描述一下，出来的成品几乎没有什么大问题。

整场实测，即便是在仓促间进行、需求的一些细节其实没有落实到位：比如支持批量导入员工信息，批量删除员工账号，实现菜品二级分类多类别增删（目前只有Demo中的荤菜/素菜/汤品/小食几个类别），超过选择时间点侧边栏未置灰。这样一个既带有后台管理功能、能上传菜品、统计、分配员工权限；又可以在前端使用的订餐小程序，大概也就花了30分钟。

题图：AI

长文制作不易，如果可以，希望您点个赞~设置星标，更新内容不错~