22-尚硅谷Cursor使用教程，2小时玩转cursor，cursor无限续杯

https://www.bilibili.com/video/BV1aDMezREUj/?spm_id_from=333.788.comment.all.click&vd_source=98f3349ab95218044e2c42b526a191ca

image

 

这张图片是一份关于 Cursor 代码编辑器的教程文档截图，主要涵盖了 Cursor 的概述、核心功能、与其他工具的对比以及安装步骤。

核心内容分析

1. Cursor 概述 (2.1 概述)

文档首先定义了 Cursor 是一款“AI 优先”的代码编辑器，旨在通过 AI 增强开发工作流。它强调了三个核心优势：

  • 深度集成 AI 模型：不仅仅是简单的插件接入，而是让 AI 成为核心交互方式。支持代码块对话、项目级对话和模型自由选择。
  • 强上下文理解能力：能自动识别项目文件、代码块和错误信息，提供更精准的修改建议。
  • 对话式开发体验：用户只需用自然语言沟通，Cursor 就能根据指令完成任务，降低了编程门槛。

2. 视觉展示

文档中间插入了一张宣传图，醒目地写着“AI 代码编辑器”，并配有标语“旨在让你获得超凡的生产力，Cursor 是使用 AI 编写代码的最佳方式”。图片展示了 Cursor 的界面，右侧有一个 AI 对话框，正在分析代码并提出修改建议，直观地展示了其 AI 辅助编程的功能。

3. 与其他编辑工具的对比

文档将 Cursor 与主流编辑器进行了对比，以突出其特点：

  • 对比 VS Code：Cursor 基于 VS Code 打造，界面和基础操作高度相似，用户可以无缝切换。
  • 对比 JetBrains IDEA：Cursor 提供了 AI 驱动的现代编码体验，可以作为 JetBrains IDE 的替代品，但习惯了 JetBrains 的程序员可能需要适应。

4. 安装指南 (2.2 安装)

文档最后提供了简要的安装步骤：

  • 访问官网 cursor.com 下载。
  • 运行安装程序。
  • 通过桌面快捷方式启动。

总结

这张图片是一份 Cursor 编辑器的入门介绍，它不仅解释了 Cursor 是什么、有什么核心优势，还通过与 VS Code 和 JetBrains 的对比，帮助用户理解其定位。对于熟悉 VS Code 的用户来说，Cursor 是一个无缝衔接的 AI 增强版选择。

image

 

这张图片是一份关于 Cursor 代码编辑器的详细教程文档，内容聚焦于其安装、登录以及如何绕过免费试用限制（俗称“无限续杯”）。

核心内容分析

1. 安装指南 (2.2.1 安装)

  • 下载：指引用户访问 cursor.com 官网下载，并提到资料文件夹中有版本 0.50.7 的安装包。
  • 安装与启动：步骤非常基础，即运行安装程序，然后通过桌面快捷方式启动。

2. 登录流程 (2.2.2 登录)

  • 注册方式：支持邮箱、Google 或 GitHub 账号登录。
  • 免费试用：明确指出新用户有 14 天 的免费试用期。

3. “无限续杯”教程 (2.2.3 无限续杯)

这是文档最核心、也最具争议的部分。它详细介绍了如何在 14 天试用和 50 次高级提问额度用尽后，通过技术手段绕过限制，继续免费使用。

  • 原理分析：文档解释了 Cursor 通过 邮箱账号 和 电脑机器码 两个维度来识别用户。
  • 解决方案：
    1. 解决邮箱问题：推荐使用 2925.com 这类支持“子邮箱”或“别名邮箱”的服务。例如，用 atguigu@2925.com 注册后，可以无限生成 atguigu123@2925.com、atguiguabc@2925.com 等新邮箱，从而绕过邮箱限制。
    2. 解决机器码问题：文档指出，仅换邮箱不够，因为机器码未变。为此，它推荐了一个名为 yeongpin/cursor-free-vip 的开源项目，声称可以重置机器码。
  • 操作步骤：
    • 从 GitHub 下载 cursor-free-vip 软件。
    • 以管理员身份运行。
    • 选择“重置机器ID”功能。

总结

这份文档不仅是一份简单的安装指南，更是一份“破解”教程。它详细地指导用户如何通过组合使用“别名邮箱”和“机器码重置工具”来无限期地免费使用 Cursor 的高级功能。

需要特别注意的是，这种行为违反了 Cursor 的服务条款，属于非正当使用。虽然文档以“学习意图”为由进行辩解，但这种做法存在法律和道德风险，且使用来路不明的第三方工具（如 cursor-free-vip）可能带来安全风险。

image

 

这张图片展示了一个名为“Cursor使用教程”的文件夹内容，其中包含了两个与 Cursor 代码编辑器相关的可执行文件，它们分别用于安装官方软件和绕过其付费限制。

文件分析

1. CursorSetup-x64-0.50...exe

这是一个标准的软件安装包。

  • 名称：CursorSetup-x64-0.50...exe
  • 类型：应用程序（安装程序）
  • 大小：113.846 MB
  • 作用：这是从 Cursor 官方网站下载的正式安装程序，用于在你的电脑上安装 Cursor 代码编辑器。x64 表示它适用于 64 位操作系统，0.50 是其版本号。

2. CursorFreeVIP_1.11.03_windows.exe

这是一个非官方的第三方工具，通常被称为“破解工具”或“激活工具”。

  • 名称：CursorFreeVIP_1.11.03_windows.exe
  • 类型：应用程序
  • 大小：21.475 KB
  • 作用：根据文件名中的 FreeVIP 和 1.11.03 版本号判断，这是一个旨在绕过 Cursor 官方付费订阅限制的工具。它的功能是修改或重置 Cursor 用于识别用户试用资格的本地数据（如机器码），从而实现无限期免费使用其 Pro（专业版）功能。

关联与风险

这两个文件出现在同一个“使用教程”文件夹中，清晰地表明这份教程的目的不仅是教用户如何安装 Cursor，更重要的是指导用户如何“免费”使用其高级功能。

需要特别警惕的是：

  • 安全风险：CursorFreeVIP 这类非官方工具来源不明，极有可能携带病毒、木马或恶意软件，会严重威胁你的电脑安全和代码隐私。
  • 合规风险：使用此类工具破解软件属于侵犯版权的行为，违反了 Cursor 的服务条款。
  • 稳定性风险：这类破解工具可能会导致软件运行不稳定、崩溃或无法正常更新。

总而言之，这张图片揭示了网络上流传的一种通过非正当手段获取商业软件高级功能的做法，但其背后潜藏着巨大的安全和法律风险。

image

 

image

 

这张图片是一份关于 Cursor 代码编辑器设置的详细教程，它清晰地将 Cursor 的配置分为了两大类：AI 相关设置和编辑器基础设置，并解释了它们各自的功能和区别。

核心内容分析

1. 设置项对比表

图片顶部的表格清晰地对比了 Cursor Settings 和 Editor Settings 的核心差异：

  • 功能定位：Cursor Settings 专注于管理 AI 相关功能（如模型选择、AI 行为规则），是 Cursor 的独有功能；而 Editor Settings 则用于调整编辑器的基础行为和外观（如字体、主题），大部分继承自 VS Code。
  • 影响范围：前者影响 AI 生成代码、分析代码和对话的效果；后者影响代码编辑的视觉和操作体验（如排版、颜色）。

2. Cursor AI 相关设置 (2.3.1)

这部分是教程的重点，详细介绍了 Cursor 独有的 AI 配置项，可以通过 Cmd/Ctrl + Shift + J 快捷键打开。

  • General (常规)：管理账户、同步设置、导入 VS Code 配置和隐私设置。
  • Features (功能)：开启或关闭 AI 代码补全、对话模式（Ask, Edit, Agent）等核心功能，并可微调其参数（如触发灵敏度）。
  • Models (模型)：允许用户选择不同的 AI 模型，并可配置自定义模型的 API Key。
  • Rules (规则)：可以制定代码检查、格式化和重构的规则，约束 AI 的行为，使其生成的代码更符合项目规范。
  • MCP：配置多文件操作的行为，如批量编辑代码的方式。
  • Indexing (索引)：定义需要被 AI 索引的代码库路径，以提高 AI 对代码上下文的理解能力，并可设置排除规则。
  • Beta (测试版)：用于开启或禁用 Cursor 的测试功能，让用户提前体验新特性。

3. Cursor 编辑器设置 (2.432)

这部分说明了如何调整编辑器的基础外观和行为，其操作方式与 VS Code 完全一致。

  • 访问方式：通过命令面板（Cmd/Ctrl + Shift + P）输入 Preferences: Open Settings (UI)。
  • 设置内容：图片下方的截图展示了“常用设置”（Commonly Used），包括自动保存（Auto Save）、字体大小（Font Size）、字体家族（Font Family）等，这些都是标准的代码编辑器配置。

总结

这张图片是一份非常实用的 Cursor 配置指南。它帮助用户理解 Cursor 的双重身份：一个强大的 AI 编程助手和一个功能完善的代码编辑器。通过区分 Cursor Settings 和 Editor Settings，用户可以更有针对性地进行配置，既能优化 AI 的编程辅助效果，也能打造符合个人习惯的编码环境。

image

 

这张图片展示的是 Cursor 代码编辑器的“通用设置”（General Settings） 界面，重点突出了账户信息和隐私模式两个关键配置区域。

账户信息（红色框选区域）

界面顶部的“Account”模块显示了当前用户的登录状态和账户管理选项。

  • 登录邮箱：当前登录的账户是 zhaoweifeng2222@2925.com。这个邮箱域名 2925.com 与之前教程中提到的用于“无限续杯”的别名邮箱服务一致，表明用户正在使用一个临时或别名邮箱来注册和登录。
  • 账户操作：
    • Upgrade to Pro：升级到专业版（付费）。
    • Manage：管理账户订阅和设置。
    • Log out：退出当前账户。

隐私模式（蓝色框选区域）

界面下方的“Privacy mode”模块是保护用户代码隐私的核心设置。

  • 功能说明：该设置决定了用户的代码是否会被 Cursor 公司存储。开启后，用户的所有代码都将保持私密，不会被用于改进 Cursor 的模型。
  • 当前状态：下拉菜单显示为 Enabled (all code remains private)，即已启用。这意味着用户已选择最高级别的隐私保护，确保其代码不会被上传或用于训练 AI。
  • 设置级别：文档明确指出这是一个“machine-level setting”（机器级设置），而非账户级设置，意味着它作用于当前这台电脑上的所有项目，与登录的账户无关。

总结

这张截图展示了一个经过“优化”配置的 Cursor 环境：用户通过一个临时邮箱登录，并启用了严格的隐私模式。这种配置组合通常出现在希望免费、匿名且安全地使用 AI 编程工具的用户群体中，与前文提到的“无限续杯”教程思路一脉相承。

