给学习用 AI/LLM 编程的架构指南

AI 可以帮你写每一行代码，但它没法帮你决定这栋楼该怎么盖。

这篇文章不讲任何编码细节。它帮你建立一张"上帝视角"的地图，让你在用 AI 编程时，知道自己身在何处、要去哪里。

说明： 这里的"AI/LLM 编程"指的是借助 AI 工具来开发 Web 应用——让 AI 帮你写代码、搭项目、部署上线。文章不涉及如何设计 LLM 本身的架构（比如 RAG、向量数据库、Agent 框架等），而是聚焦于：一个非程序员如何理解软件架构，从而更高效地和 AI 协作。

一个核心比喻：你是建筑师，AI 是施工队

想象你要盖一栋房子。

以前，你得自己搬砖、和水泥、接电线。现在有了 AI，这些活它都能干。但问题来了：你总得知道这栋房子要几层、厨房在哪、承重墙不能拆吧？

这就是"架构"。

架构不是编码细节。架构是你在写第一行代码之前，就该想清楚的事情：

用户看到的界面长什么样？（前端）
数据存在哪里？（数据库）
前端和数据库之间怎么通信？（后端 / API）
这些东西跑在哪台机器上？（部署 / 基础设施）

不懂架构的人用 AI 编程，就像拿着无限的砖块却没有图纸——AI 会很高兴地帮你砌墙，但砌完你会发现门开错了方向。

懂架构的人用 AI，效率提升是巨大的。 因为你知道要什么，AI 知道怎么做。你们配合起来，一个下午能干完以前一个小团队好几天的活。

先看全景：一个现代 Web 应用长什么样

在展开细节之前，先看一张完整的地图。不管你要做什么产品，本质都是在这个骨架上填肉：

用户在浏览器里打开你的网站
        │
        ▼
┌──────────────┐     域名解析 + CDN 加速
│  Cloudflare  │     安全防护（防 DDoS、SSL 证书）
└──────┬───────┘
       │
       ▼
┌──────────────┐     托管前端代码（React/Next.js）
│    Vercel    │     运行后端函数（API Routes）
└──────┬───────┘
       │
       ▼  API 调用
┌──────────────┐     数据库（PostgreSQL）
│   Supabase   │     用户认证
└──────┬───────┘     文件存储
       │
       ▼  需要支付时
┌──────────────┐
│    Stripe    │     处理付款、订阅管理
└──────────────┘

同时，后端可能还会调用：
  → OpenAI / Anthropic API（AI 能力）
  → Resend（发邮件）
  → Twilio（发短信）
  → 其他第三方服务

看不懂没关系。接下来我们一层一层拆开。读完全文之后再回来看这张图，你会发现它一目了然。

开始之前：先认识几个基础词

如果你是完全零基础，下面这几个词会在全文反复出现，先混个脸熟：

词	一句话解释
浏览器	Chrome、Safari 这些——你打开网页用的软件
终端（Terminal）	一个可以输入文字命令的黑色窗口，开发者用它来操作电脑
项目文件夹	你的应用的所有代码文件放在一起的那个文件夹
仓库（Repository）	项目文件夹 + 版本记录，通常托管在 GitHub 上
环境变量	存放密码、密钥等敏感信息的地方，不会写进代码里
部署（Deploy）	把代码从你的电脑放到互联网服务器上，让别人也能访问

拆解骨架：三层架构

对初学者来说，绝大多数互联网应用都可以先理解为三层：

┌─────────────────────────────────┐
│           前端（Frontend）        │  ← 用户看到的、摸到的
├─────────────────────────────────┤
│           后端（Backend）         │  ← 逻辑处理、规则引擎
├─────────────────────────────────┤
│          数据库（Database）       │  ← 数据的家
└─────────────────────────────────┘

当然，真实系统还有认证、缓存、消息队列、日志监控等横切能力，但作为入门认知，先把这三层搞清楚就够了。

为了让你更直观地理解，我们用一个**"待办清单"应用**作为贯穿全文的例子——你在页面上点"新增任务"，输入"买牛奶"，点确认，任务就出现在列表里了。这个简单的动作背后，三层都参与了。

前端：用户能看到的一切

打开待办清单应用，你看到的输入框、按钮、任务列表——这些都是前端。

前端的本质是展示和交互。它负责两件事：

把数据变成人能看懂的样子（把数据库里的任务渲染成列表）
把人的操作变成机器能理解的指令（你点"新增"，前端把"买牛奶"打包发给后端）

关键概念：

网页应用（Web App）：跑在浏览器里的前端，用 HTML/CSS/JavaScript 写
手机应用（Mobile App）：跑在手机里的前端，iOS 用 Swift，Android 用 Kotlin
桌面应用（Desktop App）：跑在电脑里的前端，比如 VS Code、Figma

