一、快速阅读指南

我将在每个章节的标注重要程度星级和内容小结，帮助你快速选择需要的章节阅读
如果你对如何搭建一个项目还有疑惑，推荐优先阅读第二章，帮助您快速搭建一个开发环境
如果您对 AI+编程已经有了基础的认识，推荐优先阅读第三章的 AI+编程提示词心法，帮助您掌握提示词的使用技巧和经验
如果你对如何做一个自己的聊天机器人特别感兴趣，推荐优先阅读第四章 AI 聊天机器人的项目手把手解读，帮助您了解一个聊天机器人究竟是怎么实现的'
如果你对如何通过 AI 快速做一个好看，优雅，美观的前端页面，推荐优先阅读第五章界面设计篇，帮助您掌握如何快速做出令人第一眼哇塞的页面

二、目标读者画像：有基础编程知识，想尝试 AI 编程的新手程序员

如果你是期望通过 AI 提升日常开发效率的个人开发者

或者你是对编程充满热情，具备良好逻辑思维的零基础学习者

又或者你是希望通过 AI+编程变现的青年学生

我希望你

• 掌握至少一门主流编程语言（如 Python/JavaScript/Java）的基础语法和数据结构，

• 理解基本的软件开发概念如变量、函数、循环和条件语句

• 具备使用 IDE 或文本编辑器进行过 500 行+代码编写的实践经验

• 可能缺乏系统架构设计和工程最佳实践的深入认识

三、预期成果：带你彻底了解什么是 AI+编程

跟着我的脚步，大家将将能够：

熟练使用 Cursor 进行 AI 辅助开发
独立完成一个属于自己的独一无二的 AI 聊天机器人项目
理解 AI+Cursor 开发的基本流程和最佳实践
理解什么是 Web 项目
理解什么是LLM聊天客户端

四、成果展示

一）首页

二）欢迎页

三）聊天页面

四）对话（带有个人独特喜好的设计）

五）语法高亮

五、开启 AI 辅助开发的奇妙之门

在这个风起云涌的 AI 时代，软件开发的方式正在经历前所未有的变革。就像自动驾驶改变了我们的出行方式一样，AI 辅助开发正在重新定义程序员的工作方式。传统的编程开发，就像是在茫茫大海中独自远航，而有了 AI 助手的陪伴，则更像是有了一个经验丰富的大副（这也许是为什么微软一开始将他们的编程工具命名为 Copilot 的原因），为你指明方向，化解难题。

一）为什么选择 AI 辅助开发？

想象一下，当你在编写代码时遇到困难，不用再在 Stack Overflow 上漫无目的地搜索，只需要像和同事交谈一样，向 AI 助手描述你的问题。它不仅能理解你的需求，还能提供定制化的解决方案。这就是 AI 给开发带来的革命性突破。

在传统开发模式中，程序员需要掌握大量的 API 文档、开发框架和最佳实践。而在 AI 辅助开发环境中，这些知识仍然重要，但获取和应用的方式发生了根本性的改变。AI 就像是你的私人导师，既能帮你解答疑惑，又能给出符合实际场景的建议。

二）我是小白，我真的也能编程吗？

也许你正在思考：我是一个编程新手，真的能驾驭 AI 辅助开发吗？答案是肯定的。本次 AI 编程保姆级教程，会从 AI 编程工具的使用，AI 编程实战全流程，AI 聊天机器人产品设计几大部分，帮助你从零开始入门 AI 编程。

掌握与 AI 结对编程的核心技巧，让 AI 成为你最得力的开发搭档
学会在开发过程中精准提问，获得最有价值的答案
理解如何将 AI 的建议转化为实际可用的代码
建立起适合自己的 AI 辅助开发工作流
学会如何做一个 AI 聊天机器人

无论你是刚接触编程的新手，还是想要提升开发效率的编程爱好者，都能找到适合自己的学习路径。在这里，我们追求的不仅是代码的实现，更是与 AI 共同成长的开发体验。

现在，让我们携手踏上这段充满探索与收获的 AI 开发之旅。在这条路上，你将逐步掌握新时代程序员必备的技能，开启属于你的编程新篇章。

六、搭建理想的开发环境

在开始 AI 辅助开发之前，我们首先需要搭建一个合适的开发环境。作为初学者，你可能会问：为什么要在 Linux 环境下进行 Web 开发？这是因为 Linux 系统提供了更好的开发体验和更接近生产环境的开发条件。让我们一步步来搭建这个开发环境。

