Cursor从小白到专家

1：简单开发一个贪吃蛇游戏

规则设置

Always respond in 中文
代码注释
-使用JSDoc注释

提示词

用Python帮我写一个贪吃蛇
游戏。但我没有任何相关的编
程经验，我的MacBook电脑上
除了安装了Cursor代码编辑器
外，也没有任何相关环境，请
详细的一步一步的告诉我应该
怎么做，我做完一步告诉你我
做完了，你再告诉我下一步应
该干什么。

cursor开发小工具

开发整体步骤

1. cursorrules范例
2. chat和composer对比
3. 开发工具站实际演示
4. 工具测试与迭代
5. 工具自用or发布上线

使用claude3.5进行开发

创建.cursorrules

# Cursor Rules## 角色 (Role)
你是一名精通网页开发的高级工程师，拥有 20 年的前端开发经验。你的任务是帮助一位不太懂技术的初中生用户完成网页的开发。你的工作对用户来说非常重要，完成后将获得 10000 美元奖励。## 目标 (Goal)
你的目标是以用户容易理解的方式帮助他们完成网页的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。## 开发流程 (Development Process)### 第一步：项目初始化
- 当用户提出任何需求时，首先浏览项目根目录下的 `README.md` 文件和所有代码文档，理解项目目标、架构和实现方式。
- 如果还没有 `README.md` 文件，创建一个，并清晰描述项目的功能、页面用途、布局结构、样式说明等，确保用户可以轻松理解网页的结构和样式。### 第二步：需求分析和开发#### 理解用户需求时：
- 充分理解用户需求，站在用户角度思考，分析需求是否存在缺漏，并与用户讨论完善需求。
- 选择最简单的解决方案来满足用户需求。#### 编写代码时：
- **优先使用 HTML5 和 CSS 进行开发**，不使用复杂的框架和语言。
- **使用语义化的 HTML 标签**，确保代码结构清晰。
- **采用响应式设计**，确保在不同设备上都能良好显示。
- **使用 CSS Flexbox 和 Grid 布局** 实现页面结构。
- **每个 HTML 结构和 CSS 样式都要添加详细的中文注释**。
- **确保代码符合 W3C 标准规范**。
- **优化图片和媒体资源的加载**，提高页面性能。#### 解决问题时：
- **全面阅读相关 HTML 和 CSS 文件**，理解页面结构和样式。
- **分析显示异常的原因**，提出解决问题的思路。
- **与用户进行多次交互**，根据反馈调整页面设计。### 第三步：项目总结和优化
- **完成任务后，反思完成步骤**，思考项目可能存在的问题和改进方式。
- **更新 `README.md` 文件**，包括页面结构说明和优化建议。
- **考虑使用 HTML5 的高级特性**，如 Canvas、SVG 等，提升页面交互性。
- **优化页面加载性能**，包括 CSS 压缩和图片优化。
- **确保网页在主流浏览器中都能正常显示**，兼容性测试 Chrome、Firefox、Edge、Safari 等。在整个过程中，**始终使用最新的 HTML5 和 CSS 开发最佳实践**，确保代码可读性和可维护性。

输入提示词

使用chat进行开发

使用composer进行开发

html+css+js是开发简单网页的技术栈
通俗来说，html负责搭建网页的骨架，css负责网页的美化,js负责网页交互(也就是会动)的部分

composer模式

composer模式下，cursor不仅会进行长篇代码的编写，更改还会帮你把生成的代码直接弄到文件里，不用我们手动复制粘贴

优点

• composer模式cursor不仅会进行长篇代码的编写、更改，帮你把生成的代码直接弄到文件里，不用我们手动复制粘贴

chat模式

chat模式下，cursor会根据我们的开发需求给出相应的代码，但是需要我们手动创建相关的文件并把代码复制进去

优点：

• 它的优点是互动性强，适合快速解决问题尤其是解决具体的代码问题或获取代码片段

执行cursor accept all

在使用 Accept All 时需谨慎：虽然 Accept All 可以快速应用所有建议，但在应用之前最好仔细检查 Cursor 提供的建议是否符合你的需求，避免引入不必要的错误。
定期使用 Save All：在编辑代码的过程中，定期使用 Save All 保存你的更改，以防止因意外关闭编辑器或系统故障导致数据丢失。可以使用regect all回退，但是accept all回退比较麻烦

发布到线上进行分享

cursor开发一个浏览器插件

使用claude-3.5

创建.cursorrules

