AI辅助开发的基础概念

AI辅助开发的基础概念

这是系列第二篇，上一篇聊完"为什么学"，我们来看看 AI 辅助开发到底帮我们做了什么，需要掌握哪些概念，以及怎么用好 AI。

---

上一篇文章，我们聊了为什么前端必须学AI。

简单说就是：AI不会取代前端，但它会重新定义前端。

既然要学，接下来一个很自然的问题就是：到底学什么？怎么学？

市面上关于AI的资料，多的让人头皮发麻。

一会儿有人说要学Prompt工程，一会儿有人说要学LangChain，一会儿又有人说要学向量数据库。一顿操作下来，还没开始就已经晕了。

这篇文章，我帮你把AI辅助开发这件事 全面梳理一遍。不求深，但求全。让你知道整个图景是什么样的，遇到什么该学什么。

---

原文地址

墨渊书肆/AI辅助开发的基础概念

---

先理解三个问题

在开始之前，我们先回答三个最基本的问题：

1. AI能帮我做什么？ --- 知道它的能力边界
2. 需要掌握哪些概念？ --- 理解背后的原理
3. 怎么用好AI？ --- 具体的操作方法

这三个问题对应AI辅助开发的三个层次。接下来我们一层一层来讲。

---

第一层：AI能帮你做什么

这是最实在的东西------AI到底能帮我们干什么活。

1. 写代码

根据你的描述生成代码。

"帮我写一个React组件，功能是：用户可以选择日期范围，支持禁用特定日期，暗色模式适配"

AI能帮你写：

• 完整的组件（React、Vue）
• 工具函数
• API接口
• 样式代码（CSS、Tailwind）
• TypeScript类型定义
• 测试用例

2. 读代码

帮你理解你不懂的代码。

"这个组件的数据流是怎么走的？为什么要用useMemo？"

AI能帮你：

• 解释代码逻辑
• 梳理复杂代码
• 找出潜在问题
• 理解项目结构

3. 查文档

以前遇到问题，你先去 Google 搜，然后看 Stack Overflow，最后才去翻文档。

现在直接问AI：

"Next.js 15怎么做密码重置？"
"Vercel AI SDK怎么实现流式响应？"

AI直接从文档里给你准确的答案。

4. 修Bug

遇到报错了，直接问AI：

"这个报错是什么意思？TypeError: Cannot read properties of undefined (reading 'map')"

AI会告诉你：错误原因是什么、最可能出在哪个地方、怎么修复。

5. 代码Review

让AI帮你审查代码：

"请审查以下代码，指出：1. 潜在安全问题 2. 性能问题 3. 代码规范问题"

它会从多个角度帮你分析一遍。

6. 重构代码

觉得某段代码写得烂，但不知道怎么改？

"请帮我重构以下代码，要求：1. 使用TypeScript类型 2. 提取可复用逻辑 3. 增加错误处理"

AI会给一个全新的版本，你可以参考它的思路。

7. 写测试

写测试很枯燥，但很重要。

"请为以下函数编写单元测试，覆盖：正常情况、空输入、错误输入"

AI生成测试代码，你再根据需要调整。

8. 帮你想名字

我经常让AI帮我给变量、函数起名字。

"我有一个函数，接受用户ID，返回用户名、邮箱、头像、最后登录时间。请帮我想一个合适的函数名"

AI会给三四个建议，通常都比较规范，符合命名习惯。

---

第二层：需要掌握哪些概念

知道AI能帮你做什么了，接下来你需要理解一些核心概念。这样你才能更好地和AI配合。

1. 大模型（LLM）

LLM，Large Language Model，大语言模型。

你可以把大模型理解成一个见过海量代码的超级程序员。它看过互联网上几乎所有的开源代码、文档、教程，所以它知道你想要什么。

GPT、Claude、DeepSeek、通义------这些都是大模型。

它不是真的"智能"，而是见过太多了，知道概率最高的答案是什么。

作为前端开发者，你不需要会训练模型，你只需要知道怎么调用它们。

