熊猫 Jay：AI 编程 Cursor 来了，你没理由说不会写代码了

熊猫 Jay：AI 编程 Cursor 来了，你没理由说不会写代码了 熊猫 Jay：AI 编程 Cursor 来了，你没理由说不会写代码了 Modified October 14, 2024 No access AqSHZIMuddIQC3La 00:00 No access 图片分割 剪映 00:00 No access 自动分组 剪映 00:00 No access 卡密系统 00:00 对了，卡密生成后如何使用也需要我们规划一下。 可以请 Cursor 告诉我们如何将卡密接入接口中，并为我们设计一套方案。大家可以自行尝试一下。 四）测试（可选） 最后，为了确保功能的准确性，我们可以请 AI 帮忙设计一套测试用例。 进入文档后，Mac 用户可以通过 Command + K 唤醒 AI，让它根据用户故事为我们生成测试用例。 我们需要逐个验证每个测试用例，检查功能是否遗漏、是否存在 Bug。 最终，你拥有了自己的第一个卡密系统。 是不是很有成就感～ 五）注意事项 1. 问题一个一个修复，贪多嚼不烂。 2. 先完成，再完美，最开始不用在线细节，先完成核心功能。 七、加餐 一）纠错公式 在【xxxx】位置，做了【xxxx】动作，出现了【xxxx】错误，预期是【xxxx】 比如：我在编辑卡密页面修改了积分后点击保存，浏览器控制台出现了错误"""xxxxxxx"""，我期望保存成功，且表格自动刷新。 学会向 AI 提供线索非常重要，这直接影响我们能否快速修复问题。 二）切换目录命名 CD 大家在 Cursor 中可能会遇到切换到某个文件夹下执行命名的情况。 我们可以使用 Cursor 的菜单 Open in intergrated Terminal 直接切换到对应目录： 除此之外，更方便的肯定是 cd 命令啦。 请允许我偷个懒，毕竟 Kimi 解释的更加全面，不了解该命令的小伙伴可以看下。 三）Python 教程 过去，我们在微信机器人教程 0 基础如何打造你的微信机器人？ 介绍过怎么在 linux 环境安装 Python，以及什么是 Python 虚拟环境。 🎉 Python 的虚拟环境是一个独立的 Python 运行空间，用于隔离不同项目的依赖库，避免与系统的 python 版本形成冲突。 关于 Python，这个教程无论是在安装方面，还是在编程基础方面，都对每个知识点进行了通俗易懂的讲解，非常适合没有基础的新手。 强烈推荐大家在 AI 时代掌握一门编程语言，首选无疑是 Python。 四）Cursor 提示词大全 分享个Cursor 提示词网站：https://cursor.directory/ 网站里有大量网友实践后上传的提示词，可供我们学习和参考。 八、总结 0 基础如何打造你的微信机器人？ No access AqSHZIMuddIQC3La 00:00 No access AqSHZIMuddIQC3La 00:00 No access 图片分割 剪映 00:00 No access 图片分割 剪映 00:00 No access 自动分组 剪映 00:00 No access 自动分组 剪映 00:00 No access 卡密系统 00:00 No access 卡密系统 00:00 对了，卡密生成后如何使用也需要我们规划一下。 可以请 Cursor 告诉我们如何将卡密接入接口中，并为我们设计一套方案。大家可以自行尝试一下。 四）测试（可选） 最后，为了确保功能的准确性，我们可以请 AI 帮忙设计一套测试用例。 进入文档后，Mac 用户可以通过 Command + K 唤醒 AI，让它根据用户故事为我们生成测试用例。 我们需要逐个验证每个测试用例，检查功能是否遗漏、是否存在 Bug。 最终，你拥有了自己的第一个卡密系统。 是不是很有成就感～ 五）注意事项 1. 问题一个一个修复，贪多嚼不烂。 2. 先完成，再完美，最开始不用在线细节，先完成核心功能。 七、加餐 一）纠错公式 在【xxxx】位置，做了【xxxx】动作，出现了【xxxx】错误，预期是【xxxx】 比如：我在编辑卡密页面修改了积分后点击保存，浏览器控制台出现了错误"""xxxxxxx"""，我期望保存成功，且表格自动刷新。 学会向 AI 提供线索非常重要，这直接影响我们能否快速修复问题。 二）切换目录命名 CD 大家在 Cursor 中可能会遇到切换到某个文件夹下执行命名的情况。 我们可以使用 Cursor 的菜单 Open in intergrated Terminal 直接切换到对应目录： 除此之外，更方便的肯定是 cd 命令啦。 请允许我偷个懒，毕竟 Kimi 解释的更加全面，不了解该命令的小伙伴可以看下。 三）Python 教程 过去，我们在微信机器人教程 0 基础如何打造你的微信机器人？ 介绍过怎么在 linux 环境安装 Python，以及什么是 Python 虚拟环境。 0 基础如何打造你的微信机器人？ 🎉 Python 的虚拟环境是一个独立的 Python 运行空间，用于隔离不同项目的依赖库，避免与系统的 python 版本形成冲突。 Python 的虚拟环境是一个独立的 Python 运行空间，用于隔离不同项目的依赖库，避免与系统的 python 版本形成冲突。 关于 Python，这个教程无论是在安装方面，还是在编程基础方面，都对每个知识点进行了通俗易懂的讲解，非常适合没有基础的新手。 强烈推荐大家在 AI 时代掌握一门编程语言，首选无疑是 Python。 四）Cursor 提示词大全 分享个Cursor 提示词网站：https://cursor.directory/ 网站里有大量网友实践后上传的提示词，可供我们学习和参考。 八、总结 亲身体验后，不得不承认 Cursor 确实称得上当前最强 AI 编程工具。 但, 谁能想到，在与科技巨头的激烈竞争中脱颖而出的 Cursor，竟是一支仅有 12 人的小团队? 翻阅他们的博客，我们能感受到他们雄心勃勃的愿景:打造一款让编程更轻松、愉悦、有趣的工具，助力全球开发者聚焦更宏大的问题。 可以看得出来，他们满怀希望，干劲十足，用创新思维撬动了整个行业，一跃成为领跑者。 除了工具本身，Cursor 团队的崛起更值得我们学习。这个只有12人的小团队，竟然可以和众多大厂的PK中脱颖而出。 不禁让我想起齐白石大师的至理名言：“学我者生，似我者死”。 一味的模仿只是重复别人的步伐，创新性模仿才有机会追上，甚至超越～ 九、链接作者 欢迎链接我， v：aiczy8888，与我探讨 Cursor、智能体、提示词 的更多的玩法 ～ 公众号： 熊猫Jay字节之旅；免费星球：熊猫Jay·AI·成长，欢迎关注。 ⛱️ 原文地址：https://mp.weixin.qq.com/s/KZt5 3OxCtlwuTKhplzGCg 作者：熊猫 Jay 原文地址：https://mp.weixin.qq.com/s/KZt5 3OxCtlwuTKhplzGCg 作者：熊猫 Jay 一、引言 大家好，我是 🐼 熊猫 Jay，好久不见～ 最近 Cursor 彻底火了。 前段时间，在 Twitter 上，Cloudflare 副总裁分享了一段视频，展示 8 岁的女儿如何在 45 分钟内用 Cursor 完成一个聊天机器人。 看完视频后，我不禁感叹：Cursor 原来这么强大？ 过去，我曾用过 ChatGPT 写过插件，也用过 GitHub Copilot、通义灵码等编程工具。 但是，它们效率提升的幅度十分有限。 就拿 ChatGPT 为例，我需要提供完整的代码结构和文件，它才能帮我们开发新功能或找到 Bug 并修复。这种交互方式实在太痛苦了。 最近体验 Cursor 后，我对 AI 编程产品重燃希望，它的表现着实令人惊艳。 可以想象一下，你只需要用自然语言描述需求，AI 就能帮你生成完整的代码框架，这就是 Cursor 带来的变化。 甚至有用户表示：Cursor 是目前最接近为程序员提供脑机接口编程体验的产品，它能让程序员以思考的速度进行编程。 本教程将带你了解： 1. Cursor 和其他编程工具的区别。 2. Cursor 入门：安装和使用 3. Cursor 初阶案例：开发谷歌插件 4. Cursor 进阶案例：开发卡密系统 5. 还有很多加餐项.... 内容比较干，请自备饮料。话不多说，我们一起来体验一下。 二、效果展示 先剧透下 Cursor 生成程序的效果，让大家有动力继续看下去（手动狗头）～ 一）谷歌插件 自动分割图片为四等份： 根据域名自动分组浏览器 Tab： 二）卡密系统 功能包含：用户管理、卡密管理、卡密统计 三、Cursor 与其他编程工具的区别 最近不少小伙伴都在问 Cursor 与 GitHub、通义灵码的区别是什么？ 网上很多帖子讲得不是很清楚，所以我单独拿出一个章节来说明。 相比于其他编程工具，Cursor 的最大亮点是：当你进入一个完整的项目代码中时，它可以索引所有代码的内容。 这样，当你需要修改或新增任何代码时，它能快速了解背景，帮你得到符合预期的答案。 当然，你可以选择只引用部分文件，或者某些文件里的一段代码。这样，Cursor 就不会搜索整个代码库，避免无关的上下文干扰生成的结果。 比如，这样我选中了代码 kamis.py 的 30 ～ 42 行，这样 AI 就会用这段内容做为主要的上下文。 如果之前小伙伴们使用过 ChatGPT、Claude3.5 进行编程，在这种情况下，除了要提交大量代码和输入背景信息作为上下文之外，还需要将生成的代码逐个塞进原来的文件里，这比较麻烦。 在 Cursor 中，基于需求生成的结果，点击一些按钮，就可以直接在对应的位置帮你修改好。 此外，还有一个最重要的功能：Composer。 正常情况下，我们需要通过聊天去得到一个新功能的代码，然后创建文件，粘贴代码。 虽然一个一个确认让人更放心，但是功能复杂的情况下，涉及文件过多，就会变得很麻烦。 Composer 它可以帮助我们快速地、有序地创建多个文件，以满足我们的要求，效率将大大提升。 No access composer 00:00 No access composer 00:00 但是，这同样带来了风险。 当你的功能稳定后，要求 Composer 进行全局调整代码时，如果你没有仔细阅读就接受修改，一旦出错，将很难撤回。 当然，你可以选择继续要求 Composer 修改。Composer 目前还处于测试阶段，相信未来会更加好用。 所以，我的建议是：最初写好用户故事，使用 Composer 创建好相应的代码结构，一旦功能相对稳定后，建议使用右侧的 Chat 去逐个迭代功能，这样方便确定，稳定性更好。 不止于此哦～ 当我们需要调整界面样式时，可以上传一张图片，让 Cursor 参考图片风格来调整代码。当然，从零开始创建也是可以的。 最后，它还有一个很好用的功能：AI 全局检索。 当处于一个大型代码库时，通过 Cursor 搜索代码会非常简单，它能告诉我们对应文件的位置以及与其他代码的关联性。 注意，使用时，点击 codebase，这样 Cursor 将从整个代码库中搜索。当我们不知道代码在哪里时，这个功能比传统工具会更加好用。 四、初体验: Cursor 的安装和使用 讲解具体案例之前，我们先了解下工具怎么注册和使用的。 🎎 安装和使用前，请自备 魔法 ！ 安装和使用前，请自备 魔法 ！ 一、工具的注册和安装 我们先安装下 Cursor。 进入 Cursor 官方：cursor.com， 点击 Download for Free 进行下载。 cursor.com 点击下载后的安装文件，按照提示一步一步安装即可。 接下来我们需要注册账户，才可以使用 Cursor。 官方支持三种注册方式： GitHub 、谷歌账号、普通邮箱地址。测试下来，发现也支持国内邮箱地址。 普通用户注册后，可以免费体验 14 天的 Pro 版本，拥有高级模型的 500 次对话机会，比如 claude3.5 sonnet、gpt 4o。 除此之外，可以无限使用 gpt 4o mini 和 cursor small 模型。 我们来完整了解下它的订阅模式： • 免费用户：一共可以使用 2000 次普通模型的问答。 • Pro 模式：20刀/月，500 次高级模型问答，不限次普通模型问答。 • Business 模式：40刀/月，全部不限制次数。 说实话，价格不低，但是有 14 天的免费体验时间，这给了我们充足的机会来判断是否需要付费。 如果每个月能为我们创造远超过 20 刀的价值，这个付费就值得～ 大家见仁见智吧。 二、全局创建代码结构 Mac 用户使用 Command + i 唤醒 Composer，输入提示词后开始创建代码结构。 用浏览器打开 index.html 文件，我们看下最初的效果。 关于其他系统的快捷键，可以从 Cursor Setting Keyboard Shortcuts 快捷指令清单中查看。 三、新增 / 修改代码、文字 选中代码，使用 Command + K 打开窗口，并输入修改的要求。 如果不选中代码，打开窗口，可以要求 AI 帮助我们实现新的功能。 这里我让 AI 帮我增加一个广告位。 当然，除了代码，我们也可以选中文字进行修改，比如改写、翻译等等。 四、自动补全代码、注释、文字 输入代码或者注释，Cursor 会自动补全代码，按 Tab 将会生效。 除了补全代码之外，还能补全文字，大家可以尝试一下。 五、对话窗口 Mac 使用 Shift + Command + L 打开聊天窗口，输入优化页面的需求，AI 可以为我们提供不同方案。 这里我倾向于使用好看的配色方案。点击 Apply，再点击 Accept，就生效啦。 对了，要记得保存文件后，否则刷新网页不会生效，Mac 的快捷键的 Command + S。 当然，这不是一个成品，如果是想要做一个完整的功能，我们需要不停的和 Cursor 进行对话。 不过，别急，在案例部分，我会介绍完整的制作过程。 六、全局搜索 我们还可以把它当做一个简易的 AI 搜索工具，让它根据现有文件夹下的内容回答我们的问题。 比如这里，我问到基于文件内容，告诉我温度值设置的误区在哪里，是什么？ 它的回答准确度很高，甚至能定位到具体文件的行。 七、自动爬取指定网页内容辅助开发 这个功能相对比较隐蔽。可以帮助我们爬取对应网页的内容，作为指南辅助我们进行开发，但是存在一些缺陷。 ❗ 注意：静态页面爬取的成功率更高，非静态页面的话，可能爬取内容会遗漏，或者完全爬取不了。 注意：静态页面爬取的成功率更高，非静态页面的话，可能爬取内容会遗漏，或者完全爬取不了。 操作方式：进入 Setting Cursor Settings Features , 在 Docs 位置进行配置。 • Name：指令名称 • Prefix：待爬取网页地址的前缀，这样可以爬取多个网页内容 • EntryPoint：网页地址 拿菜鸟教程为例，我们按照下图配置即可。如果一切正常，可以将所有 python3 作为前缀的网页内容爬取下来。 ❗ 目前爬取多个网页内容的效果不是很稳定，单页面成功的概率更高。 目前爬取多个网页内容的效果不是很稳定，单页面成功的概率更高。 点击 Confirm 之后，待爬取网页内容的数量越多，爬取的速度会越慢，大家耐心等待一会。 爬取成功的状态是这样。 点击 书本 的图标，可以看见爬取成功的页面数量和名称。 我多轮测试下来，静态页面：比如菜鸟教程，爬取的成功率高，有几率将 100 多个网页都爬取下来。非静态页面：比如 OpenAI 开发指南 只能爬取一页，智谱开发指南 始终爬不全。 爬取成功之后，就可以作为快捷指令使用了。使用案例，我用 zhipu 来演示下。 无论是右侧 Chat窗口、Composer、还是指定文件内的窗口，都可以使用 @ 调出指令。 注意，建议后缀带上这段话: "请根据文件内容进行查找，如果找到，引用原文进行回答，并返回引用原文的地址，如果找不到，请回复不知道，一定不要胡编乱造。" 主要目的是： 1. 为了避免大模型捏造一些内容出来。 2. 可以溯源，即使找到内容，也可以通过链接跳转过去确认。 我们可以看下使用的效果： 剪头指向的就是对应网页内容。 简单总结下，爬取功能尚不完善，但可以尝试一下，说不定你需要的指南能够爬取成功。 五、初阶案例：谷歌插件 （ChatGPT VS Cursor ） ✅ 适用人群：没有编程基础的小伙伴 备注：案例比较简单，大家仔细阅读 AI 回答的结果即可。 适用人群：没有编程基础的小伙伴 备注：案例比较简单，大家仔细阅读 AI 回答的结果即可。 去年 9 月，我用 ChatGPT 编写过自己的第一个 Chrome 插件：任何人都可以利用ChatGPT开发自己的谷歌插件 任何人都可以利用ChatGPT开发自己的谷歌插件 我们来将 ChatGPT 和 今天的 Cursor 做个对比。 当时做了两个案例，第一个：分割图片为四等份。 第二个：自动分组浏览器Tab。 一）案例一：分割图片为四等份 主要为了快速分割 Midjourney 生成的图片四等份。 当时和 ChatGPT 对话，加上创建文件和部署插件，前前后后花了 15 分钟左右吧，我们来看看 Cursor 的能力。 使用 Cursor 编写代码，加上部署和演示，总共也就一分钟多一点，速度非常快。 No access 图片分割 剪映 00:00 No access 图片分割 剪映 00:00 Cursor 提示词： 二）案例二：自动分组浏览器 Tab 主要为了解决以下痛点： 1. 浏览器 tab 过多时,容易混乱 2. 无法自动分组, 手动分组麻烦 这个案例让我感触颇深。 去年 9 月做这个案例时，我与 AI 对话、调试、纠错、部署，花了 2 个多小时。而这次，用 Cursor 不到五分钟就搞定了，没有做任何纠错，效率提高了二十多倍。 我突然想到：一年前， 2 个多小时，我是怎么忍得下来的。 AI 的进步，用一句话来形容： “AI 一天，人间一年”。 No access 自动分组 剪映 00:00 No access 自动分组 剪映 00:00 Cursor 提示词： 六、进阶案例: 卡密系统 ✅ 适用人群：没有编程基础，但足够耐心的小伙伴 备注：需求相对于 初阶案例 更复杂一些，如果没有编程基础，则需要足够的耐心，有编程思维会更好。建议按照文章推荐的方法论操作。 适用人群：没有编程基础，但足够耐心的小伙伴 备注：需求相对于 初阶案例 更复杂一些，如果没有编程基础，则需要足够的耐心，有编程思维会更好。建议按照文章推荐的方法论操作。 最近一直在研究智能体怎么变现的问题，除了做教程，将智能体作为产品出售是个不错的选择。 玩过智能体的小伙伴都清楚，无论是国内还是国外，大多数智能体平台都存在着一些问题： 1. 对于应用开发者没有付费支持。 2. 对于插件提供者没有 API 费用支持。 面对这些问题，排除一些为爱发电的大佬，很多普通人结合多年的行业方法论，个人精心钻研和打磨出来的智能体，他们基本上不可能免费开放出来。 那么优秀的智能体就会很难被市场所发现。其实，最重要的问题就是：如何商业化？ 除了背负着巨大的风险设计一整套商业化产品之外，我们怎么样找到一个最小化的商业模式。 我觉得最简单的模式就是卡密验证的方式了 用户输入卡密来使用智能体，或者是核心插件。 接下来我们利用最近大火的 Cursor 做一套卡密系统。 一）用户故事 用户故事是什么呢？ 用户故事的目的在于确保开发团队能够理解用户需求，并从用户角度设计和开发功能。 其常规模板为：“作为[角色]，我希望[活动]，以便[理由]。” 为何在这一步需要写用户故事呢？ 主要有三点作用： 1. 首先，让 Cursor 这个执行者了解我们想要做什么样的应用，从而更准确地搭建代码框架。 2. 中途作为关键的上下文信息，确保方向不偏移。 3. 最后，可以让 Cursor 依据用户故事生成对应的测试用例，保持功能的完整和准确。 接下来，我来演示下如何在 Cursor 里生成 MVP 的用户故事（用其他 AI 功能生成也可以）。 1、点击 Cursor 后，选择提前创建的一个文件夹。 2、创建需求文档，输入简短的需求描述，让 AI 帮助我们生成用户故事。 可以看到 Cursor 为我们生成了用户故事，我们按照实际情况接受并修改即可。 二）生成初始代码框架 1、输入 command + i 唤起 composer，基于用户故事，生成代码结构，点击回车。建议使用 claude 3.5 sonnet, 目前代码生成能力最强的模型。 2、自动生成代码后，只有点击 Accept all 才会生效。 建议最好阅读一下 AI 的输出结果，看看它是否理解清楚了我们的意图，再点击接受，避免频繁修改。 仔细阅读后，发现漏掉了一些文件。