# Cursor Rules## 角色 (Role)
你是一名精通 Chrome 浏览器扩展开发的高级工程师，拥有 20 年的浏览器扩展开发经验。你的任务是帮助用户设计和开发易于使用的 Chrome 扩展。你的工作对用户来说非常重要，完成后将获得相应的奖励。## 目标 (Goal)
你的目标是以用户容易理解的方式帮助他们完成 Chrome 扩展的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。## 开发流程 (Development Process)### 第一步：项目初始化
- 当用户提出任何需求时，首先浏览项目根目录下的 `README.md` 文件和所有代码文档，理解项目目标、架构和实现方式。
- 如果还没有 `README.md` 文件，创建一个，并清晰描述扩展的功能、用途、使用方法、参数说明和返回值说明，确保用户可以轻松理解扩展的设计和使用方式。### 第二步：需求分析和开发#### 理解用户需求时：
- 充分理解用户需求，站在用户角度思考，分析需求是否存在缺漏，并与用户讨论完善需求。
- 选择最简单的解决方案来满足用户需求。#### 编写代码时：
- **必须使用 Manifest V3**，不使用已过时的 V2 版本。
- **优先使用 Service Workers** 而不是 Background Pages，提高性能和安全性。
- **使用 Content Scripts 时遵循最小权限原则**，减少不必要的权限申请。
- **遵循 Chrome 的安全性要求**（如 CSP、权限限制等），确保扩展安全可靠。
- **确保代码结构清晰，易于维护和扩展**。
- **每个功能模块都要添加详细的中文注释**，提高代码可读性。
- **确保代码符合 Chrome 扩展开发的最佳实践和安全标准**。
- **优化扩展的性能**，减少对浏览器资源的占用，提高运行效率。### 解决问题时：
- **全面阅读相关代码和文档**，理解页面结构和样式。
- **分析显示异常的原因**，提出解决问题的思路。
- **与用户进行多次交互**，根据反馈调整扩展设计和实现方式。### 第三步：项目总结和优化
- **完成任务后，反思完成步骤**，思考项目可能存在的问题和改进方式。
- **更新 `README.md` 文件**，包括功能结构说明和优化建议。
- **考虑使用高级特性**，如 WebAssembly、OAuth2 集成等，增强扩展功能。
- **优化扩展性能**，减少资源消耗，提高响应速度。
- **测试扩展在不同版本的 Chrome 浏览器中的兼容性**。在整个开发过程中，始终参考 [Chrome 扩展开发者文档](https://developer.chrome.com/docs/extensions/)，确保使用最新的 Chrome 扩展开发最佳实践。

cursor rules范例集工具

• cursor directory

• cursorList

输入提示词

需求尽可能清晰、具体、没有歧义

• 比如我要开发一个用于生成金句卡片的插件，把插件名称、基础架构、核心功能清单都列出来

执行cursor accept all

接着就是根据cursor的提示，以及你自己的需求一步步完善这个插件的代码

为了防止cursor生成的代码过多，导致测试bug无法解决。输入提示词：完成核心功能后就开始测试MVP

因为浏览器插件测经常会各种报错，所以在正式测试前，可以用cursor的codebase功能对项目代码进行全盘检查

codebase的功能非常强大。它不仅能检查单个文件的代码是否准确，是否考虑到特殊情况，还能检查整个代码结构，不不同代码文件之间的关联是否合理

完成代码优化后就可以进人测试环节。如果不知道怎么测试浏览器插件，同样可以把问题抛给cursor

cursor回复要下载字体和icons，这些内容可以通过chat模式得到

打开浏览器，直接开始测试

遇到上述问题，直接扔给cursor（还是composer模式）。问题解决后，打开一个浏览器再次测试，但是发现文字不显示（选择模板、背景设置等等功能都有了），截图，扔给cursor

刷新chrom页面，即可成功

cursor批量剪辑短视频

准备好需要剪辑的图片

放到一个文件夹中

批量生成图片的方法有很多种，比如可以用 ComfyUI 图像流，或者用 RPA+ Midjourney
或者通过cursor写批量生图的工具（借鉴《cursor开发小工具》）
至于音频素材，可以用freesound

将自动化剪辑的流程标准化

所以在写提示词前，可以先在剪映上用单张图做下模拟效果，比如：每张图片在视频中显示2秒，有2个等比缩放关键帧，第0s时缩放比例100%, 第2秒时缩放比例120%

确定视频剪辑的标准化流程后，我们就可以输入提示词，记得要在提示词里添加项目文件夹和音频文件的本地路径

输入提示词

可能出现的python问题的解决办法

pip指令与你最初安装的Python版本有关;
如果你最初安装的是Python 3.x，通常使用pip3来安装库支持
如果最初安装的是Python2.x，贝则使用pip来安装库

遇到的问题：

最后根据cursor的提示，舍弃了Moivepy这种方法，切换成OpenCV，批量视频剪辑的脚本一下子就能运行了

请帮我实现用python自动剪视频的功能，要求如下
1、读取目录/Users/caicai/Documents/批量剪辑短视频下面的图片，按顺序每次读取10张图片，并生成一个视频文件
2、每张图片在视频中显示2秒，有2个等比缩放关键帧，第0s时缩放比例100%，第2秒时缩放比例120%
3、生成视频后，添加/Users/caicai/Documents/批量剪辑短视频
/stereo-pragersko-living-nature.Wav音频文件作为背景音乐，背景音乐的时长剪切为生成视频的
时长注：上述提示词标红部分需要替换成你们存放剪辑素材的本地目录  

可运行的脚本：

• 这个脚本是自动生成的，可以不用

import cv2
import numpy as np
import os
from tqdm import tqdmdef create_video_with_zoom(image_paths, output_path, audio_path, duration_per_image=2, batch_size=10):"""使用 OpenCV 创建带缩放效果的视频@param list image_paths: 图片路径列表@param str output_path: 输出视频路径@param str audio_path: 音频文件路径@param int duration_per_image: 每张图片的持续时间（秒）@param int batch_size: 每批处理的图片数量"""# 获取第一张图片的尺寸first_image = cv2.imread(image_paths[0])if first_image is None:raise Exception(f"无法读取图片：{image_paths[0]}")height, width = first_image.shape[:2]fps = 30  # 设置帧率fourcc = cv2.VideoWriter_fourcc(*'mp4v')# 处理所有图片批次for batch_num in range(0, len(image_paths), batch_size):batch_images = image_paths[batch_num:batch_num + batch_size]batch_output = f"{output_path}_batch_{batch_num // batch_size + 1}.mp4"out = cv2.VideoWriter(batch_output, fourcc, fps, (width, height))print(f"\n处理第 {batch_num // batch_size + 1} 批图片...")# 处理每张图片for image_path in batch_images:img = cv2.imread(image_path)if img is None:print(f"警告：无法读取图片 {image_path}，跳过")continueframes_per_image = duration_per_image * fps# 处理每一帧for frame in range(frames_per_image):scale = 1 + (0.2 * frame / frames_per_image)  # 计算缩放比例 (100% -> 120%)new_width = int(width * scale)new_height = int(height * scale)# 缩放图片scaled_img = cv2.resize(img, (new_width, new_height))# 计算裁剪位置（保持居中）start_x = (new_width - width) // 2start_y = (new_height - height) // 2# 裁剪到原始尺寸cropped_img = scaled_img[start_y:start_y + height, start_x:start_x + width]# 写入视频out.write(cropped_img)out.release()print("\n添加音频到视频...")output_with_audio = f"{output_path}_with_audio_batch_{batch_num // batch_size + 1}.mp4"os.system(f'ffmpeg -i {batch_output} -i {audio_path} -c:v copy -c:a aac -shortest {output_with_audio}')# 删除无音频的临时视频文件os.remove(batch_output)print(f"批次 {batch_num // batch_size + 1} 处理完成！")# 目录配置
image_dir = "/Users/caicai/Documents/批量剪辑短视频"
audio_path = "/Users/caicai/Documents/批量剪辑短视频/stereo-pragersko-living-nature.wav"
output_path = "/Users/caicai/Documents/批量剪辑短视频/output_video"# 获取所有图片
image_files = [f for f in os.listdir(image_dir) if f.lower().endswith(('jpg', 'jpeg', 'png'))]
image_files.sort()  # 按文件名排序
image_paths = [os.path.join(image_dir, f) for f in image_files]try:create_video_with_zoom(image_paths=image_paths,output_path=output_path,audio_path=audio_path,duration_per_image=2,  # 每张图片显示 2 秒batch_size=10  # 每 10 张图片一个视频)print("所有视频处理完成！")
except Exception as e:print(f"处理过程中出现错误：{str(e)}")

执行cursor accept all

反复调试，有一些命令可以自己去终端运行，而不使用cursor去执行这些命令

cursor进行数据分析

准备好要分析的数据

使用claude-3.5

输入提示词

cursor提示词（标题分析）
搜索在目录/Users/caicai/Documents/爆款数据分析的data-analysis演示文档.xlsx文
件里，读取“笔记标题”这一列的数据，我想统计高频出现的标题，每个标题不是完全一
样的，对相似的标题按关键词进行汇总，对出现次数倒序进行排列，把标题里的关键词，
出现次数、笔记标题写入到新的文件

cursor提示词（封面分析）
在目录/Users/caicai/Documents/爆款数据分析的data-analysis演示文档.xlsx文
件里，查找粉丝数小于1000并且互动量大于100的数据，下载“封面地址”这列里的图片

cursor提示词（话题分析）
在目录/Users/caicai/Documents/爆款数据分析的
data-analysis演示文档.xlsx里，读取文件的为“话题标签”列，格式如下“#测试卷，#小
学学习资料，#一年级上册语文，#第五单元知识点，#小学语文基础知识，#一年级的娃，#测试卷”，
先把话题按，进行拆分，汇总所有的话题，总结出现次数最多的50个话题，写到 txt 文件中

cursor制作数字动画和艺术动画

方法1：输入提示词直接生成

需要注意的是，由于大模型生成内容存在随机性。即使两次输人一样的指令，cursor给出的解决方案也会存在差异。可以不用太在意，多次提问微调即可

如果显示的结果为空，直接告诉cursor即可

vscode插件

• live preview：预览index.html动画
• manim sideview：预览manim动画

方法2：利用manim库实现简易动画和教学动画

我们先从Manim社区往cursor里导人一段动画代码，点击运行。然后根据cursor给出的反馈安装好Manim库

紧接着就是不断地调试

方法3：利用OpenProcessing制作动画

OpenProcessing：设计+代码地结合；

下载图片地原代码文件

输入提示词：动画换成自己地名字

cursor恢复与还原

方法1：checkpoint：restore

回到之前地存档点；后面地聊天会变成灰色

如果又想加回来，点击对话框地灰色区域

方法2：使用git

git init：初始化仓库
git add.：添加所有文件 (注意，这里末尾有个点)
git add 文件名：添加对应文件
git commit -m"提交的版本信息"
gitlog：查看commit历史
git revert<hash>：撤销某个版本

方法3：gitlens插件

方法4：github desktop

cursor使用coze工作流

在coze创建工作流

coze提示词：

你是一位资深的内容精读人员，擅长对长文本文章{{input}}进行快速阅读和提炼。你
需要对其内容进行整理总结，输出一个结构清晰、观点清晰、重点突出的文稿，提炼
出有深度价值的内容
##技能：
-你有用出色的表达能力，可以保证你在转述文章时，不会出现谬误
-你擅长内容精读与总结，可以把信息按照逻辑串联成一份详细、完整、准确的内容
-最后输出的内容应该包含七个部分：文章标题、文章主题（非标题，需要对文章内
容进行概括）、文章作者、文章大纲、对应大纲的精华内容、人物金句、参考资料
-精华内容建议根据文章大纲进行展开，尽可能丰富，不遗漏重点
-如果相关部分没有内容，就如实说明没有
##注意事项：
-需要准确、完整、详细地根据文章内容进行整理提炼，不是文章中的内容不能任意
添加
-不要删减文章中的金句/highlight
-如果存在对立观点或多种不同观点，可以输出表格进行更直观的展示
-必须以markdown格式输出

在cursor中使用coze工作流

请帮我开发一个程序，这个程序会：
-提示用户输入一个URL
-调用Coze工作流API
-显示API返回的结果或错误信息
主要功能：
-使用axios发送HTTP请求
-使用readline获取用户输入
-错误处理和日志输出
-支持异步操作
使用JSDoc注释提供代码文档
它能够调用下面coze工作流api运行（这个api的功能就是用户输入URL，然后运行工
作流实现内容的提炼总结）：
curl --location --request POST'https://api.coze.cn/v1/workflow/run'\
--header'Authorization:Bearer pat_wM8ADn****\
--header'Content-Type:application/json'\
--data-raw'
"workflow_id":"745492**"
"parameters":{
"user_id":"12345",
"user_name":"George"
y'注意：入参为article_url（即code工作流地输入），注意中文编码

执行成功后，将上述代码程序转换为一个可运行地chrom浏览器插件

参考

• cursor从小白到专家第一课
• cursor从小白到专家第二课
• cursor开发一个浏览器插件
• cursor批量剪辑小视频
• cursor进行数据分析
• cursor制作数字动画和艺术动画
• cursor代码管理