Spiga

程序员的AI体验(二):Cursor初体验

2025-05-10 17:58:58

一、安装Cursor

  1. 官网下周window版本,2025-6-5发布了1.0版本 Cursor - The AI Code Editor

  2. 设置语言包,跟vscode设置方法一样。(Cursor就是基于VSCode开发的)

  3. 设置Cursor

    • 文件--->自动保存

    • 文件--->首选项--->功能--->终端:window默认上终端配置文件,选择 git bush

    • 设置Cursor所选的模型:取消自动

    • 配置规则:

      • 总是使用简体中文来进行回复

      • 也可以添加项目规则,如

        -总是使用uv作为Python环境和包管理工具
        -总是将wsl+Ubuntu作为开发环境
        -所有函数必须团结类型注释
        -函数名使用snake_case,类名使用PascalCase
        -所有api都应该遵循restful规范
        -注释必须使用简体中文
        -总是遵循《代码整洁之道》
        -总数遵循《设计原则与设计模式》
        
  4. 定价 Pricing | Cursor - The AI Code Editor

  5. 配置linux开发环境

    • 安装wsl:wsl install
    • 安装 uv:curl -LsSf https://astral.sh/uv/install.sh | sh
    • 安装python环境:uv python install --preview
    • 安装pip:sudo apt install python3-pip
    • Cursor里面安装wsl插件
    • 在Cursor左下方的按键就可以连接到wsl子系统了
    • 连接上后在使用 /mnt挂在本机文件夹