image

 

image

 

这张图片是 Cursor 编辑器教程 的一部分，主要讲解了设置的作用范围（User 与 Workspace 的区别）以及如何将界面汉化为中文的详细步骤。

核心内容分析

1. User（用户）设置与 Workspace（工作空间）设置的区别

文档首先澄清了两种不同层级设置的概念，这对于理解配置如何生效至关重要：

  • User（用户）设置：

    • 作用范围：全局性的。无论你打开哪个项目，只要是当前登录用户，这些设置都会生效。
    • 数据存储：存储在用户的配置文件中，与特定项目无关。
    • 同步性：在不同设备上登录同一账号时，User 设置会同步，保证体验一致。

  • Workspace（工作空间）设置：

    • 作用范围：局部性的。仅对当前打开的特定项目（工作空间）有效。
    • 数据存储：存储在项目根目录下的 .vscode 文件夹中。
    • 独立性：不同项目可以有不同的设置，互不干扰。

2. Cursor 汉化配置 (2.3.3)

这部分提供了非常具体的操作步骤，指导用户如何将 Cursor 的英文界面切换为中文。

  • 步骤 1：打开扩展

    • 快捷键：Ctrl + Shift + X (Windows/Linux) 或 Cmd + Shift + X (Mac)。
    • 操作：打开左侧的扩展商店界面。

  • 步骤 2：搜索并安装插件

    • 关键词：搜索 "Chinese" 或 "中文"。
    • 目标插件：通常选择下载量最高的 "Chinese (Simplified) Language Pack for Visual Studio Code"。
    • 操作：点击安装。

  • 步骤 3：打开命令面板

    • 快捷键：Ctrl + Shift + P (Windows/Linux) 或 Cmd + Shift + P (Mac)。
    • 指令：输入 "Configure Display Language" 并回车。

  • 步骤 4：选择中文并重启

    • 操作：在弹出的列表中选择 "中文 (简体)" 或代码 "zh-cn"。
    • 结果：保存设置后重启 Cursor，界面（菜单、提示、设置项）将完全变为中文。

总结

这张图片不仅解释了 Cursor（以及基于 VS Code 的编辑器）中全局配置与项目配置的区别，还提供了一套标准的汉化流程。对于不熟悉英文界面的国内用户来说，这是一个非常实用且必要的入门指南。

image

 

这张图片是 Cursor 教程的进阶部分，主要讲解了如何将 VS Code 的配置（如插件、主题、快捷键）迁移到 Cursor 中，以及如何手动管理这些配置文件。

核心内容分析

1. 从 VS Code 配置迁移 (2.4)

这部分旨在帮助从 VS Code 转过来的用户快速上手，保持熟悉的开发环境。

  • 一键导入配置 (2.4.1)

    • 功能：Cursor 提供了一键导入功能，可以自动从当前电脑默认位置的 VS Code 配置文件中导入 Extensions (扩展)、Themes (主题)、Settings (设置) 和 Keybindings (键绑定)。
    • 配置文件默认位置：
      • Windows: %appdata%\code\user 路径下的 settings.json 文件。
      • macOS: ~/Library/Application Support/Code/User/ 路径下的配置内容。
      • Linux: ~/.config/code/user/ 路径下的配置文件。
    • 注意事项：并非所有 VS Code 扩展都与 Cursor 兼容，一些依赖特定 API 的插件在导入后可能导致功能异常。

  • 操作步骤：

    1. 打开 Cursor 设置 (Ctrl + Shift + J)。
    2. 导航到 常规 > 帐户。
    3. 在 "VS Code Import" 下，单击 "导入" 按钮。
    4. 在弹出的确认框中，点击 "Confirm" 确认导入。

2. 手动配置文件迁移 (2.4.2)

这部分为高级用户提供了更精细的控制方法，适用于需要在多台计算机之间同步配置，或希望对设置进行更多控制的场景。

  • 导出配置文件：
    1. 在 VS Code 实例上，打开命令面板 (Ctrl + Shift + P)。
    2. 搜索 "Preferences: Open Profiles (UI)"。

总结

这张图片的内容主要面向从 VS Code 迁移过来的用户，提供了两种迁移配置的方法：一键导入和手动迁移。一键导入方便快捷，但可能存在兼容性问题；手动迁移则更灵活，适合高级用户。

image

 

image

 

{
    // 关闭自动更新
    "update.mode": "none",
    // 设置主题为浅色模式
    "workbench.colorTheme": "Default Light+",
    // 设置字体大小
    "editor.fontSize": 16,
    // 设置 JDK 路径 (已修正：使用双斜杠)
    "java.home": "D:\\Program Files\\Java\\jdk1.8.0_261",
    // 设置 Maven 配置文件路径 (已修正：使用双斜杠)
    "java.configuration.maven.userSettings": "D:\\Program Files\\apache-maven-3.8.4-bin\\apache-maven-3.8.4\\conf\\settings.xml"
}

 

这张图片是关于 在 Cursor 中配置 Java 开发环境 的教程，主要涵盖了 JDK 和 Maven 的自动与手动配置方法，以及 Java 扩展插件的必要性。

核心内容分析

1. Java 语言环境 (2.5)

这部分是整个章节的总览，明确了配置目标：在 Cursor 中搭建一个完整的 Java 开发环境，包括设置 JDK、安装必要的扩展、调试、运行 Java 应用程序以及集成 Maven 等构建工具。

2. 配置本地 JDK 和 Maven (2.5.1)

这部分详细说明了如何让 Cursor 识别并使用你电脑上安装的 Java 开发工具包（JDK）和 Maven 构建工具。

  • 自动读取情况

    • 机制：如果系统环境变量中正确配置了 JAVA_HOME 和 MAVEN_HOME，Cursor 通常能自动识别并应用这些配置。
    • 效果：在创建、运行或调试 Java 项目时，Cursor 会自动利用这些环境变量找到对应的 JDK 和 Maven 位置，完成代码编译和项目构建。

  • 手动配置情况

    • 触发条件：当 Cursor 未能自动读取到 JDK 和 Maven 配置时，需要手动干预。
    • 操作步骤：
      1. 打开命令面板 (Ctrl + Shift + P 或 Cmd + Shift + P)。
      2. 输入并选择 "Preferences: Open User Settings (JSON)"。
      3. 在打开的 settings.json 文件中，添加或修改以下配置项：
        • "java.home"：指向你的 JDK 安装路径（对应 JAVA_HOME 变量值）。
        • "java.configuration.maven.userSettings"：指向你的 Maven 配置文件 settings.xml 所在路径。
    • 示例： 
      {
  "java.home": "C:/Program Files/Java/jdk-17",
  "java.configuration.maven.userSettings": "D:/maven/apache-maven-3.8.8-bin/apache-maven-3.8.8/conf/settings.xml"
}
    • 生效方式：保存文件后，需要重启 Cursor 使配置生效。

3. Java 环境扩展插件安装和使用 (2.5.2)

这部分强调了即使配置好了 JDK 和 Maven，仍需安装 Java 扩展插件才能获得完整的开发体验。

  • 作用：这些插件能将编辑器从“普通文本编辑器”转变为“智能 IDE”，提供语法高亮、代码补全、错误提示、调试支持、Maven 项目管理等核心功能。
  • 必要性：没有这些插件，Cursor 将无法理解 Java 代码的语义，无法提供智能提示和错误检查，开发效率会大打折扣。

总结

这张图片的内容是 Cursor 教程中关于 Java 开发环境搭建 的关键部分。它清晰地指导用户如何配置 JDK 和 Maven，无论是通过自动识别系统环境变量，还是通过手动编辑 settings.json 文件。同时，它也强调了安装 Java 扩展插件对于获得完整开发体验的必要性，为后续的 Java 项目开发奠定了基础。

image

 

image

 

image

 

image

 

这张图片展示了在 Cursor 代码编辑器中进行 Java 开发环境配置 的一个具体操作场景，核心内容是 安装 Java 扩展包。

核心内容分析

1. 左侧：扩展商店界面

  • 搜索框：用户正在搜索与 Java 相关的扩展包。
  • 搜索结果：列表显示了多个扩展，其中最相关的是 Extension Pack for Java，这是一个由多个 Java 开发所需插件组成的集合包。
  • 关键操作：鼠标悬停在 Extension Pack for Java 上，弹出了一个提示框，详细说明了这个扩展包包含的内容：
    • JDK Auto-Configuration：自动配置 JDK。
    • Extension Pack for Java：Java 扩展包本身。
    • Spring Boot Extension Pack：Spring Boot 扩展包。

2. 右侧：代码编辑区

  • 文件名：BubbleSort.java，这是一个经典的冒泡排序算法的 Java 实现。
  • 代码内容：
    • bubbleSort 方法：实现了冒泡排序的核心逻辑。
    • printArray 方法：一个辅助方法，用于打印数组内容。
    • main 方法：程序的入口，初始化了一个数组，调用 printArray 打印排序前的数组，然后调用 bubbleSort 进行排序，最后再次调用 printArray 打印排序后的数组。

总结

这张图片生动地展示了在 Cursor 中为 Java 项目配置开发环境的步骤。通过在扩展商店中搜索并安装 Extension Pack for Java，用户可以一键获得包括 JDK 自动配置、Java 语言支持和 Spring Boot 开发工具在内的全套开发环境，极大地简化了配置过程。同时，右侧的代码示例也表明，用户正在准备运行或调试一个实际的 Java 程序。

image

 

image

 

image

 

这组图片是关于 Cursor 编辑器核心功能——“Tab 键智能补全” 的详细教程。

Cursor 的 Tab 键不仅仅是缩进代码，它被 AI 赋能成了一个“智能小助手”，能够根据上下文预测并生成代码、重构代码甚至补全注释。

核心功能：Tab 键作为智能小助手

1. 单行/多行代码补全

  • 功能描述：当你写下一行注释或代码开头时，Cursor 会根据上下文自动预测你接下来要写的代码逻辑。
  • 案例演示：
    • 输入：注释 //需求：写一个工具类计算数组平均值 以及类定义的开头。
    • AI 补全：按 Tab 键后，Cursor 自动生成了完整的 main 方法（包含测试数组）和 average 计算方法（包含求和循环和返回值）。
  • 操作：按 Tab 接受建议，按 Esc 拒绝建议。

2. 智能代码重写

  • 功能描述：不仅仅是补全，还能优化现有代码。
  • 案例演示：
    • 原代码：使用传统的 for 循环遍历 List 并筛选偶数。
    • 操作：在代码上方添加注释 // 使用 Stream 重构，光标放在代码块任意位置。
    • AI 补全：按 Tab 键后，AI 将原本繁琐的 for 循环代码自动重写为简洁的 Java Stream 流式写法 (numbers.stream().filter(...))。

