Vibe Coding学习笔记(第七篇):让AI帮你初始化项目,五分钟搭好框架

📖 这是我的「Vibe Coding实战营」学习笔记，记录从零开发一个 AI 项目的全过程。上一篇我们搞定了AGENTS.md开发规范，今天终于要开始真正的开发了——让AI帮我们初始化整个项目框架。

准备好了吗？五分钟，从0到1搭好React + TypeScript + Vite + Tailwind项目。

为什么让AI初始化项目？

如果是你，会怎么初始化一个React项目？

大多数人可能会：

npm create vite@latest# 一顿选择...cd projectnpm install# 然后手动配Tailwind# 然后手动装react-router# 然后手动创建目录结构

大概需要10-15分钟，都是重复劳动。

但有了AI之后，这一切都可以自动化。把重复劳动交给AI，我们只需要关注真正重要的产品设计。

今天我们就来实战：三步让AI帮你把项目框架搭好，开箱即用。

实战步骤：三分钟初始化项目

Step 1：准备工作

首先，打开Cursor，创建一个新文件夹ai-turtle-game，用Cursor打开它。

然后，把我们前几天写好的三个文档放到项目根目录：

• PRD.md —— 产品需求文档

• TECH_DESIGN.md —— 技术设计文档

• AGENTS.md —— AI开发规范

这三个文档就是我们给AI的"需求包"，AI读完就完全理解项目了。

Step 2：给AI发指令

直接这么跟AI说：

请根据PRD.md、TECH_DESIGN.md和AGENTS.md的要求，初始化一个React + TypeScript + Vite项目，并安装Tailwind CSS。具体要求：1. 创建完整的项目结构2. 正确配置Tailwind CSS3. 安装react-router-dom4. 创建基础的路由配置（大厅页、游戏页、汤底页）5. 确保项目能正常启动

然后等着AI干活就行了。

Step 3：AI干活，你喝茶

我实测下来，整个过程大概2-3分钟，AI会自动完成：

1. ✅ 运行npm create vite 初始化项目

2. ✅ 安装Tailwind CSS并正确配置tailwind.config.js

3. ✅ 安装react-router-dom

4. ✅ 创建基本的路由结构

5. ✅ 创建三个页面组件的骨架

6. ✅ 整理好目录结构

Step 4：验证项目

AI完成之后，只需要验证一件事：

npm run dev

如果能正常启动，打开浏览器能看到页面，那就搞定了！

AI给我生成的项目结构

最终出来的项目结构大概是这样的：

ai-turtle-game/├── node_modules/├── public/├── src/│   ├── components/      # 通用组件│   ├── pages/          # 页面│   │   ├── Lobby.tsx   # 游戏大厅│   │   ├── Game.tsx    # 对局页│   │   └── Result.tsx  # 汤底页│   ├── types/          # 类型定义│   ├── utils/          # 工具函数│   ├── App.tsx         # 根组件│   ├── main.tsx        # 入口文件│   └── index.css       # 全局样式（含Tailwind）├── .gitignore├── .env.example        # 环境变量示例├── index.html├── package.json├── tsconfig.json├── vite.config.ts└── tailwind.config.js

非常清晰，符合我们之前定的规范。

为什么这个方法高效？

你可能会说，不就是初始化个项目吗，自己弄也很快啊。但我觉得，这里的核心不是"快"，而是接力。

以前的流程是：

你搭框架 → 你写业务 → 你改bug

现在的流程是：

你写PRD → AI搭框架 → 你只需要聚焦业务

把所有机械性的重复工作交给AI，你只需要做有创造性的部分——产品设计、交互打磨、用户体验。

这才是AI辅助开发真正的意义：让人做人擅长的事，让AI做AI擅长的事。

关注我，持续更新AI产品实战营学习笔记，带你一步步用AI开发出完整产品。

如果你也在用AI辅助开发，欢迎留言交流你的最佳实践。