Day02：认识 AI IDE 工具

学习目标

之前在 z.ai 上体验 AI 编程时，你是不是也发现了网页版的诸多不便？比如没法随时保存工作成果、文件管理杂乱无章，甚至连稍复杂的项目都难以推进。别担心，这一章就来解决这些问题 ------ 我们会在本地独立完成完整的编程项目，彻底摆脱网页版的限制。

IDE和AI IDE有什么区别？
如何使用AI IDE

写代码需要什么准备？

代码就是一堆文字，通过编译器处理后，之后变为可执行文件。虽说用系统自带的记事本也能写代码，但实际用起来全是坑：

所有代码都是黑字，关键字、文字、注释混在一起，根本看不清代码结构
没有任何智能提示，每个代码单词都得手动完整敲出来，拼错一个字母就得反复核对
文件多了就乱成一团，十几个文件来回切换，经常找不到要修改的那一行・程序出错只能瞎猜，崩了都不知道问题在哪，只能一行行打印日志排查

这就是为啥你需要 IDE（集成开发环境）。它会给代码上色、输入时自动提示、按项目整理文件，还能精准定位错误，让你写代码效率更高、出错更少。

`IDE` VS `AI IDE`

在AI时代，AI IDE不再是传统IDE的简单功能叠加，而是以生成式AI重构开发工作流------传统IDE聚焦"辅助手动编码"，AI IDE则化身"智能协作伙伴"，将开发者从重复、低价值的工作中解放，核心聚焦需求定义与逻辑把控，大幅提升开发效率。

核心差异对比表

对比维度	传统IDE（如VS Code、IntelliJ IDEA（当然现在这些IDE都已支持AI功能））	AI IDE（如Cursor、GitHub Copilot X）
核心定位	标准化编码工具集	智能协作开发伙伴
核心能力	语法高亮、基础补全、调试编译	代码生成、实时解释、智能调试优化
资料查阅方式	需手动切换环境查文档/搜资料	选中代码即可AI实时解释，无需跳出环境
效率提升方向	优化手动编码流程	替代重复编码、降低理解/调试成本
开发者角色	代码的直接生产者	需求定义者+逻辑把控者

传统IDE仅辅助手动编码，需开发者完成全流程操作；
AI IDE核心优势是AI驱动的代码生成、实时解释，大幅节省查资料/写重复代码的时间；
两者核心差异在于：AI IDE将开发者从低价值工作中解放，聚焦核心逻辑与创新。

IDE的发展

先搞懂：IDE到底是个啥？

IDE（集成开发环境）说白了就是程序员的"一站式工作台"。你可以把它想象成：

普通记事本（纯文本编辑器） + 各种实用工具（比如代码检查、运行按钮、调试器） + 专属工作间（适配不同编程语言的环境）
核心机制就是编辑器（写代码的地方）+ 插件（扩展功能的"小工具"）+ 环境（让代码能跑起来的"地基"） ，三者打包在一起，不用你东拼西凑。

IDE的发展：从"纯手动"到"全自动"

IDE不是一下子就这么好用的，它是跟着程序员的需求一步步进化的，核心就是从"终端纯命令"走向"图形化界面"：

早期：没有IDE，全靠"终端+纯编辑器"硬扛

最早程序员写代码，连个可视化界面都没有，全在黑乎乎的"终端/命令行"里操作：

用最基础的文本编辑器（比如Unix系统里的vi，后来升级成vim）写代码：没有语法高亮、没有自动补全，代码全靠手敲，写错了也不会提醒；
写完代码要自己敲命令编译、运行：比如敲gcc 文件名.c编译C语言代码，敲python 文件名.py运行Python代码；
这个阶段没有"插件"和"集成环境"的概念：编辑器只负责"写文字"，要啥功能都得自己用命令实现，比如想格式化代码，得单独装工具、敲命令，对新手特别不友好。

过渡：图形化编辑器出现，开始"加插件"

随着电脑图形界面普及，出现了带窗口、能点鼠标的编辑器（比如Notepad++、Sublime Text）：

