AI 新手入门 06：用 Codex、Claude Code 和 CC Switch 做项目

前面几篇文章，我们已经讲过 AI、提示词、Token、上下文、API Key、Base URL 和模型名称。

到了这一步，很多人会想继续往下走：

我能不能用 AI 帮我做一个网站？

我能不能让 AI 帮我改项目？

我遇到 bug，能不能直接让 AI 修？

可以，但要有正确方法。

AI 编程工具确实能提高效率，但它不是魔法。你不能只说一句“帮我做个网站”，然后期待它完全理解你的想法、项目结构、设计风格和所有细节。

这篇文章会用比较简单的方式，讲清楚新手应该怎么用 AI 编程工具做项目。

你会学到什么

这篇文章主要讲：

• AI 编程工具能做什么
• 新手如何描述项目需求
• 如何让 AI 修 bug
• 如何让 AI 修改代码而不是乱改
• 如何用 AI 完成一个小网站项目

一、AI 编程工具是什么？

AI 编程工具可以帮你做很多和代码有关的事情。

比如：

• 阅读项目代码
• 解释某个文件是做什么的
• 生成新页面
• 修改已有功能
• 修复 bug
• 优化前端样式
• 补充 README 文档
• 根据报错信息分析原因

你可以把它理解成一个“会看代码的助手”。

但它和普通网页聊天不太一样。

普通聊天里，你需要把代码复制给 AI。 而一些 AI 编程工具可以直接读取项目文件，在编辑器、终端或项目环境里帮你分析和修改。

不过要注意：

AI 编程工具只是辅助工具，不代表它写出来的代码一定正确。

你仍然需要检查代码、运行项目、测试功能。

二、常见 AI 编程工具能做什么？

下面这个表格只做入门理解，不是说新手必须全部使用。

简单理解：

• Codex 类工具：更像一个会写代码、会读项目的编程助手。
• Claude Code 类工具：更像一个能在终端里协助你处理项目的助手。
• Cursor 类编辑器：更像一个带 AI 的代码编辑器。
• CC Switch 类配置工具：更像一个帮你管理不同 AI 编程环境配置的工具。

它们各有用途，但不需要一开始全部学。

新手建议先选一个最容易上手的工具，把一个小项目跑通，再慢慢了解其他工具。

三、AI 编程工具不是魔法

很多新手第一次用 AI 编程工具，会出现一个误区：

既然 AI 能写代码，那我是不是只要让它全自动做完就行？

不建议这样做。

AI 可以提高效率，但你仍然要检查代码、测试功能、确认安全性。

它可能会出现这些问题：

生活化理解：

AI 就像一个干活很快的装修师傅。 你不能只说“帮我装修一下”，就让它随便拆墙、换地板、改水电。

你要先说清楚：

• 哪个房间要改
• 想改成什么样
• 哪些地方不能动
• 预算和风格是什么
• 改完后怎么验收

写代码也是一样。

四、新手开始项目前要准备什么？

在让 AI 修改项目之前，最好先准备一份简单说明。

不用写得很复杂，但至少要有这些内容：

新手可以把这些内容整理成一个固定的项目说明，以后每次让 AI 修改代码时都可以复制使用。

五、完整项目流程

新手不要一上来就让 AI “一次性做完整项目”。

更稳的方式是：小步推进，每一步都检查。

明确项目目标
  ↓
整理项目结构
  ↓
让 AI 先阅读并总结
  ↓
提出一个小功能需求
  ↓
让 AI 给出修改计划
  ↓
确认修改范围
  ↓
生成或修改代码
  ↓
运行项目测试
  ↓
反馈报错给 AI
  ↓
反复修正直到可用

这个流程看起来慢，但对新手更安全。

因为你每一步都知道 AI 在做什么，也更容易发现问题。

六、如何让 AI 先理解项目？

很多人一打开项目，就直接让 AI：

帮我改首页。

这样很容易出问题。

因为 AI 还不知道你的项目结构，也不知道首页文件在哪里，更不知道哪些代码不能动。

更好的做法是先让 AI 阅读和总结项目。

可复制模板：让 AI 先理解项目

请先阅读这个项目结构和我提供的代码。

你的任务不是马上修改代码，而是先告诉我：
1. 这个项目大概是做什么的
2. 使用了哪些技术
3. 主要页面和功能在哪里
4. 如果我要修改首页，可能涉及哪些文件
5. 你建议我先从哪里开始

