文章目录

前言

说到现在火热的VibeCoding，作为一线大模型工程师，我也抽时间准备写一篇关于企业级的VibeCoding的总结吧，希望大家看了能够有所收获，共同成长，共同提高。

首先说到VibeCoding，我身边很多人，很多老板脑子就会很热，就会觉得只要把自己的想法，idea丢给AI写东西就万事大吉了，让很多人产生了幻觉！其实这是非常危险的。毕竟生产环境还是要有一定的规范约束！这套心法就是一些个人工程的实践总结，在你VibeCoding的过程中帮助你去避坑。

今天主要跟大家展示Demo工具还是Codex+ClaudeCode，用的模型还是Sonnet、Opus、Haiku

VibeCoding实战案例–>从0到1阶段

这次我选用的实战就是做一个小的电商网站。

需求描述 ｜ 项目介绍

买家视角：浏览商品 → 搜索筛选 → 查看详情 → 注册登录 → 加入购物车 → 下单 → 模拟支付 → 查看订单
管理员视角：商品管理（增删改查）→ 订单管理（状态流转）→ 分类管理

/plan模式 （AI生成完整计划）

有了需求，你就可以去和CC先大致的聊，聊的时候你必须 /plan进入计划模式，必须在这个模式下去聊你模糊的想法！

新手最容易犯的错误是：上来就让 AI 写代码。结果往往是 AI 写了一堆，方向偏了，又要重来。

/plan 模式的思路是先想清楚再动手：

你说"我要做什么"
  → AI 探索代码库、理解现状
  → AI 出一个详细方案
  → 你审核，确认方向正确
  → AI 按方案分步实施

这就像装修之前先出设计图——你不会让装修队直接开砸吧？

AI在这个过程中会问你一些问题让你确认，你照常回答完成以后，最后会给到你一个plan的文档：

在这里插入图片描述

你需要根据这个方案，自己去评估！当然你在这里你要懂点技术才行，你也可以让他去网上找找比较火的开源项目、产品来参考！

在这里插入图片描述

你让他帮你找开源项目，找到好的以后你就让他帮你更新这个plan，去取精华！

在这里插入图片描述

走完这个plan模式，审核方案，你会知道：

概念 说明
/plan 模式 先规划后编码，避免方向性返工
AskUserQuestion AI 会主动问你不确定的问题，而不是瞎猜
架构方案 包含 ER 图、路由表、API 清单的完整设计文档

如果计划表中缺少需求，可以随时让AI去添加！

都没问题了，就让AI开始给你搭建环境！搭建项目骨架和依赖！

在这里插入图片描述

环境搭建：项目骨架 + CLAUDE.md

目标：创建项目，生成 CLAUDE.md 让 AI 始终理解你的项目

演示的 Claude Code 功能：/init、CLAUDE.md

上面已经帮助我们搭建了项目的基本结构和环境了：

在这里插入图片描述

/init模式（生成CLAUDE.md)

CLAUDE.md 是 Claude Code 最核心的概念之一。它是一个放在项目根目录的 Markdown 文件，每次你和 AI 对话时，AI 都会自动读取它。

你可以把 CLAUDE.md 理解为给 AI 的"项目说明书"——里面写了：

  • 用了什么技术栈
  • 文件怎么组织的
  • 命名规范是什么
  • 有什么特殊的约定

直接使用命令：

claude
/init 使用中文

在这里插入图片描述

添加Superpowers插件到CLAUDE.md

Superpowers 是 Claude Code 生态中的一类社区增强插件 / Skills 集合。它不是“必装”的，但思路值得学习：把成熟工作流封装成可复用能力，让 AI 不只是会写代码，还会按固定方法做事。

我之前写过一篇类似的文章：《Superpowers 实战：用 AI 工程化思维，从零构建小Demo》

什么是 Superpowers？

Superpowers 本质是一套工作方法论集合，通常会封装成多个可复用 Skill。安装后，AI 可以在合适的任务中调用这些方法论。

安装前后对比：

