在 2026 年谈网页和应用开发，几乎已经不可能绕开 AI。

你可以一句话让模型生成一个登录页、一个后台面板、一个移动端首页，甚至一个带数据库读写、鉴权和部署说明的 MVP。过去需要几天才能搭起来的原型，现在可能只需要几十分钟。于是很多人会自然得出一个结论：开发正在从“写代码”变成“说需求”。

这个判断只对了一半。

AI 确实重新定义了软件的起步速度，却没有自动解决软件的演化成本。而 Vibe Coding 最容易让人忽略的，恰恰就是后者：一个项目第一次生成得越顺滑，后面往往越容易在维护、扩展、排障和重构时付出代价。

所以，这篇文章想讲的不是“怎么让 AI 多写一点代码”，而是更关键的问题：

在 AI 时代，如何用 Vibe Coding 真正构建一个可持续迭代的网页或应用？

我的核心观点很直接：

Vibe Coding 可以极大提高实现速度，但如果你没有先规划前端、后端、数据、鉴权、部署和工程规范这些技术栈边界，那么 AI 写出来的东西越快，后续维护和修 Bug 往往越困难。

Vibe Coding 的本质，不是“让 AI 帮我写代码”

很多人把 Vibe Coding 理解成一种轻松、随性、边聊边做的软件开发方式。这个理解不算错，但还不够精确。

如果从工程视角重新定义，Vibe Coding 更像是这样一件事：

把自然语言当成软件构建接口，把模型当成高带宽实现层，再通过上下文、规则和工具，把“想法”压缩成“可运行系统”。

它不是传统意义上的“低代码”，也不是“无需工程能力”。
它更像是把开发流程里的某些环节做了重新分工：

  • 人负责目标、边界、优先级和取舍
  • 模型负责生成、补全、重写、联想和加速实现
  • 工具负责接入真实环境、真实代码库和真实上下文

问题在于，AI 天生擅长的是局部合理性，而软件系统真正要求的是全局一致性。

一个按钮、一个表单、一个接口、一个查询语句，模型都能写得很像样；但一个产品不是按钮、表单和接口的堆砌。它是由渲染策略、状态流转、数据结构、鉴权边界、错误处理、部署约束和团队协作方式共同构成的系统。

这也是为什么很多 AI 生成出来的项目第一眼“很能打”，第二眼却“很难改”。

在白板前规划网页结构与信息架构，象征技术栈和系统边界必须先被定义

一个能跑的 Demo，不等于一个能演化的系统

Vibe Coding 最常见的幻觉，是把“现在能跑”误认为“以后能维护”。

这类项目通常长这样：

第一天，你让 AI 生成了一个 landing page。
第二天，你加了注册、登录和用户中心。
第三天，你又加上后台管理。
第四天，产品想接支付、订阅、邮件通知和埋点分析。
第五天，线上开始出现边界条件问题，改一个功能牵出三处副作用。
第六天，你让 AI 修 Bug，结果它一边修，一边把原来隐式依赖的逻辑打散。
第七天，项目已经不是“写不下去”，而是“没人敢动”。

为什么会这样？

因为 AI 的默认工作方式是：根据当前上下文，生成当下看起来最合理的实现。
可软件项目需要的是另一套东西：长期有效的结构性约束。

也就是说，AI 非常擅长帮你“补砖”，却不会自动替你“打地基”。

真正的分水岭：先做技术栈规划，再做 Prompt

如果只能给 Vibe Coding 一个最实用的建议，那就是这句：

不要先让 AI 写页面，先让自己写边界。

具体来说，在开始任何网页或应用项目前，你至少要先明确这几层技术栈。

1. 前端层：界面不是重点，一致性才是重点

很多人用 AI 做前端时，只关心“效果好不好看”。这是最容易踩坑的地方。

前端真正需要先确定的是：

  • 你用 React、Next.js、Vue 还是 Nuxt
  • 你采用 CSR、SSR、SSG、ISR 还是混合渲染
  • 样式体系是 Tailwind CSS、CSS Modules 还是 CSS-in-JS
  • 组件体系是否统一，例如是否固定使用 shadcn/ui 或自研 design system
  • 状态管理到底收敛到哪里，Context、Zustand、Redux 还是别的
  • 表单校验、错误提示、加载态、Skeleton、Modal 是否有一致规范

