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

文章目录

• • • 1. 定价
    • • 使用DeepSeek估价
      • 小红书调研
      • 2. 确定工作事项
      • • 利用DeepSeek生成具体工作事项
        • 3. 和客户沟通
        • • 约会议沟通
          • 确定内容样式
          • 4. 前端部分设计
          • • 使用DeepSeek生成UI设计
            • 在Cursor中生成并提问
            • • 前置条件
              • 开始编程
                • 关注不迷路，励志拆解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中去解决几次，这个过程中我处理了几次报错

                                

                                

                                

                                

                                

                                • 最终效果