AI编程案例拆解|基于机器学习XX评分系统-前端篇

• 关注不迷路，励志拆解100个AI编程、AI智能体的落地应用案例
• 为了用户的隐私性，关键信息会全部打码

1. 定价

想拿下项目，我们的报价要合理且有竞争力。

使用DeepSeek估价

• DeepSeek工具：利用DeepSeek的联网搜索+深度思考功能，可以快速获取市场上类似项目的估价。

• 提示词如下
  

小红书调研

• 市场调研：由于淘宝和咸鱼的关键词禁用，我们选择在小红书上进行调研，了解用户对类似系统的需求和价格接受度。

最后由于只做代码和项目难度综合参考，定价为1000

2. 确定工作事项

拿下项目后开始明确具体的工作事项，保存下来为自己列一个todo_list

利用DeepSeek生成具体工作事项

提示词如下，同时要勾选深度思考模式

• 输入项目要求：将项目的整体目标和需求输入DeepSeek，让其分析并生成详细的工作事项列表。

3. 和客户沟通

这一步可以说是重中之重，即使用户说随便做一个，也要约好会议沟通,这可以为我们剩下很多工作量：

约会议沟通

• 准备材料：在会议前准备好项目概要、最好可以先生成一个前端的mvp版本代码后再拉会沟通、初步设计方案以及任何需要客户确认的细节。

确定内容样式

• 需求确认：在会议中，与客户详细讨论项目需求，确保对功能和设计的理解一致。
• 样式选择：根据客户的偏好，确定系统的视觉风格和用户界面设计。
• 反馈收集：记录客户的意见和建议，以便在后续开发中进行调整。

4. 前端部分设计

使用DeepSeek生成UI设计

提示词如下

在Cursor中生成并提问

前置条件

作为vue项目,本地需要先安装好vue环境,npm命令等等。

开始编程

• 使用脚手架初始化项目：
  这里选择使用vite,框架类不要依赖AI生成，会有很多随机性

npm create vite@latest

依次输入项目名称score-vue,上线按钮选择:vue,JavaScript

注意 创建后需要通过打开文件夹进到创建好的vue项目根目录中，否则会出现读不到项目的情况，可以通过ctrl+O 快捷键 或者 左上角的 file -> open folder的方式打开

• 生成代码：

先将大纲输入给agent模型

接着将deepseek输出的每个页面的样式依次输入到agent模式聊天框中

登录页

录入页

展示页

全部生成完成后，启动项目，页面点击
Terminal->New Terminal

# 安装依赖
npm install
# 启动项目
npm run dev

效果展示

登录

录入页

展示页

注意 这里出现了一个小插曲,点击提交按钮后没有调整到展示页，这种情况下一般都是报错了，谷歌浏览器F12查看报错信息

有多少报错就扔到cursor中去解决几次，这个过程中我处理了几次报错

• 最终效果