如果这些不先定下来，AI 每次接到一个新任务时，都可能在局部做出不同选择。
短期看起来灵活，长期看就是失控。

前端最怕的不是功能多，而是同一种问题有三种写法。
一旦出现这种情况，维护成本会上升得非常快。

2. 后端层：接口风格一旦混乱，后面所有改动都会变贵

AI 特别容易把后端写成“能用就行”的状态。
比如：

  • 一部分接口是 REST
  • 一部分逻辑直接写在前端 server action
  • 一部分返回结构是 { success, data }
  • 另一部分直接返回数组或对象
  • 错误码没有统一标准
  • 鉴权有时在中间件，有时在控制器，有时在前端页面守卫

这种项目在前几次迭代里通常不会立刻爆炸，因为小系统总能“凑合跑”。
真正的问题出现在需求增加之后：你会发现，任何新增功能都不是加一段逻辑，而是在猜“这类逻辑到底应该放哪”。

后端层在 Vibe Coding 里尤其需要你提前定下：

  • 服务框架：Node.js / NestJS / Express / FastAPI / Django 等
  • API 风格：REST、GraphQL、BFF 还是 RPC
  • 鉴权方案：Session、JWT、OAuth、第三方身份服务
  • 异步任务：队列、重试、定时任务放哪
  • 日志、异常处理、审计信息怎么统一

模型能写接口，但接口的边界必须由你定义。

3. 数据层：很多 AI 项目不是死在 UI，而是死在数据模型

最难维护的项目，往往不是因为页面写得乱，而是因为数据模型没有被认真设计。

比如：

  • 用户、组织、角色、权限之间关系不清
  • 订单、支付、退款状态没有严谨状态机
  • 内容、标签、搜索索引各写各的
  • ORM 和原生 SQL 混用，没有约定
  • migration 没有规范，谁都可以改 schema
  • 查询先写出来了，但没有考虑后续统计、搜索和归档

AI 的优势是可以快速把“查数据”这件事做出来。
可一个系统是否稳，取决于“数据关系是否被定义清楚”。

如果数据层设计得糟糕，那么之后每一次新需求，本质上都不是“加功能”，而是“补模型漏洞”。

4. 基础设施层：别等写完了，才想起部署和观测

很多人用 AI 做应用，默认环境是“本地跑起来了”。
但真实软件从来不止于本地。

你至少需要预先想清楚：

  • 部署平台是什么：Vercel、Cloudflare、Docker、自建云主机
  • 数据库和对象存储如何托管
  • 环境变量怎样组织
  • CI/CD 是否有基本约束
  • 日志、监控、告警怎么接
  • 是否有预发环境、是否允许灰度验证

AI 很会写“部署说明”，但它不会自动为你的生产环境负责。
而线上 Bug 最难处理的部分，通常不是“代码本身有问题”，而是你根本没有足够的上下文来定位问题。

5. 工程规范层：让 AI 持续协作，靠的不是天赋，靠的是约束

如果你真的想把 AI 当作日常开发搭子，而不是一次性代码生成器，那么工程规范是绕不过去的。

最少要有这些东西：

  • TypeScript 是否强制
  • ESLint / Prettier / import order 是否统一
  • 目录结构怎么分层
  • API 输入输出如何命名
  • commit message 和 PR 规范是否固定
  • 单元测试、集成测试、E2E 哪些是底线
  • 错误处理和日志格式是否一致

这听上去像是“团队流程问题”，其实它和 Vibe Coding 直接相关。

因为 AI 的输出质量，并不只受模型能力影响，更受你给它的工程环境影响。
规范越清晰，AI 越像一个稳定的高级开发者；规范越模糊，AI 越像一个每次都换风格的新同事。

先写一份 Stack Contract，比多写十段 Prompt 更重要

