作业：

从z.ai下载了游戏导入到Trae中。

用trae做了修改：

做了一个“飞机大战”游戏，并玩了一下。

这是最初版本，没有：

- ❌ 最高分显示
- ❌ 难度选择
- ❌ 音效/音乐开关
- ❌ 连击系统

第二版：改进的方向
1. 游戏体验增强

2. 视觉效果升级

音效增强

第二版如附图：

笔记：

在 AI 时代，特别是在使用 AI IDE 时，请记住一个核心原则：任何操作，都可以先问一遍 AI，甚至让它直接帮你做。

IDE (Integrated Development Environment) 的核心价值在于集成。它将软件开发所需的各种工具（编辑器、编译器、调试器、文件管理器等）整合到一个统一的图形界面中，提供一站式的工作体验。

VS Code 的核心理念是“一切皆插件”。它通过插件机制支持各种语言，安装 Python 插件就是 Python IDE，安装 C++ 插件就是 C++ IDE。不装插件时，它只是个高级文本编辑器。

VS Code 的设计哲学可以总结为一句话：“核心极简，能力外挂”。

你刚下载好的 VS Code，如果不安装任何插件，它其实并不懂编程。 此时的它，本质上只是一个功能强大的文本编辑器。

举例：
在 AI IDE 里，你可以直接使用大语言模型帮助你进行编码和修改文件：

• 直接说“做一个登录页”，它先生成基础代码结构；
• 把报错信息和相关代码丢给它，让它先分析原因并给出修改建议；
• 在你确认后，让它自动新建文件、批量改代码，处理跨文件的体力活。

例如，你可以选中一段代码，让它“重构一下”或“加注释”；也可以在侧栏里问“这个项目是怎么设计的？”，通过 @文件名 或 @整个项目 指定参考范围，用一句话自动完成新建文件、写代码和运行的繁琐操作。

💡 小提示：从网页到本地的无缝衔接

如果你之前已经在 z.ai 或其他网页端 AI 编程平台上开发过项目，可以直接将代码下载到本地，然后用 AI IDE 打开继续开发。这样既能保留之前的成果，又能享受本地 IDE 更强大的 AI 辅助能力。

操作步骤很简单：

1. 在 z.ai 等平台点击下载按钮，将项目保存到本地
2. 解压后用 Trae/Cursor 等 AI IDE 打开该文件夹
3. 在侧边栏继续与 AI 对话，迭代优化你的项目

不推荐使用 Auto 模式（自动选择模型），如果是国际版，我们推荐使用 Gemini 或者 GPT 模型， 如果是国内版，我们推荐你尝试 Kimi k2 或 Minimax、GLM 等国内模型

一个比较实用的做法是，让 AI 先整体讲一遍“游戏是怎么动起来的”，再拆到具体细节。比如你可以直接提问：

“请从上到下讲一遍，这个贪吃蛇游戏每一步是怎么动起来的？尽量少用专业术语。”

然后再顺着它的回答继续追问关键点，例如：

“蛇在屏幕上的每一节身体，是用什么数据结构来记的？能打个比方吗？”
“你是怎么控制‘隔一段时间动一下’的？这在代码里是哪一段？”
“蛇吃到食物时，你做了哪几步操作？在哪一段逻辑里判断吃到了？”
“撞墙和撞到自己，分别是在哪些代码里判断出来的？”

如果你看到某个文件（比如 SnakeGame.tsx）但完全不知道它在干什么，也可以直接请 AI 分块说明：

“请把 SnakeGame.tsx 按功能分几块讲一下：每一块大概负责什么，用通俗一点的说法。”

在这一轮对话中，你可以把不懂的词一律当成追问入口，比如：

“你刚才说的‘状态’具体指什么？能用一个生活中的例子解释吗？”
“你说的‘定时器’在这里主要是干嘛的？如果把它去掉，会发生什么？”

通过这种方式，你的目标不是一下子记住所有概念，而是先搞清三件事：这款游戏里有哪些核心数据（蛇、食物、分数、游戏状态等），这些数据在什么时机会发生变化（移动、吃到食物、游戏结束等），以及每一种变化对应的是哪一小段代码。只要这三点理顺了，你就基本可以看懂这份代码的主干逻辑。

（可选）参考 z.ai 架构修改贪吃蛇结果​

