Vibe Coding 实战：用 AI IDE 搭建 Vue3 / React / Next.js / Node.js 全栈项目

2025 年，Andréj Karpathy 提出"Vibe Coding"——用自然语言描述意图，让 AI 生成代码，快速验证、迭代。两年后，AI IDE 进化到了 Agent 时代：Cursor 3 把 IDE 变成了 Agent 控制台，Windsurf 的 Cascade 能自主执行多步骤计划，Trae 的 Builder 模式可以一键生成完整项目。

这篇文章不讲抽象概念，重点回答三个问题：

• 现在该用什么方式初始化项目（Vue3 / React / Next.js / Node.js）
• 每类项目的推荐目录和核心架构是什么
• 在 AI IDE 里如何把“想法”稳定落成可运行代码

阅读导航

如果你时间有限，可以按下面顺序阅读：

• 想快速开工：优先看 第 1 章 与 第 2～5 章 的初始化 + 项目结构
• 想提升 AI 协作效率：重点看 第 7 章 方法论与 第 10 章 常见陷阱
• 想直接实操一个完整案例：直接看 第 8 章

---

一、2026 年的前端项目初始化：一切已变

如果你还在用 create-react-app 或 vue-cli，该更新认知了。

技术	初始化方式	状态
Vue 3	npm create vue@latest	官方推荐，基于 Vite
React	npm create vite@latest my-app -- --template react	CRA 已于 2025.2.14 正式弃用
Next.js	npx create-next-app@latest	App Router 成为主流
Node.js (Express)	npx express-generator 或手动 npm init	依然经典
Node.js (Fastify)	npm init fastify	高性能替代方案

关键变化：React 官方在 2025 年 2 月 14 日正式弃用了 Create React App（CRA），推荐使用框架（Next.js/Remix）或构建工具（Vite/Parcel/RSBuild）。这意味着如果你要创建纯 SPA，Vite 已经是唯一合理的选择。

下面逐一详解。

---

二、Vue 3 项目：npm create vue@latest

2.1 初始化

npm create vue@latest my-vue-app

交互式问答会引导你选择：

✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router? … Yes
✔ Add Pinia? … Yes
✔ Add Vitest? … Yes
✔ Add ESLint? … Yes
✔ Add Prettier? … Yes

完成后的项目结构：

my-vue-app/
├── index.html                  # 入口 HTML（Vite 挂载点）
├── vite.config.ts              # Vite 配置
├── tsconfig.json               # TypeScript 配置
├── package.json
├── src/
│   ├── main.ts                 # 应用入口：createApp + 挂载
│   ├── App.vue                 # 根组件
│   ├── assets/                 # 静态资源
│   ├── components/             # 可复用组件
│   │   ├── HelloWorld.vue
│   │   └── ...
│   ├── views/                  # 页面级组件（路由对应）
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── router/                 # Vue Router 配置
│   │   └── index.ts
│   ├── stores/                 # Pinia 状态管理
│   │   └── counter.ts
│   └── styles/                 # 全局样式
│       └── main.css
├── public/                     # 不经构建的静态文件
└── tests/                      # 测试文件

2.2 核心架构解读

入口 main.ts：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
app.use(createPinia())   // 状态管理
app.use(router)           // 路由
app.mount('#app')         // 挂载到 index.html 的 #app

组合式 API（Composition API） 是 Vue 3 的核心范式：

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 响应式状态
const count = ref(0)
const doubled = computed(() => count.value * 2)

// 生命周期
onMounted(() => {
  console.log('组件已挂载')
})

// 方法
function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>计数: {{ count }}，双倍: {{ doubled }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

Pinia 状态管理：

// stores/user.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const username = ref('')
  const isLoggedIn = ref(false)

  function login(name: string) {
    username.value = name
    isLoggedIn.value = true
  }

  function logout() {
    username.value = ''
    isLoggedIn.value = false
  }

  return { username, isLoggedIn, login, logout }
})

2.3 在 AI IDE 中初始化 Vue 3 项目

Trae Builder 模式——最简单的方式：

打开 Trae，切换到 Builder 模式，输入：

创建一个 Vue 3 + TypeScript + Pinia + Vue Router 的项目，项目名为 task-manager，功能是任务管理应用，支持任务的增删改查、分类筛选、优先级标记

Builder 会自动：创建项目目录 → 生成脚手架 → 安装依赖 → 生成核心代码文件。你只需要等它跑完，然后 npm run dev 即可看到初始界面。

Cursor Agent 模式——更精细的控制：