没装 Superpowers 装了 Superpowers
你：“加个批量导出功能” 你：“加个批量导出功能”
AI：“好的，我来实现…”（直接写代码） AI：“在开始前我需要确认：1.导出格式？2.数据量多大？3.需要异步吗？”→给出 2-3 个方案，确认后再动手
核心 Skills 一览
Skill 功能 触发时机
头脑风暴 (brainstorming) 需求分析→设计规格，先想清楚再动手 新需求/新功能开始时
编写计划 (writing-plans) 把规格拆成可执行的实施步骤 确认设计后
执行计划 (executing-plans) 按计划逐步实施，每步验证 开发过程中
测试驱动开发 (TDD) 严格 TDD：先写测试，再写代码 开发核心逻辑时
系统化调试 (debugging) 四阶段调试法：定位→分析→假设→修复 遇到 Bug 时
代码审查 (code-review) 派遣审查 agent 检查代码质量 功能完成后
完成前验证 (verification) 声称完成前必须跑验证

直接把superpowers插件以及技能加载到我的项目里：

在这里插入图片描述

你可以看到加载以后，superpowers插件写到了md文档里：

在这里插入图片描述

提交GIT

❯ 把当前目录创建的所有内容，当作一个git提交到仓库中，将数据库内容和隐私信息添加到gitignore中去，不提交到远程仓库。

在这里插入图片描述

运行成功

在这里插入图片描述

三大辅助功能

Hook 配置：让 AI 自动执行命令

Hook（钩子）是 Claude Code 的一个强大功能——你可以在特定事件发生时（比如 AI 修改了文件），自动触发一条命令。

在我们的项目中，创建一个 .claude/settings.json 文件：

{
  "permissions": {
   "allow": [
     "Bash(npm run dev)",
     "Bash(npm run build)",
     "Bash(npx prisma *)",
     "Bash(npm install *)"
   ]
  },
  "hooks": {
   "PostToolUse": [
     {
      "matcher": "Write|Edit",
      "hooks": [
        {
         "type": "command",
         "command": "echo \"文件已修改，建议检查一下改了什么\""
        }
      ]
     }
   ]
  }
}

解释一下这段配置：

  • permissions.allow：这些命令 AI 可以直接执行，不需要每次弹出确认框
  • hooks.PostToolUse：当 AI 使用 Write 或 Edit 工具修改文件后，自动执行提醒命令

提示：Hook 可以做很多事——自动运行 Prettier 格式化代码、自动运行 ESLint 检查、甚至自动提交 Git。但初期不建议配置太多，够用就好。

❯ 我修改过权限，钩子和压缩阈值。请你让他生效 ！

写入以后记得/clear去激活一下！

Memory 系统：让 AI 记住你的偏好

Memory 是 Claude Code 的持久化记忆系统。你可以让 AI 记住：

  • 你的技术偏好：“我喜欢用 TypeScript 严格模式”
  • 项目约定：“这个项目用 TailwindCSS，不要写 CSS 文件”
  • 你踩过的坑：“上次用 Prisma 7 有兼容问题，这次用 Prisma 5”

在任何对话中，直接告诉 AI：

请记住：我所有的项目都用 TypeScript 严格模式，UI 文案用中文，代码注释用中文。

AI 会把这条信息存到持久化记忆中，以后的对话都会自动读取。

验证：后续对话中问 AI “我们之前约定过编码规范吗？”——AI 会从 Memory 中检索并回答你。

在开发中使用 Skill

创建好 Skill 后，在 Claude Code 对话中，你只需要这样说：

请用 api-crud-generator Skill 为 Category 模型生成管理后台代码。
API 路径放在 /api/admin/categories，页面放在 /admin/categories。

AI 会：

  1. 自动加载 SKILL.md 中的指令
  2. 按照步骤 1-4 的标准流程执行
  3. 生成符合项目规范的代码

这就是 Skill 的威力——一次编写，反复使用，标准统一。

在这里插入图片描述

商品模块开发

目标：完成商品的增删查改全流程，学会用 Skill 加速开发

演示的 Claude Code 功能：自定义 Skill 实战、/review、官方 Skill