一）选择你的 Linux 开发环境

对于 Web 开发来说，Linux 环境能够提供更好的包管理、更方便的命令行工具，以及更接近实际部署环境的开发体验。你有三种方式来获得 Linux 环境：

通过虚拟机在本地运行 Ubuntu
使用阿里云/腾讯云等云服务商提供的轻量应用云服务器/VPS（过于复杂，小白不推荐）
或者使用在线的云环境平台（同样需要付费，并且配置更复杂，长期来看还是自己部署服务器）
Sealos: 专为云原生开发打造的以 K8s 为内核的云操作系统
因此新手推荐从虚拟机开始实践

安装虚拟机软件

首先需要在你的电脑上安装 VMware Workstation（Windows 用户）或 VMware Fusion（Mac 用户）。安装过程很简单，只需要下载安装包并按照提示完成安装即可。

https://blogs.vmware.com/workstation/2024/05/vmware-workstation-pro-now-available-free-for-personal-use.html

2.安装 Ubuntu 系统

在虚拟机中安装 Ubuntu 是个不错的选择，因为 Ubuntu 具有良好的界面和丰富的社区支持。安装步骤如下：

下载 Ubuntu 桌面版 ISO 镜像（推荐 LTS 版本）

https://cn.ubuntu.com/download/desktop

在 VMware 中创建新的虚拟机
选择下载的 ISO 文件作为启动盘
按照安装向导完成系统安装

二）配置基础开发环境

无论你选择哪种方案，都需要配置以下基础环境：

配置 SSH 访问

SSH 是远程访问服务器的标准工具。

第一步：检查 SSH 服务状态

# 检查SSH服务是否已安装并运行
sudo systemctl status ssh

# 如果没有安装，则安装SSH服务器
sudo apt update
sudo apt install openssh-server

# 确保SSH服务开机自启动
sudo systemctl enable ssh

第二步：配置 SSH 密钥， SSH 密钥提供了比密码更安全的认证方式。你需要创建和配置 SSH 密钥：

# 生成SSH密钥对
# -t 指定加密类型为ed25519（更现代安全的选择）
# -C 添加注释，通常是邮箱地址
ssh-keygen -t ed25519 -C "your_email@example.com"

# 启动ssh-agent并添加私钥
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

# 显示公钥内容，稍后需要添加到GitHub等平台
cat ~/.ssh/id_ed25519.pub

第三步：在 Windows 中使用 SSH 密钥

打开 Cursor，下载 remote-ssh 插件

在虚拟机中找到虚拟机的 ip 地址

在 Cursor 中配置 ssh 连接到虚拟机

此时，你的 Cursor 就能连接到你本地虚拟机中的 Ubuntu 了。

2.安装 Git 版本控制（可选）

Git 是必备的版本控制工具：

sudo apt install git
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
git config --list # 检查配置

3.安装 1Panel 管理面板（推荐）

对于初学者来说，使用 1Panel 这样的可视化面板能大大简化环境管理：

wget -O install.sh https://resource.fit2cloud.com/1panel/package/quick_start.sh
sudo bash install.sh

分别输入用户名，密码，安全入口，端口，每次按回车。

安装完成后，你可以通过 Web 界面轻松管理你的开发环境。

牢记你的用户名和密码和安全入口，关闭终端后就不可见啦

三）通过 1Panel 安装开发环境

1Panel 为新手提供了友好的界面来管理开发环境。

通过面板，你可以轻松安装和管理：

Node.js 运行环境
数据库（MySQL、Redis 等）
网络服务器（Nginx）
开发工具链

使用面板安装环境的优势在于：

可视化操作，无需记忆复杂的命令
自动处理依赖关系
提供一键安装功能
可视化的环境监控和管理

以安装 Node.JS 为例，点击左侧网站->运行环境->Node.js 即可，推荐包管理器使用 pnpm

pnpm 通过硬链接机制显著节省磁盘空间，安装速度比 npm 快 2-3 倍。其严格的依赖管理避免了幽灵依赖问题，更适合现代前端项目。pnpm 完全兼容 npm 生态，支持 monorepo，能直接替代现有 npm 项目。

但是，其中有一个踩坑点！

由于 AI 受训练数据的影响，会习惯性使用默认的 npm 包管理器，我们需要明确的指出我们使用 pnpm 包管理器。