按 Ctrl+I 打开 Composer/Agent，输入：

在当前目录下创建 Vue 3 + Vite + TypeScript 项目。使用 npm create vue@latest，选择开启 Router、Pinia、ESLint、Prettier。项目创建完成后，在 src/views/ 下添加 DashboardView.vue，在 router 中注册 /dashboard 路由

Cursor 3 的 Agent 会执行终端命令、创建文件、修改代码，全程可见。

---

三、React 项目：Vite 成为唯一正解

3.1 初始化

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

注意：create-react-app 已于 2025 年 2 月 14 日被 React 官方正式弃用。如果你还在用它，请尽快迁移。

也可以用 React 官方框架推荐的方式：

# 如果你想要 SSR/SSG 等全栈能力
npx create-next-app@latest

# 如果你只需要纯 SPA
npm create vite@latest my-app -- --template react-ts

3.2 项目结构

Vite + React + TypeScript 的默认结构：

my-react-app/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── package.json
├── public/
│   └── vite.svg
└── src/
    ├── main.tsx               # 入口：ReactDOM.createRoot + render
    ├── App.tsx                # 根组件
    ├── App.css
    ├── index.css              # 全局样式
    └── vite-env.d.ts          # Vite 类型声明

但这太简单了。一个生产级的 React 项目架构应该是：

my-react-app/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── package.json
├── public/
│   └── favicon.ico
├── src/
│   ├── main.tsx               # 入口
│   ├── App.tsx                # 根组件（路由挂载点）
│   ├── components/            # 可复用 UI 组件
│   │   ├── ui/                # 基础 UI 组件（Button, Input, Modal...）
│   │   └── layout/            # 布局组件（Header, Sidebar, Footer...）
│   ├── pages/                 # 页面组件
│   │   ├── HomePage.tsx
│   │   ├── LoginPage.tsx
│   │   └── DashboardPage.tsx
│   ├── hooks/                 # 自定义 Hooks
│   │   ├── useAuth.ts
│   │   └── useFetch.ts
│   ├── services/              # API 请求层
│   │   ├── api.ts             # Axios 实例 & 拦截器
│   │   └── user.service.ts
│   ├── store/                 # 状态管理（Zustand / Jotai / Redux）
│   │   └── useUserStore.ts
│   ├── utils/                 # 工具函数
│   │   ├── format.ts
│   │   └── validate.ts
│   ├── types/                 # TypeScript 类型定义
│   │   └── index.ts
│   └── styles/                # 全局样式 / Tailwind 配置
│       └── globals.css
├── tests/                     # 测试文件
└── .env                       # 环境变量

3.3 核心架构解读

入口 main.tsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './styles/globals.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

函数式组件 + Hooks 是 React 的核心范式：

// pages/DashboardPage.tsx
import { useState, useEffect } from 'react'
import { useUserStore } from '@/store/useUserStore'
import { fetchDashboardData } from '@/services/dashboard.service'

export default function DashboardPage() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const username = useUserStore((s) => s.username)

  useEffect(() => {
    fetchDashboardData()
      .then(setData)
      .finally(() => setLoading(false))
  }, [])

  if (loading) return <div>加载中...</div>

  return (
    <div className="p-6">
      <h1>欢迎, {username}</h1>
      {/* 渲染仪表盘数据 */}
    </div>
  )
}

Zustand 状态管理（比 Redux 轻量得多）：

// store/useUserStore.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface UserState {
  username: string
  token: string | null
  login: (username: string, token: string) => void
  logout: () => void
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      username: '',
      token: null,
      login: (username, token) => set({ username, token }),
      logout: () => set({ username: '', token: null }),
    }),
    { name: 'user-storage' }  // 自动持久化到 localStorage
  )
)

3.4 AI IDE 中搭建 React 项目

Windsurf Cascade——适合"渐进式构建"：

在 Windsurf 中打开空目录，Cascade 会索引你的项目上下文。输入：

使用 Vite 初始化一个 React + TypeScript 项目，安装 react-router-dom、zustand、axios、tailwindcss。项目是个人博客系统，需要文章列表页、文章详情页、关于页。先搭建项目骨架和路由

Cascade 会执行 npm create vite，然后安装依赖、创建页面组件、配置路由——每一步都会在终端中显示，你可以随时介入调整。

关键差异：Windsurf 的 Cascade 有"行动感知"——它知道你已经执行了什么，还没执行什么，能自动衔接上下文。如果你中途发现 Tailwind 配置不对，直接说"Tailwind 的 content 配置少了 components 目录"，它会精准修改 tailwind.config.ts 而不会重新生成整个项目。

