阅读原文：

• 写代码时遇到错误怎么办

• 七款 AI 编程工具对比

• 用设计和编程 Agent 设计网站

一、本章核心学习目标

• 掌握 AI 时代的报错排查流程，不用懂调试，90% 的报错都能自己解决

• 了解 7 款主流 AI 编程工具的差异，学会根据自己的场景选工具

• 学会用设计 Agent + 编码 Agent，从零搭建完整网站，一个人完成设计 + 开发全流程

---

二、写代码时遇到错误怎么办

在 AI 时代，你不需要背错误类型，不需要当调试专家，只需要学会怎么问 AI，就能解决 90% 的报错。

2.1 核心心法：截图问 AI

遇到报错不要慌，不要瞎改代码，不要自己搜半天，直接按这个流程来：

看到报错 → 截图 → 问AI → 按AI说的做

你不需要理解错误是什么意思，只需要把情况告诉 AI 就行。

2.2 怎么把问题讲清楚

提问的时候，讲清楚三件事，AI 就能更快帮你解决：

1. 刚才做了什么：比如 我修改了登录页面的代码、 我点击了保存按钮

2. 现在看到了什么：比如 页面白屏了、 按钮点了没反应、显示报错

3. 想要什么效果：比如 我想让数据保存成功、 我想让页面正常显示

最好的提问方式：描述 + 截图，比如：

刚才我修改了登录页面的代码，现在页面白屏了。
[截图]
怎么办？

2.3 完整的排查流程

1. 第一步：直接提问
   先描述现象 + 截图，丢给 AI，很多时候 AI 直接就能解决

2. 如果 AI 要更多信息，打开 F12 补充

   • 页面白屏 / JS 报错：看 Console 面板，截图红色报错

   • API / 数据问题：看 Network 面板，重新操作，截图请求、参数、返回结果

   • 样式问题：右键元素检查，截图 Styles 面板的信息

3. 迭代直到解决
   改完测试，如果还没好，继续截图提问，重复直到解决

---

三、七款 AI 编程工具对比

这篇文章用同一个贪吃蛇游戏的需求，实测了 7 款主流的 AI 编程工具，帮你选最适合自己的。

3.1 什么是 Vibe Coding？

Vibe Coding 是新型的开发方式，从 以代码为中心 变成以意图为中心，你用自然语言描述想要的结果，AI 帮你写代码、调试，工作流是：

1. 描述目标

2. AI 生成代码

3. 运行观察

4. 反馈迭代

它的优势：

• 降低门槛：零基础也能做应用

• 快速原型：从想法到 MVP 的时间大幅缩短

• 提高效率：AI 帮你做重复的编码工作

3.2 两类工具的区别

类型	代表工具	特点	适合场景
在线平台	Lovable、[Z.ai](Z.ai)、Replit	不用环境配置，一键预览部署	新手入门、快速验证 MVP、轻量应用
本地 IDE	Cursor、Trae	本地运行，能访问本地文件，对接专业工作流	专业项目、长期维护、复杂项目

3.3 7 款工具的核心特点

工具	类型	核心特点	适合用户
Lovable	在线	新手友好，自动帮你串联服务，不用管环境	完全零基础的新手，快速做原型
Cursor	本地	强大的 AI IDE，支持大项目，代码可控	有编程基础，想在传统流程加 AI
[Z.ai](Z.ai)	在线	全栈开发，不用管环境，一键运行	新手入门，快速做小应用
Replit	在线	老牌在线平台，生态成熟	想快速跑代码，不用配置
Minimax	在线	国产模型，中文友好	国内用户，做中文应用
Trae	本地	字节的 AI IDE，中文友好，免费基础功能	新手入门本地开发，之前课程的主力工具
V0	在线	Vercel 的工具，擅长 UI 代码	做前端页面，快速出 UI

---

四、用设计和编程 Agent 设计网站

这篇教程教你，怎么用两个 AI Agent，一个做设计，一个做编码，一个人完成从创意到网站上线的全流程。

4.1 两个 Agent 的分工

• 设计 Agent：帮你做 Logo、页面布局、配色，比如 Mastergo、Figma 的 AI

• 编码 Agent：帮你把设计变成可运行的代码，比如 [Z.ai](Z.ai)、Trae、Cursor

4.2 第一步：用设计 Agent 做 Logo

Logo 是网站的第一印象，给 AI 的提示词要写清楚：

1. 品牌名称：Logo 里要放的文字

2. 风格：比如极简、现代、未来感

3. 配色：指定颜色，和网站整体匹配

4. 形式：比如图标 + 文字，或者圆形内的文字

示例提示词：

请为我设计一个极简风格的Logo，品牌名称是 'My First Website'。
使用黑色 (#171721) 和橙色 (#FF7130)，并将文字放在一个圆形内部。

4.3 第二步：规划网站结构

做网站之前，先规划好页面结构，不要上来就做：

• 基础版块：Home（首页）、About（关于）、Contact（联系），这是最基础的

• 可选版块：Services（服务）、Projects（项目）、Blog（博客），根据你的需求加

然后选好配色，你可以用 colorhunt、coolors 这些网站找配色灵感，把颜色写进提示词。

4.4 第三步：用设计 Agent 做页面设计

把你规划的结构和配色，告诉设计 Agent，让它生成页面设计稿，然后多轮迭代修改，直到你满意。

4.5 第四步：用编码 Agent 搭网站

设计稿做好后，用编码 Agent 把设计变成代码：

1. 先让 Agent 生成基础的 HTML/CSS/JS 代码

2. 然后修改文案，把占位文本换成你自己的内容

3. 插入图片，把 Logo、背景图这些放到项目里，让 Agent 帮你放到页面里

4. 微调细节，比如按钮大小、字体，用自然语言告诉 Agent 就行

整个流程下来，你不用会设计，不用会写代码，就能做出一个完整的、好看的网站，一个人完成设计 + 开发的全流程。

---

本章总结

这三个附录，是把 AI 开发的基础工具和技巧，拆成了更落地的内容：

1. 报错排查：不用怕报错，学会问 AI，90% 的问题都能解决

2. 工具选择：不用纠结哪个工具最好，根据你的场景，选在线还是本地，新手选在线，专业的选本地

3. 全流程开发：用设计 + 编码两个 Agent，零基础也能做网站，一个人就是一支队伍

这些工具和技巧，能帮你把之前学的产品思维，真正落地成可运行的应用。