我很建议在项目开始前，先给自己写一份简短的 Stack Contract。
它不是商业文档，也不是复杂架构设计稿，而是一份给你和 AI 共同使用的“系统宪法”。

例如：

# Project Stack Contract

## Frontend
- Next.js 15 + TypeScript
- Tailwind CSS + shadcn/ui
- React Server Components by default
- Client Components only when interaction is required
- Zustand only for cross-page client state

## Backend
- Next Route Handlers for lightweight APIs
- Background jobs handled by separate worker service
- API response shape: { success: boolean, data?: T, error?: string }

## Data
- PostgreSQL + Prisma
- All schema changes via migrations
- Zod for input validation

## Auth
- Auth.js
- Role-based access control: admin / member

## Infra
- Vercel for web
- Managed PostgreSQL
- S3-compatible object storage
- Sentry for error tracking

## Rules
- No new UI libraries
- No direct DB calls from components
- No duplicated business logic in frontend and backend

这份东西的价值不在于它写得多漂亮，
而在于它能让后续所有 Prompt、重构、修 Bug 和功能扩展，都有一个统一参照系。

Prompt、Context、Skills、MCP：Vibe Coding 真正的四个抓手

很多人只盯着 Prompt，这是不够的。

想把 Vibe Coding 用好，至少要理解四个关键概念：Prompt、Context、Skills、MCP。
它们不是术语装饰，而是决定输出质量的核心变量。

Prompt：不是“我想要什么”，而是“你必须怎么做”

差的 Prompt 像许愿：

帮我做一个很现代的 SaaS 后台，要高级感、可扩展。

好的 Prompt 像技术说明：

请在现有 Next.js 15 + TypeScript 项目中新增“团队设置”页面。
要求：
1. 复用 app/(dashboard) 下已有 layout
2. 使用项目内已有 shadcn/ui 组件，不引入新 UI 库
3. 表单校验必须使用已有 Zod schema
4. 数据通过 /api/team/settings 读取与更新
5. 保持 API 返回结构与现有约定一致
6. 先给出修改方案，再输出代码
7. 不要改动无关文件

二者的差别不在于语言优雅，而在于约束密度。

Prompt 的本质不是表达欲望，
而是向模型下发一个带边界的实现任务。

Context：AI 不怕难题，怕的是信息不全

大多数“AI 写错了”的问题，本质上不是模型能力不够，而是你没有把真实上下文给够。

比如你让它“修复用户中心保存失败的问题”，如果没有补充这些信息：

  • 当前错误日志
  • 接口返回内容
  • 相关组件代码
  • 表单 schema
  • 鉴权逻辑在哪一层
  • 最近改过什么

那模型只能猜。
而软件工程里最危险的事情之一，就是在错误上下文里做正确推理。

所以，真正高质量的 Context 往往至少包括：

  • 当前技术栈说明
  • 关键目录结构
  • 相关文件片段
  • 接口输入输出
  • 报错日志
  • 复现步骤
  • 不允许破坏的行为

你提供的不是“信息越多越好”，而是“足够构成事实现场”。

Skills：把高频工作流固化下来，AI 才能越用越稳

Prompt 更像一次性命令。
而 Skills 更像可复用的执行模板。

例如，一个成熟团队通常会逐步沉淀出这样的 Skills：

  • 根据 Figma 描述生成页面骨架
  • 按项目目录约定创建一个 CRUD 模块
  • 给接口补验证、鉴权和错误处理
  • 根据报错日志做最小化修复
  • 对现有模块做“只重构不改行为”的整理
  • 自动补齐 README、注释和测试草稿

Skills 的价值在于，它把“怎么做这类事”从脑子里拿出来，变成一个稳定流程。
这样一来，AI 的输出不再每次都重新发明轮子，而是沿着同一条工程路径工作。

你可以把它理解成：
Prompt 决定一次任务，Skills 决定一类任务。

MCP：让模型接近你的真实开发现场

MCP（Model Context Protocol）这个词看起来很大，其实可以简单理解：

它是模型接入外部工具、文档、代码仓库、数据库结构和运行环境的一种标准方式。