3. 多行协同优化

  • 功能描述：能够处理多行代码的语法升级、结构重组和安全修复。
  • 案例演示：
    • 变量联想：连续定义多个变量（int, String, boolean...），AI 会自动联想下一个变量的类型和命名模式。
    • 批量修改：在多处代码前添加注释或进行统一修改。

4. 接受、部分接受与拒绝

  • 完整接受：按 Tab 键。
  • 部分接受：按 Ctrl + → (Windows/Linux) 或 Cmd + → (Mac)。当你只想采纳 AI 建议的一部分时使用（例如 AI 补全了一整行，但你只需要前半部分）。
  • 拒绝：按 Esc 键或继续手动输入其他内容。

配置说明

教程最后介绍了如何在设置中调整这些功能（路径：cursor settings > features > tab）：

  • 总开关：启用或禁用 Cursor Tab 功能。
  • 逐词接受：开启 Accept the next word... 后，可以使用快捷键逐个单词地接受建议。
  • 注释补全：开启 Enable Cursor Tab suggestions in comments，AI 甚至可以在你写注释时提供思路补全。
  • 空白符建议：控制是否显示仅包含空格或换行的建议。

总结

这组教程展示了 Cursor 最具特色的 AI 驱动工作流。通过简单的 Tab 键，开发者可以实现从“写代码”到“审阅代码”的转变，极大地提高了编码效率，特别是在生成样板代码（Boilerplate Code）和重构旧代码时效果显著。

image

 

image

 

image

 

image

 

这张图片是关于 Cursor 编辑器中“Chat（对话模式）” 功能的详细介绍，它是 Cursor 的核心 AI 助手，旨在通过自然语言与代码库进行交互，帮助开发者高效完成编程任务。

核心功能概览

图片内容主要分为三个部分：功能定义、主要功能点和快速开始指南。

1. Chat 功能定义

  • 定位：Chat（以前称为“Composer”）是 Cursor 的 AI 助手，位于编辑器侧边栏。
  • 交互方式：用户可以通过自然语言与代码库进行交互，无需切换上下文。
  • 核心能力：可以提出问题、请求代码编辑、获取终端命令建议等。

2. Cursor Chat 主要功能点

这部分详细列出了 Chat 能够完成的四大核心任务：

  • 代码理解与修改：Chat 能够深入理解代码库的结构和组件关系，代表开发者进行代码更改，是实现新功能和重构代码的强大工具。
  • 项目重构：基于对代码库的深入了解，Chat 可以帮助开发者重构整个代码库，优化结构和性能。
  • 从零搭建项目：根据用户需求，Chat 可以从零开始搭建项目，包括创建项目结构、安装依赖项，甚至编写初始代码，让开发者能快速进入业务逻辑编码阶段。
  • 错误定位与修复：Chat 可以根据项目的错误信息，进行错误定位，并直接调整解决错误代码，提高调试效率。

3. 快速开始指南

这部分提供了使用 Chat 的入门方法和最佳实践：

  • 快捷键：
    • Mac：使用 ⌘ + L 访问侧边栏中的聊天。
    • Windows/Linux：使用 Ctrl + L 访问侧边栏中的聊天。
  • 交互建议：与 Chat 对话时，建议采用清晰、具体的语言格式，最好包含任务类型、上下文描述和具体要求。
  • 参考模板：图片底部提供了一个代码生成类的参考模板，格式为：“[任务类型]：请生成一个 {功能描述} 的 {编程语言/框架} 实现”。

总结

这张图片全面介绍了 Cursor 的 Chat 功能，强调了其作为 AI 助手在代码理解、修改、重构、项目搭建和错误修复方面的强大能力，并提供了实用的快捷键和交互建议，帮助开发者快速上手并高效利用这一功能。

image

 

image

 

这张图片是关于 Cursor 编辑器中 Chat 功能的进阶使用技巧，重点讲解了如何编写高质量的提示词（Prompt）以及 Chat 的三种工作模式。

核心内容分析

1. 提示词技巧总结

这部分详细列出了编写高效提示词的五个关键技巧，旨在帮助用户获得更精准的 AI 响应：

  • 提供上下文：在提问时，应提及项目所使用的编程语言、框架以及相关的业务背景信息，帮助 AI 理解代码环境。
  • 分点描述：将复杂的需求拆解为具体的步骤或要求，使 AI 能够更清晰地理解任务。
  • 使用技术术语：准确的技术术语能帮助 AI 更精准地理解需求，避免歧义。
  • 明确边界：说明必须保留的现有功能或禁止的实现方式，确保 AI 的修改不会破坏原有逻辑。
  • 示例引导：附上期望的输出示例或参考代码风格，引导 AI 生成符合预期的代码。

2. Chat 三种模式

这部分介绍了 Chat 针对不同任务优化的三种工作模式，用户可以根据具体需求选择合适的模式：

  • Agent 代理模式（默认）：这是 Cursor 中默认且最自主的模式。它允许 AI 学习和理解项目代码，并代表用户直接进行项目代码更改。此模式启用了所有工具，可以自主探索代码库、阅读文档、浏览 Web、编辑文件和运行终端命令，旨在以最少的指导处理复杂的编码任务。
  • Ask 对话模式：此模式下，AI 会获取项目代码相关的解释和答案，但不会直接修改项目代码。适合用于代码理解和咨询。
  • Manual 手动模式：需要用户手动执行项目上下文（如修改范围），适合需要精细控制的编辑任务。

总结

这张图片不仅提供了编写高质量提示词的实用技巧，还详细介绍了 Cursor Chat 的三种工作模式，帮助用户根据不同的任务需求选择最合适的交互方式，从而提高开发效率。

这张图片展示了Cursor 编辑器中 Chat 功能的提示词模板，分为“代码生成类”、“代码修改类”和“代码解释类”三大场景，为开发者提供了结构化的提问框架和具体示例，帮助更高效地与 AI 交互。

1. 代码生成类

  • 模板结构：
    • [任务类型]：明确需要生成的代码类型，如“请生成一个 {功能描述} 的 {编程语言/框架} 实现”。
    • [具体要求]：列出技术栈、功能点、设计规范等详细要求。
  • 示例：
    • 任务：生成一个学习计划页面的 HTML+CSS+JavaScript 实现。
    • 具体要求：使用 Tailwind CSS v3 和 Font Awesome，包含任务添加、编辑、删除功能，日历视图展示学习计划，学习进度可视化图表，符合现代 UI 设计原则和响应式设计，具有平滑的动画和交互效果。

2. 代码修改类

  • 模板结构：
    • [任务类型]：明确修改的上下文和目标，如“请帮我修改 {上下文：具体文件/代码片段}，实现 {预期功能}”。
    • [当前问题]：描述现有代码的错误或不足。
    • [具体要求]：列出修改的约束条件，如保持现有功能不变、使用特定技术改进、修复具体错误等。
  • 示例：
    • 任务：修改当前的 React 组件，优化列表渲染性能。
    • 当前问题：滚动时列表卡顿，存在明显性能问题。
    • 具体要求：保持现有 UI 不变，使用 React.memo 和虚拟列表技术优化，添加性能监控日志。

3. 代码解释类

  • 模板结构：
    • [任务类型]：明确需要解释的代码片段或功能模块，如“请解释 {代码片段/功能模块} 的 {具体方面}”。
    • [上下文信息]：提供相关的业务背景或技术栈信息。
    • [具体问题]：列出不理解的语法、逻辑、设计选择原因或潜在问题等。
  • 示例：（图片中未给出具体示例，但提供了模板框架）

总结

这张图片通过结构化的提示词模板和具体示例，帮助开发者更清晰、高效地与 Cursor 的 Chat 功能交互，无论是生成新代码、修改现有代码还是解释代码逻辑，都能通过明确的指令获得更精准的 AI 响应。

image

 

这张图片展示了 Cursor 编辑器中 AI 助手与用户交互的完整工作流，从代码生成、命令执行到功能说明，体现了 AI 在开发过程中的辅助能力。

核心内容分析

1. 代码生成与功能说明

  • 用户请求：用户要求 AI 生成一个“学习计划页面的实现方案”。
  • AI 响应：AI 不仅生成了代码，还提供了详细的功能说明，包括：
    • 通过进度图表了解整体学习情况。
    • 点击“添加任务”按钮创建新任务。
    • 在任务列表中查看、编辑或删除任务。
    • 使用复选框标记任务完成状态。
    • 在日历视图中查看任务分布。
    • 通过进度图表了解学习进度。

2. 命令执行与错误处理

  • 用户请求：用户要求 AI 打开 index.html 文件。
  • AI 响应：AI 尝试使用 PowerShell 命令 start index.html 打开文件，但遇到了 CommandNotFoundException 错误。
  • AI 建议：AI 提示用户浏览器应该已经打开了学习计划管理页面，并提供了详细的功能使用说明，帮助用户理解生成的代码功能。

3. 模式选择

  • 模式菜单：图片底部显示了 Cursor 的模式选择菜单，包括：
    • Agent (Ctrl+L)：默认模式，AI 可以自主学习和理解项目代码，代表用户进行代码更改。
    • Ask (Ctrl+L)：AI 获取项目代码相关的解释和答案，但不会直接修改代码。
    • Manual：需要用户手动执行项目上下文，适合精细控制的编辑任务。

总结

这张图片生动地展示了 Cursor 编辑器中 AI 助手的多功能性：不仅能生成代码，还能执行系统命令、处理错误，并提供详细的功能说明。同时，通过模式选择，用户可以根据任务需求灵活切换 AI 的工作方式，体现了 AI 在现代开发工具中的深度集成和智能化辅助能力。

image

 

image

 

image

 

这张图片详细介绍了 Cursor 编辑器中“Ask（询问）模式” 的功能、特性以及配置方法。它是 Cursor 的一种“只读”对话模式，主要用于代码咨询和方案规划。

核心内容分析

1. Ask 模式定义与特性

  • 核心定义：Ask 是 Chat 的“只读”模式。
  • 主要用途：用于提出问题、探索代码库、了解代码逻辑，而不会直接修改代码。
  • 对比其他模式：
    • 与 Agent 和 Manual 模式不同，Ask 模式默认不应用任何建议的更改。
    • 它具有读取文件和上下文的完整能力，但不能自行进行任何更改。
    • 适用场景：非常适合用于了解不想更改的代码库，或在实施代码修改前，先利用 AI 规划解决方案。

2. 示例用例：贪吃蛇游戏模式添加