---

四、Next.js 项目：全栈框架的工业化起步

4.1 初始化

npx create-next-app@latest my-nextjs-app

交互选项（2026 年最新）：

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … Yes
✔ Would you like to customize the import alias (@/* by default)? … No

重要：App Router 已经是 Next.js 的默认和推荐路由方式，Pages Router 仅作为兼容保留。新项目务必选择 App Router。

4.2 项目结构

my-nextjs-app/
├── next.config.ts              # Next.js 配置
├── tsconfig.json
├── package.json
├── tailwind.config.ts
├── postcss.config.mjs
├── public/                     # 静态资源
│   ├── favicon.ico
│   └── images/
└── src/
    ├── app/                    # App Router 核心（文件系统路由）
    │   ├── layout.tsx          # 根布局（<html>, <body>）
    │   ├── page.tsx            # 首页 (/)
    │   ├── loading.tsx         # 全局加载状态
    │   ├── error.tsx           # 全局错误边界
    │   ├── not-found.tsx       # 404 页面
    │   ├── globals.css         # 全局样式
    │   ├── dashboard/          # /dashboard 路由
    │   │   ├── page.tsx        # 仪表盘页面
    │   │   └── layout.tsx      # 仪表盘专用布局
    │   ├── api/                # API Routes（后端接口）
    │   │   ├── auth/
    │   │   │   └── route.ts    # POST /api/auth
    │   │   └── users/
    │   │       └── route.ts    # GET /api/users
    │   └── (auth)/             # 路由组（不影响 URL）
    │       ├── login/
    │       │   └── page.tsx    # /login
    │       └── register/
    │           └── page.tsx    # /register
    ├── components/             # 可复用组件
    │   ├── ui/                 # 基础 UI
    │   └── features/           # 业务组件
    ├── lib/                    # 工具函数 & 配置
    │   ├── db.ts               # 数据库连接
    │   ├── auth.ts             # 认证逻辑
    │   └── utils.ts            # 通用工具
    ├── hooks/                  # 自定义 Hooks
    ├── types/                  # TypeScript 类型
    └── middleware.ts           # Next.js 中间件（鉴权等）

4.3 核心架构解读

App Router 的核心概念：Server Components vs Client Components

这是 Next.js 最重要的架构决策：

// app/dashboard/page.tsx — 默认是 Server Component
// 可以直接访问数据库、文件系统，不能使用 useState/useEffect
import { db } from '@/lib/db'

export default async function DashboardPage() {
  const stats = await db.query('SELECT * FROM stats')  // 直接查数据库！
  return (
    <div>
      <h1>仪表盘</h1>
      <StatsGrid data={stats} />  {/* 传给客户端组件 */}
    </div>
  )
}

// components/StatsGrid.tsx — 客户端组件
'use client'  // ← 这一行是关键！
import { useState } from 'react'

export function StatsGrid({ data }: { data: any[] }) {
  const [filter, setFilter] = useState('all')
  const filtered = data.filter(d => filter === 'all' || d.type === filter)

  return (
    <div>
      <select value={filter} onChange={e => setFilter(e.target.value)}>
        <option value="all">全部</option>
        <option value="active">活跃</option>
      </select>
      {filtered.map(item => <StatCard key={item.id} {...item} />)}
    </div>
  )
}

规则很简单：

• 默认所有组件都是 Server Component——能直连 DB、文件系统，零客户端 JS
• 需要 useState、useEffect、事件监听？加 'use client'
• Server Component 可以导入 Client Component，反之不行

API Routes——零配置后端：

// app/api/users/route.ts
import { NextResponse } from 'next/server'
import { db } from '@/lib/db'

export async function GET(request: Request) {
  const users = await db.user.findMany()
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const user = await db.user.create({ data: body })
  return NextResponse.json(user, { status: 201 })
}

Middleware——请求拦截利器：

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value

  // 未登录用户访问受保护路由 → 重定向到登录页
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*']
}

4.4 AI IDE 中搭建 Next.js 项目

Next.js 是 AI IDE 最擅长搭建的项目类型之一，因为它的约定大于配置——AI 不需要猜架构，照着 App Router 约定生成即可。

Cursor 3 Agent 模式：

