Chatbot 聊天网站

Chatbot 聊天网站 Chatbot 聊天网站 Modified July 21, 2025 经过反复和 Cursor 交流和战斗，你得到了一个基本的对话页面！ 2、图片分析：让 AI"看懂"图片的奥秘就结束了吗？当然不能啊。只有冷冰冰的文字是否太单调了呢？现代人生活怎么能少了图片。我们重新打开 OpenAI 的文档，看看图片是怎么做的：看起来好像也还是很简单，不就是 Content 字段多了个属性吗我们只需要实现上传图片到 OSS 服务，获取返回的网址，传递给 OpenAI 请求体继续和 Cursor 下达指令： AI 就像拥有了眼睛，可以看到我们的图片啦三）性能优化与调试 1、性能优化的小技巧思考一个问题，如果只是简单的粗暴的显示一整个消息列表，如果消息太多怎么办？通过和 AI 的交流，我们很快知道我们可以： 1. 虚拟列表渲染使用 react window 的 VariableSizeList 实现虚拟滚动，只渲染可视区域内的消息。 2. 记忆化组件和计算使用 useMemo 缓存排序后的消息列表，避免不必要的重新计算。 3. 组件懒加载使用 memo 包装组件，通过比较函数控制重渲染条件。 2、调试过程中的 AI 配合要点 1. 让 AI 帮助修复具体的错误当我们遇到错误时，第一步是要让 AI 帮助我们理解错误信息。就像医生解读检查报告一样，我们需要提供完整的错误信息、代码上下文以及已经尝试过的解决方案，就像向医生描述病症一样详细。这样 AI 才能给出准确的诊断和建议。在这个阶段，我们要学会提供关键信息，而不是盲目地粘贴所有代码。我们可以这样和 AI 对话： "我遇到了这个错误 [粘贴错误信息]，能帮我解释一下这个错误的含义，以及可能的原因吗？" 要点： • 完整复制错误信息，包括错误堆栈 • 描述错误发生的上下文 • 说明你已经尝试过的解决方案 2. 让 AI 帮助制定排查策略当我们获得 AI 的初步分析后，接下来是制定调试策略的阶段。此时我们可以请 AI 帮助设计一个逐步排查的路径，包括需要检查的变量、可能的断点位置、以及预期的输出结果。AI 会帮你理清思路，指出可能被忽略的细节。 "基于这个错误信息，你建议我按照什么步骤来排查问题？能给出具体的检查点吗？" 关键是让 AI 提供： • 逐步的排查路径 • 每个步骤的预期结果 • 可能需要检查的变量或状态 3. 让 AI 帮助代码审查在代码审查环节，我们要学会提供恰当的上下文。不仅要展示有问题的代码片段，还要说明这段代码的预期功能、当前的运行环境，以及与其他模块的关联。这样 AI 才能给出更有针对性的建议，而不是泛泛而谈。此外，在这个阶段要特别注意 AI 提出的性能优化建议。 "这是我的代码实现[粘贴相关代码]，你能帮我检查是否有潜在的问题或可以优化的地方吗？" 有效的代码审查请求应该： • 提供完整的相关代码片段 • 说明代码的预期功能 • 指出你特别关注的部分 4. 让 AI 帮助我们添加日志日志是调试过程中的重要工具。我们可以让 AI 帮助设计合理的日志策略，在关键节点添加有效的日志信息。这包括日志的位置、内容、格式，以及不同级别的日志划分。好的日志设计能让问题追踪变得更加轻松，就像给调试过程留下清晰的路标。经过反复和 Cursor 交流和战斗，你得到了一个基本的对话页面！ 2、图片分析：让 AI"看懂"图片的奥秘就结束了吗？当然不能啊。只有冷冰冰的文字是否太单调了呢？现代人生活怎么能少了图片。我们重新打开 OpenAI 的文档，看看图片是怎么做的：看起来好像也还是很简单，不就是 Content 字段多了个属性吗我们只需要实现上传图片到 OSS 服务，获取返回的网址，传递给 OpenAI 请求体继续和 Cursor 下达指令： AI 就像拥有了眼睛，可以看到我们的图片啦三）性能优化与调试 1、性能优化的小技巧思考一个问题，如果只是简单的粗暴的显示一整个消息列表，如果消息太多怎么办？通过和 AI 的交流，我们很快知道我们可以： 1. 虚拟列表渲染使用 react window 的 VariableSizeList 实现虚拟滚动，只渲染可视区域内的消息。 2. 记忆化组件和计算使用 useMemo 缓存排序后的消息列表，避免不必要的重新计算。 3. 组件懒加载使用 memo 包装组件，通过比较函数控制重渲染条件。 2、调试过程中的 AI 配合要点 1. 让 AI 帮助修复具体的错误当我们遇到错误时，第一步是要让 AI 帮助我们理解错误信息。就像医生解读检查报告一样，我们需要提供完整的错误信息、代码上下文以及已经尝试过的解决方案，就像向医生描述病症一样详细。这样 AI 才能给出准确的诊断和建议。在这个阶段，我们要学会提供关键信息，而不是盲目地粘贴所有代码。我们可以这样和 AI 对话： "我遇到了这个错误 [粘贴错误信息]，能帮我解释一下这个错误的含义，以及可能的原因吗？" "我遇到了这个错误 [粘贴错误信息]，能帮我解释一下这个错误的含义，以及可能的原因吗？" 要点： • 完整复制错误信息，包括错误堆栈 • 描述错误发生的上下文 • 说明你已经尝试过的解决方案 2. 让 AI 帮助制定排查策略当我们获得 AI 的初步分析后，接下来是制定调试策略的阶段。此时我们可以请 AI 帮助设计一个逐步排查的路径，包括需要检查的变量、可能的断点位置、以及预期的输出结果。AI 会帮你理清思路，指出可能被忽略的细节。 "基于这个错误信息，你建议我按照什么步骤来排查问题？能给出具体的检查点吗？" "基于这个错误信息，你建议我按照什么步骤来排查问题？能给出具体的检查点吗？" 关键是让 AI 提供： • 逐步的排查路径 • 每个步骤的预期结果 • 可能需要检查的变量或状态 3. 让 AI 帮助代码审查在代码审查环节，我们要学会提供恰当的上下文。不仅要展示有问题的代码片段，还要说明这段代码的预期功能、当前的运行环境，以及与其他模块的关联。这样 AI 才能给出更有针对性的建议，而不是泛泛而谈。此外，在这个阶段要特别注意 AI 提出的性能优化建议。 "这是我的代码实现[粘贴相关代码]，你能帮我检查是否有潜在的问题或可以优化的地方吗？" "这是我的代码实现[粘贴相关代码]，你能帮我检查是否有潜在的问题或可以优化的地方吗？" 有效的代码审查请求应该： • 提供完整的相关代码片段 • 说明代码的预期功能 • 指出你特别关注的部分 4. 让 AI 帮助我们添加日志日志是调试过程中的重要工具。我们可以让 AI 帮助设计合理的日志策略，在关键节点添加有效的日志信息。这包括日志的位置、内容、格式，以及不同级别的日志划分。好的日志设计能让问题追踪变得更加轻松，就像给调试过程留下清晰的路标。 "对于这段代码，你建议我在哪些关键点添加日志，以便更好地追踪问题？应该记录哪些信息？" "对于这段代码，你建议我在哪些关键点添加日志，以便更好地追踪问题？应该记录哪些信息？" AI 可以帮助： • 确定日志打印的位置 • 设计日志的内容和格式 • 提供不同级别的日志建议 5. 让 AI 帮助我们执行测试调试告一段落后，我们还需要 AI 帮助验证解决方案。这包括检查是否完全解决了问题，是否引入了新的隐患，以及解决方案的可维护性。在这个阶段，要特别注意边界条件和异常情况的处理，确保修复是全面和稳固的。 "基于这个功能的实现，你能帮我设计一些测试用例，特别是一些边界条件和异常情况的测试吗？" "基于这个功能的实现，你能帮我设计一些测试用例，特别是一些边界条件和异常情况的测试吗？" 重点关注： • 正常流程测试 • 边界条件测试 • 异常情况处理 • 性能相关测试 6. 让 AI 帮助我们总结编程的收获和复盘我们要善于总结每次调试的经验。让 AI 帮助我们提炼出问题的本质、解决方法的关键点，以及未来如何避免类似问题。这些经验将成为我们技术积累的重要部分，让我们在遇到类似问题时能够更快地找到解决方案。 "能帮我总结一下这次调试过程中的关键点和经验教训吗？以后遇到类似问题应该如何避免？" "能帮我总结一下这次调试过程中的关键点和经验教训吗？以后遇到类似问题应该如何避免？" 总结应包含： • 问题的根本原因 • 解决问题的方法论 • 预防措施建议 • 相关的最佳实践通过这种系统化的调试方法，配合 AI 的智能辅助，我们能够更高效地解决代码问题。 AI 是我们的助手和导师，但最终的判断和决策还是要依靠我们自己的专业素养。大家好，我是小林，这篇教程作者是Violet，AI 编程开源知识库作者。 ❤️ 大家好，我是 Violet，小林老师学员，一名 00 后大学生。现实和理论都告诉我们：懂得百点不如改变一点、真正的成长不在于自己懂了多少道理，而在于自己改变了多少。反思加行动是进步的最快方式。我梳理出了 AI+编程详细的实战经验和步骤，把 AI+编程中的知识点，踩坑点和经验进行了总结与复盘，对同为小白程序员/编程爱好者的小伙伴学习超一些近路。希望可以给正在看文章的你带来一点点启发 ^ ^ 大家好，我是 Violet，小林老师学员，一名 00 后大学生。现实和理论都告诉我们：懂得百点不如改变一点、真正的成长不在于自己懂了多少道理，而在于自己改变了多少。反思加行动是进步的最快方式。我梳理出了 AI+编程详细的实战经验和步骤，把 AI+编程中的知识点，踩坑点和经验进行了总结与复盘，对同为小白程序员/编程爱好者的小伙伴学习超一些近路。希望可以给正在看文章的你带来一点点启发 ^ ^ 一、快速阅读指南 • 我将在每个章节的标注重要程度星级和内容小结，帮助你快速选择需要的章节阅读 • 如果你对如何搭建一个项目还有疑惑，推荐优先阅读第二章，帮助您快速搭建一个开发环境 • 如果您对 AI+编程已经有了基础的认识，推荐优先阅读第三章的 AI+编程提示词心法，帮助您掌握提示词的使用技巧和经验 • 如果你对如何做一个自己的聊天机器人特别感兴趣，推荐优先阅读第四章 AI 聊天机器人的项目手把手解读，帮助您了解一个聊天机器人究竟是怎么实现的' • 如果你对如何通过 AI 快速做一个好看，优雅，美观的前端页面，推荐优先阅读第五章界面设计篇，帮助您掌握如何快速做出令人第一眼哇塞的页面 • 我将在每个章节的标注重要程度星级和内容小结，帮助你快速选择需要的章节阅读 • 如果你对如何搭建一个项目还有疑惑，推荐优先阅读第二章，帮助您快速搭建一个开发环境 • 如果您对 AI+编程已经有了基础的认识，推荐优先阅读第三章的 AI+编程提示词心法，帮助您掌握提示词的使用技巧和经验 • 如果你对如何做一个自己的聊天机器人特别感兴趣，推荐优先阅读第四章 AI 聊天机器人的项目手把手解读，帮助您了解一个聊天机器人究竟是怎么实现的' • 如果你对如何通过 AI 快速做一个好看，优雅，美观的前端页面，推荐优先阅读第五章界面设计篇，帮助您掌握如何快速做出令人第一眼哇塞的页面二、目标读者画像：有基础编程知识，想尝试 AI 编程的新手程序员 👍 如果你是期望通过 AI 提升日常开发效率的个人开发者或者你是对编程充满热情，具备良好逻辑思维的零基础学习者又或者你是希望通过 AI+编程变现的青年学生我希望你 • 掌握至少一门主流编程语言（如 Python/JavaScript/Java）的基础语法和数据结构， • 理解基本的软件开发概念如变量、函数、循环和条件语句 • 具备使用 IDE 或文本编辑器进行过 500 行+代码编写的实践经验 • 可能缺乏系统架构设计和工程最佳实践的深入认识如果你是期望通过 AI 提升日常开发效率的个人开发者或者你是对编程充满热情，具备良好逻辑思维的零基础学习者又或者你是希望通过 AI+编程变现的青年学生我希望你 • 掌握至少一门主流编程语言（如 Python/JavaScript/Java）的基础语法和数据结构， • 理解基本的软件开发概念如变量、函数、循环和条件语句 • 具备使用 IDE 或文本编辑器进行过 500 行+代码编写的实践经验 • 可能缺乏系统架构设计和工程最佳实践的深入认识三、预期成果：带你彻底了解什么是 AI+编程 😊 跟着我的脚步，大家将将能够： • 熟练使用 Cursor 进行 AI 辅助开发 • 独立完成一个属于自己的独一无二的 AI 聊天机器人项目 • 理解 AI+Cursor 开发的基本流程和最佳实践 • 理解什么是 Web 项目 • 理解什么是 LLM 聊天客户端跟着我的脚步，大家将将能够： • 熟练使用 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 的建议转化为实际可用的代码 • 建立起适合自己的 AI 辅助开发工作流 • 学会如何做一个 AI 聊天机器人无论你是刚接触编程的新手，还是想要提升开发效率的编程爱好者，都能找到适合自己的学习路径。在这里，我们追求的不仅是代码的实现，更是与 AI 共同成长的开发体验。现在，让我们携手踏上这段充满探索与收获的 AI 开发之旅。在这条路上，你将逐步掌握新时代程序员必备的技能，开启属于你的编程新篇章。六、搭建理想的开发环境在开始 AI 辅助开发之前，我们首先需要搭建一个合适的开发环境。作为初学者，你可能会问：为什么要在 Linux 环境下进行 Web 开发？这是因为 Linux 系统提供了更好的开发体验和更接近生产环境的开发条件。让我们一步步来搭建这个开发环境。一）选择你的 Linux 开发环境对于 Web 开发来说，Linux 环境能够提供更好的包管理、更方便的命令行工具，以及更接近实际部署环境的开发体验。你有三种方式来获得 Linux 环境： • 通过虚拟机在本地运行 Ubuntu • 使用阿里云/腾讯云等云服务商提供的轻量应用云服务器/VPS（过于复杂，小白不推荐） • 或者使用在线的云环境平台（同样需要付费，并且配置更复杂，长期来看还是自己部署服务器） Sealos: 专为云原生开发打造的以 K8s 为内核的云操作系统 Sealos: 专为云原生开发打造的以 K8s 为内核的云操作系统因此新手推荐从虚拟机开始实践 1. 安装虚拟机软件首先需要在你的电脑上安装 VMware Workstation（Windows 用户）或 VMware Fusion（Mac 用户）。安装过程很简单，只需要下载安装包并按照提示完成安装即可。 https://blogs.vmware.com/workstation/2024/05/vmware workstation pro now available free for personal use.html VMware Workstation Pro: Now Available Free for Personal Use VMware Desktop Hypervisor products Fusion and Workstation are used by millions of people every day to run virtual machines on their Windows, Linux and Mac computers. They give users the ability to qui 2. 安装 Ubuntu 系统在虚拟机中安装 Ubuntu 是个不错的选择，因为 Ubuntu 具有良好的界面和丰富的社区支持。安装步骤如下： • 下载 Ubuntu 桌面版 ISO 镜像（推荐 LTS 版本） https://cn.ubuntu.com/download/desktop 下载Ubuntu桌面系统 | Ubuntu Ubuntu 24.04下载, Ubuntu 24.10下载, Ubuntu系统下载，Ubuntu 18.04下载，Ubuntu 16.04下载，Ubuntu 14.04下载 • 在 VMware 中创建新的虚拟机 • 选择下载的 ISO 文件作为启动盘 • 按照安装向导完成系统安装二）配置基础开发环境无论你选择哪种方案，都需要配置以下基础环境： 1. 配置 SSH 访问 SSH 是远程访问服务器的标准工具。第一步：检查 SSH 服务状态第二步：配置 SSH 密钥， SSH 密钥提供了比密码更安全的认证方式。你需要创建和配置 SSH 密钥：第三步：在 Windows 中使用 SSH 密钥打开 Cursor，下载 remote ssh 插件在虚拟机中找到虚拟机的 ip 地址在 Cursor 中配置 ssh 连接到虚拟机此时，你的 Cursor 就能连接到你本地虚拟机中的 Ubuntu 了。 2. 安装 Git 版本控制（可选） Git 是必备的版本控制工具： 3. 安装 1Panel 管理面板（推荐）对于初学者来说，使用 1Panel 这样的可视化面板能大大简化环境管理：分别输入用户名，密码，安全入口，端口，每次按回车。安装完成后，你可以通过 Web 界面轻松管理你的开发环境。牢记你的用户名和密码和安全入口，关闭终端后就不可见啦三）通过 1Panel 安装开发环境 1Panel 为新手提供了友好的界面来管理开发环境。通过面板，你可以轻松安装和管理： • Node.js 运行环境 • 数据库（MySQL、Redis 等） • 网络服务器（Nginx） • 开发工具链使用面板安装环境的优势在于： • 可视化操作，无需记忆复杂的命令 • 自动处理依赖关系 • 提供一键安装功能 • 可视化的环境监控和管理以安装 Node.JS 为例，点击左侧网站运行环境 Node.js 即可，推荐包管理器使用 pnpm 😊 pnpm 通过硬链接机制显著节省磁盘空间，安装速度比 npm 快 2 3 倍。其严格的依赖管理避免了幽灵依赖问题，更适合现代前端项目。pnpm 完全兼容 npm 生态，支持 monorepo，能直接替代现有 npm 项目。但是，其中有一个踩坑点！由于 AI 受训练数据的影响，会习惯性使用默认的 npm 包管理器，我们需要明确的指出我们使用 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 Directory Find the best cursor rules for your framework and language 在上面的大神提示词网站中，你能看到很多大神们分享的系统提示词，选择对应技术栈中你喜欢的一个即可。点击 Cursor 右上角的齿轮图标，将系统提示词填入 Rules 输入框 3、编程提示词的最佳实践之一是清晰，清晰，清晰！对于用户提示词，你可能了解过诸如 BROKE 原则/CO STAR 原则/GCER 框架/...各种思维框架... 但是他们都更多是写作领域的提示词，随着大模型能力的进一步提升，尤其是在数学和编码层面的能力已经达到了一个比较高的水平，我们不需要写很多复杂的提示词就可以得到想要的结果。特别复杂的提示词反而可能导致你不知道哪个地方出现问题。对于编程领域，特别是在 Cursor 中，用户提示词不能太复杂，最重要的是直接和清晰表达 ❗ 编程提示词的最佳实践是清晰明确且具有针对性，能够准确引导模型理解并回应你的问题编程提示词的最佳实践是清晰明确且具有针对性，能够准确引导模型理解并回应你的问题 4、Cursor 编程中的最佳实践之二是明确引用上下文如何提问才能获得最佳答案？编程领域的提问需要特别注意技术上下文的完整性。比如，当遇到 React 组件开发问题时，应该清晰地说明开发环境、依赖版本和具体需求。与其说"帮我写一个下拉菜单组件"，不如说"请帮我实现一个基于 React 18 和 TypeScript 的多级下拉菜单组件，需要支持异步数据加载，并符合 WCAG 无障碍标准"。这样的提问能让 AI 准确把握技术要求和实现标准。提供代码示例或错误信息时，应该包含必要的上下文代码和完整的错误堆栈。例如，在处理 TypeScript 类型问题时，不仅要展示报错的代码行，还要提供相关的接口定义和类型声明。这样的细节能帮助 AI 更准确地诊断问题并提供解决方案。 🔗 小技巧：在 Cursor 中，通过＠明确指定文件，目录，代码片段，文档，项目代码库，互联网为上下文，能极大增强 Cursor 理解能力小技巧：在 Cursor 中，通过＠明确指定文件，目录，代码片段，文档，项目代码库，互联网为上下文，能极大增强 Cursor 理解能力 ❗ 让我们再次明确，编程提示词的最佳实践是清晰明确且具有针对性，能够准确引导模型理解并回应你的问题让我们再次明确，编程提示词的最佳实践是清晰明确且具有针对性，能够准确引导模型理解并回应你的问题以下是一个编程提示词的最佳实践： 😊 我希望实现一个新的功能：当 @ChatPages 聊天页面加载初始化时动态渲染逻辑。根据 @ControlStore 中的 @enableRefreshWelcome 的值动态决定是加载 @Welcome 欢迎页面，还是从 @SessionStore 中调用 @getCurrentSession 方法获取上一次最后的会话连接，渲染消息页面@MessagesRender 组件我希望实现一个新的功能：当 @ChatPages 聊天页面加载初始化时动态渲染逻辑。根据 @ControlStore 中的 @enableRefreshWelcome 的值动态决定是加载 @Welcome 欢迎页面，还是从 @SessionStore 中调用 @getCurrentSession 方法获取上一次最后的会话连接，渲染消息页面@MessagesRender 组件 5、Cursor 编程中的最佳实践之三化整为零对于复杂的开发任务，采用化整为零的增量式开发对话最为有效。例如，在开发一个数据可视化仪表板时，可以先让 AI 提供基础组件结构：逐步细化各个功能模块，比如数据过滤、图表交互等，通过多轮对话优化实现方案。记住，心急吃不了热豆腐，先写简单的框架，在逐渐完善二）学会表达，让 AI 理解你的真实需求 1、学会给定准确的要求和指标有效的需求表达应当涵盖系统架构、技术栈选择、性能基准、安全规范等关键维度。在实践中，我们可以通过详细说明 • 系统的架构设计要求（如微服务架构设计、负载均衡策略） • 页面设计规范（如使用的 UI 样式库，图标库，CSS 库） • 具体的性能指标（如响应时间阈值、并发用户数） • 安全合规要求（如数据加密标准、访问控制机制）等方式建立起 AI 能够准确理解和执行的需求模型。通过构建这样的系统化框架，不仅能够提升需求理解的准确度，还能为后续的迭代优化提供可靠的基础。例如： "这个表格组件在处理 5000 条数据时出现明显卡顿，需要优化渲染性能，目标是将首次加载时间控制在 1 秒内，请考虑使用虚拟滚动或数据分片加载的方案。" "这个表格组件在处理 5000 条数据时出现明显卡顿，需要优化渲染性能，目标是将首次加载时间控制在 1 秒内，请考虑使用虚拟滚动或数据分片加载的方案。" 2、学会像写需求文档一样写提示词例如，当你需要开发一个网站时，你不能简单地告诉 AI"我要一个购物网站"，而是需要绘制出一幅清晰的蓝图。在设计系统架构时会仔细考虑每个组件的作用一样，我们需要详细描述网站的功能需求、用户界面设计、性能要求以及安全考虑。例如，你可以这样表达： "我需要开发一个响应式的电子商务平台，支持多语言切换，集成支付系统，具备实时库存管理功能，并能承载至少 1000 个并发用户访问。用户界面需要遵循 Material Design 规范，确保跨平台兼容性。" "我需要开发一个响应式的电子商务平台，支持多语言切换，集成支付系统，具备实时库存管理功能，并能承载至少 1000 个并发用户访问。用户界面需要遵循 Material Design 规范，确保跨平台兼容性。" 3、学会描述代码用例进一步深入，我们可以通过具体场景来优化与 AI 的协作过程。假设你正在开发一个特定的功能模块，比如用户认证系统，你可以通过描述用例来引导 AI 理解需求： "当新用户注册时，系统需要验证邮箱的唯一性，发送确认邮件，并在用户确认后自动创建账户。同时，我们需要实现 OAuth 2.0 协议，支持 Google 和 GitHub 账号登录，并确保所有密码都经过 bcrypt 加密存储。" "当新用户注册时，系统需要验证邮箱的唯一性，发送确认邮件，并在用户确认后自动创建账户。同时，我们需要实现 OAuth 2.0 协议，支持 Google 和 GitHub 账号登录，并确保所有密码都经过 bcrypt 加密存储。" 这种方式不仅让 AI 理解了具体的技术要求，还帮助它理解了背后的业务逻辑和安全考虑。这就像是在进行结对编程，通过清晰的沟通建立起默契的配合关系。 4、学会描述项目架构和业务逻辑在需求描述的艺术方面，要学会从技术架构和业务逻辑两个层面来表达需求。例如，当需要 AI 协助设计一个用户认证系统时，应该这样写： "我们正在开发一个企业级 React 应用，使用 React Query 处理服务端状态，需要实现基于 JWT 的认证系统。关键需求包括：支持多角色权限控制、集成 Single Sign On、处理令牌刷新逻辑，并需要考虑前端路由保护的实现。" "我们正在开发一个企业级 React 应用，使用 React Query 处理服务端状态，需要实现基于 JWT 的认证系统。关键需求包括：支持多角色权限控制、集成 Single Sign On、处理令牌刷新逻辑，并需要考虑前端路由保护的实现。" 5、学会分辨 AI 的错误并提供正确示例 AI 是一定会出现很多错误的！但是 AI 同样能通过多次迭代，一步步解决错误。处理 AI 误解时，最有效的方法是通过代码示例来澄清。当发现 AI 的实现偏离预期时，可以指出："这个实现使用了 class 类模式，但我们项目中统一使用函数式组件和 Hooks 模式，请参考以下代码风格重构： 6、学会确定项目复杂度有时候，AI 可能会提供过于简单或过于复杂的实现。但我们一开始都是在做一个玩具。这时需要明确指出期望的复杂度级别，比如： "请简化状态管理逻辑，我们的项目是一个小型项目，目标用户为 100 人以内，不需要复杂的状态机制。我们优先使用 React Context 而不是 Redux"或 "我们当前先实现一个简单的逻辑，但是考虑到后期扩展性，请添加更完善的接口类型定义和错误处理机制"。 "请简化状态管理逻辑，我们的项目是一个小型项目，目标用户为 100 人以内，不需要复杂的状态机制。我们优先使用 React Context 而不是 Redux"或 "我们当前先实现一个简单的逻辑，但是考虑到后期扩展性，请添加更完善的接口类型定义和错误处理机制"。 7、学会代码审查最后，善用代码审查式的反馈方式来优化实现。当 AI 提供的代码需要改进时，可以这样说： "这个实现中的 useEffect 依赖项没有完全声明，可能导致闭包陷阱，另外考虑到可复用性，建议将这个逻辑抽取为自定义 Hook。" "这个实现中的 useEffect 依赖项没有完全声明，可能导致闭包陷阱，另外考虑到可复用性，建议将这个逻辑抽取为自定义 Hook。" 通过掌握这些技巧，我们能够更好地引导 AI 理解专业的技术需求，获得更高质量的代码实现和解决方案。记住，与 AI 的技术对话是一个反复优化的过程，需要我们不断调整表达方式和技术细节的深度。 8、小结其实，无论什么样的提示词，本质上都是你自己要有清晰的思考。精准的需求表达源于深入的思考框架，就像优秀的代码源于清晰的系统设计。精准的需求表达源于深入的思考框架，就像优秀的代码源于清晰的系统设计。通过将抽象的想法转化为具体的技术细节，我们能够更好地引导 AI 理解和实现我们的愿景。关键在于保持开放的心态，像调试代码一样不断优化我们的表达方式，建立起高效的人机协作模式。 🔗 Thought in, prompt out Thought in, prompt out 八、实战演练一）项目结构设计 1、选择一个你喜欢和适合的技术栈新人小白接触 Web 项目的第一个问题，大多数就是：什么是技术栈？技术栈是指在开发一个完整应用时，所需要使用的各种技术的集合。就像建房子需要地基、墙体、屋顶等不同的部分，一个网站或应用也需要不同层面的技术来支持它的运行。简单解释一下技术栈的概念：前端就像是房子的内部装修和外观设计。它负责用户能直接看到和交互的部分。一个基础的前端技术栈通常包含三个核心部分： 1. HTML 这就像房子的框架结构，决定了页面的基本布局和内容 2. CSS 相当于房子的装修和装饰，负责页面的样式和美观 3. JavaScript 就像房子里的各种智能设备，让页面能够响应用户的操作并产生互动随着技术发展，现代前端开发还会使用一些框架和工具来提高开发效率： • React/Vue/Angular 这些就像是预制的精装修方案，帮助开发者更快地搭建漂亮的界面 • TypeScript 类似于一个更严格的施工规范，帮助写出更可靠的代码 UI 框架和组件库： • Ant Design/Material UI 就像是一个精心设计好的装修部件商店，里面有各种美观实用的"家具"（按钮、表单、导航栏等），你可以直接挑选组装，不用自己从零开始设计和制作 • Tailwind CSS/Element Plus 这些则像是模块化的装修套餐，提供了大量可重复使用的样式"积木"，让你能快速搭建出专业美观的界面 CSS 框架和预处理器： • Bootstrap 相当于一套标准化的装修模板，内置了网格系统和响应式设计，让你的网站在不同设备上都能保持良好的显示效果 • Sass/Less 就像是更强大的油漆调色台，让你能够用更简洁的方式写 CSS，支持变量、嵌套规则、混合等高级功能构建工具： • Vite 可以想象成一个超高效的建筑工地管理系统，它能极快地启动项目（不用等待整个工地都准备好），并且在你修改代码时立即看到效果（就像实时查看装修改动） • Webpack 则像是一个全能的工程总监，负责把所有的代码文件、样式、图片等资源整合打包，确保最终产品高效运行图标库和资源： • Font Awesome/Iconify 就像是一个巨大的图标超市，提供了数千个随时可用的图标，你可以根据需要选择合适的图标来美化界面 • React Icons/Material Icons 这些是专门为特定框架优化的图标集，就像是与你的装修风格完美匹配的配饰系列后端就像是房子的水电系统、供暖系统等基础设施。它负责处理数据、业务逻辑和安全性。一个基础的后端技术栈通常包含： 1. 编程语言（如 Python/Java/Node.js）这就像是施工的主要工具 2. 数据库（如 MySQL/MongoDB）相当于房子的储物间，用来存储和管理数据 3. 服务器（如 Nginx/Apache）就像是房子的门卫，负责处理和分发访客的请求那么，对于希望快速借助 Cursor 实现一个小玩具的你，如何选择适合的技术栈？一个最简单的小妙招：当然是问 AI！这里我给大家推荐一个适合初学者快速构建聊天机器人的技术栈，我也是这样做的： • 前端框架： React • 组件库： Ant Design X UI / Shacdn UI / Radix UI • CSS 处理器： Tailwind CSS • 图标库： Font Awesome • 构建工具： Vite • 前端服务器： NGINX • 后端框架： Fastapi • 数据库： Postgresql 规划好项目的技术栈之后，我们需要把他们写到项目的 README.