对于 vibe coding 小白来说，最难的事情反而是不知道什么才算是“最佳实践“，不知道怎么样的架构才是最适合的；因为不知道计算机基础，所以没办法很好的引导 AI，解决这个难题的方法是”直接参考“；还记得我们之前说过的 z.ai 中可以查看代码吗？其实对应 README（项目中用于介绍功能和技术架构的部分）中已经给出了一个最佳架构参考：

我们想要让本地的结果尽量符合 z.ai 的结果，我们可以复制这个 README 的全部内容，粘贴到 Trae 的侧边栏中，让他根据 README 的架构，修改本地的代码。

最后我们能得到与 z.ai 高度相似的页面设计风格：

6.1 说清楚你的需求：从“模糊想法”到“具体说明”​

很多人第一次用 AI 时，习惯只说一句非常笼统的话，比如：

“帮我做个网页。”
“帮我写个小程序。”

在这种情况下，AI 只能自己“脑补”你想要什么，于是它会随便给你一个看上去挺完整的东西，但往往和你真正想做的差很多。
要让 AI 更听得懂你的意思，需要把“脑子里的想法”拆开，用几句话一步步说清楚。

可以从这几个方面来补充：

1. 告诉它，你拿这个东西来干嘛
   比如，不要只说“个人网站”，而是说：

   • “我想做一个只包含一页内容的个人简介网页，用来发给招聘的人看。”

2. 告诉它，大概需要哪几块内容
   不用说专业词，只要描述你希望页面上出现什么，比如：

   • “页面要有三个部分：最上面是名字和一句自我介绍，中间列出几条工作经历，最下面放邮箱和微信号。”

3. 告诉它，你的水平和限制
   让 AI 按照小白能接受的方式来做，比如：

   • “我完全不会写代码，请只用最简单的写法，让我可以直接复制到一个文件里，在浏览器里打开。”

4. 告诉它，你希望怎么拿到结果
   例如：

   • “请给我一份可以直接保存为 index.html 并在浏览器里打开的完整代码。”

综合起来，可以让你对 AI 这样说：

“我完全不会写代码，想做一个只包含一页内容的个人简介网页，用来发给招聘的人看。
页面需要三个部分：上面一行是名字和一句自我介绍，中间是几条工作经历，下面是邮箱和微信号。

当你把这些信息说清楚之后，AI 就能更接近你真正的需求，而不是随便给你一个“看起来很厉害但用不上的东西”。

6.2 用对节奏：先“能跑起来”，再一点点变复杂​

对完全小白来说，最常见的坑是：一上来就想做一个“非常完整”“功能很多”的东西。
比如：

“帮我做一个像淘宝那样的网站。”
“帮我做一个可以注册、登录、下单的系统。”

结果往往是：AI 给你一大团代码，你复制之后不是打不开，就是到处报错；你也看不懂哪里出了问题，最后只能放弃。

更适合的做法，是主动控制节奏，让 AI 跟着你一步一步来，而不是一次性把所有东西都砸给你。可以按下面这个顺序提要求：

1. 第一步：先要一个“最小的例子”
   只检查一件事：能不能在浏览器里看到东西。
   例如：

   “请先给我一个最简单的示例，只要在浏览器里能看到一行‘这是我的主页’就行。
   再一步步告诉我：文件名该叫什么，应该怎么保存，怎么打开。”

2. 第二步：在这个基础上，慢慢把内容加完整
   当你确认“确实能看到那一行字”之后，再说：

   “在刚才的基础上，帮我增加一个‘工作经历’区域，把完整代码重新发给我。不要只发改动的部分。”

3. 第三步：结构差不多之后，再考虑好不好看
   例如：

   “现在页面已经能正常显示内容了。接下来请帮我稍微美化一下：整体居中，标题大一点，用一个比较舒服的字体。请给出更新后的完整代码。”

每加一步，你都先运行一次，确认真的有变化，再让 AI 往下加。这样就算哪一步出问题，你也可以很快回到“上一版还正常”的状态，而不用完全推倒重来。

6.3 善用截图和复制：不会说就“把画面扔给 AI”​

很多完全小白遇到的难点，不在于“不会改代码”，而是在于不知道怎么把问题说出来。
比如：

• 浏览器里突然弹出一大堆英文报错，你完全看不懂。
• 网页的排版和你想的不一样，但你也不知道该用什么词来形容。

在这些情况下，不需要硬挤专业术语，最简单的方式就是——把你看到的东西原样丢给 AI。

可以这样做：

1. 复制报错文字
   当你看到一串红色错误消息时，可以直接复制出来，然后说：

   “这是我运行后出现的完整错误信息。我看不懂这些英文，请先用普通人能听懂的话解释一下，这大概是什么意思。
   然后告诉我，我现在最简单应该怎么改。”

