用 AI 开发：工具与工作流

大约 8 分钟

用 AI 开发：工具与工作流

先说人话：AI 改变了学编程的方式

十年前的新手卡住一个报错要翻论坛翻半天；现在你身边随时坐着一位「读过全世界代码」的搭档。会用 AI 的新手，成长速度是不会用的好几倍——这不是可选项，是新时代的基本功。

💡 比喻： AI 像一位手速极快、知识渊博、但刚入职你公司的资深工程师——技术没得说，但他不了解你的项目、不知道你们的规矩，而且偶尔会一本正经地说错话。你的工作就是：带他熟悉项目（记忆）、给他布置清楚任务（提问）、验收他的活（测试）。

AI 是个什么样的搭档

先建立正确认知：知道它强在哪、弱在哪，才能用得好。

⚖️ 强项与弱项

✅ AI 极强的地方： 解释看不懂的代码和报错 · 写样板代码（增删改查、配置）· 教学答疑 · 起草测试 · 排查常见错误 · 陪你梳理思路

❌ AI 容易翻车的地方： 不了解你的项目背景（除非你告诉它）· 可能编造不存在的函数 / API · 复杂业务一次做太多容易跑偏 · 每次新对话都「失忆」

一句话原则

让 AI 干活，但方向盘在你手里——它写、你审；它答、你验。你可以不会写，但要看得懂、判得出对错（这正是前端速通、后端速通各篇教你的）。

工具：opencode（终端里的 AI 程序员）

网页版 AI 只能「口头指导」，编程专用的 AI 工具能直接「上手干活」。

🆚 网页版 AI vs AI 编程工具

💡 比喻： 网页版 AI（复制粘贴代码来回搬）像电话咨询的装修顾问——只能听你描述、给你建议；AI 编程工具像住进你家的装修师傅——自己看现场（读你的项目文件）、自己动手（改代码）、自己检查（跑命令看结果）。

能力	网页版 AI	AI 编程工具（如 opencode）
看你的项目代码	你手动一段段贴给它	自己读整个项目文件夹
改代码	它给你，你手动粘回去	直接改文件，你确认即可
跑命令 / 验证	不能	能自己跑 `npm run dev`、跑测试、看报错、接着修
项目记忆	没有	自动读取项目里的记忆文件（详见《AI 记忆体系》）

⚡ 推荐：opencode

opencode 是一个开源的终端 AI 编程助手：在命令行里运行，进入你的项目文件夹后启动，它就能读代码、改文件、执行命令，像一个坐在你终端里的程序员。

# 用 npm 安装（[《Vue 3 入门》篇](/frontend/vue-starter.md)装过 Node 就能装）
npm install -g opencode-ai

# 进到你的项目文件夹，启动它
cd my-vue-app
opencode

# 然后直接用中文跟它说话，比如：
# "这个项目是干嘛的？帮我讲讲目录结构"
# "npm run dev 报错了，帮我看看并修好"

提示

同类工具还有 Claude Code（终端）、Cursor（图形界面编辑器）等，思路都一样：学会一个，其它触类旁通。本页以 opencode 为例。

提示

从《打地基》篇就用起来： 做「第一个网页」时就可以让它检查你的 HTML 哪里写错了；学 Git 时让它解释每条命令。它就是你 24 小时在线的私教。

怎么跟 AI 说需求（提问的艺术）

AI 的输出质量 = 你输入的质量。同一件事，会说和不会说，结果天差地别。

🗣️ 三个要素：背景 + 目标 + 边界

❌ 差的提问： 「帮我做个网站」「代码报错了怎么办」「这个功能不行你修一下」

✅ 好的提问： 「在 src/views/TodoList.vue 的表格里加一列显示创建时间，格式 2026-07-15，参考现有列的写法」「npm run dev 报了这个错（贴完整报错），我用的 Node 20，帮我分析原因并修复」

给足背景。 报错要贴完整原文（别只截一半）；说清你在哪个文件、想干什么、刚才做了什么。AI 不是神仙，信息喂得越全，答得越准。
一次一件事。 「做登录 + 做列表 + 顺便优化样式」拆成三次说。任务越小，AI 完成度越高，你也越容易验收。
让它先讲方案再动手。 大改动之前说「先告诉我你打算怎么改、动哪些文件，我确认后再改」——避免它自作主张改一大片。
看不懂就追问。 「逐行解释这段代码」「为什么用这种写法，有没有更简单的」——把每次干活变成一堂课。
不满意就说具体哪不对。 别只说「不行」，要说「弹窗位置对了，但点确定后没有刷新列表」。反馈越具体，修得越快。

AI 开发标准流程（含测试）

让 AI 干活不是「说一句等结果」，而是一个「布置 → 干活 → 自证 → 验收」的闭环。

🔄 六步闭环，每一步都别省

说清需求。 用上一节的方法：背景 + 目标 + 边界。
让 AI 先看代码。 「先看看现在登录是怎么实现的，再告诉我你的修改方案」——让它基于现状干活，而不是凭空想象。
确认方案。 它列出要动的文件和思路，你觉得靠谱再放行。看不懂方案就让它用大白话再讲一遍。
AI 动手改。 改完让它汇报都改了哪里、为什么这么改。
验证是重头戏。 三种姿势由轻到重：
- 跑起来点一点：让 AI 自己跑 npm run dev，你到浏览器实际操作一遍；
- 让 AI 写测试：「给这个函数写几个测试用例，把边界情况覆盖到（空值、超长、非法输入）」；
- 让 AI 跑测试并修到全绿：「跑一下测试，失败的自己修，修完再跑，直到全部通过」。
你终审 + 存档。 让 AI 讲解改动，你确认看懂了、点过了，再 git commit。AI 永远不该替你按下最终确认键。