后面有一章我会专门介绍所有的坑点。

恭喜您完成了所有基础环境的搭建！这是开启 AI 辅助开发之旅的重要第一步。"工欲善其事，必先利其器"- 一个精心配置的开发环境将为您的编程之路铺就坚实基础。

在下一小节中，让我们一起探索如何与 AI 助手展开高效协作，释放它的全部潜能。相信在这个旅程中，您会发现 AI 不仅是一个强大的开发伙伴，更是一位耐心的编程导师。

七、基本功修炼篇：掌握 AI 对话的要诀✨✨✨

AI 编程中，最重要的一件事仍然是提示词，但又不只是提示词。

一）与 AI 助手的高效对话技巧（适合编程领域的提示词工程）

1、了解提示词工程的基本概念

如果你对什么是提示词工程还一无所知，可以先阅读提示词行动营的行动手册，以及小七姐和其他大神们写的精华帖

现在我假设你已经有了基本的提示词认知，我将告诉你更多的提示词实战心法

2、区分系统提示词和用户提示词

很多时候，我们看到网上的大佬们会分享一些很厉害很长的相对复杂的一大段提示词，这些提示词可能基于各种不同的框架，不同的原则，不同的心法，但本质上他们都属于系统提示词，是约束你和 AI 全部对话过程中的行为的，我们可以选择一个优秀的提示词作为我们一次实践中系统提示词即可。

https://cursor.directory/

在上面的大神提示词网站中，你能看到很多大神们分享的系统提示词，选择对应技术栈中你喜欢的一个即可。

点击 Cursor 右上角的齿轮图标，将系统提示词填入 Rules 输入框

3、编程提示词的最佳实践之一是清晰，清晰，清晰！

对于用户提示词，你可能了解过诸如 BROKE 原则/CO-STAR 原则/GCER 框架/...各种思维框架... 但是他们都更多是写作领域的提示词，随着大模型能力的进一步提升，尤其是在数学和编码层面的能力已经达到了一个比较高的水平，我们不需要写很多复杂的提示词就可以得到想要的结果。特别复杂的提示词反而可能导致你不知道哪个地方出现问题。对于编程领域，特别是在 Cursor 中，用户提示词不能太复杂，最重要的是直接和清晰表达

编程提示词的最佳实践是清晰明确且具有针对性，能够准确引导模型理解并回应你的问题

4、Cursor 编程中的最佳实践之二是明确引用上下文

如何提问才能获得最佳答案？编程领域的提问需要特别注意技术上下文的完整性。

比如，当遇到 React 组件开发问题时，应该清晰地说明开发环境、依赖版本和具体需求。

与其说"帮我写一个下拉菜单组件"，

不如说"请帮我实现一个基于 React 18 和 TypeScript 的多级下拉菜单组件，需要支持异步数据加载，并符合 WCAG 无障碍标准"。这样的提问能让 AI 准确把握技术要求和实现标准。

提供代码示例或错误信息时，应该包含必要的上下文代码和完整的错误堆栈。例如，在处理 TypeScript 类型问题时，不仅要展示报错的代码行，还要提供相关的接口定义和类型声明。这样的细节能帮助 AI 更准确地诊断问题并提供解决方案。

小技巧：

在 Cursor 中，通过＠明确指定文件，目录，代码片段，文档，项目代码库，互联网为上下文，能极大增强 Cursor 理解能力

让我们再次明确，编程提示词的最佳实践是清晰明确且具有针对性，能够准确引导模型理解并回应你的问题

以下是一个编程提示词的最佳实践：

我希望实现一个新的功能：
当 @ChatPages 聊天页面加载初始化时动态渲染逻辑。
根据 @ControlStore 中的 @enableRefreshWelcome 的值动态决定是加载 @Welcome 欢迎页面， 还是从 @SessionStore 中调用 @getCurrentSession 方法获取上一次最后的会话连接，渲染消息页面@MessagesRender 组件

5、Cursor 编程中的最佳实践之三化整为零

对于复杂的开发任务，采用化整为零的增量式开发对话最为有效。例如，在开发一个数据可视化仪表板时，可以先让 AI 提供基础组件结构：

interface DashboardProps {
  data: Array;
  layout: LayoutConfig;
}

const Dashboard: React.FC = ({ data, layout }) => {
  // 基础结构实现
}

逐步细化各个功能模块，比如数据过滤、图表交互等，通过多轮对话优化实现方案。