图片通过一个具体的例子展示了 Ask 模式的工作流程：

  • 用户提问：“这个贪吃蛇页面如何添加多种模式！”
  • AI 响应：
    • AI 分析了需求，并给出了具体的修改建议：修改 index.html，在特定位置插入一段 HTML 代码。
    • 代码内容是一个下拉菜单（<select>），用于选择游戏模式（经典、限时、障碍物、穿墙）。
  • 关键交互点：
    • 图片中用红框标注了 “Apply to index.html” 按钮，并配有文字说明：“点击此处进行生效！默认不会直接修改！”。
    • 这再次强调了 Ask 模式的“只读”特性：AI 只提供建议和代码片段，必须由用户手动点击按钮确认后才能应用到文件中。

3. Ask 的配置选项

图片底部展示了 Ask 模式的设置界面，包含以下三个主要配置项：

  • Model（模型）：允许用户预先选择作为 Ask 模式默认使用的 AI 模型。
  • Keybinding（快捷键）：允许用户设置快捷键，以便快速切换到 Ask 模式。
  • Search codebase（搜索代码库）：这是一个开关选项。开启后，允许 Cursor 自动搜索和理解整个代码库的上下文，而不仅仅是当前打开的文件。这意味着用户不需要手动通过 @ 符号引用文件，AI 就能主动获取相关上下文信息。

总结

这张图片清晰地阐述了 Ask 模式 在 Cursor 中的定位：它是一个安全的、用于咨询和规划的辅助工具。它允许开发者在不破坏现有代码的前提下，向 AI 询问代码逻辑、寻求修改建议或规划新功能。其核心特点是“只读”和“建议式”，所有更改都需要用户手动确认。同时，通过配置选项，用户可以进一步优化 Ask 模式的体验，例如通过“搜索代码库”功能让 AI 更好地理解项目全局。

image

 

这张图片是关于 Cursor 编辑器中 Chat 模式代码编辑交互细节 的说明，重点讲解了 AI 建议修改代码时的三种核心操作：Review（审查）、Apply（应用）和 Accept/Reject（接受/拒绝），并引出了 Checkpoints 数据还原功能。

核心内容分析

1. 代码编辑选项

这部分详细解释了当 AI 在 Chat 中建议修改代码时，用户可采取的三种操作：

  • Review（审查）：

    • 功能：在差异视图中查看 AI 建议的更改。
    • 操作：点击 “Review changes” 按钮，可详细查看修改前后的代码差异，帮助用户理解 AI 的修改意图。
    • 目的：在应用更改前，确保修改内容符合预期，避免引入错误。

  • Apply（应用）：

    • 适用模式：在 “Ask” 或 “Manual” 模式下使用。
    • 功能：使用“应用”按钮显式应用 AI 建议的更改。
    • 操作：点击 “Apply to script.js” 或类似按钮，将 AI 生成的代码片段应用到指定文件中。
    • 目的：在只读或手动模式下，用户需要主动确认并应用 AI 的建议，确保对代码修改有完全控制权。

  • Accept/Reject（接受/拒绝）：

    • 适用模式：在 “Agent” 模式下使用。
    • 功能：在 AI 自动进行更改后，用户决定是否保留（Accept）或放弃（Reject）这些更改。
    • 操作：
      • Accept：点击 “Accept All” 按钮，同意并保留所有 AI 的修改。
      • Reject：点击 “Reject” 按钮，拒绝并撤销 AI 的修改。
    • 目的：在 Agent 模式下，AI 会自主进行修改，但用户仍保留最终决定权，确保代码质量和项目稳定性。

2. Checkpoints 数据还原

这部分简要介绍了 Cursor 的数据还原功能：

  • 功能：当用户希望恢复到代码库的先前状态时，Cursor 通过在每次请求和 AI 更改时自动创建代码检查点（Checkpoints），允许用户回滚到任意历史版本。
  • 目的：提供代码版本控制和恢复能力，降低因 AI 修改导致的代码错误风险，增强开发安全性。

总结

这张图片通过清晰的步骤和截图，详细说明了 Cursor 中 Chat 模式在代码编辑时的三种核心交互方式：审查、应用和接受/拒绝，确保用户在不同模式下都能安全、高效地与 AI 协作。同时，Checkpoints 功能的引入，进一步增强了代码修改的安全性和可追溯性。

image

 

这张图片是关于 Cursor 编辑器中“Checkpoints（检查点）”功能、聊天历史管理以及 Chat 相关配置 的详细说明，旨在帮助用户更好地管理代码状态和聊天交互。

核心内容分析

1. Checkpoints（检查点）数据还原

  • 功能目的：当用户希望恢复到代码库的先前状态时，Cursor 会自动创建检查点。
  • 触发时机：在每次向 AI 发出请求以及每次 AI 更改代码库时，系统会自动创建一个检查点。
  • 恢复方法：单击上一个请求的输入框中显示的“Restore Checkpoint”按钮，即可恢复到该检查点的状态。
  • 重要提示：恢复的是“本次对话之前的状态”，而不是“本次对话产生的状态”。这意味着它会撤销自上次检查点以来的所有更改，回到对话开始前的代码状态。

2. 历史和新建会话

  • 历史记录管理：
    • 聊天历史记录已移至命令面板。
    • 用户可以通过 Chat 中的“Show history”按钮或运行命令面板中的“Show Chat History”命令来访问历史记录。
    • 可以在历史记录中搜索、查看并切换到之前的对话。
  • 新建会话：
    • 在开启新任务、避免对话混乱、保留特定记录或解决误操作时，需要在 Cursor 的 Chat 中新建聊天框。
    • 可以通过点击“New Chat”按钮或使用快捷键（Ctrl+N 或 Ctrl+T）来新建会话。

3. Chat 相关的配置说明

这部分列出了 Cursor Chat 功能的几项关键配置选项：

  • Default new chat mode：设置新聊天的默认模式。选择“Agent”则新聊天默认使用智能代理交互，决定初始聊天交互载体。
  • Chat text size：调整 AI 聊天消息的文字大小。“Default”是默认尺寸，用户可根据需要调整，以获得更舒适的阅读体验。
  • Auto-refresh chats：勾选后，聊天面板闲置再打开时会自动新建聊天，保持交互的新鲜度，避免旧聊天堆积干扰。
  • Auto-scroll to bottom：新消息生成时，聊天面板会自动滚动到底部，无需手动翻动，方便实时查看最新内容。
  • Auto-apply to files outside context in Manual mode：在手动模式下，允许聊天对当前上下文外的文件自动应用更改，拓展操作范围，使处理跨文件任务更便捷。
  • Include project structure (BETA)：勾选后，会给模型提供简化的目录树，辅助其理解代码库布局，让 AI 更贴合项目结构做出响应。此功能尚处测试阶段。

总结

这张图片全面介绍了 Cursor 编辑器中与聊天和代码状态管理相关的核心功能。通过 Checkpoints，用户可以轻松回滚到之前的代码状态，避免误操作带来的风险。通过 历史和新建会话 功能，用户可以有效管理聊天历史，保持工作区的整洁。而 Chat 配置选项 则提供了丰富的个性化设置，让用户可以根据自己的工作习惯和需求，定制 Chat 的交互体验，从而更高效地利用 AI 辅助开发。

image

 

这张图片详细介绍了 Cursor 编辑器中一个非常核心的功能——内联智能修改（Ctrl/Cmd + K）。

它主要讲解了如何利用快捷键直接在代码编辑器窗口中生成新代码或修改现有代码，适合已知具体修改目标并需要精准操作的场景。

核心内容分析

1. 功能定义与适用场景

  • 定义：内联编辑（Inline Edit）允许用户通过快捷键 Cmd/Ctrl + K，直接在当前的代码编辑窗口中让 AI 生成新代码或修改选中的代码。
  • 适用场景：适合当你明确知道要修改哪个文件、哪段代码，并且需要精准修改内容的时候。它比在侧边栏聊天更直接、更高效。

2. 工作原理：Prompt Bar（提示栏）

  • 触发方式：按下 Ctrl/Cmd + K 时，会在光标位置或选中代码上方出现一个输入栏，称为“Prompt Bar”。
  • 功能：它类似于聊天输入框，你可以输入自然语言指令。此外，它也支持使用 @ 符号引用其他上下文（如文件、文档等），这一点与侧边栏聊天功能一致。

3. Cmd K 的两种模式

图片详细解释了 Cmd + K 根据是否有选中代码而呈现的两种不同工作模式：

  • 内联生成（Inline Generate）：
    • 触发条件：按下快捷键时，未选中任何代码（光标仅停留在某处）。
    • 效果：Cursor 会根据你在 Prompt Bar 中输入的指令，在光标位置直接生成新的代码块。
  • 内联编辑（Inline Edit）：
    • 触发条件：按下快捷键时，已选中了一段或多段代码。
    • 效果：Cursor 会针对你选中的这段代码进行修改、重构或优化，修改后的代码会直接替换原代码（以 Diff 形式展示，绿色为新增，红色为删除）。

4. 实操案例：内联生成

图片底部通过一个具体的步骤演示了“内联生成”的使用流程：

  1. 准备：打开 main.js 文件，将光标放在文件末尾（此时不选中任何代码）。
  2. 指令：按下 Cmd/Ctrl + K，在弹出的输入框中输入提示词：“生成一个带点击动画的按钮组件，用 JavaScript 实现，点击后控制台打印次数”。
  3. 结果：AI 会直接在光标处生成相应的 JavaScript 代码，并提供“Accept（接受）”或“Reject（拒绝）”的选项。

总结

这张图片展示了 Cursor 中最快、最直接的 AI 编程方式。它不需要你切换到侧边栏，而是让你保持在“心流”状态，直接在代码行之间通过自然语言指挥 AI 完成具体的编码任务。

image

 

image

 

这张图片详细介绍了 Cursor 编辑器中“Codebase Indexing（代码库索引）” 的概念、作用、配置方法以及如何通过忽略文件来优化索引性能。

核心内容分析

1. 代码库索引的概念和作用

这部分解释了为什么需要索引以及它对 AI 编程的帮助：

  • 初始化机制：当你打开一个项目时，Cursor 会自动初始化该工作区的索引。一旦完成，它还会持续为工作区中新增的文件自动编制索引，确保代码库的上下文始终保持最新。
  • 核心作用：
    • 快速“读懂”项目结构：帮助 AI 区分哪些是工具文件，哪些是核心业务逻辑。
    • 精准定位代码：例如，当你搜索 getUser 时，AI 知道优先去查看 userService.js，而不是漫无目的地搜索。
    • 理解代码关系：能够理解类与类之间的关联（如 Order 类和 Product 类的关系）。
  • 对 AI 生成代码的影响：AI 在分析索引内容后，生成的代码会更贴合项目实际情况，例如会主动使用项目中已有的工具函数，并遵循项目既定的命名规范。

2. 代码库索引的配置和示例