使用 create-next-app 创建一个 Next.js 15 项目，启用 TypeScript、Tailwind CSS、App Router、Turbopack。创建完成后，搭建一个 SaaS 仪表盘的骨架：/dashboard 主页面（含侧边栏导航 + 数据概览卡片）、/dashboard/analytics 数据分析页、/dashboard/settings 设置页、/api/stats API 路由返回模拟统计数据。使用 Server Components 获取数据，Client Components 处理交互。侧边栏组件单独提取到 components/sidebar.tsx

Cursor 3 的 Agent 会：

1. 运行 npx create-next-app
2. 创建目录和路由文件
3. 生成 Server/Client Component 代码
4. 配置 API Route
5. 运行 npm run dev 验证

全程 2-3 分钟，你只需要在它完成后打开浏览器确认效果。

---

五、Node.js 后端项目：从裸跑到框架

5.1 方式一：Express（经典之选）

mkdir my-express-app && cd my-express-app
npm init -y
npm install express cors dotenv
npm install -D nodemon @types/express @types/node typescript tsx
npx tsc --init

项目结构：

my-express-app/
├── package.json
├── tsconfig.json
├── .env                       # 环境变量
├── .env.example               # 环境变量模板
├── src/
│   ├── index.ts               # 入口：创建 Express 实例 + 启动监听
│   ├── app.ts                 # Express 配置（中间件、路由挂载）
│   ├── routes/                # 路由定义
│   │   ├── index.ts           # 路由汇总
│   │   ├── user.routes.ts
│   │   └── auth.routes.ts
│   ├── controllers/           # 请求处理
│   │   ├── user.controller.ts
│   │   └── auth.controller.ts
│   ├── middleware/             # 中间件
│   │   ├── auth.middleware.ts  # JWT 鉴权
│   │   ├── error.middleware.ts # 全局错误处理
│   │   └── validate.middleware.ts # 请求校验
│   ├── services/              # 业务逻辑
│   │   ├── user.service.ts
│   │   └── auth.service.ts
│   ├── models/                # 数据模型（Prisma/Sequelize/Mongoose）
│   │   └── user.model.ts
│   ├── utils/                 # 工具函数
│   │   ├── logger.ts
│   │   └── response.ts
│   └── types/                 # TypeScript 类型
│       └── index.ts
└── prisma/                    # Prisma ORM（如使用）
    └── schema.prisma

核心代码：

// src/index.ts
import dotenv from 'dotenv'
dotenv.config()

import { app } from './app'

const PORT = process.env.PORT || 3000

app.listen(PORT, () => {
  console.log(`🚀 Server running on http://localhost:${PORT}`)
})

// src/app.ts
import express from 'express'
import cors from 'cors'
import { routes } from './routes'
import { errorHandler } from './middleware/error.middleware'

const app = express()

// 全局中间件
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// 路由
app.use('/api', routes)

// 错误处理（必须放在路由之后）
app.use(errorHandler)

export { app }

// src/routes/auth.routes.ts
import { Router } from 'express'
import { AuthController } from '../controllers/auth.controller'
import { validate } from '../middleware/validate.middleware'
import { loginSchema, registerSchema } from '../types'

const router = Router()

router.post('/register', validate(registerSchema), AuthController.register)
router.post('/login', validate(loginSchema), AuthController.login)

export default router

5.2 方式二：Fastify（高性能替代）

npm init fastify
# 或手动
npm init -y
npm install fastify @fastify/cors @fastify/jwt @fastify/env
npm install -D typescript @types/node tsx tap

Fastify 的核心优势：

• 性能是 Express 的 2-3 倍
• 内置 JSON Schema 校验
• 插件体系优雅
• 原生 TypeScript 支持

// src/index.ts
import Fastify from 'fastify'
import cors from '@fastify/cors'
import jwt from '@fastify/jwt'
import { userRoutes } from './routes/user.routes'

const app = Fastify({ logger: true })

async function bootstrap() {
  // 注册插件
  await app.register(cors, { origin: true })
  await app.register(jwt, { secret: process.env.JWT_SECRET! })

  // 注册路由
  app.register(userRoutes, { prefix: '/api/users' })

  // 启动
  await app.listen({ port: 3000, host: '0.0.0.0' })
}

bootstrap()

5.3 AI IDE 中搭建 Node.js 后端

在 Cursor/Windsurf/Trae 中，搭建 Node.js 后端有一个黄金 Prompt 模板：

创建一个 Node.js + Express + TypeScript 后端项目，使用 Prisma ORM 连接 PostgreSQL。项目结构遵循 Controller-Service-Route 分层。需要实现用户认证模块：注册（密码 bcrypt 加密）、登录（返回 JWT）、获取当前用户信息（需鉴权中间件）。环境变量使用 dotenv 管理。错误处理使用全局中间件统一格式。请先生成项目骨架代码