对于 AI 编程新手，Web App 是最佳起点。原因很简单：浏览器是通用的，不需要安装，而且 AI 写网页代码最拿手。

后端：看不见的大脑

后端是用户看不到的部分，但它是整个系统的大脑。

继续我们的待办清单例子。你点了"新增任务"，从你点下按钮到看到任务出现在列表里，中间发生了什么？

前端把"买牛奶"这个内容发给后端
后端检查：你登录了吗？内容是不是空的？
后端把这条任务写进数据库
后端告诉前端"成功了"，并把最新的任务列表发回来
前端把列表重新渲染到页面上

第 2、3、4 步，就是后端在干的活。

后端的核心职责：

处理业务逻辑（什么人能做什么事，什么条件触发什么结果）
管理数据的读写（从数据库取数据、往数据库存数据）
身份验证（你是谁？你有权限吗？）
调用外部服务（发短信、处理支付、调 AI 接口）

数据库：一切信息的家

数据库，你可以先把它想象成一个超级电子表格——每张表有行有列，能存能查。

你的用户信息、任务记录、聊天记录、订单记录——所有需要"记住"的东西，都存在数据库里。

不过，数据库和真正的电子表格有本质区别：它有严格的数据约束、高效的索引和查询能力、事务机制保证数据一致性、以及并发处理能力。这些你暂时不需要深入了解，但要知道它远比 Excel 强大和可靠。

数据库最核心的两件事：存数据、取数据。一个设计良好的数据库，可以在几百万条记录中，在几毫秒内找到你要的那条。

两种主流数据库：

类型	特点	适合场景	代表
关系型数据库	数据有严格的表结构，像 Excel	大多数业务系统	PostgreSQL、MySQL
文档型数据库	数据是灵活的 JSON 格式	快速迭代、结构多变的场景	MongoDB、Firestore

新手建议：直接选 PostgreSQL（搭配 Supabase 平台）。它能覆盖大多数新手会遇到的场景，AI 对 SQL 的掌握也最成熟。

知道了三层分别负责什么，下一步就是理解它们如何协作。

三层之间怎么通信：API

三层各司其职，但它们之间需要"对话"。这个对话的协议叫 API（Application Programming Interface）。

把 API 想象成餐厅的服务员：

你（前端）坐在餐桌上，看菜单，告诉服务员（API）你要什么
服务员走到后厨（后端），把你的需求传达给厨师
厨师做好菜（处理逻辑、查数据库），交给服务员
服务员把菜端到你桌上（前端展示结果）

你不需要知道后厨是怎么运作的，厨师也不需要知道你坐在哪张桌子。API 就是这个中间层，让前端和后端可以各做各的，互不干扰。

最常见的 API 风格

REST API —— 目前最主流的 API 风格，用 URL 路径来表示资源。以我们的待办清单为例：

获取所有任务     → GET    /api/tasks
获取某个任务     → GET    /api/tasks/123
创建一个任务     → POST   /api/tasks
更新一个任务     → PUT    /api/tasks/123
删除一个任务     → DELETE /api/tasks/123

看到规律了吗？动词 + 名词，非常直觉。这也是为什么 AI 写 API 很拿手——它的结构高度规律化。

第三方 API：借别人的能力

你不需要自己实现所有功能。很多能力可以通过调用第三方 API 来获得：

想让应用能发短信？调 Twilio 的 API
想集成支付？调 Stripe 的 API
想用 AI 能力？调 OpenAI 或 Anthropic 的 API
想发邮件？调 Resend 的 API

这些 API 就像乐高积木——你不需要自己造积木，只需要知道怎么拼。

理解 API 是 AI 编程的关键门槛。一旦你理解了"前端通过 API 调后端，后端通过 API 调数据库和外部服务"这个模式，你就理解了现代 Web 应用的主要骨架。

代码写完了，跑在哪里：部署与基础设施

代码写在你电脑上，只有你自己能用。要让全世界的人都能访问，你需要把代码放到互联网上的某台服务器。

这个过程叫部署（Deploy）。

传统方式 vs 现代方式

传统方式： 买一台服务器（或租一台云主机），自己装系统、配环境、上传代码、配置域名、搞 SSL 证书、监控运行状态……

现代方式： 把代码推到托管平台上，平台自动帮你搞定一切。

现代方式赢在哪里？你不需要管服务器。 像 Vercel、Netlify 这类平台会自动处理服务器配置、扩容、HTTPS 证书等基础设施问题。你只需要把代码推上去，它就能跑。就像你用电不需要关心发电厂一样。

你可能会听到"Serverless（无服务器）"这个词，它是现代托管的一种形式，但"现代部署"并不等于"Serverless"。有些是静态托管，有些是托管容器，有些是托管数据库——形式不同，共同点是你不需要自己运维服务器。

部署平台的分工