为什么它重要？
因为真实的软件开发，从来都不是对着一个空白编辑器完成的。它依赖很多外部上下文：

  • 代码仓库
  • 设计稿
  • 接口文档
  • 日志平台
  • 数据库 schema
  • 任务系统
  • 部署信息

没有这些，AI 只能在“抽象的软件世界”里回答你。
有了这些，AI 才有机会进入“具体的项目现场”。

但要注意一件事：
MCP 提升的是模型接入环境的能力，不会自动替代你的架构判断。

它让 AI 更接近真实系统，
却不会自动告诉你“到底该不该再引一个状态管理库”。

这个决策，仍然属于人。

一个更可靠的 Vibe Coding 工作流

如果你想用 AI 认真做一个网页或应用，我建议按下面这个节奏推进。

第一步：先定边界，再开工

不要一上来就让 AI 写首页。
先写 Stack Contract，明确技术栈、规则、分层和禁区。

第二步：先让 AI 产出“方案”，再产出“代码”

让它先回答：

  • 改哪些文件
  • 数据流怎么走
  • 是否影响现有模块
  • 需要新增哪些类型或 schema
  • 哪些地方可能引入副作用

这样能提前过滤掉很多局部最优、全局失衡的实现。

第三步：按 vertical slice 推进，而不是按页面堆砌

比起“先做完所有页面”，更好的方式是一次走通一条垂直链路：

  • 页面
  • 组件
  • 接口
  • 数据验证
  • 数据持久化
  • 错误处理
  • 权限校验

这样生成出来的不是“静态外壳”，而是真实可验证的业务切片。

第四步：每一轮生成后都做一次收口

所谓收口，就是让 AI 或你自己补齐这些东西：

  • 类型定义
  • 错误处理
  • loading / empty / error 状态
  • 测试样例
  • 注释与文档
  • 重复逻辑收敛
  • 命名统一

不收口，项目会越来越像“不断扩写的草稿”。

第五步：修 Bug 时，不要让 AI 盲修

给 Bug 的最好输入不是一句“这里报错了”，而是：

  • 复现步骤
  • 报错栈
  • 相关代码片段
  • 预期行为
  • 最近变更
  • 约束条件

AI 在这种输入下更像工程师；
在模糊输入下更像猜题选手。

三种最常见的反模式

反模式一：项目还没定型，就让 AI 自由发挥

这会让模型不断替你做架构决策，而这些决策通常是隐式的、碎片化的。

反模式二：每次只追求“这次先能跑”

这会让项目快速积累技术债，因为没有人为一致性负责。

反模式三：把 AI 当成最后的 Bug 回收站

如果一个系统没有日志、没有规范、没有边界，AI 也只能在混乱上继续叠混乱。

什么时候 Vibe Coding 最有价值？

它特别适合这些场景：

  • 官网、落地页、活动页
  • MVP 验证
  • 中小型 SaaS
  • 后台管理系统
  • 内部工具
  • 组件库和设计系统落地
  • 已有架构下的模块扩展与重构

而在这些场景里，你会真正感受到 Vibe Coding 的威力：

它不是让你不再做工程设计，而是让你把更多时间花在工程设计上，把更少时间浪费在机械实现上。

结语：AI 负责加速，技术栈负责兜底

Vibe Coding 最让人上瘾的地方，是它让“想法变成软件”这件事重新变得轻快。
你说一句话，界面就出来了；你改一个条件，接口就接上了；你补几段上下文，一个功能就从草图变成了可运行模块。

但软件项目真正的难点，从来不是第一版做出来，而是第二十版还能不能继续改。

所以在 AI 时代，真正成熟的开发姿势不是：

  • 先让模型生成一个看起来不错的东西
  • 然后在不断补丁中维持它勉强存活

而是：

  • 先明确前端、后端、数据、鉴权、部署和规范
  • 再通过 Prompt、Context、Skills、MCP 让 AI 在既定边界内高速工作
  • 最后把每一轮生成都收束回统一的工程结构

一句话总结：

Vibe Coding 可以替你加速实现，但不能替你承担架构。
Demo 靠生成，产品靠约束；页面靠模型，系统靠技术栈。