在我确认之前，不要直接改代码。

这个提示词的重点是：

先理解，再修改。

生活化理解：

就像你找人修电脑，不能一上来就让他乱删文件。 应该先让他检查电脑有什么问题，再告诉你准备怎么修。

七、如何让 AI 添加新功能？

添加新功能时，不要只说：

帮我加一个教程页面。

这句话太短了。

AI 不知道这个页面给谁看，也不知道页面要有哪些内容、什么风格、是否适配手机、是否支持深色模式。

可复制模板：添加新功能

我想给项目添加一个新功能：

功能名称：
【例如：新手教程导航页面】

功能目标：
【让用户可以按学习顺序阅读 AI 入门文章】

具体要求：
1. 页面要适配电脑和手机
2. 支持深色模式
3. 使用项目现有设计风格
4. 不影响已有页面
5. 修改前先告诉我涉及哪些文件

请先输出修改方案，不要直接写代码。

这个模板适合用来新增页面、新增模块、新增按钮、新增导航等功能。

如果 AI 给出的方案不合适，你可以继续说：

方案整体可以，但不要新增依赖。
请尽量使用项目已有组件完成。

或者：

这个方案太复杂了。
请改成适合新手维护的简单版本。

八、如何让 AI 修 bug？

修 bug 时，最重要的是说清楚“怎么复现”。

不要只说：

页面坏了，帮我修。

这对 AI 来说太模糊。

你要告诉它：

• 哪个页面出问题
• 你做了什么操作
• 出现了什么现象
• 控制台或终端报了什么错
• 希望它怎么修

可复制模板：修 bug

项目出现了一个 bug：

问题表现：
【描述你看到的问题】

复现步骤：
1. 打开【页面】
2. 点击【按钮】
3. 出现【错误现象】

报错信息：
【粘贴终端或浏览器报错】

我希望你：
1. 判断可能原因
2. 指出需要查看哪些文件
3. 给出最小修改方案
4. 不要重构无关代码

这里的关键是：

让 AI 做最小修改，不要顺手重构一堆无关代码。

生活化理解：

你只是车灯坏了，不是要换整辆车。 修 bug 也是一样，能小修就不要大改。

九、如何让 AI 优化页面设计？

优化设计时，也不要只说：

帮我美化一下。

“美化”这个词太宽了。

有的人觉得高级是大图、大动画、大渐变。 但网站真正重要的是：用户能不能看懂、能不能找到入口、手机上好不好用。

可复制模板：优化页面设计

请帮我优化这个页面的前端设计。

页面目标：
【说明这个页面给谁用，解决什么问题】

设计要求：
1. 保持现有品牌风格
2. 提升阅读体验
3. 支持深色模式
4. 适配移动端
5. 不要过度炫技
6. 重点突出用户最需要点击的内容

请先给出设计方案和布局结构，再给出代码修改建议。

这个模板适合用于：

• 首页优化
• 教程列表页优化
• 文章详情页优化
• 学习路线页设计
• API 文档页排版

如果你的网站读者是新手，设计上建议优先考虑：

十、如何防止 AI 乱改代码？

防止乱改，关键是限制范围。

你可以在提示词里明确写：

请只修改以下文件：
- app/page.tsx
- components/HeroSection.tsx

不要修改：
- 登录逻辑
- API 路由
- 数据库相关文件
- package.json

也可以要求 AI 修改前先给计划：

请先告诉我你准备修改哪些文件、每个文件要改什么。
在我确认之前，不要输出完整代码。

还可以让 AI 保持最小改动：

请尽量使用最小修改方案。
不要重构无关代码。
不要改变现有功能逻辑。

新手尤其要注意：

不要一次让 AI 修改太多文件。

一次修改太多，出了问题很难排查。

十一、做一个完整小项目示例

下面用 apiuspro.cn 举一个例子。

项目主题：

为 apiuspro.cn 做一个“AI 新手学习路线页面”。

页面目标：

让完全不了解 AI 的用户知道应该按什么顺序学习。

这个页面可以包含：

可复制模板：完整项目需求

请帮我设计一个 AI 新手学习路线页面。

网站名称：ApiUsPro