核心还是"编辑器"，但有了可视化界面：能看到代码的语法高亮（不同代码标不同颜色）、能点按钮保存/打开文件，不用记一堆命令；
开始支持"插件"：比如装个插件就能自动补全代码、装个插件就能检查语法错误、装个插件就能直接运行代码，相当于给基础编辑器"加外挂"；
但还不算完整的IDE：环境需要自己配（比如要手动装Python、Java的运行环境，还要告诉编辑器"环境在哪"），调试代码还是得靠命令，只是比纯终端方便一点。

现在：成熟的IDE，"编辑器+插件+环境"全集成

现在的主流IDE（比如VS Code、PyCharm、Eclipse）把"编辑器、插件、环境"打包得明明白白：

编辑器：自带智能提示、语法高亮、代码格式化，甚至能实时提醒你哪里写错了；
插件：内置常用插件，也能自己装（比如Python插件、前端插件、翻译插件），点几下就能装，不用记命令；
环境：能自动识别或帮你配置运行环境（比如PyCharm新建项目时，能直接帮你装Python虚拟环境；VS Code能一键配置Node.js环境），写完代码点个"运行"按钮就能跑，调试代码时能直观看到每一步的变量值，不用再敲复杂的调试命令。

核心机制拆解

再回头看IDE的核心机制，就很好理解了：

组成部分	通俗解释	举个例子
编辑器	写代码的"本子"	就像带颜色标注的笔记本，能自动提醒你写字错了
插件	本子的"便利贴/小工具"	比如贴个"自动补全"便利贴，写代码时不用记全单词；贴个"运行"小工具，点一下就能看结果
环境	写代码的"书桌+工具台"	比如写Python代码需要的Python解释器、写Java需要的JDK，IDE帮你摆好，不用自己找地方放

总结

IDE的核心是"编辑器（写代码）+ 插件（扩功能）+ 环境（跑代码）"，本质是把程序员的工作流程打包简化；
发展历程是从"终端+vim纯手动操作"，到"图形化编辑器加插件"，再到"全集成的可视化IDE"；
进化的核心目的：让程序员不用花精力在"配环境、记命令"上，专心写代码就行。

目前常见IDE

现在主流的编程IDE都内置了AI功能，不用额外折腾就能直接用AI帮你写代码、改bug、解释代码，大大提升写代码的效率。不同IDE的AI侧重不同，有的轻量通用，有的专门做AI编程，你可以按需选：

VS Code：最常用的轻量级IDE，本身免费且支持所有主流编程语言，装个AI插件（比如GitHub Copilot）就能用AI辅助编程，新手入门首选；
Trae：主打AI驱动的编程工具，界面简洁，AI代码生成、调试、重构的功能做得比较聚焦，不用复杂配置；
Cursor：专为AI编程设计的IDE，内置GPT-4等大模型，支持直接用自然语言写代码、改代码，甚至能实时对话式编程，对新手特别友好；
Qoder：轻量的AI编程工具，侧重快速写代码、实时纠错，适合快速写小脚本或调试代码片段；
CodeBuddy：AI代码助手类IDE，除了写代码，还能帮你解释代码逻辑、生成测试用例，适合学习编程时用；
VS Code + Cline：在经典的VS Code里加装Cline插件，相当于给VS Code升级更强的AI功能，兼顾VS Code的通用性和Cline的AI能力。

自己配置API

如果觉得IDE自带的AI功能不够用（比如限制次数、效果一般），可以自己对接免费/低成本的AI开放平台API，相当于给IDE换"更强大的AI大脑"，这些平台都是国内/主流的，使用门槛低：

方舟Coding-Plan：火山引擎的AI编程平台，有免费的API额度，适配中文编程场景，配置简单，适合新手尝试；
智谱AI开放平台：主打中文大模型，AI写代码、解释代码的效果贴合国内开发者习惯，能申请免费试用额度；
DeepSeek 开放平台：专门做代码大模型的平台，代码生成、调试的精准度高，有免费额度，适合对代码质量要求高的场景。

AI agent代理