二、生成前台代码体验

  1. 生成Login前台页面

    • 初学者使用AI生成login页面的提示词

    • 规范化提示词

    请在login目录中设计一个响应式、风格美观的登录页面,页面应包含用户名和密码输入框,以及一个登录按钮。
    请分别从HTML结构、CSS样式、JavaScript功能三个方面实现,确保用户体验良好,并具备基础的交互逻辑
    
    创建一个标准的HTML登录页面结构,要求如下:
    -页面居中显示,使用一个主容器;
    -包含输入字段:用户名(type="username)和密码(type=password)
    -包含一个提交按钮,用于登录
    -所有输入框和按钮放在一个表单<form>中;
    -每个输入区域使用语义化标签,适当嵌套和分组,方便样式和交互控制
     
    使用TailwindcsS美化登录页面,样式要求如下:
    -页面背景色使用浅灰色或变色;
    -登录容器居中
    -容器宽度适中,带圆角、阴影、内边距;
    -输入框需带边框、圆角、hover和focus效果(如边框颜色变化);
    -按钮使用主色背景,带hover效果、圆角、阴影
    
    保证移动端响应式
    -整体风格简洁现代,颜色对比清晰,字号适中
    -添加基础的JavaScript功能用于增强用户体验:
    -拦截表单提交事件,防止默认刷新页面
    -校验用户名和密码是否为空,若为空则给出提示;
    -若内容填写完整,模拟登录成功(比如弹出提示框)
    -所有逻辑使用原生JavaScript实现,无需外部依赖。
    

    安装live server即可运行查看效果

  2. 按提示词生成前台代码

    请在news目录中创建一个响应式卡片式新闻网站的基础项目结构,要求如下:
    项目结构应包括:
    -index.html:主页面,包含基本的HTML5结构和响应式设计的meta标签。页面展示新闻卡片,每个卡片应包括图片、标题、摘要、原文跳转链接,整体布局采用卡片式设计。
    
    -styles.css:样式文件,包含以下内容
     -基本的CSSReset样式。
     -卡片组件的样式设计(包括阴影、圆角、图片比例控制、悬停动画等)。
     -支持主题色切换(默认主题为“中国红”,使用CSS变量或类名切换机制)。
      
    -mainjs:JavaScript文件,包含以下功能:
     -基本的DOM操作示例。
     -动态加载新闻数据并染卡片。
     -页面支持用户选择主题色(如中国红、蓝色、深色),并可实时切换主题。
      
    -images/:图像资源文件夹,用于存放示例新闻封面图片。
      
    -README.md:项目说明文档,应包括以下内容
     -项目简介:新闻类网站,采用卡片式展示风格,支持多主题切换。
     -使用说明:直接打开index.htm即可预览效果。
     -项目结构解释与后续扩展建议(如接入接口、使用框架重构等)。
     
    -其他要求
     -使用语义化HTML标签(如section>、<article>、<header>等)。
     -页面布局适配PC和移动端,推荐使用Flexbox或CSSGrid实现响应式。
     -新闻摘要限制为两到三行,超出部分使用省略号处理,确保卡片整洁。
    
  3. 添加新主题:最好是开一个新的聊天窗口来完成

  4. 代码补全

  5. 添加新功能:页脚加联系方式

    在footer中增加关于站长的联系方式,内容如下:
    -邮箱:liuyz@qq.com
    -微信号:邮箱前
    -在线时间:8:00~18:00
    要求:
     -为联系项添加合适图标
     -邮箱可以点击
    
  6. 代码审计、bug排查

    调整到ask模式
    请结合新闻页面,请对代码进行如下分析:
    -请对代码进行审计,是否符合前端开发规范
    -对不符合开发规范的代码,尝试进行重构
    -请对代码进行分析,是否存在bug
    -请对代码进行分析,是否存在性能问题
    

三、生成后台代码体验

  1. 梳理需求生成原始需求文档

    
    
  2. 根据需求文档生成架构文档

    你是一个资深的软件开发架构师,请基于以下需求提供详细架构方案
    
    ##背景
    我正在开发一个销售数据分析系统,采用前后端分离架构。后端使用.netcore实现,主要提供以下功能
    -处理并清洗CSV格式的销售数据
    -对数据进行统计与分析
    -提供基于WebAPI的CSV上传和数据查询接口,供前端访问
    
    ##目标
    1.提供后端部分的详细架构方案
    2.选择合适的.netcore技术栈(包括框架与库)来实现数据处理与API功能
    3.设计并搭建一个合理的基础项目结构
    4.规划开发流程,便于后续逐步开发并与你沟通实现细节
    
    ##具体要求
    -数据源为CSV文件,内容为销售数据
    -数据处理需包含数据清洗、转换和聚合等基本操作
    -WebAPI需支持CSV数据上传,以及基本的查询功能
    -技术选型需考虑敏捷开发,适合小型项目
    -项目结构需清晰,便于扩展与调试
    
    ##输出格式
    1.系统架构详细说明(可以使用架构图)
    2.技术栈选择(列出库名称与用途)
    3.基础项目结构目录(树状结构)
    4.API设计(按类别列出API说明)
    5.分阶段的开发步骤(每步说明目的与关键操作)
    
    架构方案中不要出现任何代码
    
  3. 根据架构文档生成开发文档

    你是一个资深的软件开发工程师,请根据《销售数据分析系统架构方案》规划项目的开发步骤,生成详细的开发文档,保证开发者可以根据开发文档的指导,一步步的开发出实际项目。
    ##文档要求
    我需要将整个开发过程拆解为若干有逻辑顺序的开发步骤,以形成实际可行的开发文档。开发文档中的每一步都必须遵循《销售数据分析系统架构方案》,并包含:
    -详细的业务描述
    -清晰的实现流程
    -必要的技术要求
    -推荐的工具或库(如需要)
    -其它说明性内容(如需要)
    
    ##格式要求
    请按以下格式输出每个步骤的文档
    
    ###步骤X:<步骤标题>
    
    **业务背景:**
    说明项目背景、架构以及该步骤在项目中的阶段
    
    **业务目标:**
    说明该步骤在业务流程中的目的或价值
    
    **实现内容:**
    详细说明具体的开发任务和操作流程,包含模块设计、数据结构、接口定义、逻辑说明等。
    
    **技术要求:**
    列出推荐使用的库、框架、配置说明、版本要求等(如有)
    
    **其它说明:**
    提供该步骤其它的说明性内容:如业务逻辑实现流程、代码组织结构、依赖包、代码模板等,不需要编写实际代码
     
    
  4. 根据开发文档生成.net代码

    你是一位资深的软件开发工程师,你需要根据《销售数据分析系统开发文档》准确无误的完成《开发目标》中未完成的开发步骤,不要擅自处理开发目标中未指定的步骤。
    ##开发目标:
    -步骤1:项目初始化与基础结构搭建(已完成)
    -步骤2:数据库模型设计与配置(未完成)
    
    ##开发要求
    -充分理解步骤中的《业务背景》与《业务目标》。
    -遵循步骤中所有的《技术要求》与《其它说明》,完成步骤中所有的《实现内容》
    -完成开发任务后,对照《实现内容》,说明已完成内容与未完成内容。
    -开发时需要参考《销售数据分析系统架构方案》
    
  5. 生成单元测试

  6. 根据生成的代码进行功能测试

    你是一位资深的软件测试工程师,你需要根据《销售数据分析系统开发文档》完成《测试目标》中指定的测试任务,不要擅自处理测试目标中未指定的步骤。
    ##测试目标:
    -步骤1:项目初始化与基础结构搭建
     
    ##测试要求
    -测试时可以参考《销售数据分析系统架构方案》
    -测试目标步骤中的所有《实现内容》
    -测试完成后,提供测试报告。