Vibe Coding 实战：如何用 AI 生成完整可交付产品

3. AI 生成代码后，闭环验证与修正

AI 生成的代码大概率存在'小问题'（如路径错误、依赖缺失），需按以下流程验证：

1. 结构检查：确认 AI 输出的目录结构完整（如前端 src/components、后端 routes/数据库 models）；
2. 环境搭建：按 AI 提供的启动说明安装依赖（如 npm install/pip install fastapi uvicorn）；
3. 运行测试：启动服务后，逐一测试核心功能（如登录是否成功、接口是否返回数据）；
4. AI 辅助修正：把报错信息（如 ModuleNotFoundError: No module named 'cryptography'）反馈给 AI，让其生成修复代码。

4. （可选）自动化部署

若需要 AI 完成'从代码到上线'的全流程，可补充指令生成部署脚本：

请基于上述图书管理系统，生成以下部署文件：
1. Dockerfile（前端/后端各一个）；
2. docker-compose.yml（整合前端、后端、数据库）；
3. 部署说明：包含构建镜像、启动容器、访问地址的完整命令。

三、避坑指南：AI 生成完整产品的常见问题与解决

在实际操作中，我们常遇到以下几类问题，提前规避能节省大量时间：

1. AI 生成代码'碎片化'：问题根源是指令不够具体。解决：把大产品拆分为'模块级指令'（先让 AI 生成登录模块，验证通过后再生成图书模块）；
2. 依赖/版本冲突：AI 可能混用不同版本的库。解决：指令中明确版本号（如'Vue3.3.4 + Element Plus 2.3.7'）；
3. 逻辑漏洞（如安全问题）：AI 可能忽略密码加密细节。解决：指令中明确'安全要求'（如'密码存储必须用 MD5 加密，接口需验证 token'）；
4. 大型产品无法一次性生成：AI 上下文长度有限。解决：用'分文件生成'（先让 AI 生成后端接口，再生成前端调用代码）。

四、完整示例：AI 生成的'简易图书管理系统'核心代码片段

这里展示后端和前端的关键实现部分，帮助你理解 AI 生成的代码风格。

1. 后端 FastAPI 代码（main.py）

from fastapi import FastAPI, HTTPException, Depends
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
from pydantic import BaseModel
import hashlib
import sqlite3

app = FastAPI()
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")

# 数据库初始化
def init_db():
    conn = sqlite3.connect("books.db")
    c = conn.cursor()
    # 创建用户表
    c.execute('''CREATE TABLE IF NOT EXISTS users (
        username TEXT PRIMARY KEY, password TEXT)''')
    # 创建图书表
    c.execute('''CREATE TABLE IF NOT EXISTS books (
        id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, author TEXT, stock INTEGER)''')
    # 初始化管理员账号（密码 123456 MD5 加密后：e10adc3949ba59abbe56e057f20f883e）
    c.execute("INSERT OR IGNORE INTO users VALUES ('admin', 'e10adc3949ba59abbe56e057f20f883e')")
    conn.commit()
    conn.close()

# 密码加密函数
def md5_encrypt(password: str) -> str:
    return hashlib.md5(password.encode()).hexdigest()

# 登录接口
@app.post("/api/login")
async def login(form_data: OAuth2PasswordRequestForm = Depends()):
    conn = sqlite3.connect("books.db")
    c = conn.cursor()
    c.execute("SELECT password FROM users WHERE username = ?", (form_data.username,))
    result = c.fetchone()
    conn.close()
    if not result or result[0] != md5_encrypt(form_data.password):
        raise HTTPException(status_code=401, detail="账号或密码错误")
    return {"access_token": "fake-token-123", "token_type": "bearer"}

# 图书列表接口
@app.get("/api/books")
async def get_books(page: int = 1, size: int = 10):
    conn = sqlite3.connect("books.db")
    c = conn.cursor()
    offset = (page - 1) * size
    c.execute("SELECT * FROM books LIMIT ? OFFSET ?", (size, offset))
    books = [{"id": row[0], "name": row[1], "author": row[2], "stock": row[3]} for row in c.fetchall()]
    conn.close()
    return {"code": 200, "data": books}

# 启动时初始化数据库
init_db()

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

2. 前端 Vue3 登录页面（Login.vue）

<template>
  <el-form :model="loginForm" label-width="80px" @submit.prevent="login">
    <el-form-item label="账号">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="loginForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const loginForm = ref({ username: 'admin', password: '123456' })

const login = async () => {
  try {
    const res = await axios.post('/api/login', new URLSearchParams({
      username: loginForm.value.username,
      password: loginForm.value.password
    }))
    localStorage.setItem('token', res.data.access_token)
    ElMessage.success('登录成功')
    router.push('/books')
  } catch (err) {
    ElMessage.error('登录失败：' + err.response.data.detail)
  }
}
</script>

总结

1. 核心关键：实现 AI 全自动生成完整产品，第一步是把模糊的'产品感觉'转化为结构化、细节化的指令，明确技术栈、功能、输出规范；
2. 落地逻辑：按'拆解需求→下达指令→生成代码→验证修正→部署上线'的流程，小产品可一次性生成，大产品拆分为模块逐步生成；
3. 关键补充：AI 生成的代码需人工验证核心功能，报错信息可反馈给 AI 快速修正，无需从零修改。