这个 Prompt 涵盖了 AI 需要的全部信息：技术栈、架构模式、功能需求、安全要求。生成结果通常 80% 可用，你只需要微调配置和补充业务逻辑。

---

六、AI IDE 深度对比：Cursor 3 vs Windsurf vs Trae

三款 AI IDE 在 2026 年已经进化到 Agent 时代，但它们的"氛围"截然不同：

6.1 三大工具定位

维度	Cursor 3	Windsurf	Trae
核心理念	IDE 即 Agent 控制台	Flow 心流编码	Builder 一键构建
Agent 能力	Multi-Agent 并行 + Git Worktree	Cascade 自主执行多步计划	Builder 全流程自动构建
最佳场景	大型项目、多文件重构、架构演进	中型项目、渐进式开发	快速原型、项目从零搭建
模型支持	GPT-4o / Claude / Gemini / 自定义	Cascade 内置 + 自定义	豆包 / DeepSeek / 自定义
中文友好	一般	一般	优秀
定价	$20/月 Pro	$15/月 Pro	基础免费
底层	VS Code Fork	VS Code Fork	VS Code Fork

6.2 Cursor 3：Agent 中心化的"多面手"

2026 年 4 月发布的 Cursor 3（代号 Glass）是最大的架构变革——IDE 变成了 Agent 的控制台：

• Agent 中心化界面：AI 不再是侧边栏，而是主界面。你可以同时运行多个 Agent，每个负责不同任务
• Git Worktree 并行：多个 Agent 在独立的 Git Worktree 中工作，互不干扰
• 浏览器集成：Agent 可以直接操作内置浏览器，查看效果、调试 UI
• MCP 支持：连接外部工具和服务

使用 Cursor 搭建项目的典型流程：

1. Ctrl+I 打开 Agent 面板
2. 描述需求 → Agent 制定计划并逐步执行
3. 每一步执行前会确认（可关闭确认实现全自动）
4. Agent 会运行终端命令、创建文件、安装依赖
5. 完成后 npm run dev 启动，Agent 还能帮你调试

6.3 Windsurf：Cascade 驱动的"心流体验"

Windsurf 的核心理念是 Flow——让你保持在编码的心流中，不被中断：

• Cascade：Windsurf 的 Agent 引擎。它读取整个代码库上下文，自主制定多步计划，逐步执行
• 持久记忆：Cascade 记住你的项目约定和之前的选择
• 终端感知：它能读懂终端输出的报错，自动修复

使用 Windsurf 搭建项目的典型流程：

1. 打开空目录 → Cascade 自动索引
2. 输入需求 → Cascade 生成计划
3. 逐步执行：创建文件 → 安装依赖 → 生成代码
4. 如果报错，Cascade 自动读终端输出并修复
5. 你可以在任意步骤介入修改

6.4 Trae：Builder 模式的"一键出活"

Trae 是字节跳动推出的 AI IDE，最大的优势是 Builder 模式：

• 全流程自动：从项目创建到代码生成到依赖安装，Builder 全包
• 自然语言 → 完整项目：一句话描述需求，Builder 拆解成子任务，逐个完成
• 中文生态：对中文 Prompt 理解最好，国内模型（豆包/DeepSeek）延迟低
• SOLO 模式：2025 年下半年推出的全自动化模式，AI 自主完成从需求到部署

使用 Trae Builder 的典型流程：

1. 切换到 Builder 模式
2. 输入需求（中文描述即可）
3. Builder 自动：创建项目 → 生成文件 → 安装依赖 → 运行验证
4. 你只需要在浏览器中确认最终效果
5. 不满意？直接说哪里要改，Builder 精准修改

6.5 选择建议

需要快速出原型？        → Trae Builder
习惯渐进式开发？        → Windsurf Cascade
大型项目 + 需要精细控制？→ Cursor 3 Agent
中文环境 + 国内模型？    → Trae
团队协作 + 代码审查？    → Cursor 3（Multi-Agent）

---

七、Vibe Coding 方法论：从"写代码"到"写意图"

工具会变，方法论不变。以下是在 AI IDE 中高效开发 Web 项目的核心方法论。

7.1 Prompt 工程三原则

原则一：给上下文，不给指令

❌ 差的 Prompt：

创建一个 React 项目

✅ 好的 Prompt：

创建一个 React + TypeScript + Vite 项目，使用 Zustand 状态管理、React Router v6 路由、Tailwind CSS 样式、Axios 请求层。项目是一个任务看板（类似 Trello），需要看板视图、列表拖拽、卡片 CRUD。先搭建项目骨架和路由