这部分展示了如何查看和管理索引状态：

  • 配置路径：代码库索引的状态位于 cursor settings > indexing。
  • 界面功能：
    • 状态显示：显示“Synced”（已同步）和进度条（如 100%）。
    • 操作按钮：
      • Resync Index：重新同步索引（当索引出现问题或需要强制更新时使用）。
      • Delete Index：删除索引。
    • 提示信息：“Embeddings improve your codebase-wide answers. All code is stored locally.”（嵌入向量能改善全库问答质量，且所有代码均存储在本地，强调隐私安全）。
  • 测试示例：
    • 指令：“查看当前项目结构，并使用文字图形形式罗列出来！”
    • 效果展示：图片展示了 Cursor 根据索引信息，清晰地以树状图形式输出了项目的文件目录结构，证明了索引让 AI “看懂”了整个项目。

3. 忽略文件配置

这部分讲解了如何优化索引过程，避免不必要的文件干扰：

  • 配置文件：可以通过在项目根目录添加 .cursorignore 文件来控制哪些文件被忽略，限制 Cursor 的访问。
  • 主要目的：
    • 提升索引速度：排除大型依赖库或自动生成的文件（如 node_modules、dist 目录），防止索引过程变慢。
    • 避免干扰：某些配置文件可能包含敏感信息或与当前开发任务无关，忽略它们能让 AI 更专注于核心代码。

总结

这张图片的核心价值在于说明了 Codebase Indexing 是 Cursor 能够理解整个项目上下文的关键技术。通过建立索引，AI 不再是“盲人摸象”，而是拥有了全局视野，从而能写出更准确、更符合项目规范的代码。同时，通过 .cursorignore 文件，用户可以灵活控制索引范围，兼顾效率与隐私。

image

 

image

 

这张图片是关于 Cursor 编辑器中“忽略文件配置（.cursorignore）” 的详细说明。它主要讲解了如何通过配置文件来控制代码库索引的范围，从而提升 AI 的工作效率和准确性。

核心内容分析

1. 忽略文件配置的目的

Cursor 会读取项目的代码库并建立索引，但并不是所有文件都需要被索引。通过配置 .cursorignore 文件，可以控制哪些文件被忽略，主要有两个目的：

  • 提升索引速度：排除大型依赖包（如 node_modules）和生成的构建文件（如 dist），这些文件通常体积大且不需要 AI 频繁修改。
  • 避免干扰：排除包含敏感信息的配置文件或与当前开发任务无关的文件，防止 AI 在生成代码时受到不相关上下文的干扰。

2. 配置 .cursorignore 的两种方法

图片介绍了两种配置忽略文件的方式：

  • 手动创建文件：
    • 在代码库目录的根目录下，手动创建一个名为 .cursorignore 的文件。
    • 在文件中列出需要忽略的目录和文件路径（类似于 .gitignore 的语法）。
  • 使用 Cursor 配置快捷创建：
    • 通过菜单路径 cursor setting > indexing > Configure ignored files 快速进入配置界面。
    • 在界面中点击 Configure ignored files 按钮，Cursor 会自动生成或打开 .cursorignore 文件供编辑。

3. 界面操作演示

图片中间部分展示了具体的设置界面：

  • Codebase Indexing 设置页：显示了索引状态（Synced）、重新同步（Resync Index）和删除索引（Delete Index）的选项。
  • 快捷入口：红色箭头指向 Configure ignored files 按钮，并标注“快速生成忽略配置文件”，提示用户点击此处即可开始配置。
  • Git graph file relationships：下方还有一个选项用于开启 Git 图谱文件关系索引，帮助 AI 理解文件间的历史关联。

4. 忽略文件配置测试

图片底部展示了配置后的效果验证：

  • 创建忽略文件：在文件资源管理器中，可以看到根目录下已经成功创建了 .cursorignore 文件（被红色框高亮）。
  • 项目结构：同目录下还有 index.html, main.js, script.js, style.css 等文件，表明这是一个典型的前端项目结构。

总结

这张图片的核心在于教导用户如何“做减法”。通过合理配置 .cursorignore，可以让 Cursor 的 AI 索引更精简、更聚焦，从而避免无关代码（如庞大的依赖库）拖慢速度或误导 AI，是优化 Cursor 使用体验的重要步骤。

image

 

这张图片是关于 Cursor 编辑器中“Rules（规则）”功能 的详细配置指南。它主要讲解了如何通过设定规则来约束 AI 的行为，使其生成的代码更符合团队规范或个人习惯，从而减少后期修改成本。

核心内容分析

1. 规则介绍

这部分定义了 Rules 的核心价值和作用：

  • 定义：Rules 是给 Cursor AI 功能（包括 Chat 聊天和 Cmd+K 内联编辑）添加的约束条件。
  • 核心目的：让 AI 生成的代码贴合团队规范，减少人工二次修改的成本。
  • 具体作用：
    • 约束代码风格：例如强制使用驼峰命名法，或者要求每个函数必须写注释。
    • 限定技术选型：例如禁止使用某些老旧的库，或者优先使用项目中指定的工具类。
    • 预设核心参数：例如提前设置好数据库连接地址、账号密码等上下文信息。

2. 两种规则配置方案对比

图片通过一个表格清晰地对比了“项目规则”和“用户规则”的区别：

  • 项目规则：
    • 作用范围：仅对当前项目生效，团队成员共享。
    • 存储位置：项目根目录下的 .cursor/rules/xxx.mdc 文件。
    • 同步方式：随项目代码提交到版本库（如 Git），实现团队共享。
    • 适用场景：统一团队编码规范（如注释格式、依赖版本）。
  • 用户规则：
    • 作用范围：对所有项目生效，属于个人专属配置。
    • 存储位置：用户本地配置目录（如 ~/.cursor/rules）。
    • 同步方式：仅本地生效，不随项目同步。
    • 适用场景：个人习惯（如快捷键偏好、AI 响应风格）。

重要提示：图片中用红色文字强调，当项目规则和用户规则同时存在且发生冲突时，项目规则的优先级更高。

3. 项目规则配置实操

这部分详细介绍了如何配置项目规则：

  • 创建规则文件：
    • 手动创建：在项目根目录下创建文件夹 .cursor/rules/，并在其中新建一个后缀为 .mdc 的文件（如 my.mdc）。
    • 快捷命令：使用快捷键 Cmd + Shift + P，输入 New Cursor Rule 来快速创建。
  • 编写规则内容：
    • 图片展示了一个具体的 .mdc 文件示例，包含了 YAML 前置信息和具体的规则描述。
    • 示例规则：
      1. 函数必须包含 JSDoc 注释。
      2. 禁止使用 var，统一使用 const 或 let。
      3. 函数命名必须添加 zwf_ 前缀（如 zwf_login）。

这张图片的内容非常实用，特别是对于团队协作开发，通过配置项目规则可以极大地保证 AI 生成代码的一致性和规范性。

image

 

image

 

这张图片是关于 Cursor 编辑器中“项目规则配置（Project Rules Configuration）” 的实操教程。它承接了之前的规则介绍，具体讲解了如何创建、编写、测试以及验证项目级别的 AI 规则文件，以确保 AI 生成的代码符合特定的团队规范。

核心内容分析

1. 优先级提示

图片顶部有一行醒目的红色文字提示：“注意：项目规则和用户规则同时存在并且规则冲突，项目规则优先级更高”。这强调了在团队协作中，项目特定的规范会覆盖个人的通用设置。

2. 创建项目规则文件

这部分介绍了两种创建规则文件的方法：

  • 手动创建：在项目根目录下手动创建文件夹路径 .cursor/rules/，并在其中新建一个以 .mdc 为后缀的文件（例如 my.mdc）。
  • 快捷命令创建：使用快捷键 Cmd + Shift + P 调出命令面板，输入并选择 New Cursor Rule。

图片中间展示了文件结构图，红色方框圈出了 .cursor/rules 文件夹和 my.mdc 文件，并标注了“固定规则存储位置”。右侧展示了编辑器界面，红色箭头指向 Rule Type 设置为 Always，表示该规则适用于每一次聊天和 Cmd+K 请求。

3. 编写项目规则文件

图片提供了一个具体的 .mdc 文件代码示例，展示了规则文件的编写格式：

  • 元数据（Frontmatter）：
    • description：规则的描述，例如“团队前端项目规范”。
    • priority：优先级数值，例如 1000。
  • 具体规则内容：
    • 代码风格：
      1. 函数必须包含 JSDoc 注释。
      2. 禁止使用 var，统一使用 const / let。
      3. 函数命名必须添加 zwf_ 前缀，例如 zwf_login。
    • 依赖管理：
      • 优先使用项目内已有的工具函数（如 utils/request）。
      • 禁止引入低版本的 lodash（<4.0.0）。

4. 项目规则文件生效测试

这部分指导用户如何验证规则是否生效：

  1. 准备：打开一个 main.js 文件。
  2. 触发：按下 Ctrl + K 进入内联编辑模式。
  3. 指令：输入提示词“生成两个方法一个登录一个注册！”。

5. 项目规则生效效果展示

图片底部展示了测试结果截图：

  • 输入：Prompt Bar 中显示了刚才输入的指令。
  • 输出：生成的代码中，函数定义变成了 const zwf_login = async (params) => { ... }。
  • 验证点：红色方框圈出了 zwf_login，证明 AI 成功遵守了规则中关于“函数命名必须添加 zwf_ 前缀”以及“使用 const”的要求。

总结

这张图片是一份非常实用的 Cursor 项目规则配置指南。它不仅教会用户如何物理上创建规则文件，还通过具体的代码示例（Frontmatter 格式、具体的 linting 规则）和测试案例，展示了如何利用这些规则来强制 AI 遵守团队的代码风格（如变量声明方式、命名规范）和技术栈约束。这对于保证团队代码的一致性非常有帮助。

image

 

image

 

这张图片展示了 Cursor 编辑器的“Rules（规则）”设置界面。这个界面是管理 AI 行为的核心控制台，分为“用户规则（User Rules）”和“项目规则（Project Rules）”两大板块，允许用户通过自然语言或配置文件来定制 AI 的响应方式。

核心内容分析

用户规则（User Rules）

位于界面上半部分，这是一个全局性的设置区域。这里的规则会应用于所有的聊天、编写（Composer）和快捷键（Ctrl-K）会话中，无论你在哪个项目里。

  • 功能：设定个人的通用偏好。
  • 图片中的具体设置：
    • 语言偏好：“所有回答都使用中文！” —— 强制 AI 始终用中文交流。
    • 代码规范：“每行代码都需要添加中文的注释！” —— 这是一个非常严格的代码风格要求，强制 AI 生成详尽的注释。
    • 环境配置：“连接数据库的信息：地址：localhost 账号：root 密码：root” —— 这里直接注入了开发环境的敏感信息。这意味着在任何项目中让 AI 写数据库连接代码时，它都会默认使用这些本地测试账号。