2. Token

Token 是 AI 处理信息的基本单位。

简单理解：AI不是按"字"或"词"来处理文字的，而是按 Token。一个Token可能是半个单词、一个单词、或者一个标点符号。

为什么这个概念重要？因为：

• API按Token收费：输入和输出都算 Token
• 上下文长度限制：你给 AI 的上下文不能超过它能处理的Token数

举个例子：Claude 3.5 支持 200K Token 的上下文，意味着你可以一次性把整个项目的代码都丢给它（但这样做很贵，而且AI可能会"忘记"中间部分）。

3. Agent

Agent（智能体）是AI领域最重要的概念之一。

你可以把Agent理解成一个能自己执行任务的AI。不像普通的聊天AI只能"问一句答一句"，Agent可以：

• 自己规划步骤
• 自己调用工具
• 自己检查结果
• 自主完成复杂任务

这就是为什么很多人说"AI不是替代程序员，而是替代不会用AI的程序员"------因为Agent已经可以自主完成很多开发任务了。

4. MCP（Model Context Protocol）

MCP是这两年AI辅助开发领域最重要的新东西。

你可以把它理解成AI的"USB接口"。

以前AI只能跟你聊天，它不知道你电脑里有什么、你的项目是什么样子。MCP出现后，AI可以：

• 读取你电脑上的文件
• 执行终端命令
• 访问你的代码仓库
• 调用各种第三方服务

这就是为什么现在的AI编程工具突然变得超级强大------因为它们不只是"聊天"了，它们真的能"干活"了。

5. Prompt

Prompt就是你给AI说的话。「帮我写个登录功能」就是一个Prompt。

Prompt不是越长越好，而是越精确越好。

好的Prompt应该包含：

• 上下文：你用的技术栈是什么
• 具体需求：你想要什么功能
• 约束条件：有什么特殊要求
• 期望结果：你想要的输出格式

6. 幻觉

AI有时候会"编故事"------生成一些看似正确但实际上是错误的内容。这就是所谓的"幻觉"。

为什么会产生幻觉？因为AI本质上是在"预测"下一个最可能的词，而不是真的"理解"事实。

这意味着：

• AI给出的答案不一定是对的
• 你要有能力判断答案对不对
• 重要的代码要自己验证

---

第三层：怎么用好AI辅助开发

知道能做什么、也理解概念了，接下来就是具体怎么用。

1. 搞清楚什么时候用什么模式

大部分AI编程工具都有两种模式：

对话模式（Chat）：你问一句，它答一句。

我一般用来：

• 问具体问题：「这个报错是什么意思？」
• 查知识点：「PostgreSQL的索引类型有哪些？」
• 解释代码：「这个函数做了什么？」

任务模式（Agent）：你描述一个任务，它自己去分析和执行。

我一般用来：

• 帮我重构整个模块：「把这个登录从JWT改成Session」
• 帮我修bug：「登录一直返回401，帮我看看是什么原因」
• 帮我实现一个功能：「帮我实现用户注册功能，包含表单验证、数据库存储」

简单说：小问题用对话，大任务用Agent。

2. 喂上下文是有技巧的

AI最强的地方是它能理解你的整个项目。但有时候它也会犯傻------给你一些牛头不对马嘴的回答。

这时候，你得学会喂上下文。

我犯过的错误：

「怎么优化这个查询？」

AI回了半天，什么加索引、分页、缓存讲了一套，我根本不知道它说的是什么，因为我连我的表结构都没告诉它。

后来我学乖了：

「我的Prisma查询是这样的：prisma const users = await prisma.user.findMany() 数据量大概10万条，现在查询要3秒，请问怎么优化？」

这次AI直接告诉我：1. 加索引 2. 用select只查需要的字段 3. 考虑分页。

我的习惯是：至少告诉AI三件事

1. 技术栈：我用的技术是什么（Next.js + Prisma + PostgreSQL）
2. 当前代码：现在代码长什么样（贴上代码）
3. 问题：遇到了什么问题（查询慢、报错、不知道怎么做）