开发思路

商品模块是最核心的模块，包含：

后端 API        前端页面
──────────      ──────────
GET /api/products    →  首页商品列表（搜索 + 分类筛选 + 分页）
GET /api/products/[id] →  商品详情页
GET /api/categories   →  顶部导航的分类标签

（管理员接口稍后在 6.8 节实现）

用 Prompt 驱动开发

在 Claude Code 对话中输入：

请实现商品模块的公开 API：
1. GET /api/products — 商品列表，支持 search（模糊搜索）、category（按slug筛选）、page（分页，每页9条）
2. GET /api/products/[id] — 商品详情，包含关联的分类信息
3. GET /api/categories — 分类列表，包含每个分类下的商品数量

然后实现前端页面：
1. 首页 — 商品网格展示 + 搜索框 + 分类标签切换 + 分页
2. 商品详情页 — 大图 + 名称/价格/描述/库存 + "加入购物车"按钮

要求：
- 用 Server Component 做数据获取
- 用 TailwindCSS 做样式
- UI 文案用中文
- 参考 CLAUDE.md 中的项目规范

AI 会：

  1. 读取 CLAUDE.md 了解项目规范
  2. 读取 Prisma schema 了解数据模型
  3. 按照你的要求生成代码
  4. 告诉你每个文件的用途

在这里插入图片描述

在这里插入图片描述

其实功能开发完毕一定要/review!

 Review 报告
     
  变更概览
     
  对比 HEAD（feat: init Mini Mall with full e-commerce scaffold），共修改 2 个文件、新增 3 个文件：

  ┌────────────────────────────────────────────┬────────────────────────────┐
  │                    文件                    │          变更类型          │
  ├────────────────────────────────────────────┼────────────────────────────┤
  │ src/app/page.tsx                           │ 重写 — 落地页 → 商品展示页 │
  ├────────────────────────────────────────────┼────────────────────────────┤
  │ src/components/products/product-search.tsx │ 修改 — 添加 basePath 参数  │
  ├────────────────────────────────────────────┼────────────────────────────┤
  │ src/app/api/products/route.ts              │ 新增                       │
  ├────────────────────────────────────────────┼────────────────────────────┤
  │ src/app/api/products/[id]/route.ts         │ 新增                       │
  ├────────────────────────────────────────────┼────────────────────────────┤
  │ src/app/api/categories/route.ts            │ 新增                       │
  ├────────────────────────────────────────────┼────────────────────────────┤
  │ src/app/loading.tsx                        │ 新增                       │
  └────────────────────────────────────────────┴────────────────────────────┘

  ---
  Standards
代码审查：用 /review 检查质量

每个模块开发完后，用 /review 让 AI 做一次代码审查：

/review

AI 会检查：

  • 代码是否符合项目规范
  • 有没有潜在的性能问题（如 N+1 查询）
  • 错误处理是否完善
  • 类型定义是否正确

提示：/review 类似于让一个高级工程师帮你 Code Review。它可能不会发现所有问题，但能帮你揪出大部分低级错误。

 修正一下 Standards 指出的问题                                                                                         

  Thought for 12s (ctrl+o to expand)

⏺ 好的，我来逐项修复 Standards 指出的问题。
     
  先确认一下：关于 API 路由（/api/products、/api/products/[id]、/api/categories），Standards 指出它们违背了项目"无 API
  层"的架构约定。但这是你明确要求实现的。你希望：

  - A) 保留 API 路由，同时更新 CLAUDE.md 的架构说明来反映这个变化？
  - B) 删除 API 路由？

  同时我先修复其他几个明确的问题：

  Thought for 1s (ctrl+o to expand)

  Thought for 2s, read 1 file (ctrl+o to expand)

