序言

本教程由「小荣的网络开发日志」实操整理编写，实操踩坑验证，内容真实可靠。

遇到操作问题可直接联系作者，转载需标注原文出处，禁止私自篡改商用。

承接网站、APP、小程序、各类脚本定制开发；

AI 编程教学、一对一项目全程陪跑，提供免费技术咨询。

联系方式： 微信：rongyaolg 电话：18375295913

Cursor Chat 与 Composer

Cursor 的 AI 聊天窗口中常见两个重要功能：Chat 和 Composer。

它们都是 AI 辅助编程工具，但适合的任务不一样。

简单理解：

• Chat：更像一个可以随时提问的 AI 助手
• Composer：更像一个可以根据需求生成和修改代码的 AI 编程工具

一、Chat 和 Composer 的区别

普通用户可以这样记：

• 想问问题，用 Chat
• 想让 AI 写代码或改代码，用 Composer

平时开发中，可以先用 Composer 生成代码，再用 Chat 解释、检查或优化代码。

二、什么时候用 Chat

Chat 更适合即时问答和简单任务。

适合这些情况：

示例问题：

复制请解释当前文件的作用。

复制这个报错是什么意思？应该检查哪个文件？

三、什么时候用 Composer

Composer 更适合代码生成和复杂任务。

适合这些情况：

Composer 可以理解项目结构和文件之间的关系，因此更适合处理复杂代码任务。

四、Cursor Chat 介绍

Cursor Chat 是集成在编辑器中的 AI 对话工具。

你可以一边写代码，一边向它提问，不需要离开编辑器。

Chat 的主要能力：

五、Chat 示例：让 AI 添加注释

假设当前文件中有一段代码：

复制export default function AboutPage() {
  return <h1>关于我们</h1>;
}

你可以在 Chat 中输入：

复制请帮我给这段代码添加简洁注释，说明组件的作用。

AI 可能会返回类似修改：

复制// 关于我们页面组件
export default function AboutPage() {
  return <h1>关于我们</h1>;
}

如果结果符合你的需求，可以点击 Apply 按钮，将修改应用到代码文件中。

应用后建议检查：

1. 是否只修改了需要的代码
2. 注释是否准确
3. 文件是否还能正常运行

六、Composer 介绍

Composer 可以根据自然语言描述生成代码，也可以修改多个文件。

它更适合这些任务：

• 生成完整页面
• 创建组件
• 根据需求文档生成代码
• 修改多个文件
• 优化代码结构
• 根据项目上下文实现功能

Composer 不只是回答问题，它更偏向“动手写代码”。

七、Composer 示例：根据需求文档生成代码

你可以先创建一个目录，例如：

复制todo-demo

然后在里面新建一个需求文档：

复制requirements.md

需求文档内容可以这样写：

复制# 待办清单需求

请创建一个简单待办清单页面。

功能：
1. 可以输入待办事项
2. 点击按钮添加待办
3. 可以勾选完成
4. 可以删除待办

技术要求：
1. 使用 HTML、CSS、JavaScript
2. 页面简洁
3. 代码要有简单注释

然后在 Composer 中输入：

复制请根据 @Files requirements.md 生成这个待办清单项目。
要求：
1. 创建 index.html、style.css、main.js
2. 保持代码简单，适合新手学习
3. 完成后告诉我怎么打开页面

Composer 会根据需求文档生成对应文件。

八、继续优化 Composer 生成的代码

Composer 生成代码后，你还可以继续追加要求。

例如：

复制请把页面样式改得更清爽一点，按钮颜色统一，输入框宽度适中。

或者：

复制请给 main.js 中的关键逻辑添加注释，方便新手理解。

这样可以在同一个任务中逐步优化结果。

九、Chat 和 Composer 配合使用

推荐流程：

不要一开始就让 Composer 做特别大的任务。新手建议从一个页面、一个按钮、一个小功能开始。

十、选择 Chat 还是 Composer

十一、小白注意事项

AI 生成代码后，不要盲目接受。

每次都要检查：

1. 修改了哪些文件
2. 有没有改到无关文件
3. 项目还能不能运行
4. 功能是否符合需求
5. 不懂的代码要让 Chat 解释

官方教程链接

• Cursor 官方文档
• Cursor 官方下载