区别：好的 Prompt 让 AI 知道你要什么技术栈、什么功能、什么架构层级。它不需要猜，直接给你精确的代码。

原则二：分步递进，别一口气要整个应用

AI 一次生成 1000 行代码，大概率会有结构混乱、组件遗漏。更好的方式是：

第 1 轮：搭建项目骨架 + 路由 + 布局组件
第 2 轮：实现看板的列（Column）组件，支持拖拽排序
第 3 轮：实现卡片（Card）组件，支持增删改
第 4 轮：添加 Zustand store，持久化看板数据到 localStorage
第 5 轮：美化 UI，使用 Tailwind 实现 Trello 风格配色

每一轮都是可验证的——你运行一次，看看效果，再进入下一轮。

原则三：明确技术约束

Web 开发中 AI 容易踩的坑，提前告知可以避免反复修正：

注意事项：
- 使用 React 18+ 的函数式组件和 Hooks，不要用 Class 组件
- 使用 TypeScript strict 模式
- 使用 App Router 而非 Pages Router（Next.js 项目）
- API 请求统一通过 src/services/ 层，不要在组件中直接调用 axios
- 服务端组件不要使用 useState/useEffect，需要交互的组件加 'use client'
- 环境变量统一写在 .env 中，通过 import.meta.env（Vite）或 process.env（Next.js）读取

7.2 四种项目的典型 Vibe Coding 工作流

Vue 3 项目工作流

[5 min]  npm create vue@latest → 选择 Router + Pinia + TypeScript
[3 min]  运行 npm run dev → 确认脚手架正确
[10 min] AI 生成核心页面组件 → 分 2-3 轮对话
[5 min]  验证页面和路由 → 标记问题
[10 min] AI 补充业务逻辑 → Pinia store + API 调用
[5 min]  应用样式 → Tailwind 或 QSS
[5 min]  代码审查 → 检查组件拆分合理性、状态管理是否正确

React 项目工作流

[3 min]  npm create vite@latest → react-ts 模板
[3 min]  安装路由、状态管理、样式依赖
[15 min] AI 生成页面组件 + 路由配置 → 分 3-4 轮
[10 min] AI 实现 API 层 + 自定义 Hooks
[5 min]  验证功能 → 修复 Bug
[5 min]  样式打磨 → Tailwind 布局和动效

Next.js 项目工作流

[3 min]  npx create-next-app → 全部选 Yes
[5 min]  AI 搭建 App Router 路由结构 → layout + page 文件
[15 min] AI 实现 Server Components 数据获取 + Client Components 交互
[10 min] AI 添加 API Routes → RESTful 接口
[5 min]  AI 添加 Middleware → 鉴权拦截
[5 min]  验证 SSR/CSR 行为 → 检查水合错误

Node.js 后端工作流

[5 min]  npm init + 安装依赖 + tsconfig
[10 min] AI 生成项目骨架 → 分层架构
[15 min] AI 实现核心模块 → 认证 + CRUD
[10 min] AI 添加中间件 → 鉴权、校验、错误处理
[5 min]  配置 Prisma + 数据库连接
[5 min]  测试接口 → 补充边界情况

7.3 规则文件：让 AI 守规矩

每个 AI IDE 都支持项目级规则文件，让 AI 自动遵守约定：

.cursorrules（Cursor）：

# .cursorrules
tech_stack:
  frontend: "Vue 3 + Vite + TypeScript + Pinia + Vue Router"
  styling: "Tailwind CSS"
  api: "Axios with interceptors"

conventions:
  - 组件使用 <script setup lang="ts"> 语法
  - 页面组件放在 views/，可复用组件放在 components/
  - API 请求统一通过 services/ 层，禁止在组件中直接调用
  - 状态管理使用 Pinia composition store 风格（defineStore + setup 函数）
  - 路由使用懒加载：component: () => import('@/views/xxx.vue')
  - CSS 使用 Tailwind 类名，不写自定义 CSS 除非必要
  - 所有 API 响应使用统一格式 { code, data, message }

.windsurfrules（Windsurf）：

# .windsurfrules
project:
  name: "my-nextjs-saas"
  stack: "Next.js 15 + App Router + TypeScript + Tailwind + Prisma"