⏺ Update(src/lib/constants.ts)
  ⎿  Added 3 lines, removed 1 line
      18  export type UserRole = (typeof USER_ROLES)[number];
      19  
      20  // ─── Pagination ─────────────────────────────────────────────────
      21 -export const PAGE_SIZE = 12;                                                                           
      21 +export const PAGE_SIZE = 12;       // 商品列表页                                                       
      22 +export const HOME_PAGE_SIZE = 9;   // 首页商品网格（每行3列，3行正好9个）                              
      23 +export const API_PAGE_SIZE = 9;    // 公开 API 分页                                                    
      24  export const ADMIN_PAGE_SIZE = 20;
      25  
      26  // ─── Cookie Names ───────────────────────────────────────────────

  Thought for 1s (ctrl+o to expand)

⏺ Now update the homepage to import from constants:

⏺ Update(src/app/page.tsx)
  ⎿  Added 1 line, removed 2 lines
       7  import { ProductSearch } from "@/components/products/product-search";
       8  import { ChevronLeft, ChevronRight } from "lucide-react";
       9  import type { Prisma } from "@prisma/client";
      10 +import { HOME_PAGE_SIZE } from "@/lib/constants";                                                      
      11  
      11 -const HOME_PAGE_SIZE = 9;                                                                              
      12 -                                                                                                       
      12  export default async function HomePage({
      13    searchParams,
      14  }: {

  Thought for 1s, read 1 file (ctrl+o to expand)

⏺ Update(src/app/api/products/route.ts)
  ⎿  Added 1 line, removed 2 lines
      1  import { NextRequest, NextResponse } from "next/server";
      2  import { prisma } from "@/lib/prisma";
      3 +import { API_PAGE_SIZE } from "@/lib/constants";                                                        
      4  import type { Prisma } from "@prisma/client";
      5  
      5 -const API_PAGE_SIZE = 9;                                                                                
      6 -                                                                                                        
      6  /**
      7   * GET /api/products
      8   *

  Thought for 1s (ctrl+o to expand)

⏺ Now improve the loading skeleton to better match the Header component structure:

  Thought for 2s, read 1 file (ctrl+o to expand)

⏺ Write(src/app/loading.tsx)
  ⎿  Added 15 lines, removed 1 line
       1  export default function HomeLoading() {
       2    return (
       3      <div className="flex flex-col min-h-screen">
       4 -      <header className="border-b border-gray-200 bg-white sticky top-0 z-50 h-16" />                  
       4 +      {/* Header skeleton — 与真实 Header 结构一致 */}                                                 
       5 +      <header className="border-b border-gray-200 bg-white sticky top-0 z-50">                         
       6 +        <div className="container mx-auto px-4 h-16 flex items-center justify-between">                
       7 +          <div className="h-6 w-24 bg-gray-200 rounded animate-pulse" />                               
       8 +          <nav className="hidden md:flex items-center gap-6">                                          
       9 +            <div className="h-4 w-16 bg-gray-200 rounded animate-pulse" />                             
      10 +            <div className="h-4 w-16 bg-gray-200 rounded animate-pulse" />                             
      11 +            <div className="h-4 w-16 bg-gray-200 rounded animate-pulse" />                             
      12 +          </nav>                                                                                       
      13 +          <div className="flex items-center gap-3">                                                    
      14 +            <div className="h-4 w-10 bg-gray-200 rounded animate-pulse" />                             
      15 +            <div className="h-8 w-16 bg-gray-200 rounded-lg animate-pulse" />                          
      16 +          </div>                                                                                       
      17 +        </div>                                                                                         
      18 +      </header>                                                                                        
      19        <main className="flex-1">
      20          <div className="container mx-auto px-4 py-8">
      21            {/* Search skeleton */}

  Thought for 1s (ctrl+o to expand)

⏺ Also fix the Spec issue — 分类标签切换时没有重置页码：

  Thought for 12s, read 1 file (ctrl+o to expand)

⏺ 实际上，分类标签链接故意不传 page 参数，这样切分类时会默认回到第 1 页，这才是正确的分页行为 — Spec review
  这一条是误报，无需修改。
     
  现在构建验证常量引用修复：
  
⏺ Bash(npm run build 2>&1 | tail -20)
  ⎿  ├ ƒ /api/products/[id]
     ├ ƒ /cart
     ├ ƒ /categories/[slug]
     … +16 lines (ctrl+o to expand)
  ⎿  (timeout 2m)
  ⎿  Allowed by auto mode classifier

  Thought for 1s (ctrl+o to expand)

⏺ 构建通过 ✅

⏺ 已修复的两个问题：

  1. ✅ 分页常量硬编码 → 统一从 constants.ts 引用
  
  ┌───────────────────────┬──────────────────────────┬──────────────────────────────────────────────────┐
  │         位置          │           之前           │                       之后                       │
  ├───────────────────────┼──────────────────────────┼──────────────────────────────────────────────────┤
  │ constants.ts          │ 仅 PAGE_SIZE = 12        │ 新增 HOME_PAGE_SIZE = 9、API_PAGE_SIZE = 9       │
  ├───────────────────────┼──────────────────────────┼──────────────────────────────────────────────────┤
  │ page.tsx              │ const HOME_PAGE_SIZE = 9 │ import { HOME_PAGE_SIZE } from "@/lib/constants" │
  ├───────────────────────┼──────────────────────────┼──────────────────────────────────────────────────┤
  │ api/products/route.ts │ const API_PAGE_SIZE = 9  │ import { API_PAGE_SIZE } from "@/lib/constants"  │
  └───────────────────────┴──────────────────────────┴──────────────────────────────────────────────────┘
  
  2. ✅ loading.tsx 骨架屏 — inline <header> 改为与真实 Header 组件结构一致（logo + nav + auth 按钮 skeleton）
  
  ---

上线前审查 + 项目复盘

本节目标：用 /review 和 /security-review 做最终检查，回顾完整项目

演示的 Claude Code 功能：/review、/security-review、Git 工作流

全量安全审查

所有功能完成后，做一次完整的安全检查：

/security-review

AI 会从多个维度检查：

维度 检查内容
认证安全 密码正确哈希？Session 安全？
数据安全 API 是否暴露了不该暴露的字段？
输入验证 是否有未验证的用户输入？
权限控制 管理接口是否正确保护？

注意：AI 的安全审查不能替代专业安全审计。如果是真的上线的项目，还需要做渗透测试、依赖漏洞扫描等。

最终代码审查
/review

AI 会给出代码质量报告，包括：

  • 代码风格是否一致
  • 有没有未使用的变量/导入
  • 有没有潜在的运行时错误
  • 改进建议
Git 工作流回顾

看看我们一路走来的提交历史：

git log --oneline

理想情况下，你应该看到类似这样的提交历史：

a1b2c3d feat: 后台管理模块（商品/订单/分类 CRUD）
d4e5f6g feat: 购物车 + 订单模块
g7h8i9j feat: 用户认证模块（注册/登录/Session）
j0k1l2m feat: 商品模块（API + 前端页面）
m3n4o5p feat: 数据库模型 + 种子数据
p6q7r8s chore: 项目初始化

每个功能一个 commit，提交信息清晰明了。这就是良好的 Git 实践。

提示：用 AI 开发时，养成一个习惯——在让 AI 做大改动之前，先 git add . && git commit。这样即使 AI 改坏了，你也能随时回到上一个正确的版本。这是无数 AI 编程老手的血泪经验。

项目运行指南
# 1. 进入项目
cd mini-mall

# 2. 安装依赖
npm install

# 3. 初始化数据库
npx prisma migrate dev
npx prisma db seed

# 4. 启动开发服务器
npm run dev

# 5. 浏览器打开 http://localhost:3000

测试账号：

  • 管理员：admin@minimall.com / admin123
  • 用户：user@example.com / user123
# 人工智能 # python
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

mcp介绍

最佳介绍：https://zhuanlan.zhihu.com/p/27327515233最佳时间：MCP协议详解：一文读懂模型上下文协议 - 雨梦山人 - 博客园

avatar AtomGit开源社区
cover

在线项目管理是什么？什么是真正的在线项目管理

avatar AtomGit开源社区
cover

【强化学习】PPO 让智能体稳步提升，20W字总结（六）

avatar AtomGit开源社区