AI 辅助编程
AI 编程资源汇总
| 名称 | 魔法 | 介绍 |
|---|---|---|
| 智能编辑器 | ||
| Cursor | 否 | 基于AI的代码编辑器，提供实时代码补全、重构建议和错误检测 |
| MarsCode | 否 | 个人免费 |
| github Copilot | 否 | 集成于VS Code等主流IDE，提供智能代码建议和自动补全 |
| Windsurf | 是 | 专注于代码重构和优化的智能编辑器，提供代码质量分析和优化建议 |
| 代码生成与转换 | ||
| v0.dev | 是 | 专注于前端开发的AI工具，可直接将设计转换为React代码 |
| bolt.new | 是 | 可视化编辑、小网站、一键部署 |
| 开发辅助插件 | ||
| 通义灵码 | 否 | 个人免费 |
| 文心快码 | 否 | 个人免费 |
| Amazon CodeWhisperer | 是 | 免费 |
工作流
- 先要定义需求；
- 简单的UI设计
- 优先用所见即所得的 AI 工具，比如 vO、Claude 的Artifacts，直接就可以看到 Ul效果，避免了自己搭环境，
- 借助图形化的内容截图、设计稿、草图去描述你要做的功能、UI
- 不知道如何描述可以先在 ChatGPT 这样的聊天机器人中去沟通，让 AI帮你写提示词描述
- 再是系统设计：什么系统架构？选什么数据库？前后端API是什么样的？什么编程框架？等等；
- 设计定了才好去写代码，前端代码、后端代码。
- 程序写完了要测试
- 测试没问题了部署让用户可以访问，线上有问题还需要修复
- 程序还需要持续优化升级
Cursor
快捷键
- 全局AI。在Cursor的AI输入框中(如
Cmd K、Cmd L或TerminalCmd K)，你只需输入@符号，就会弹出一个建议列表，显示可引用的上下文信息。这个列表会根据你的输入自动过滤，只显示最相关的建议。 - Tab功能。代码补全、并且是多行补全。
- 提示框功能(Cmd + K)
- 聊天功能（Cmd + L）适合学习新技术或框架、获取代码建议和最佳实践
如何使用 Composer
- 打开 Cursor 设置，找到"Beta"部分，激活"Composer"、
- composer（Ctrl/⌘ + I）打开 Composer 进行更复杂的 AI 辅助任务
快速回答
在提示栏中按Option/Alt Enter，立即回答关于选中内容和相关上下文的任何问题，在这个过程中不会生成或修改代码。
@web 联网检索
Cmd + L 在输入框输入 @web 可以联网检索。
rules
可以理解为 system prompt。指导 Cursor 如何工作。可以参考 cursor directory 上的推荐。
创建项目特定规则(推荐)
- 在项目根目录创建一个
.cursorrules文件 - 将自定义指令添加到此文件中
cursor 提示词库，在上面分享了很多 cursor rules 以及 使用教程。
设置全局规则
- 打开设置
- 导航至
General>Rules for AI - 在提供的文本区域输入您的自定义指令
- 点击"保存"以应用您的全局规则，记得启用
include .cursorrules file。
【场景】快速生成 git commit message
git diff | cat获取最近修改git add .把所有修改添加到暂存区Cmd K提示栏中输入git commit messageCmd + Enter确认Cmd + I唤起 Cursor Composer 窗口，输入需求对文件和文件夹进行调整。
【场景】 Figma 转换为代码
- 使用 Visual Copilot 插件导出 Figma 设计
- 从 Builder.io 复制生成的指令
- 将该指令直接粘贴到 Cursor 的终端机并生成代码