rules:
  - 使用 App Router，不用 Pages Router
  - 数据获取用 Server Components，交互用 Client Components
  - API Routes 放在 app/api/ 下
  - 数据库操作使用 Prisma Client
  - 认证使用 NextAuth.js v5
  - 环境变量必须通过 process.env 访问，禁止硬编码
  - 错误使用 error.tsx 边界处理

Trae 的项目规则在 Trae 的设置中配置，逻辑相同。

---

八、实战案例：用 Trae Builder 一键搭建全栈项目

让我们用一个完整的案例走一遍 Vibe Coding 全流程——目标是一个个人记账应用，前端 Next.js，后端 API Routes + Prisma + SQLite。

Step 1：项目创建

在 Trae 中切换到 Builder 模式，输入：

创建一个 Next.js 15 + TypeScript + Tailwind CSS + Prisma + SQLite 的个人记账应用。功能包括：1) 记录收支（金额、分类、备注、日期）2) 按月/年查看账单统计 3) 分类饼图和趋势折线图 4) 导出 CSV。UI 风格参考微信支付的账单页面，简洁现代。使用 App Router，Server Components 获取数据，Client Components 处理交互。Prisma schema 包含 Transaction（交易）和 Category（分类）两个模型

Builder 执行过程（约 2 分钟）：

[1/8] 运行 npx create-next-app@latest expense-tracker
[2/8] 安装依赖：prisma @prisma/client recharts date-fns
[3/8] 初始化 Prisma + 配置 SQLite
[4/8] 创建 Prisma Schema（Transaction + Category 模型）
[5/8] 运行 prisma db push 创建数据库
[6/8] 创建 App Router 页面和 API Routes
[7/8] 生成 UI 组件（表单、图表、列表）
[8/8] 运行 npm run dev 启动开发服务器

Step 2：验证与迭代

打开浏览器查看效果。假设你发现：

问题 1：分类饼图没有显示中文标签

分类饼图的标签显示的是英文 key，需要改成中文：food→餐饮, transport→交通, shopping→购物, entertainment→娱乐, salary→工资, other→其他

问题 2：添加交易后页面没有自动刷新

添加交易后，需要用 router.refresh() 刷新 Server Component 的数据，而不是手动 setState

问题 3：月度统计页面需要增加收入/支出汇总

在月度统计页面顶部添加本月收入总计和支出总计，用绿色和红色区分

每一条反馈只需要 10 秒输入，AI 在几秒到几十秒内完成修改。整个迭代过程可能只需要 15 分钟。

Step 3：最终项目结构

expense-tracker/
├── prisma/
│   ├── schema.prisma          # Transaction + Category 模型
│   └── seed.ts                # 种子数据（默认分类）
├── src/
│   ├── app/
│   │   ├── layout.tsx         # 根布局（侧边栏 + 导航）
│   │   ├── page.tsx           # 首页 → 本月账单列表
│   │   ├── stats/
│   │   │   └── page.tsx       # 统计页（饼图 + 折线图）
│   │   ├── add/
│   │   │   └── page.tsx       # 添加交易页
│   │   └── api/
│   │       ├── transactions/
│   │       │   └── route.ts   # GET/POST /api/transactions
│   │       ├── stats/
│   │       │   └── route.ts   # GET /api/stats?month=2026-04
│   │       └── export/
│   │           └── route.ts   # GET /api/export?format=csv
│   ├── components/
│   │   ├── TransactionForm.tsx    # 添加/编辑交易表单（'use client'）
│   │   ├── TransactionList.tsx    # 交易列表
│   │   ├── MonthlySummary.tsx     # 月度汇总卡片
│   │   ├── CategoryPieChart.tsx   # 分类饼图（'use client'）
│   │   └── TrendChart.tsx         # 趋势折线图（'use client'）
│   └── lib/
│       ├── db.ts              # Prisma Client 单例
│       └── utils.ts           # 日期格式化等工具
└── .env                       # DATABASE_URL="file:./dev.db"

总耗时：从零到功能完整，约 30 分钟。传统手写至少需要 1-2 天。

---

九、高级技巧：Vibe Coding 的进阶玩法

9.1 截图驱动开发

直接给 AI 一张目标界面的截图：

[附上截图] 用 Vue 3 + Tailwind 实现这个界面，包括布局、配色和组件层次

Cursor 3 和 Windsurf 都支持图片输入。AI 分析截图中的布局结构、控件类型、配色方案，生成对应代码。效果对表单、仪表盘、落地页等结构清晰的界面尤其好。

9.2 错误驱动的快速修复

跑起来的第一版几乎总有 Bug。别手动排查——直接把报错扔给 AI：