页面目标：
让完全不了解 AI 的用户知道应该按什么顺序学习。

页面内容必须包含：
1. 顶部说明区
2. 6 篇新手教程卡片
3. 学习路径流程图
4. 常见问题
5. API Key 安全提醒
6. 下一步行动按钮

设计要求：
1. 参考现代 AI 工具官网的简洁风格
2. 阅读体验优先
3. 支持深色模式
4. 适配手机端
5. 不要使用过多动画
6. 文案要适合新手

请先输出页面设计方案，不要直接修改代码。

这个提示词适合先让 AI 做方案。

等方案确认后，再继续让它写代码：

方案可以。
请根据这个方案生成页面代码。

要求：
1. 使用项目现有技术栈
2. 尽量复用已有组件
3. 不新增不必要依赖
4. 保持移动端适配
5. 输出涉及的文件和完整代码

如果运行后有报错，再把报错发给 AI：

运行项目时报错如下：

【粘贴完整报错】

请你：
1. 判断报错原因
2. 给出最小修复方案
3. 只修改必要代码
4. 不要重构无关部分

十二、每次让 AI 修改代码前都要做什么？

每次让 AI 修改代码前，建议先做这几件事。

尤其是备份代码，这点很重要。

如果你使用 Git，可以在修改前提交一次：

# 查看当前修改状态
git status

# 保存当前版本
git add .
git commit -m "backup before ai changes"

如果你还不会 Git，至少先复制一份项目文件夹。

不要让 AI 在没有备份的情况下大范围修改项目。

十三、新手常见错误

1. 只说“帮我做个网站”

这个需求太大。

更好的方式是先说清楚：

• 网站给谁用
• 网站做什么
• 有哪些页面
• 风格是什么
• 用什么技术栈

2. 不告诉 AI 项目结构

AI 不知道你的项目文件在哪里，就容易猜错。

可以先让它阅读项目结构，再让它修改。

3. 一次让 AI 改太多东西

比如同时要求：

• 改首页
• 改登录
• 加后台
• 做 SEO
• 改样式
• 修 bug

这样很容易乱。

建议一次只处理一个任务。

4. 不看代码就直接运行

AI 生成的代码要先看一遍。

重点检查：

• 有没有删除原功能
• 有没有新增奇怪依赖
• 有没有写死敏感信息
• 有没有影响移动端
• 有没有明显报错

5. 不测试就上线

代码能保存，不代表功能正常。

至少要检查：

• 页面能不能打开
• 按钮能不能点击
• 手机端是否正常
• 深色模式是否正常
• 控制台有没有报错

十四、新手推荐工作方式

如果你刚开始用 AI 做项目，可以按这个节奏来：

每天只做一个小功能
  ↓
先让 AI 解释项目相关文件
  ↓
再让 AI 给修改方案
  ↓
确认后再生成代码
  ↓
运行项目检查效果
  ↓
把报错继续发给 AI
  ↓
整理一个自己的常用提示词库

不要追求一次做很大。

新手最重要的是：

先把一个小功能完整做出来。

比如：

• 做一个学习路线页面
• 做一个文章卡片组件
• 做一个 API Key 安全提醒模块
• 做一个新手教程目录页
• 优化一个移动端导航栏

这些小任务做多了，你就会慢慢知道怎么和 AI 配合。

本篇总结

• AI 编程工具可以帮你读代码、写代码、修 bug、做页面，但不是魔法。
• 新手让 AI 修改项目前，要先说明项目目标、技术栈、修改范围和限制条件。
• 修 bug 时要提供问题表现、复现步骤和完整报错信息。
• 让 AI 写代码前，最好先让它输出修改方案，不要直接大范围改。
• 每次修改前都要备份代码，修改后要运行项目并测试结果。
• 第三方工具不是官方必备工具，选择适合自己项目和习惯的即可。

下一步学习建议

接下来你可以回到 ApiUsPro 学习路线页，选择一篇文章开始实操。

建议从一个小页面开始练习，比如：

• AI 新手学习路线页面
• 教程文章列表页
• API Key 安全提醒组件
• 新手常见问题页面

练习时可以重点做 3 件事：

1. 保存自己的常用提示词
2. 每次修改前备份代码
3. 每次修改后运行项目测试

等你能用 AI 完成一个小页面后，再去做更复杂的功能会更稳。