学习AI 编程工具
<h1 id="ide">IDE</h1><p>IDE (Integrated Development Environment) 的核心价值在于集成。它将软件开发所需的各种工具（编辑器、编译器、调试器、文件管理器等）整合到一个统一的图形界面中，提供一站式的工作体验。<br>
例如：VS Code、IntelliJ IDEA等。</p>
<h1 id="ai-ide">AI IDE</h1>
<ul>
<li>智能代码生成与补全：根据伪代码、需求说明或指令可以直接补全逻辑和生成一段代码甚至整块代码。</li>
<li>代码理解与问答：理解并回答关于某段代码、某个文件，甚至整个工程目录结构的问题。</li>
<li>代码重构与优化：根据你的意图，重写或优化指定代码片段的实现逻辑。</li>
<li>自动生成测试：自动生成针对不同函数和模块的测试代码，方便进行有针对性的测试。</li>
<li>Agent 式任务执行：智能 Agent 可以自动生成、打包、安装、运行和修改代码。</li>
</ul>
<p>具备上述特点的IDE可以成为AI IDE。<br>
例如：Antigravity、Trae、Cursor、Qoder、CodeBuddy、VS Code + Cline、Kiro。<br>
其中Trae、Cursor用的较多。</p>
<h1 id="cli-ai">CLI AI</h1>
<p>CLI 指的是通过终端或命令提示符，用纯文本命令来操作软件应用，而不是依赖图形界面。<br>
CLI AI可以类比为AI IDE中对的编程Agent模块，<br>
例如：Claude Code、Codex。<br>
其中Claude Code用的较多。</p>
<h1 id="ai-ide-vs-cli-ai">AI IDE VS CLI AI</h1>
<p><br>
表格来源：https://northflank.com/blog/claude-code-vs-cursor-comparison</p>
<p>简单说，CLI AI 编程工具通常可以：</p>
<ul>
<li>支持更长时间的连续对话（甚至可以帮你“工作一整天”）。</li>
<li>提供更长的上下文窗口（不再频繁需要你说“继续”）。</li>
<li>响应速度更快（可以接入更多自定义模型 API）。</li>
</ul>
<p>在编码相关操作上，它们通常比大部分 IDE 内置 Agent 更聪明、更稳定。</p>
<h1 id="claude-code">Claude Code</h1>
<h5 id="claude-code-1">Claude Code</h5>
<p>它是由 Anthropic 基于 Claude 大模型能力开发的一款 AI 编程工具。它的主要交互场景在终端，同时也支持作为 VS Code 插件来使用。类似于 AI IDE 中的 Agent，它可以深度理解开发者的代码仓库，并通过自然语言指令完成端到端的开发任务——包括代码编辑、修复 Bug、执行和修复测试、管理 Git 工作流（例如解决合并冲突、创建 PR）、复杂代码讲解、执行终端命令等。</p>
<h5 id="claude-code的优势">Claude Code的优势</h5>
<p>主要体现在：极长的上下文窗口（可以处理完整文件甚至小型项目）、可以主动澄清模糊需求、自动规划和分配执行任务，以及对整个代码库内容的深度理解和解释能力。</p>
<h5 id="claude-code的安装">Claude Code的安装</h5>
WinGet (Windows):
winget install Anthropic.ClaudeCode
（其他系统安装命令请查看github官网）
<h5 id="claude-code的使用">Claude Code的使用</h5>
<p>因网络及费用原因，可以使用兼容 Claude Code 协议的其他大模型的 API 平台作为后端。<br>
例如：<br>
Codex 使用 GPT-5，在整体能力上更强；<br>
Claude Code 通过 GLM 4.6 转发 API，整体体验接近 Claude 4，但价格更便宜。</p>
<ol>
<li>安装CC Switch<br>
CC Switch是Claude Code的可视化的配置修改插件，可一键切换后端模型。<br>
下载请参考官方文档：CC Switch</li>
<li>模型切换<br>
<br>
<strong>先点击</strong>Claude Code图标，<strong>再点击</strong>添加即可，根据自己选择的模型进行信息的填写，<strong>然后</strong>在界面上启用即可。<br>
</li>
</ol>
<h5 id="内部工作机制">内部工作机制</h5>
<p><br>
Claude Code 会把编程任务拆解成一个持续的“感知—思考—行动—验证”循环，并在其中调用不同工具完成任务。它模仿人类开发者的工作流：不断“写代码 → 运行 → 看结果 → 再改进”。系统内部通过一个主任务循环不断执行步骤，在每一轮循环中，Claude 都可以调用不同工具——例如读写文件、执行命令、搜索代码等——再根据工具返回的真实结果决定下一步行动。</p>
<p>其中有几个关键特性值得注意：</p>
<ul>
<li>流式处理（Stream Processing）：Claude 可以一边思考一边输出结果，而不是必须等所有代码写完再执行。</li>
<li>智能压缩（Intelligent Compression）：长对话容易导致上下文过长，Claude 通过将历史压缩成关键信息来减少“遗忘”的概率，并通过区分长短期记忆保证高效运行。</li>
<li>并发控制（Concurrency Control）：内部并行设计可以让多个任务同时进行，互不干扰。</li>
<li>子 Agent 管理（Sub-agent Management）：实际工作中并不只相当于一个“角色”处理所有事情，你可以管理多个子 Agent 协作处理代码，每个 Agent 负责不同任务，比如专门负责测试、专门负责写文档等。</li>
</ul>
<h1 id="实战用-cli-ai-在本地生成贪吃蛇游戏">实战：用 CLI AI 在本地生成贪吃蛇游戏</h1>
<ol>
<li>新建空文件夹并使用Claude Code打开</li>
<li>在CLI中输入提示词</li>
</ol>
请你用 React 架构实现贪吃蛇游戏，包含键盘控制、吃到食物变长加分、撞墙或撞到自己时显示“游戏结束”并支持重新开始。实现后帮我启动这个项目。如果遇到没安装的程序环境就自动安装没安装的环境。
<p></p>
<ol start="3">
<li>
<p>AI自动生成目录结构、文件及代码<br>
</p>
</li>
<li>
<p>代码编写完成及成功运行界面<br>
<br>
</p>
</li>
<li>
<p>第一次生成的代码BUG还是很多的，如在测试或使用中遇到BUG，可以进一步与AI交互，让其修改后再进行测试</p>
</li>
<li>
<p>可以想AI询问代码的实现细节</p>
</li>
</ol>
请从上到下讲一遍，这个贪吃蛇游戏每一步是怎么动起来的？尽量少用专业术语。
“蛇在屏幕上的每一节身体，是用什么数据结构来记的？能打个比方吗？”
“你是怎么控制‘隔一段时间动一下’的？这在代码里是哪一段？”
“蛇吃到食物时，你做了哪几步操作？在哪一段逻辑里判断吃到了？”
“撞墙和撞到自己，分别是在哪些代码里判断出来的？”
<ol start="7">
<li>让 AI 把画面变好看一点<br>
指令要清晰，修改要明确，表达清楚你要的效果。</li>
</ol>
“请帮我把游戏界面整体美化一下：
游戏区域居中显示，不要贴在左上角；
换成较浅的背景色，让蛇和食物更醒目；
把分数放大，放在明显的位置；
以蓝色为主色调，美化一下整体配色和按钮。”
“当游戏结束时，请在画面中央显示‘游戏结束’，下面有一个‘重新开始’按钮，可以重置游戏。”
“分数再大一点，颜色更醒目一些。”
“游戏区域再紧凑一点，四周预留一点留白。”
“重新开始按钮改成蓝色圆角风格，放在提示下方居中。”
<h1 id="如何高效的与ai交流">如何高效的与AI交流</h1>
<ul>
<li>说清楚你的需求：从“模糊想法”到“具体说明”</li>
</ul>
<ol>
<li>告诉它，你拿这个东西来干嘛<br>
<strong>例如</strong>：我想做一个只包含一页内容的个人简介网页，用来发给招聘的人看。</li>
<li>告诉它，大概需要哪几块内容<br>
<strong>例如</strong>：页面要有三个部分：最上面是名字和一句自我介绍，中间列出几条工作经历，最下面放邮箱和微信号。</li>
<li>告诉它，你的水平和限制<br>
<strong>例如</strong>：我完全不会写代码，请只用最简单的写法，让我可以直接复制到一个文件里，在浏览器里打开。</li>
<li>告诉它，你希望怎么拿到结果<br>
<strong>例如</strong>：请给我一份可以直接保存为 index.html 并在浏览器里打开的完整代码。</li>
</ol>
<p>综合起来：“我完全不会写代码，想做一个只包含一页内容的个人简介网页，用来发给招聘的人看。<br>
页面需要三个部分：上面一行是名字和一句自我介绍，中间是几条工作经历，下面是邮箱和微信号。</p>
<ul>
<li>用对节奏：先“能跑起来”，再一点点变复杂</li>
</ul>
<ol>
<li>先要一个“最小的例子”<br>
<strong>例如</strong>：请先给我一个最简单的示例，只要在浏览器里能看到一行‘这是我的主页’就行。<br>
再一步步告诉我：文件名该叫什么，应该怎么保存，怎么打开。</li>
<li>在这个基础上，慢慢把内容加完整<br>
<strong>例如</strong>：在刚才的基础上，帮我增加一个‘工作经历’区域，把完整代码重新发给我。不要只发改动的部分。</li>
<li>结构差不多之后，再考虑好不好看<br>
<strong>例如</strong>：现在页面已经能正常显示内容了。接下来请帮我稍微美化一下：整体居中，标题大一点，用一个比较舒服的字体。请给出更新后的完整代码。</li>
</ol>
<ul>
<li>善用截图和复制：不会说就“把画面扔给 AI”</li>
</ul>
<ol>
<li>复制报错文字<br>
<strong>例如</strong>：当你看到一串红色错误消息时，可以直接复制出来，然后说：这是我运行后出现的完整错误信息。我看不懂这些英文，请先用普通人能听懂的话解释一下，这大概是什么意思。然后告诉我，我现在最简单应该怎么改。</li>
<li>给 AI 看截图<br>
<strong>例如</strong>：截一张当前页面的图，这是现在页面的样子，这是我现在的完整代码。 我原本希望它是三列排版，现在变成一列了。请你帮我看一下原因，并给我一份改好后的完整代码。</li>
<li>遇到喜欢的网页，想做个类似的<br>
<strong>例如</strong>：截一张当前页面的图，我想做一个结构和这个差不多的页面，不需要一模一样。请帮我用简单一点的代码，搭一个类似的框架出来，然后我再自己把文字换成我的。</li>
</ol>
<ul>
<li>当 AI 生成的代码不工作时：一套通用应对方法</li>
</ul>
<ol>
<li>先把“你做了什么 + 现在什么样”说清楚</li>
<li>把你现在的完整代码发给 AI</li>
<li>如果有错误提示，一并给出</li>
<li>要求对方用“小白模式”一步一步讲</li>
<li>最后，请它帮你做“应该看到什么”的对照</li>
</ol>
<h1 id="参考链接">参考链接：</h1>
<p><strong>DataWhale：</strong>学会 AI 编程工具<br>
<strong>DataWhale：</strong>集成开发环境 (IDE) 基础<br>
<strong>DataWhale：</strong>CLI AI 编程工具<br>
<strong>Github：</strong>Claude Code</p><br>来源：程序园用户自行投稿发布，如果侵权，请联系站长删除<br>免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]