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 tqdm

def 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}，跳过")
                continue
            
            frames_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) // 2
                start_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从小白到专家第一课
• cursor从小白到专家第二课
• cursor开发一个浏览器插件
• cursor批量剪辑小视频
• cursor进行数据分析