┌────────────────────────────────────────────────┐
│                  用户访问你的网站                   │
├────────────────────────────────────────────────┤
│  域名 + CDN + 安全防护        → Cloudflare       │
├────────────────────────────────────────────────┤
│  前端托管 + 后端函数部署       → Vercel / Netlify  │
├────────────────────────────────────────────────┤
│  数据库 + 用户认证 + 文件存储  → Supabase          │
├────────────────────────────────────────────────┤
│  支付处理                     → Stripe            │
└────────────────────────────────────────────────┘

每一层都有专门的平台负责，你只需要把它们接起来。

这就是为什么我在另一篇文章里说个人开发有"四件套"——Cloudflare、Vercel、Supabase、Stripe。它们加起来覆盖了从开发到上线到收钱的完整链路。不过对新手来说，第一个项目只需要 Vercel + Supabase + GitHub 就够了，Cloudflare 和 Stripe 等有需要时再加。

域名：你家的门牌号

域名就是 www.yoursite.com 这个地址。你的代码部署在服务器上之后，需要一个域名让用户能找到你。

买域名最简单的地方：Cloudflare（价格透明，没有隐藏费用）。

理解了三层架构、API 和部署之后，你已经有了全局视角。接下来我们补充几个你在实际操作中一定会遇到的概念。

你必须理解的几个架构概念

以下概念你不需要精通，但必须知道它们是什么。遇到的时候不慌，能跟 AI 讨论就行。

1. 前后端分离

"前后端分离"是现代应用的标准做法。意思是：前端的展示逻辑和后端的业务逻辑各自独立，通过 API 通信。

它们可以是两个独立的项目，也可以像 Next.js 这样在同一个项目里实现逻辑分离。关键在于职责清晰：前端只管展示和交互，后端只管数据和规则。就像你换手机壳不需要换主板一样。

2. 状态管理

"状态"就是"当前的情况"。用户登没登录？购物车里有几件商品？当前页面显示第几页？

状态管理就是：这些信息存在哪里、谁来维护、怎么同步。

这是前端开发中最让人头疼的问题之一。你不需要精通它，但当 AI 给你的方案里出现 "state"、"store"、"context" 这些词的时候，你应该知道它在处理这个问题。

3. 认证与授权

认证（Authentication）： 你是谁？→ 登录
授权（Authorization）： 你能干什么？→ 权限

这两件事几乎每个应用都要做。好消息是，Supabase、Clerk 这类平台把认证做成了开箱即用的服务，你不需要自己实现。

4. 环境变量

有些信息不能写在代码里——比如数据库密码、API 密钥、支付接口的秘钥。

这些敏感信息放在"环境变量"里，代码通过变量名来读取。

这是安全底线： 永远不要把密钥写死在代码里，永远不要把 .env 文件提交到 GitHub。AI 有时候会犯这个错误，你要盯住。

5. 版本控制（Git）

Git 是程序员的"后悔药"。它记录代码的每一次变化，随时可以回退到任意历史版本。

git commit → 保存当前进度（像游戏存档）
git branch → 创建平行世界（在不影响主线的情况下实验新功能）
git push → 把代码推到远程仓库（GitHub），实现备份和协作

你用 AI 编程时，AI 经常会帮你执行 Git 操作。你不需要记住所有命令，但你要理解它在做什么。

6. 包管理器

写代码不是从零开始的。大量的通用功能有现成的"包"（Package），别人写好了，你直接用。

JavaScript 的包管理器叫 npm
Python 的包管理器叫 pip

AI 在生成代码的时候，经常会用到各种第三方包。当它说"先安装 xxx"的时候，它就是在用包管理器帮你下载别人写好的工具。

7. 测试与排错

AI 写代码很快，但不代表写出来的就是对的。验证和排错是你必须掌握的能力。

测试： 代码能跑起来吗？功能符合预期吗？点一下"新增任务"，任务真的出现在列表里了吗？
排错： 出了问题，怎么定位？看浏览器控制台的报错信息（红色文字）、看终端里后端的日志输出——这些都是线索。

零基础用户真正卡住的地方，往往不是"不会写代码"，而是"不知道哪里出了问题"。学会读错误信息，比学会写代码更紧迫。

掌握了这些概念，你就具备了和 AI 高效协作的基础认知。接下来看实际的工作流程。

用 AI 编程的实际工作流

理解了架构和核心概念之后，我们来看用 AI 编程的实际流程。一个典型的项目从想法到上线，分六步：

第一步：想清楚你要做什么（你做）

这一步 AI 帮不了你。你需要回答：

这个产品解决什么问题？
核心功能是哪几个？
用户是谁？

把这些想清楚，写成一段文字。这段文字就是你给 AI 的"设计图"。

第二步：设计架构（你和 AI 一起做）

把你的需求告诉 AI，让它帮你设计架构。你可以直接用这条提示词：

