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

news2025/4/15 9:07:51

文章目录

      • 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中去解决几次,这个过程中我处理了几次报错

  • 最终效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2334042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java数组06:Arrays类

Arrays类 数组的工具类java.util. Arrays 由于数组对象本身并没有什么方法可以供我们调用,但API中是了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作。 查看JDK帮助文档 Arrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用…

TQTT_KU5P开发板教程---实现流水灯

文档实现功能介绍 本文档是学习本开发板的基础,通过设置计数器使led0到led7依次闪烁,让用户初步认识vivado基本的开发流程以及熟悉项目的创建。本开发板的所有教程所使用的软件都是vivado2024.1版本的。可以根据网上的教程下载与安装。 硬件资源 此次教程…

Model Context Protocol(MCP)模型上下文协议

Model Context Protocol(MCP)模型上下文协议 前言一、什么是MCP二、MCP的作用三、MCP与Function call对比四、构建一个简单的MCP DEMO环境准备实现MCP Server运行 ServerMCP Client端配置验证 总结 前言 在Agent时代,将Agent确立为大模型未来…

第十二章:FreeRTOS多任务创建与删除

FreeRTOS多任务创建与删除教程 概述 本教程介绍FreeRTOS多任务的创建与删除方法,主要涉及两个核心函数: 任务创建:xTaskCreate()任务删除:vTaskDelete() 实践步骤 1. 准备工程文件 复制005工程并重命名为006 2. 创建多个任务…

Seed-Thinking-v1.5:字节豆包新推理模型发布,200B参数战胜Deepseek

摘要 本文引入了Seed-Thinking-v1.5,能够在响应之前通过思考进行推理,从而提高了各种基准测试的性能。Seed-Thinking-v1.5在AIME 2024上获得86.7分,在Codeforces上获得55.0分,在GPQA上获得77.3分,展示了优秀的STEM和编…

AIDD-人工智能药物设计-提升分子预测反事实解释可靠性

UQ 过滤:提升分子预测反事实解释可靠性 目录 I-INF 指标结合 F1 评分,为评估大分子复合物(包括 RNA-蛋白质)的界面相互作用网络提供了可靠且全面的新方法。通过使用生成的人工 CAR 序列微调蛋白质语言模型(PLM),显著提高了 CAR-T 细胞活性的预测准确性,有效克服了合成蛋…

【前端】webpack一本通

今日更新完毕,不定期补充,建议关注收藏点赞。 目录 简介使用webpack默认只能处理js文件 ->引入加载器对JS语法降级,兼容低版本语法合并文件再次打包进阶 工作原理html-webpack-plugin插件webpack开发服务器引入使用webpack-dev-server模块…

代码学习总结(一)

代码学习总结(一) 这个系列的博客是记录下自己学习代码的历程,有来自平台上的,有来自笔试题回忆的,主要基于 C 语言,包括题目内容,代码实现,思路,并会注明题目难度&…

第十五届蓝桥杯C/C++B组省赛真题讲解(分享去年比赛的一些真实感受)

试题A——握手问题 一、解题思路 直接用高中学的排列组合思路 二、代码示例 #include<bits/stdc.h> using namespace std; int fun(int n) {int sum0;for(int i0;i<n;i){for(int ji1;j<n;j)sum; } return sum; } int main() {cout<<fun(50)-fun(7); }三、…

【Qt】qDebug() << “中文测试“; 乱码问题

环境 Qt Creator版本&#xff1a;4.7.1 编译器&#xff1a;MSVC2015_32bit 解法一 在.pro文件中添加 msvc:QMAKE_CXXFLAGS -execution-charset:utf-8注意&#xff1a; 1、需要清理项目&#xff0c;并重新qmake&#xff0c;然后构建。 测试项目下载&#xff1a;https://do…

Vue接口平台学习六——接口列表及部分调试页面

一、实现效果图及界面布局简单梳理 整体布局分左右&#xff0c;左边调试&#xff0c;右边显示接口列表 左侧&#xff1a; 一个输入框按钮&#xff1b;下面展示信息&#xff0c;大部分使用代码编辑器就好了&#xff0c;除了请求体传文件类型需要额外处理。然后再下方显示响应信…

【C语言】预处理(下)(C语言完结篇)

一、#和## 1、#运算符 这里的#是一个运算符&#xff0c;整个运算符会将宏的参数转换为字符串字面量&#xff0c;它仅可以出现在带参数的宏的替换列表中&#xff0c;我们可以将其理解为字符串化。 我们先看下面的一段代码&#xff1a; 第二个printf中是由两个字符串组成的&am…

低频rfid手持机,助力动物耳标智能化管理

低频RFID手持机&#xff0c;助力动物耳标智能化管理&#xff0c;正逐步成为现代畜牧业不可或缺的工具。它不仅能够高效读取动物耳标中的信息&#xff0c;如唯一识别码、疫苗接种记录、健康状态等&#xff0c;还极大地提升了数据录入的准确性和时效性。 1.精准识别与追踪‌ 通过…

【从零开始学习JVM | 第三篇】虚拟机的垃圾回收学习(一)

堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时&#xff0c;Java 自动内存管理最核心的功能是 堆 内存中对象的分配与回收。 Java 堆是垃圾收集器管理的主要区域&#xff0c;因此也被称作 GC 堆&#xff08;Garbage Collected Heap&am…

Jieba分词的原理及应用(三)

前言 “结巴”中文分词&#xff1a;做最好的 Python 中文分词组件 上一篇文章讲了使用TF-IDF分类器范式进行企业级文本分类的案例。其中提到了中文场景不比英文场景&#xff0c;在喂给模型之前需要进行分词操作。 分词的手段有很多&#xff0c;其中最常用的手段还是Jieba库进行…

Openlayers:flat样式介绍

在前段时间我在使用WebGL矢量图层时接触到了flat样式&#xff0c;我对其十分的感兴趣&#xff0c;于是我花了几天的时间对其进行了了解&#xff0c;在这篇文章中我将简单的介绍一下flat样式的使用方式以及我对其的一些理解。 一、了解flat样式 1.什么是flat样式&#xff1f; …

149页研读——华为基于IPD全过程研发质量管理【附全文阅读】

本文介绍了IPD(集成产品开发)的全过程研发质量管理,强调了以客户需求为导向,通过跨部门协同、资源整合、快速响应等方式提高研发效率和成功率。文章详细阐述了IPD研发管理体系的精要,包括其核心思想、优势、框架以及核心理念。 其中,跨领域平台与技术研发、端到端流程与项…

Oracle 23ai Vector Search 系列之5 向量索引(Vector Indexes)

文章目录 Oracle 23ai Vector Search 系列之5 向量索引Oracle 23ai支持的向量索引类型内存中的邻居图向量索引 (In-Memory Neighbor Graph Vector Index)磁盘上的邻居分区矢量索引 (Neighbor Partition Vector Index) 创建向量索引HNSW索引IVF索引 向量索引示例参考 Windows 环…

vue模拟扑克效果

vue模拟扑克效果 效果图&#xff1a; step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue <template><div class"poker-container"><!-- 使用复合数据对象实现双行显示 --><divv-for"(card, index) in POKER_…

Android12源码编译之预置Android Studio项目Android.mk文件编写

1、在AndroidManifest.xml文件中添加package"com.sprd.silentinstalldemo"属性&#xff0c;因为新版本的Android Studio默认生成的AndroidManifest.xml是没有这个属性值的 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:an…