运行 npm run dev 后报错：Hydration failed because the server rendered HTML didn’t match the client

AI 会识别出这是 Next.js 经典的水合错误——Server Component 和 Client Component 渲染内容不一致，通常是因为在 Server Component 中使用了 Date.now() 或 Math.random() 等非确定性值。它会精准定位并修复。

9.3 跨文件重构

当项目规模增长，你需要：

• 把巨型组件拆成小组件
• 提取公共逻辑到 Hooks/Composables
• 统一 API 调用层
• 添加状态管理

这是 Cursor 3 和 Windsurf Cascade 的强项：

将 DashboardPage.tsx 中的统计卡片提取为独立的 StatsCard 组件，放入 components/ui/。将数据获取逻辑提取为 useDashboardStats Hook，放入 hooks/。DashboardPage 使用这两个模块重写

9.4 测试生成

AI 生成测试比手写测试快 10 倍：

为 src/services/user.service.ts 中的所有函数生成 Vitest 单元测试，覆盖正常路径和异常路径。Mock 掉数据库调用

9.5 文档生成

为这个项目生成 README.md，包含：项目简介、技术栈、安装步骤、环境变量说明、API 文档、项目结构说明。API 文档用表格列出所有接口的路径、方法、参数和返回值

---

十、常见陷阱：AI 无法替你避开的坑

陷阱	说明	建议
过度生成	AI 倾向于生成"完整"代码，包含你不需要的功能	明确限定范围，拒绝不需要的代码
Next.js 水合错误	Server/Client Component 数据不一致	确保动态数据（时间戳、随机数）只在 Client Component 中使用
API 密钥泄漏	AI 有时会把密钥硬编码	检查所有 .env 引用，确保没有硬编码的密钥提交到 Git
依赖版本冲突	AI 可能安装过时的包	生成后运行 npm outdated 检查
安全漏洞	AI 生成的认证代码可能缺少关键检查	审查所有认证逻辑，确保密码加密、JWT 验证、输入校验完备
TypeScript 类型宽松	AI 倾向于用 any 逃避类型	检查并替换所有 any 为具体类型
Vue 3 Option API 残留	部分模型训练数据中 Vue 2 代码占比更高	验证生成的代码确实使用了 <script setup> + Composition API
Next.js Pages Router 混用	AI 可能在 App Router 项目中混入 Pages Router 代码	确保路由文件都在 app/ 目录下
SSR/CSR 边界模糊	不清楚哪些代码在服务端执行、哪些在客户端	牢记：'use client' 之前的代码在服务端执行，之后的在客户端执行

---

十一、2026 年的 Vibe Coding 工作节奏

结合上述所有方法论，一个高效的全栈 Web 项目 Vibe Coding 工作流：

1. [5 min]   选择技术栈 → 一句话描述需求 → AI 生成项目骨架
2. [3 min]   运行验证骨架 → 确认项目能跑起来
3. [15 min]  分 3-5 轮对话，逐步填充核心功能
4. [5 min]   运行验证基本功能 → 标记问题点
5. [10 min]  逐个修复问题 → 截图/报错喂给 AI
6. [5 min]   样式打磨 → 截图驱动或配色描述
7. [5 min]   细节完善 → 交互反馈、边界情况、动效
8. [5 min]   代码审查 → 类型安全、安全漏洞、性能问题
9. [5 min]   生成文档 → README + API 文档

总计约 1 小时，你就能得到一个功能完整、界面美观、代码结构清晰的现代 Web 应用。

---

结语：从"打字员"到"架构师"

2026 年的 Web 开发已经不需要你记住 npx create-react-app 还是 npm create vite——AI 会帮你选。不需要你手写每一个 CSS 类——AI 会帮你布局。不需要你逐行调试——AI 会读终端输出自动修复。

但"不需要"不等于"不需要懂"。你需要：

• 懂选型——知道什么时候用 Vue、什么时候用 React、什么时候上 Next.js
• 懂架构——知道 Server Components 和 Client Components 的边界、状态管理该放在哪一层、API 如何分层
• 懂安全——知道 JWT 过期刷新策略、CSRF 防护、输入校验
• 懂审美——能判断 AI 生成的界面"对了没有"

这些，是 AI 暂时替代不了的。而它们，恰恰是让你从"会用框架"走向"写好应用"的关键。

Vibe Coding 不是偷懒，是重新定义了"开发者的价值"——从"写出每一行代码"到"决定写哪些代码"。

---

写于 2026 年 4 月 · 当 AI 能生成整个项目时，知道该生成什么项目才是真正的能力