如果想让AI不只是"写代码"，还能"帮你完整解决编程问题"（比如自动分析需求、写完整项目、调试全流程），就可以用AI Agent工具。你只需要自己买少量API额度，把API导入这些工具，就能用ClaudeCode这类强大的Agent功能，相当于雇了个"AI程序员助理"：

OpenCode：开源的AI Agent工具，支持对接多种API，能自定义AI的编程逻辑，适合想折腾、定制化需求的用户；
ClaudeCode：Anthropic旗下的AI Agent，擅长处理复杂的编程任务（比如写完整项目、排查复杂bug），需要先购买API密钥再导入使用，功能强但有一定使用成本。

总结

常见AI IDE分两类：通用型（如VS Code）需装插件，专用型（如Cursor）开箱即用，新手优先选Cursor或VS Code；
自己配置API能替换IDE的AI引擎，推荐先试国内平台（方舟、智谱）的免费额度；
AI Agent是更进阶的用法，能实现"全流程AI编程"，适合处理复杂编程任务，需自行购买API后使用。

在本地用React写个赛车游戏

选择合适的IDE和AI工具后（我这里使用cursor），在本地开发一个赛车游戏！

step1：搭建AI skills框架和项目软件架构

arduino 复制代码

我想用前端框架开发一个赛车游戏，给我一个软件架构方案，还有cursor中的rules和skills方案

step2：不断实现小功能，优化

markdown 复制代码

### 完整开发提示词（车辆竞速类游戏/仿真系统）
基于游戏引擎（如Unity/Unreal）或原生编程语言（如C++/Python/TypeScript），开发一套轻量级车辆竞速核心系统，需覆盖以下模块的完整设计与实现，要求功能闭环、逻辑自洽，兼顾物理真实性与交互体验：

#### 1. 车辆系统（新增多类型车辆定制）
**核心目标**：构建可复用、差异化的多类型车辆模型，支持属性定制与多维度控制
- 基础模型：定义通用车辆基类，派生3类核心车辆（可扩展），每类车辆绑定专属标识、外观资源、阵营属性：
  - F1赛车：轻量化竞速车型，核心特征为「超高极速、高加速度、低转向半径、弱碰撞抗性」；
  - 警车：均衡型功能车型，核心特征为「中高极速、中加速度、中等转向灵敏度、中等碰撞抗性，附带警笛触发逻辑」；
  - 救护车：重型功能车型，核心特征为「低极速、低加速度、大转向半径、高碰撞抗性，附带应急优先通行逻辑（如AI车辆主动避让）」；
- 物理属性：为每类车辆定制专属参数表（如下），支持动态调整：
  | 车辆类型 | 重量(kg) | 最大速度(km/h) | 加速度(m/s²) | 转向灵敏度 | 漂移系数 | 碰撞抗性 |
  |----------|----------|----------------|--------------|------------|----------|----------|
  | F1赛车   | 700      | 350            | 15           | 高         | 低       | 弱       |
  | 警车     | 1500     | 220            | 8            | 中         | 中       | 中       |
  | 救护车   | 2000     | 180            | 5            | 低         | 极低     | 高       |
- 控制逻辑：通用控制映射（油门/刹车/转向/漂移）适配所有车型，差异化响应（如F1漂移易触发但难维持，救护车几乎无法漂移）；支持车辆状态监听（怠速/行驶/漂移/碰撞/特殊状态：如救护车应急模式、警车警笛开启）。

#### 2. 赛道系统（新增3类差异化赛道）
**核心目标**：构建3类特征鲜明的赛道模型，支撑不同车辆的竞速体验，支持加载与切换
- 数据结构：通用赛道基类包含「边界、分段、标记点、坐标系」，派生3类专属赛道，每类赛道定制核心参数：
  - 城市街道赛道：
    特征：多直角弯道、窄车道、路边障碍物（路灯/护栏）、部分路段限速；
    适配车辆：警车（灵活度适配城市路况）；
    特殊规则：包含红绿灯减速区、人行道禁行区。
  - 专业竞速赛道：
    特征：大半径高速弯道、直道占比60%、宽车道、无障碍物；
    适配车辆：F1赛车（最大化极速优势）；
    特殊规则：包含加速带、弯道刹车提示线。
  - 郊区越野赛道：
    特征：凹凸路面、泥泞路段（摩擦系数低）、连续S弯道、宽缓冲区；
    适配车辆：救护车（高碰撞抗性适配复杂路况）；
    特殊规则：泥泞路段车速衰减、缓冲区无碰撞惩罚。