2. 给 AI 看截图 如果你觉得"这个页面看着就是不对"，但又不会描述，可以：

   • 截一张当前页面的图；
   • 把你正在用的那份代码，一整段复制给 AI；
   • 然后说明：

     "这是现在页面的样子，这是我现在的完整代码。 我原本希望它是三列排版，现在变成一列了。请你帮我看一下原因，并给我一份改好后的完整代码。"

   💡 关于截图功能的补充说明

   需要注意的是，并非所有 AI 模型都支持"看图片"。这涉及到两个不同的概念：

   • 纯文本大模型（LLM）：只能处理文字输入，无法识别图片内容。如果你给它发截图，它要么拒绝处理，要么无法正确理解图片中的信息。

   • 多模态模型：能够同时处理文字、图片等多种类型的输入，可以"看懂"你发的截图，并根据图片内容给出建议。

   常见模型的能力参考（以 Trae 中可选的模型为例）：

   模型	是否支持图片输入
   Doubao-Seed 系列	✅ 支持
   GLM-4.7 / 4.6	❌ 不支持
   MiniMax-M2.1 / M2	❌ 不支持
   DeepSeek-V3.1	❌ 不支持
   Kimi-K2.5	✅ 支持
   Kimi-K2-0905	❌ 不支持
   Qwen-3-Coder	❌ 不支持
   Gemini 系列	✅ 支持
   GPT 系列	✅ 支持

   使用建议：如果你想通过截图让 AI 帮你排查界面问题，请先确认你使用的模型支持图像输入。如果不支持，你可以改用文字描述问题，或者将错误信息复制粘贴给 AI。

3. 遇到喜欢的网页，想做个类似的
   不需要说“这个布局叫什么”，直接：

   • 截图或复制那页的主要标题、段落；
   • 再说：

     “我想做一个结构和这个差不多的页面，不需要一模一样。
     请帮我用简单一点的代码，搭一个类似的框架出来，然后我再自己把文字换成我的。”

简单来说：你负责“把看到的东西搬给 AI”，再用最朴素的话说“我希望它变成什么样”；剩下的“翻译成代码、解释名词、找问题”，交给 AI 来做。

6.4 当 AI 生成的代码不工作时：一套通用应对方法

​

在实际练习中，你一定会遇到这种情况：
AI 很认真地给了你一段代码，你也老老实实地复制进去了，但结果要么是浏览器一片空白，要么完全不是它说的那个效果。
这并不代表你“学不会”，也不代表 AI 完全错了，而是你们之间还缺少几轮“来回确认”。

当代码“不工作”时，可以按下面这套固定流程来跟 AI 说：

1. 先把“你做了什么 + 现在什么样”说清楚
   避免只说“打不开”“不行”。可以这样描述：

   打开之后，页面是完全空白的，没有显示你说的那句欢迎文字。 我打开了 xxxx 页面，其中没有刚才我说的部分啊，这不能用

2. 把你现在的完整代码发给 AI
   很多时候问题出在：复制少了一行、或者上一次和这一次的内容混在一起了。
   你可以说：

   “下面是我现在这个文件里的全部代码。
   请你对比一下有没有哪里少了、写错了，或者顺序不对。
   请直接给我一份修正后的完整代码，不要只发一小段。”

3. 如果有错误提示，一并给出
   比如浏览器右上角弹出的错误，或者底部的一些红字。你可以：

   • 把错误文字复制出来；
   • 或者截一张图；
   • 然后说：

     “这是我看到的错误提示。我完全看不懂，请先用简单的方式说明这大概是什么问题，再告诉我现在最需要改哪几行。”

4. 要求对方用“小白模式”一步一步讲
   你可以直接把自己的情况说清楚，让它别省略中间步骤：

   “我完全不会写代码，请你一步一步告诉我：
   第 1 步要改哪一行，
   第 2 步要怎么保存，
   第 3 步要怎么重新打开或者刷新页面。
   每一步都请用完整的句子写出来。”

5. 最后，请它帮你做“应该看到什么”的对照
   例如：

   请先说一下，按照你改好的代码，正常情况下我打开网页应该看到什么内容。

只要你按照这套流程来和 AI 交互，大部分“代码不工作”的情况，都可以在几轮来回中解决掉。
同时，你也会逐渐熟悉常见的问题类型，下次再遇到类似情况就能直接解决。