3. 选中代码让AI帮你改

选中一段代码，让AI帮你修改。这是一个核心技巧。

比如我选中一个函数，这样用：

「请帮我添加错误处理和类型定义」

AI直接在原代码基础上帮我改好了，我只需要确认一下就行。

比让它生成一段新代码然后我再替换，效率高很多。

再举几个我常用的场景：

• 选中一段面条式代码：「请帮我重构这段代码」
• 选中一个API接口：「请帮我添加参数校验」
• 选中一个组件：「请把这个组件改成响应式」

4. 用@引用代替复制粘贴

大部分AI编程工具支持用@符号引用特定内容：

• @File ：引用当前打开的文件
• @components/UserCard.tsx ：直接引用某个文件
• @Folder ：引用整个文件夹
• @Docs ：引用官方文档
• @Search ：搜索项目内的代码

最常用的场景：

@components/UserCard.tsx 请帮我在这个组件里添加一个编辑用户信息的功能

AI直接读取文件内容，在正确的位置帮我添加代码。

@Docs 请帮我查一下Next.js的metadata怎么用来做SEO

AI直接读官方文档，给我准确的答案。

用@引用比复制粘贴代码更省Token，而且AI能更准确地理解你的需求。

5. 一次性把需求说清楚

让AI一次性完成所有需求，别分开问：

• ❌ 「先帮我写HTML」「再帮我写样式」「再加个交互」
• ✅ 「帮我写一个登录组件，包含表单验证、错误提示、暗色模式支持」

一次说清楚，AI能更好地理解你的整体需求，生成的代码也更连贯。

6. 设置好项目规范

我在每个项目都会设置规范文件。

设置好之后，AI每次生成代码都会自动遵循这些规范。

举个例子：我不用每次都说「API错误要返回success和error字段」，AI自己就知道。

规范内容包括：

• 技术栈和版本
• 目录结构
• 代码规范（命名、格式）
• 常用的工具函数

7. 积累自己的Prompt模板

AI 的输出质量很大程度上取决于你的 Prompt，好的 Prompt 能让AI 生成更准确、更符合你需求的代码。

在平时的开发中，可以把一些常用的场景总结成模板，方便后续快速调用。

---

工作流程：AI怎么融入日常开发

知道有什么工具了，接下来我们看看AI是怎么融入日常开发工作的。

我总结了一个我自己常用的工作流程：

1. 需求分析阶段

• 解释需求文档里的技术术语
• 给出技术选型的建议
• 评估实现难度和时间

2. 编码实现阶段

• 根据描述生成代码
• 解释你不熟悉的API
• 帮你写测试用例
• 优化现有代码

3. 代码审查阶段

• 检查代码安全性
• 找出潜在性能问题
• 审查代码规范
• 解释复杂逻辑

4. Bug修复阶段

• 分析报错信息
• 定位问题原因
• 给出修复建议

5. 文档输出阶段

• 从代码生成注释
• 生成README文档
• 写API文档

---

写在最后

这篇文章帮你把AI辅助开发这件事，从概念到工具，从流程到趋势，全面梳理了一遍。

你不需要记住所有细节，你只需要知道：

1. AI能帮你做什么：写代码、读代码、查文档、修Bug、代码Review、重构、写测试
2. 需要理解什么概念：大模型、Token、Agent、MCP、Prompt、幻觉
3. 怎么用好AI：喂上下文、选对模式、用@引用、一次性说清楚需求

知道了能做什么、懂了概念，剩下的就是多练习。

AI辅助开发不是玄学，就是一个工具。用多了，你会发现：会问问题的人，效率比不会问的人高十倍。

---

篇预告

下一篇，我会讲讲《2026年大模型怎么选？前端人实用对比》。

市面上有那么多大模型，GPT、Claude、DeepSeek、通义千问......到底该用哪个？不同的场景该怎么选？怎么才能低成本使用？

我会从实际开发的角度，给你一个清晰的选型建议。

感兴趣的话，下一篇见。