"先不要写代码。根据我的需求，先给我项目的目录结构、数据库表设计、API 接口列表和功能验收标准。"

AI 会给你一份方案，包含前端用什么框架、数据库怎么组织、需要哪些 API。你不需要自己做这些决定，但你需要能看懂 AI 给你的方案。这就是为什么你需要读这篇文章——它给你看懂方案的能力。

第三步：先做最小可运行版本（AI 做，你审）

不要一次实现所有功能。你可以用这条提示词：

"先做最小可运行版本，只实现最核心的功能。每完成一步，告诉我怎么验证是否成功。"

这一步 AI 是主力。你用自然语言描述每个功能，AI 把它变成代码。

第四步：测试和排错（你做，AI 辅助）

这一步很多新手会跳过，但它至关重要：

页面能正常打开吗？
核心功能符合预期吗？（点"新增任务"，任务出现了吗？刷新页面后还在吗？）
有没有报错信息？（看浏览器控制台和终端输出）
密钥有没有泄露到代码里？

遇到问题，把报错信息直接贴给 AI，让它帮你分析。定位问题的能力，是你在 AI 编程中最重要的技能之一。

第五步：部署上线（你和 AI 一起做）

把代码推到 Vercel、把数据库建在 Supabase、域名绑到 Cloudflare。

这些步骤有一定的操作门槛，但都可以让 AI 一步步带你走。

第六步：迭代优化（循环以上步骤）

没有哪个产品是一次做完的。上线后收集反馈，回到第一步，继续循环。

给零基础学习者的路线建议

如果你是完全零基础，想用 AI 来编程，按这个顺序来：

推荐的新手默认技术栈：Next.js + Supabase + Vercel + GitHub

这套组合在同一个项目里就能处理前端和后端，数据库和认证由 Supabase 提供，Vercel 负责部署，GitHub 负责代码管理。AI 对这套栈的支持也最成熟。

第一阶段：建立认知（1-2 周）

目标：看懂全景，知道每个部分是什么。

读完这篇文章，理解三层架构
注册 GitHub 账号，理解版本控制的概念
注册 Vercel、Supabase 账号，点点按钮感受一下

不写代码。只是看，只是理解。

验收标准： 你能画出一张自己的三层架构图，并能口头解释"用户点一个按钮后，请求是怎么从前端到后端到数据库再回来的"。

第二阶段：第一个项目（2-4 周）

目标：用 AI 做出一个能跑的网页应用。

安装 Claude Code 或 Cursor（需要先熟悉终端的基本操作——打开终端、进入项目文件夹、运行命令）
选一个极简项目：待办清单、个人博客、记事本
让 AI 帮你从零搭建，全程跟着走
重点体会"前端 → API → 数据库"这个链路

这个阶段你会遇到很多看不懂的东西，没关系。每次遇到不懂的术语，问 AI"用最简单的话解释一下 XXX 是什么"。

验收标准： 做出一个带增删改查功能的 Todo 应用，能在浏览器里正常使用。

第三阶段：学会排错（持续进行）

目标：从"完全看不懂"进化到"大致能看懂"，从"不知道哪里出了问题"进化到"能定位问题在哪一层"。

不需要学会写代码，但要学会读代码
重点理解项目的文件结构：哪些文件对应前端、哪些对应后端、哪些是配置
学会看错误信息：报错不可怕，它在告诉你哪里出了问题
学会用 Git 回滚：改坏了可以退回上一个版本

验收标准： 能看懂一条报错信息属于前端还是后端，能根据日志定位问题所在，能用 git log 和 git checkout 回退代码。

第四阶段：做一个真正有用的东西

目标：做一个你自己或身边人真正会用的产品，部署到公网。

到了这一步，你已经具备了和 AI 高效协作的能力。你理解架构，能描述需求，能审查结果，能排查问题。

验收标准： 产品部署到公网，并让 1-3 个真实用户使用过、给过反馈。

你可能永远不会成为一个"程序员"。但你会成为一个能用 AI 把想法变成产品的人——这是一种全新的能力组合，越早掌握越有优势。

最后的话

很多人误以为用 AI 编程就是"对着 AI 说一句话，它帮你把整个产品做出来"。

现实没有那么魔幻，但也没有那么难。

AI 编程真正的门槛，不在编码本身——AI 可以大幅降低编码的门槛。但验证代码是否正确、定位问题出在哪里、决定架构怎么设计——这些门槛依然需要你自己跨过。

你需要知道一栋楼有地基、有框架、有外墙、有水电管道。你不需要会砌墙、不需要会接电线，但你需要看得懂图纸，需要知道承重墙不能拆、水管不能乱接。

这篇文章给你的就是这张图纸。

拿着它，去建你的第一栋楼吧。

━━━ fin ━━━

If you read this far — thank you.
Come tell me what you thought on X.