记住，心急吃不了热豆腐，先写简单的框架，在逐渐完善

二）学会表达，让 AI 理解你的真实需求

1、学会给定准确的要求和指标

有效的需求表达应当涵盖系统架构、技术栈选择、性能基准、安全规范等关键维度。

在实践中，我们可以通过详细说明

系统的架构设计要求（如微服务架构设计、负载均衡策略）
页面设计规范（如使用的 UI 样式库，图标库，CSS 库）
具体的性能指标（如响应时间阈值、并发用户数）
安全合规要求（如数据加密标准、访问控制机制）等方式
建立起 AI 能够准确理解和执行的需求模型。通过构建这样的系统化框架，不仅能够提升需求理解的准确度，还能为后续的迭代优化提供可靠的基础。例如：

"这个表格组件在处理 5000 条数据时出现明显卡顿，需要优化渲染性能，目标是将首次加载时间控制在 1 秒内，请考虑使用虚拟滚动或数据分片加载的方案。"

2、学会像写需求文档一样写提示词

例如，当你需要开发一个网站时，你不能简单地告诉 AI"我要一个购物网站"，而是需要绘制出一幅清晰的蓝图。在设计系统架构时会仔细考虑每个组件的作用一样，我们需要详细描述网站的功能需求、用户界面设计、性能要求以及安全考虑。

例如，你可以这样表达：

"我需要开发一个响应式的电子商务平台，支持多语言切换，集成支付系统，具备实时库存管理功能，并能承载至少 1000 个并发用户访问。用户界面需要遵循 Material Design 规范，确保跨平台兼容性。"

3、学会描述代码用例

进一步深入，我们可以通过具体场景来优化与 AI 的协作过程。假设你正在开发一个特定的功能模块，比如用户认证系统，你可以通过描述用例来引导 AI 理解需求：

"当新用户注册时，系统需要验证邮箱的唯一性，发送确认邮件，并在用户确认后自动创建账户。同时，我们需要实现 OAuth 2.0 协议，支持 Google 和 GitHub 账号登录，并确保所有密码都经过 bcrypt 加密存储。"

这种方式不仅让 AI 理解了具体的技术要求，还帮助它理解了背后的业务逻辑和安全考虑。这就像是在进行结对编程，通过清晰的沟通建立起默契的配合关系。

4、学会描述项目架构和业务逻辑

在需求描述的艺术方面，要学会从技术架构和业务逻辑两个层面来表达需求。例如，当需要 AI 协助设计一个用户认证系统时，应该这样写：

"我们正在开发一个企业级 React 应用，使用 React Query 处理服务端状态，需要实现基于 JWT 的认证系统。关键需求包括：支持多角色权限控制、集成 Single Sign-On、处理令牌刷新逻辑，并需要考虑前端路由保护的实现。"

5、学会分辨 AI 的错误并提供正确示例

AI 是一定会出现很多错误的！

但是 AI 同样能通过多次迭代，一步步解决错误。处理 AI 误解时，最有效的方法是通过代码示例来澄清。当发现 AI 的实现偏离预期时，可以指出："这个实现使用了 class 类模式，但我们项目中统一使用函数式组件和 Hooks 模式，请参考以下代码风格重构：

// 期望的实现风格
const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
  const { data, isLoading } = useQuery(['user', userId], fetchUserData);
  const [isEditing, setIsEditing] = useState(false);
  // ...
}

6、学会确定项目复杂度

有时候，AI 可能会提供过于简单或过于复杂的实现。但我们一开始都是在做一个玩具。这时需要明确指出期望的复杂度级别，比如：

"请简化状态管理逻辑，我们的项目是一个小型项目，目标用户为 100 人以内，不需要复杂的状态机制。我们优先使用 React Context 而不是 Redux"或"我们当前先实现一个简单的逻辑，但是考虑到后期扩展性，请添加更完善的接口类型定义和错误处理机制"。

7、学会代码审查

最后，善用代码审查式的反馈方式来优化实现。当 AI 提供的代码需要改进时，可以这样说：

"这个实现中的 useEffect 依赖项没有完全声明，可能导致闭包陷阱，另外考虑到可复用性，建议将这个逻辑抽取为自定义 Hook。"

8、小结

其实，无论什么样的提示词，本质上都是你自己要有清晰的思考。

精准的需求表达源于深入的思考框架，就像优秀的代码源于清晰的系统设计。