不用先成为程序员，但要看得懂 AI 改了哪个文件、哪份数据、哪个函数，并能用报错和版本记录验收结果。
- 学习结果
- 能读懂 AI 写的一次小改动：知道它改在哪里、为什么这样改、报错时从哪里查起，改坏了能退回。
- 时长
- 2-3 小时
- 难度
- 零基础
- 核验
- 未核验
正文
AI 已经能写出大部分代码，所以有人觉得不用学编程了。实际用下来会发现，真正卡住人的不是“写不出代码”，而是另外三件事：说不清要改哪里，看不懂 AI 改了什么，出了错不知道从哪查。这三件事都需要一点基础。
需要的基础比想象中少，也和传统编程课的重点不一样。你不需要会手写排序算法，但要能看懂一个项目的目录、一份数据的结构、一个函数做了什么、一条报错在说什么，以及这次改动前后差在哪里。
文件和目录：代码放在哪里
一个网站项目通常把页面、可复用的组件、样式和数据分开放。比如：
src/
pages/ 每个页面一个文件
components/ 可复用的部件，比如产品卡片
styles/ 样式
data/ 商品、文章这类数据
要改“产品卡片上的标题”，先弄清楚标题是写死在组件里，还是从数据文件里读出来的。改错了地方，可能所有卡片都变成同一个标题。让 AI 动手之前，先让它说明“要改哪几个文件、为什么”，这一步本身就能拦下很多误改。
数据：变量、类型、对象和数组
程序里的信息都有类型。标题是文本（字符串），价格是数字，是否上架是“真或假”（布尔值）。几项信息组合成一个对象，描述一件商品；很多件商品放在一起，就是一个数组：
const products = [
{ title: "番茄计时器", price: 29, published: true },
{ title: "便签", price: 0, published: true },
];
类型错了会出很隐蔽的问题。29 和 "29" 看起来一样，但前者是数字，后者是文本；两个文本相加得到的是拼接结果 "2929"，不是 58。看到价格算错、排序乱掉，先检查数据类型。
函数：输入、输出和副作用
函数把输入变成输出。formatPrice(29) 返回 "¥29"，这种只做计算的函数，调用多少次都没关系。另一类函数会改变外部世界：写数据库、发邮件、扣款。读一个函数时问三个问题：它接收什么，返回什么，有没有对外做了什么事。
这个区分很重要。AI 偶尔会把“发通知”这类动作放进页面每次显示都会执行的位置，结果用户每刷新一次就收到一封邮件。能分清“计算”和“动作”，就能在审查时发现这类问题。
组件：把数据、展示、样式和行为分开
组件是可复用的界面部件。一张产品卡片接收标题、价格、链接这些参数，所有商品共用同一个组件。修改时要分清是哪一层的事：
- 某件商品的价格不对：改数据；
- 所有价格都要显示成“¥29”：改展示逻辑（格式化函数）；
- 卡片之间太挤：改样式；
- 点击“购买”没反应：查行为（事件和请求）。
这样拆开，AI 改动的范围就小，出问题也容易定位。
报错：先读三样东西
报错信息看着吓人，其实结构固定。先读三样东西：错误类型和描述、文件路径和行号、调用栈里第一个属于你项目的文件。
比如浏览器控制台里出现 TypeError: Cannot read properties of undefined (reading 'title')，意思是代码想读一个对象的 title，但这个对象根本不存在。常见原因是数据还没加载完、列表是空的，或者字段名拼错了。顺着行号找到那一行，看那个对象从哪来，通常比让 AI 盲目重试几轮更快。
把报错交给 AI 时，贴完整的原文和发生前的操作，不要只说“报错了”，也不要只贴截图里的一小块。
版本记录：看清改了什么，改坏能退回
和 AI 协作最需要的一项基础是 Git。每次让 AI 改动前提交一次，改完之后用 diff（差异对比）看它到底动了哪些文件、哪几行。AI 的解释可能说“只改了价格显示”，diff 会告诉你它是不是顺手改了别的东西。改坏了，回到上一次提交就行，不用担心把项目弄乱。
你不需要掌握 Git 的全部命令，先会这四件事：查看状态、提交、查看差异、回到某个版本。
预览、构建和验收
本地预览看的是页面和交互，构建检查的是项目能不能生成可发布的文件。构建通过不代表功能正确，页面能打开也不代表手机上正常。改完一个产品卡片，至少检查：标题特别长、价格为 0、没有图片、手机窄屏，这几种情况都显示正常。
一开始可以不学的
框架的内部原理、算法题、各种设计模式，都可以等真正需要时再学。顺序是：遇到什么问题，就补什么知识。数组不会遍历就补数组，布局错位就补 CSS，部署后 404 就补路由和部署。
最后一条安全提醒：密码、API 密钥和真实用户数据，不要直接粘贴到 AI 对话里。需要说明配置时，用占位符代替真实值。
学习步骤
- 打开一个小项目，找到页面、组件、样式和数据分别在哪个目录。
- 从数据文件里找一件商品，说出每个字段的类型。
- 找一个格式化函数，写下它的输入、输出，以及有没有对外做事。
- 用 Git 提交当前版本，让 AI 做一个小改动，再用 diff 检查改了什么。
- 故意制造一个报错（比如把字段名改错），按“类型、位置、调用栈”三步读懂它。
- 用长标题、零价格、缺图片、手机窄屏四种情况检查改动结果。
场景拆解
让免费商品显示“免费”
练习项目里有三件商品：29 元的计时器、0 元的便签、一件标题很长的商品。需求是：价格为 0 时显示“免费”，其他显示“¥29”这样的格式。
- 定位：让 AI 先说明价格是在哪个组件里显示的，格式化逻辑在哪个函数里。确认数据里的
price是数字。 - 限定范围：只改格式化函数，不改数据，也不在组件里写死“免费”两个字。
- 审查：看 diff，确认只改了这一个函数；检查有没有把
price改成了文本。 - 验收：三件商品分别显示“¥29”“免费”和正确价格；手机上长标题换行后不遮挡价格。
如果长标题挡住了价格，那是样式问题，应该让标题换行，不能靠删短标题文字来掩盖。
补充材料
思维导图、练习、清单和参考资料可按需展开。
01 思维导图和离线文件
适合读完后下载到自己的知识库里继续整理。
看懂代码的基础
- 目录：东西放在哪里
- 数据：类型、对象和数组
- 函数：输入、输出和副作用
- 组件：数据、展示、样式、行为分开
出错时怎么查
- 读错误类型和描述
- 找文件路径和行号
- 看调用栈里第一个自己的文件
- 贴完整原文给 AI
验收一次改动
- 改之前先提交版本
- 用 diff 核对改动范围
- 检查长标题、零值、缺图、窄屏
- 改坏了就回退
02 实践练习
根据文章内容记录自己的判断与依据。
读懂并验收一次 AI 改动
用一个包含商品列表的小项目（可以让 AI 生成一个），完成一次完整的“定位—改动—审查—验收”。
准备材料
- 一个能在本地运行的小项目，已经用 Git 管理。
- 浏览器开发者工具。
练习步骤
01 / 画出项目地图
时间： 20 分钟
操作：
- 列出页面、组件、样式、数据各在哪个目录。
- 找到商品数据，标出每个字段的类型。
产出： 一张简单的项目地图。
检查： 能说出“改某件商品的价格”和“改所有价格的显示格式”分别要动哪个文件。
02 / 让 AI 做一个小改动并审查
时间： 30 分钟
操作：
- 先提交当前版本，再让 AI 实现“0 元显示免费”。
- 用 diff 检查改动的文件和行数是否和 AI 的说明一致。
产出： 一段审查记录：改了哪些文件，有没有多余改动。
检查： 没有改动数据文件，price 仍然是数字。
03 / 读一条报错
时间： 20 分钟
操作：
- 把某个字段名故意改错，运行并找到报错。
- 写下错误类型、文件行号，以及你认为的原因；改回来后确认报错消失。
产出： 一份报错分析。
检查： 不靠 AI，能从报错直接定位到出问题的那一行。
04 / 边界检查和回退
时间： 20 分钟
操作：
- 用长标题、零价格、缺图片、手机窄屏检查页面。
- 练习一次回到上一个提交版本，再回到最新版本。
产出： 一份验收清单。
检查： 四种边界情况都正常，并且会用 Git 撤回改动。
完成检查
- 能说出一次改动涉及哪一层：数据、展示、样式还是行为。
- 能用 diff 确认 AI 的改动范围。
- 能按三步读懂一条报错。
03 清单、模板和关键词
用于项目记录和自查。
给 AI 的改动请求模板
目标：（一句话说明要改成什么样）
范围：只改 ____ 文件/函数，不要改 ____
现状：（相关数据结构或当前表现）
验收：长标题 / 零值 / 缺图片 / 手机窄屏都要正常
请先说明计划修改的文件和原因，再动手。
报错求助模板
操作：我做了什么之后出现报错
完整报错原文：
出错文件和行号：
最近一次改动（diff 摘要）：
我已经排除的可能：
关键概念
- 目录结构：页面、组件、样式、数据分开存放
- 数据类型：字符串、数字、布尔值、对象、数组
- 函数：输入、输出和副作用
- 组件：可复用的界面部件
- 报错三要素：类型、位置、调用栈
- Git 与 diff：记录版本、对比改动、随时回退
- 构建：生成可发布的文件，不等于功能正确
容易误判
- AI 的解释听起来合理，就默认代码也对
- 把数字存成文本，导致计算和排序出错
- 只贴报错截图的一部分，不给完整原文
- 不提交版本就让 AI 大范围修改
- 构建通过就认为功能没问题
- 把密钥和真实用户数据贴进对话
04 工具和参考资料
本篇涉及的工具和参考链接。
可参考工具
- VS Code
- Git
- 浏览器开发者工具
- Codex
- ChatGPT