项目规则（Project Rules）

位于界面下半部分，这是针对特定项目的设置区域。这些规则通常与代码库同步（Synced with your codebase），适合团队协作。

  • 功能：帮助 AI 理解特定项目的代码库结构和遵循项目约定。
  • 图片中的具体设置：
    • 规则列表：显示了当前项目已加载的两个规则文件：my.mdc 和 xxx.mdc。
    • 适用范围：两个文件都显示“Applies to: All requests”（应用于所有请求），说明它们是全局生效的项目级规则。
    • 添加按钮：右上角有一个蓝色的 + Add new rule 按钮，用于创建新的项目规则。
    • 配置文件包含：最下方有一个勾选项 Include .cursorrules file，如果被勾选，Cursor 会读取项目根目录下的 .cursorrules 文件内容作为规则。

总结

这张图实际上是在展示如何给 AI “立规矩”。

  1. 上层（User Rules） 是用户的“个人习惯”，比如“我要中文”、“我要详细注释”、“我的本地数据库密码是这个”。
  2. 下层（Project Rules） 是项目的“团队规范”，比如代码风格、目录结构约束等，通过 .mdc 文件或 .cursorrules 文件来管理。

image

 

这张图片详细解析了 Cursor 编辑器中用于编写项目规则的 MDC 语法。MDC（Markdown with Cursor）是一种结合了 Markdown 可读性和元数据配置能力的轻量级格式，专门用于编写项目规则。

核心内容分析

1. 用户规则与项目规则的区别

图片开头明确了一个关键点：用户规则不支持 MDC 格式，它们只是纯文本。这意味着用户规则更简单，但不具备项目规则的灵活性和可配置性。

2. MDC 文件组成

一个 MDC 文件由两部分组成：

  • 前置元数据（Frontmatter）：用 --- 包裹的 YAML 格式配置，用于定义规则的基本属性，如作用范围、优先级等。
  • 规则内容（Markdown 正文）：用标准 Markdown 语法编写具体的规则指令。

3. 前置元数据详解

这部分是 MDC 文件的核心配置区，图片通过代码示例和表格详细解释了各个字段的作用。

  • 官方约定字段（推荐使用，AI 更易理解）：
    • description：描述规则的用途，帮助 AI 理解并应用规则。
    • globs：指定规则生效的文件范围，支持 glob 语法（如 src/**/*.tsx）。
    • priority：规则优先级，数值越大优先级越高，用于解决规则冲突。
    • version：规则版本号（可选）。
  • 自定义字段（自己或团队约定含义）：
    • author：规则作者。
    • review_date：规则审查日期。
    • special_rule：特殊规则说明。

4. 常用元数据字段表

图片底部的表格清晰地总结了几个关键字段：

  • description：描述规则用途，指导 AI 如何应用规则。
  • globs：指定规则生效的文件范围（支持 glob 语法）。
  • priority：规则优先级（数值越大越优先），解决规则冲突。
  • version：规则版本号（可选）。

总结

这张图片是理解 Cursor 项目规则配置的关键。它告诉我们，通过 MDC 语法，我们可以非常精细地控制 AI 在不同文件、不同场景下的行为。例如，你可以为 src/components 目录下的 .tsx 文件设置一套 React 组件规范，同时为 src/utils 目录下的 .ts 文件设置另一套工具函数规范，并通过 priority 字段来确保规则的优先级。

image

 

这张图片详细介绍了 Cursor 规则文件中 Markdown 正文的编写方法，并给出了一个完整的 TypeScript 项目规则示例。它展示了如何用结构化的 Markdown 语法来定义具体的代码规范、技术选型、安全约束等。

核心内容分析

规则内容的编写结构

这部分讲解了如何使用 Markdown 语法来编写具体的规则，常见的结构包括：

  • 代码风格规则（最常用）：
    • 使用标题（如 # 一、代码风格）来组织规则。
    • 使用有序列表（1.）和无序列表（-）来列出具体的规范条目。
    • 示例规则包括：函数必须包含 JSDoc 注释、变量命名使用驼峰命名法（camelCase）、每行代码长度不超过 120 个字符。
  • 技术选型：
    • 规定项目中必须使用的技术或库。
    • 示例规则包括：禁止直接使用原生 fetch，必须通过项目封装的 request 工具；优先使用 React Hooks 而非 Class 组件。
  • 安全约束规则：
    • 定义项目开发中的安全红线。
    • 示例规则包括：禁止使用 eval() 函数；SQL 查询必须使用参数化查询以防止注入攻击；敏感信息（如 API 密钥）必须从环境变量读取。
  • 特殊语法：引用项目文件：
    • 这是一个非常强大的功能，允许在规则中直接引用项目内的文件。
    • 使用 @file 语法来引用文件，让 AI 在生成代码时参考这些文件的配置或内容。
    • 示例：ESLint 规则必须符合 @file .eslintrc.js，所有 HTTP 请求必须通过 @file src/utils/request.ts 封装的工具。

完整示例（TypeScript 项目规则）

图片底部提供了一个完整的 MDC 文件示例，用于一个 TypeScript 项目。

  • 前置元数据（Frontmatter）：
    • description: "TypeScript 项目编码规范"
    • globs: "src/**/*.ts" (规则仅对 src 目录下的 .ts 文件生效)
    • priority: 1000
  • 规则正文（Markdown）：
    • 基础规范：所有文件必须使用 UTF-8 编码，统一使用 2 空格缩进。
    • 类型约束：禁止使用隐式 any 类型，接口命名必须以 I 开头（如 interface IUser）。
    • 项目约束：所有 HTTP 请求必须通过 @file src/utils/request.ts 封装的工具。

总结

这张图片是编写高质量 Cursor 规则的实战指南。它不仅展示了规则的分类和编写结构，还通过一个完整的示例，演示了如何将元数据与具体的 Markdown 规则结合起来，创建出既强大又易于维护的 AI 行为约束文件。特别是 @file 引用语法，极大地增强了规则的上下文感知能力。

image

 

这张图片是关于 Cursor 编辑器中“@ 符号”功能 的详细使用指南。它讲解了如何在 AI 聊天中通过输入 @ 来快速引用代码、文件、文档等不同类型的内容，从而为 AI 提供更具体、更精准的上下文环境，提升回答的准确性。

核心内容分析

功能介绍

  • 核心作用：在 Cursor 的聊天窗口中，输入 @ 符号会弹出一个菜单，允许用户选择并引用项目中的特定内容。
  • 目的：直接、具体地指定上下文环境，避免 AI 因信息不足而产生错误或不相关的回答。

可用的 @ 符号列表

图片清晰地列出了所有可用的 @ 符号及其功能：

  • @Files：引用项目中的特定文件。
  • @Folders：引用整个文件夹，以获得更广泛的上下文。
  • @Code：引用代码库中的特定代码片段或符号（如函数、变量名）。
  • @Docs：访问项目文档和指南。
  • @Git：访问 Git 历史记录和更改。
  • @Past Chats：使用汇总的 Composer 会话历史。
  • @Cursor Rules：使用光标规则。
  • @Web：参考外部 Web 资源和文档。
  • @Lint Errors：引用 lint 错误（仅限 Chat）。

@Files 使用和测试

这部分是具体的实操演示，展示了如何使用 @Files 来引用文件。

  1. 准备测试文件：图片底部展示了一个名为 main.js 的测试文件，其中包含一个名为 zwf_login 的异步函数，用于用户登录。
  2. 代码内容：
    • 函数上方有详细的 JSDoc 注释，说明了参数和返回值。
    • 函数内部使用 request.post 发送登录请求。
  3. 使用场景：虽然图片没有展示完整的聊天对话，但可以推断，用户可以在聊天中输入 @main.js，然后询问 AI 关于这个登录函数的任何问题，例如“这个函数是如何处理登录失败的？”或“请为这个函数添加错误处理逻辑”。AI 会因为被明确告知要参考 main.js 文件，而能给出非常精准的回答。

总结

这张图片是 Cursor 高效使用技巧的关键部分。它教会用户如何通过 @ 符号这个“快捷键”，将 AI 的注意力精准地引导到需要分析的代码、文件或文档上，从而极大地提升人机协作的效率和准确性。这是一种“主动提供上下文”的高级用法，是成为 Cursor 高手的必经之路。

image

 

image

 

image

 

这张图片是 Cursor 编辑器使用教程的一部分，专门讲解了如何使用 @Docs 功能来连接和查询外部官方文档。这个功能允许用户将常用工具和框架的官方文档集成到 Cursor 中，从而在编写代码时能够快速获取最新、最权威的信息，提高开发效率。

核心内容分析

@Docs 作用说明

这部分解释了 @Docs 功能的核心价值，即将 Cursor 与外部官方文档连接起来。

  • API 参考：查询函数签名、参数、返回类型等。
  • 入门指南：获取设置、配置、基本用法等信息。
  • 最佳做法：学习官方推荐的模式和实践。
  • 特定于框架的调试：查阅官方提供的故障排除指南。

@Docs 对应文档配置

这部分详细说明了如何在 Cursor 中配置外部文档。

  • 配置路径：通过 cursor settings > features > Docs 进入配置页面。
  • 配置界面：图片中展示了一个“Add new doc”的弹窗，包含三个主要字段：
    • NAME：文档的名称或简称，用于在系统中区分不同的文档配置。示例中填写了 MyBatis。
    • PREFIX：文档 URL 的前缀部分，用于拼接完整路径。示例中填写了 https://baomidou.com。
    • ENTRYPOINT：文档的入口地址，即用户访问该文档时最先进入的页面。示例中填写了 https://baomidou.com/introduce/。
  • 字段解释：
    • name：用于标识文档，方便后续快速找到和关联。
    • prefix：作为统一的基础地址标识，便于管理文档地址。
    • entrypoint：文档的起始访问页面，用户通过这个地址可以直接进入文档内容。

测试 @Docs 对话

这部分展示了如何使用配置好的 @Docs 功能进行查询。

  • 用户指令：在聊天窗口中输入 基于 @MyBatis-plus 查询下乐观锁插件如何使用。
  • AI 响应：AI 会根据用户指令，从配置好的 MyBatis-Plus 文档中查找关于“乐观锁插件”的使用方法，并给出相应的回答。

总结

这张图片是 Cursor 高级功能教程的重要组成部分。它教会用户如何将外部官方文档集成到编辑器中，通过 @Docs 功能实现对权威信息的快速查询，从而在开发过程中获得更准确、更及时的帮助。这对于使用各种框架和库的开发者来说，是一个非常实用的功能。

image

 

image

 