- 加载逻辑：支持静态加载（预设3类赛道数据）、动态切换（运行时更换赛道，保留车辆状态）；输出每类赛道的「可行驶区、碰撞体、专属规则触发区」；
- 辅助功能：赛道起点重置、圈数统计（适配不同赛道长度）、赛道边界可视化（调试模式）。

#### 3. 物理系统
**核心目标**：实现简化但符合直觉的车辆物理，适配不同车型/赛道的差异化表现
- 基础运动：基于牛顿运动定律，结合车辆重量/赛道摩擦系数计算速度、转向，如F1在专业赛道极速拉满，救护车在越野赛道减速衰减更慢；
- 漂移逻辑：差异化漂移规则（F1仅高速弯道可漂移，救护车禁用漂移），计算漂移角度、减速系数，关联车辆漂移系数与赛道摩擦系数；
- 物理约束：每类车辆绑定专属速度/转向上限，每类赛道定制地面摩擦力（如越野赛道泥泞区摩擦系数0.3，专业赛道0.9）。

#### 4. 碰撞检测
**核心目标**：精准检测车辆与赛道边界/障碍物的碰撞，触发差异化反馈
- 检测逻辑：采用AABB/射线检测，适配不同赛道的边界形状（城市赛道直角边界、专业赛道弧形边界）；
- 碰撞反馈：碰撞力度关联车辆重量（救护车碰撞后速度衰减少，F1碰撞后易失控），赛道障碍物碰撞触发不同惩罚（城市赛道撞护栏减速30%，越野赛道撞缓冲区无惩罚）；
- 边界判定：区分每类赛道的"禁行区"（如城市赛道人行道、专业赛道赛道外区域），触发对应减速规则。

#### 5. AI 对手系统
**核心目标**：实现适配不同车辆/赛道的基础AI竞速能力
- 路径规划：AI基于赛道类型生成专属路径（城市赛道优先避让禁行区，专业赛道优先走直道，越野赛道优先走平整路段）；
- 行为逻辑：AI车辆匹配对应车型特征（AI-F1在专业赛道全程满速，AI-警车在城市赛道自动避让红绿灯，AI-救护车在越野赛道减速通过泥泞区）；
- 难度分级：简单/中等/困难难度下，调整AI的"反应灵敏度+极限操作率"（如困难难度AI-F1可贴弯漂移）；
- 交互规则：AI车辆识别救护车"应急模式"，主动减速/变道避让；AI警车可触发"追缉模式"，优先追击玩家车辆。

#### 补充要求
- 性能：物理计算与碰撞检测频率可配置（60Hz），多赛道/多车辆切换无帧率下降；
- 扩展性：车辆/赛道模块支持新增类型（如卡车、山地赛道），无需修改核心逻辑；
- 调试：提供车辆参数面板、赛道规则编辑器、AI决策日志打印功能。

---

### 总结
1. 车辆系统：明确3类核心车型的差异化参数+专属特征，适配不同赛道场景；
2. 赛道系统：定义3类赛道的「物理特征+适配车辆+专属规则」，形成场景闭环；
3. 物理/AI/碰撞模块：同步适配车型/赛道的差异化，保证逻辑一致性；
4. 所有设计兼顾"真实性"与"可玩性"，参数表可直接落地开发。

如果需要补充某类车辆/赛道的细节（如救护车应急模式具体逻辑、城市赛道红绿灯触发规则），或适配特定引擎（如Unity）的开发规范，我可以进一步细化。

step3：运行执行npm run dev

参考

datawhalechina/easy-vibe: Vibe coding from 0 to 1 ｜把想法做成真正能上线的产品｜首个交互式教程｜零基础也能学会的 AI 编程实战

部分文字用豆包润色