这张图片是 Cursor 编辑器使用教程的进阶部分，重点讲解了 @Web 功能的使用，并通过一个决策流程图清晰地对比了 @Docs、@Web 和 MCP 这三种获取信息方式的适用场景。

核心内容分析

@Web 功能详解

这部分介绍了 @Web 的核心作用：让 AI 能够实时搜索互联网上的最新信息、博客文章和社区讨论。

  • 适用场景：
    • 查找最新教程：获取社区生成的最新内容和示例。
    • 比较不同方法：查找对比不同技术方案的文章。
    • 获取最新更新：查询框架或工具的最新版本更新或官方公告。
    • 获取多种视角：了解不同开发者对同一问题的处理方法和思路。

@Web 使用测试

图片通过一个具体的例子展示了如何使用 @Web。

  • 用户指令：在聊天框中输入 @web React 19 的最新性能优化。
  • AI 响应：AI 会执行网络搜索，并整合搜索结果，给出关于 React 19 性能优化的详细回答，内容可能包括：
    • React Compiler (React 编译器)：介绍其如何自动优化组件渲染，无需手动使用 memo。
    • 自动批处理 (Automatic Batching) 增强：说明其在更多场景下（如 setTimeout、Promise 回调中）自动合并状态更新，减少不必要的重新渲染。
  • 结果展示：AI 的回答不仅包含文字解释，还附带了代码示例，直观地展示了优化前后的代码差异。

@Docs、@Web 和 MCP 的决策对比

图片底部的流程图是核心亮点，它为用户在不同场景下选择哪种信息获取方式提供了清晰的决策路径。

  1. 首先问：你需要什么信息？
    • 公共框架/库 (Public frameworks/libraries)：
      • 如果需要官方文档（API 参考、指南、最佳实践）→ 使用 @Docs。
      • 如果需要社区教程、比较文章等 → 使用 @Web。
    • 近期社区知识/故障排除 (Recent community knowledge/troubleshooting)：
      • 直接指向 → 使用 @Web（搜索最近的帖子、GitHub Issues 等）。
    • 内部公司信息 (Internal company information)：
      • 如果有现成的 MCP 集成（如 Confluence、Google Drive）→ 使用现有的 MCP。
      • 如果没有 → 构建自定义 MCP（连接内部 API 或专有系统）。

总结

这张图片是 Cursor 编辑器使用教程的进阶部分，重点讲解了 @Web 功能的使用，并通过一个决策流程图清晰地对比了 @Docs、@Web 和 MCP 这三种获取信息方式的适用场景。

核心内容分析

@Web 功能详解

这部分介绍了 @Web 的核心作用：让 AI 能够实时搜索互联网上的最新信息、博客文章和社区讨论。

  • 适用场景：
    • 查找最新教程：获取社区生成的最新内容和示例。
    • 比较不同方法：查找对比不同技术方案的文章。
    • 获取最新更新：查询框架或工具的最新版本更新或官方公告。
    • 获取多种视角：了解不同开发者对同一问题的处理方法和思路。

@Web 使用测试

图片通过一个具体的例子展示了如何使用 @Web。

  • 用户指令：在聊天框中输入 @web React 19 的最新性能优化。
  • AI 响应：AI 会执行网络搜索，并整合搜索结果，给出关于 React 19 性能优化的详细回答，内容可能包括：
    • React Compiler (React 编译器)：介绍其如何自动优化组件渲染，无需手动使用 memo。
    • 自动批处理 (Automatic Batching) 增强：说明其在更多场景下（如 setTimeout、Promise 回调中）自动合并状态更新，减少不必要的重新渲染。
  • 结果展示：AI 的回答不仅包含文字解释，还附带了代码示例，直观地展示了优化前后的代码差异。

@Docs、@Web 和 MCP 的决策对比

图片底部的流程图是核心亮点，它为用户在不同场景下选择哪种信息获取方式提供了清晰的决策路径。

  1. 首先问：你需要什么信息？
    • 公共框架/库 (Public frameworks/libraries)：
      • 如果需要官方文档（API 参考、指南、最佳实践）→ 使用 @Docs。
      • 如果需要社区教程、比较文章等 → 使用 @Web。
    • 近期社区知识/故障排除 (Recent community knowledge/troubleshooting)：
      • 直接指向 → 使用 @Web（搜索最近的帖子、GitHub Issues 等）。
    • 内部公司信息 (Internal company information)：
      • 如果有现成的 MCP 集成（如 Confluence、Google Drive）→ 使用现有的 MCP。
      • 如果没有 → 构建自定义 MCP（连接内部 API 或专有系统）。

总结

这张图片不仅教会了用户如何使用 @Web 功能来获取实时、广泛的网络信息，更重要的是，它通过一个决策流程图，帮助用户系统性地理解了 @Docs（官方、权威）、@Web（实时、广泛）和 MCP（内部、专有）三者的定位和区别，从而在实际开发中能更高效、准确地选择工具来获取所需信息。

这张图片不仅教会了用户如何使用 @Web 功能来获取实时、广泛的网络信息，更重要的是，它通过一个决策流程图，帮助用户系统性地理解了 @Docs（官方、权威）、@Web（实时、广泛）和 MCP（内部、专有）三者的定位和区别，从而在实际开发中能更高效、准确地选择工具来获取所需信息。

image

 

image

 

image

 

这张图片生动地展示了 Cursor 编辑器利用 @Lint Errors 功能进行自动化错误修复的实战过程。它将代码编辑、终端报错和 AI 聊天修复三个环节整合在一起，演示了一个完整的“发现问题 -> AI 分析问题 -> AI 修复问题”的开发工作流。

核心内容分析

问题发现：终端报错

图片左下角的终端（Terminal）窗口显示了程序运行后的结果。

  • 程序输出：程序首先打印了排序前的数组 64 34 25 12 22 11 90。
  • 错误信息：紧接着，程序抛出了一个 java.lang.ArrayIndexOutOfBoundsException 异常。
    • 错误详情：Index 7 out of bounds for length 7，明确指出程序试图访问索引为 7 的元素，但数组的长度只有 7（有效索引为 0-6）。
    • 错误位置：堆栈跟踪（Stack Trace）指明错误发生在 BubbleSort.java 文件的第 29 行。

问题诊断与修复：AI 聊天窗口

图片右侧的 AI 聊天窗口展示了 Cursor 如何帮助用户解决问题。

  • 上下文引入：用户在聊天框中使用了 @BubbleSort.java 和 @Linter Errors。@Linter Errors 会自动将当前文件的代码检查错误（包括编译错误和运行时异常）作为上下文提供给 AI。
  • AI 分析：AI 准确地识别了问题，并回复：“我看到代码中仍然存在数组越界的问题。错误信息显示在 BubbleSort.java 的第 29 行，当尝试访问 arr[i+2] 时...”。这表明 AI 不仅读取了错误信息，还结合了代码上下文进行了分析。
  • AI 修复方案：
    • AI 提出了具体的修改建议，并以代码对比（diff）的形式展示出来。
    • 修改内容：将错误的 System.out.print(arr[i+2] + " "); 修改为正确的 System.out.print(arr[i] + " ");。
    • 解释原因：AI 详细解释了为什么 i+2 会导致越界（当 i 接近数组末尾时，i+2 会超出数组长度），并举例说明（数组长度为 7，当 i=5 时，i+2=7，超出有效索引范围 0-6）。

最终效果

整个过程展示了 Cursor 强大的智能辅助能力。开发者无需手动分析复杂的堆栈信息，只需通过简单的 @ 符号指令，AI 就能自动完成错误定位、原因分析和代码修复，极大地提升了调试效率和开发体验。

image

 

这张图片展示了一份关于使用Cursor进行Chrome浏览器插件开发的实战教程。内容涵盖了从开发流程理论到具体项目实战的起步阶段（需求与设计）。

以下是详细的内容分析：

1. 核心理论：开发流程

图片顶部展示了“Cursor官网开发指导流程”图，强调了现代AI辅助开发的标准化步骤：

  • Project（项目） -> Design（设计） -> Code（编码）
  • 在编码之后，进入一个循环验证过程：Test（测试） -> Verify（验证） -> Feedback（反馈） -> 回到Code进行修改。
  • 这表明教程强调的是一种迭代式、反馈驱动的开发模式。

2. 实战项目：5.1 Cursor设计Chrome浏览器插件

这部分是教程的核心，主要包含两个步骤：

第一步：需求设计

教程引导用户创建一个名为01_chrome插件需求和要求说明的文档，并给出了具体的功能需求清单：

  • 核心功能：
    1. 解释：解释选中的段落或关键词。
    2. 翻译：支持中英文互译。
    3. 朗读：支持中英文朗读。
    4. 润色：润色和替换选中的文本文案。
  • 细节与交互要求：
    • 交互方式：选中文字时，插件以悬浮窗形式出现在上方，顺序为“解释、翻译、朗读、润色”。
    • 结果展示：解释、翻译、润色的结果直接显示在悬浮窗下方。
    • 语言选择：翻译功能需包含语言选择（中文/英文）。
    • 编辑替换：润色结果允许修改，并提供“一键替换”功能。
    • 技术实现：翻译、解释、润色功能需调用Kimi的API；朗读功能直接调用Chrome浏览器内置API。
    • 文档要求：需编写readme文档，说明部署过程。

第二步：设计和生成项目UI图文本

这一步展示了如何利用Cursor的Chat Agent模式将需求转化为具体的设计文档。

  • 操作指令：教程展示了如何向AI发送指令，引用之前的需求文档（@01_chrome插件需求...），要求AI根据需求写一份“项目的UI文本设计图”，并保存到02_chrome插件UI设计图文件中，风格要求“简洁，清晰”。
  • 生成结果：图片底部展示了AI生成的02_chrome插件UI设计图的开头部分，包含“悬浮菜单设计”、“基础悬浮菜单”等结构化文本，证明AI已经开始根据需求输出具体的设计方案。

总结

这张图片是一个非常具体的**“提示词工程 + 软件开发”教学案例。它不仅仅是在教写代码，更是在教如何像产品经理和技术主管一样思考**：先定义清晰的流程（Project -> Design -> Code），再编写详细的需求文档，最后利用AI将需求转化为设计文档，为后续的代码编写打下坚实基础。

image

 

image

 

image

 

image

 

这张图片展示了在 Cursor 编辑器中进行 Chrome 插件开发 的一个具体操作场景，属于一个名为“2小时玩转cursor”的教程的一部分。

图片内容可以分为三个主要区域来理解：

左侧：代码编辑器区域

这是主要的编辑窗口，显示了一个名为 01_chrome插件需求和要求说明 的文件。文件内容是关于一个 Chrome 插件的功能需求列表，非常清晰：

  • 核心功能：
    • 解释选中的段落或关键词。
    • 翻译选中的段落或关键词（支持中英互译）。
    • 朗读选中的段落或关键词（支持中英朗读）。
    • 润色和替换选中的文本文案。
  • 细节要求：
    • 交互方式：选中文字后，插件以悬浮窗形式出现，显示顺序为“解释、翻译...”。
    • 结果展示：结果直接显示在悬浮窗下方。
    • 语言选择：翻译功能需有语言选择。
    • 编辑功能：润色结果可编辑，并提供“一键替换”功能。
    • 技术栈：翻译、解释、润色功能使用 Kimi 的 API；朗读功能使用 Chrome 内置 API。
    • 文档：需要编写 readme 文档，说明部署过程。

右侧：AI 聊天交互区域

这是 Cursor 的核心功能——AI 助手（Agent）的交互界面。

  • 用户指令：用户正在向 AI 发送指令。指令内容是：“根据插件需求文档，帮我写一份项目的UI文本设计图，将设计图写到 02_chrome插件UI设计图 文件中！要求页面简洁、清晰！”
  • 上下文引用：指令中使用了 @01_chrome插件需求和要求说明，这表明用户正在将左侧的需求文档作为上下文提供给 AI，让 AI 基于这份文档来工作。
  • 操作模式：用户选择了 Agent 模式，这通常是 Cursor 中功能更强大的 AI 模式，可以执行更复杂的任务，如创建和修改文件。

顶部：系统提示

图片顶部有一个灰色的系统提示条，内容是：“要退出全屏，请将鼠标移动到屏幕顶端或按 Esc”。这说明当前截图是在全屏模式下进行的，这个提示是操作系统或浏览器本身的功能，与 Cursor 教程内容无关。

总结

这张图片生动地展示了 AI 辅助编程 的一个典型工作流：

  1. 定义需求：在编辑器中清晰地写出项目需求。
  2. 利用 AI：通过聊天界面，引用需求文档，向 AI 下达具体、明确的指令（如生成 UI 设计文档）。
  3. 自动化执行：AI（Agent）会根据指令和上下文，自动生成相应的文件或代码，极大地提高了开发效率。

这个场景完美地诠释了“2小时玩转cursor”这类教程的核心——如何利用 AI 工具将想法快速转化为实际的开发步骤和成果。

image

 

这张图片是关于Chrome插件开发教程的后续部分，主要讲解了UI设计规范、Cursor配置以及Kimi API密钥获取的具体步骤。

1. UI与交互设计规范

图片顶部延续了之前的UI设计文档内容，详细规定了插件悬浮窗的具体表现：

  • 间距标准：
    • 内边距：8px
    • 按钮间距：4px
    • 功能区间距：12px
  • 交互规范 (3.4节)：
    • 触发：选中文本后，悬浮菜单自动显示。
    • 展开：点击功能按钮后，结果区域自动展开。
    • 隐藏：鼠标移出区域，菜单自动隐藏。
    • 反馈：所有按钮要有Hover效果（背景色变浅）。
    • 编辑：编辑区域支持直接修改，替换按钮可一键替换原文。
  • 响应式设计 (第4节)：
    • 悬浮菜单宽度限制在最小200px，最大400px之间。
    • 高度自适应内容。
    • 确保在各种屏幕分辨率下正常显示。

2. 配置和导入Kimi Docs文档

这部分指导用户如何在Cursor中配置外部文档，以便AI能更好地理解和调用Kimi API。

  • 配置路径：cursor settings > Features > Docs > add new doc
  • 配置截图：
    • NAME：输入 kimi api（被红框标记）。
    • PREFIX：输入 https://platform.moonshot.cn。
    • ENTRYPOINT：输入 https://platform.moonshot.cn/docs。
    • 操作：点击右下角的 Confirm 按钮（被红框标记）。
  • 目的：这一步是为了让Cursor的AI能够索引并参考Kimi的官方开发文档，从而生成更准确的代码。

3. 生成Kimi API Key

这部分指导用户获取开发所需的API密钥。

  • 登录地址：提供了Kimi API用户中心的链接。
  • 创建Key：指导用户创建API Key，并提示“第一次赠送15元”，降低了开发门槛。
  • 操作截图：展示了Kimi平台的后台界面，弹出了一个“新建API Key”的对话框，用户需要在此输入名称并创建。

总结

这张图片是开发教程中的环境准备与详细设计阶段。它不仅定义了插件的视觉和交互细节（让AI写代码时有据可依），还手把手教用户完成了AI辅助开发的关键配置（导入文档）和后端服务准备（获取API Key），是连接需求分析与实际编码的重要桥梁。

image

 

image

 

这张图片展示了一个关于 Chrome 插件开发实战教程 的后续步骤，涵盖了从界面参考、功能实现到配置与调试的全过程。

以下是详细的内容分析：

1. 参考界面准备（5.2 第1点）

  • 教程首先建议准备一个参考界面，并展示了一个名为“参考豆包”的截图。
  • 截图内容：这是一个典型的浏览器划词翻译/助手工具的 UI 示例。
    • 顶部有工具栏：AI 搜索、问问豆包、解释、翻译、朗读。
    • 底部有一个下拉菜单：选择语言。
    • 这为接下来的开发提供了视觉标准和功能布局的参考。

2. 实现插件功能（5.2 第2点）

这是核心步骤，展示了如何利用 Cursor 的 AI 功能来生成代码。

  • 用户指令（Prompt）：
    • 用户在 Cursor 的聊天框中输入了一段非常详细的指令，并引用了多个上下文文件（通过 @ 符号）：
      • @01_chrome插件需求和要求说明：引用了之前定义的功能需求。
      • @02_chrome插件UI设计图：引用了之前生成的 UI 设计规范。
      • @doubaoui.png：引用了刚才展示的参考界面图片。
    • 具体任务要求：
      1. 基于上述需求和设计图，以及参考图片的风格，在当前 chrome-plugin 文件夹下实现功能。
      2. 提取单独的配置文件，用于填写 Kimi API 的 URL 和 Key。
      3. 代码中必须添加中文注释。
      4. 实现后需自我检查，确保插件正常运行。

3. 配置 Kimi API Key（5.2 第3点）

教程展示了 AI 生成的配置文件代码示例（可能是 config.js 或类似文件）。

  • 代码结构：
    • 定义了一个 config 常量对象。
    • Kimi API 配置：
      • apiUrl: 设置为 'https://api.moonshot.cn/v1'，并注释提示替换为实际 URL。
      • apiKey: 占位符 'YOUR_KIMI_API_KEY'，提示用户替换为真实的密钥。
    • 默认设置：
      • translationTarget: 默认翻译目标语言为 'zh'（中文）。
      • speechLanguage: 默认朗读语言为 'zh'（中文）。
    • 导出：使用 export default config; 导出配置，以便在其他文件中引用。

4. 插件调试和发布（5.3）

这部分展示了开发过程中遇到的第一个问题。

  • 问题描述：第一次运行出现问题（使用 cursor 调试）。
  • 错误信息：
    • 标题：“未能成功加载扩展程序”。
    • 文件路径：~\Desktop\chrome-plugin。
    • 具体错误：Could not load icon 'icons/icon16.png' specified in 'icons'。
    • 分析：这是一个常见的 Chrome 插件开发错误，意味着 manifest.json 文件中配置了图标路径，但实际项目中缺少该图标文件（icon16.png）。

总结

这张图片完整地记录了从“看图说话”（提供参考图）到“指令生成代码”（实现功能），再到“配置环境”和“遇到报错”的真实开发流。它展示了如何利用 AI 辅助工具（Cursor）快速搭建项目骨架，同时也反映了实际开发中会遇到的具体报错细节。

这张图片展示了在 Cursor 编辑器中进行 Chrome 插件开发 的一个关键步骤，即利用AI生成UI设计文档并准备开始编码。

以下是对图片内容的详细分析：

1. 核心操作：AI生成UI设计文档

图片右侧的聊天窗口显示，用户正在与 Cursor 的 AI 助手进行交互。

  • 用户指令（底部红框区域）：
    • 用户引用了两个关键文件：@01_chrome插件需求和要求说明 和 @02_chrome插件UI设计图。
    • 用户还引用了一个图片文件 doubaoui.png 作为风格参考。
    • 核心任务：要求 AI 基于上述需求、设计图和参考图片的风格，在当前 chrome-plugin 文件夹下实现插件功能。
    • 额外要求：
      • 提取单独的配置文件用于填写 Kimi API 的 URL 和 Key。
      • 代码中添加中文注释。
      • 实现后进行自我检查，确保插件正常运行和实现功能。
  • AI 的响应（右侧聊天窗口）：
    • AI 首先确认了任务：“我来帮您创建一个简洁清晰的Chrome插件UI设计文档。我会创建一个新文件来记录UI设计内容。”
    • AI 随后生成了一个名为 02_chrome插件UI设计图.md 的文件，内容非常详细，包括：
      • 悬浮菜单设计：包含基础布局和功能展开面板。
      • 具体功能界面设计：分别描述了“解释”、“翻译”（含语言选择）、“朗读”、“润色”（含编辑和替换）的界面。
      • 交互说明：定义了文本选中触发、功能切换、结果展示和编辑操作。
      • 样式规范：规定了颜色方案、字体、间距和动画效果。
    • AI 最后总结：“我已经创建了一个详细的UI设计文档...设计遵循了简洁清晰的原则...您觉得这个UI设计是否符合您的需求？如果需要调整，我可以根据您的反馈进行修改。”

2. 左侧：项目文件结构

左侧的文件浏览器显示了当前项目的文件结构：

  • 01_chrome插件需求和要求说明：这是项目的需求文档。
  • 02_chrome插件UI设计图.md：这是刚刚由 AI 生成的 UI 设计文档。
  • plugin.png：这可能是用户提到的 doubaoui.png 参考图片，或者是项目中的其他资源文件。

3. 中间：参考图片

中间区域显示了 plugin.png 的内容，这是一个功能丰富的 AI 工具界面，包含“智能模式全新上线”、“智能创作”、“AI阅读”、“画图修图”等多个模块。这很可能是用户希望插件最终呈现的视觉风格参考。

总结

这张图片完整地记录了从需求到设计再到编码准备的过渡阶段：

  1. 输入：用户提供了需求文档和视觉参考图。
  2. 处理：AI 根据输入生成了详细的 UI 设计文档。
  3. 输出/下一步：用户在底部输入框中发出了最终指令，要求 AI 基于所有材料开始编写代码，实现插件功能。

这体现了 Cursor 作为 AI 编程助手的强大能力：它不仅能写代码，还能辅助进行产品设计，将模糊的需求转化为具体的、可执行的设计方案。

image

 

image

 

image

 

posted on 2026-05-04 21:11  luzhouxiaoshuai  阅读(1081)  评论(0)    收藏  举报

导航