引言
斯坦福专门开了一门氛围编程的课程，学生们全程不用写一句代码，非常火爆。
今天我们来做一个比较硬核的实战项目，担心大家不是很喜欢，一直不想写这类题材。但是为了展示AI发展到何种程度，觉得还是有必要写一期这个专题（打算分成2篇来写，1.基础功能。2.扩展功能和产品化部署）
Vibe Coding（氛围编程），根据Anthropic工程师预计，最多明年上半年，Vibe Coding将变得和编译器一样稳定，你只需要关注产品，而不用审查代码。
编程可能变成与艺术和品味相关的一项重要技能。
我们的项目是Claude Code 和 DeepSeek api 共同完成，Claude Code 更像一个Agentic 和DeepSeek 强大的代码能力，两者结合起来产生了奇妙的效果。
Token消耗的价格基本可以让我们随便玩了。
设计基础功能
我想做一个简单的 Web 代办事项小应用（To-Do List）。
我希望：
1.用 React 写前端
2.样式用 TailwindCSS
3.使用 Express 搭后端，数据存在本地 JSON 文件里就行
4.有一个添加/删除/完成任务的功能
5.能切换任务视图（全部/已完成/未完成）
6.有一个搜索框可以过滤任务
以下是Claude Code+DeepSeek输出内容，我尽量把AI思考过程展示出来：
-
• 我来帮你创建一个完整的 Web 代办事项应用。让我先规划一下这个项目的任务。
调用工具id：call_00_lXjxzq1H3aua41qh0ADaz1ca
输入参数
{
"todos": [
{
"content": "创建项目结构和基础配置文件",
"status": "pending",
"activeForm": "创建项目结构和基础配置文件"
},
{
"content": "设置后端 Express 服务器和 API 路由",
"status": "pending",
"activeForm": "设置后端 Express 服务器和 API 路由"
},
{
"content": "实现本地 JSON 文件数据存储",
"status": "pending",
"activeForm": "实现本地 JSON 文件数据存储"
},
{
"content": "创建 React 前端应用结构",
"status": "pending",
"activeForm": "创建 React 前端应用结构"
},
{
"content": "实现任务添加/删除/完成功能",
"status": "pending",
"activeForm": "实现任务添加/删除/完成功能"
},
{
"content": "实现任务视图切换功能",
"status": "pending",
"activeForm": "实现任务视图切换功能"
},
{
"content": "实现搜索过滤功能",
"status": "pending",
"activeForm": "实现搜索过滤功能"
},
{
"content": "使用 TailwindCSS 美化界面",
"status": "pending",
"activeForm": "使用 TailwindCSS 美化界面"
}
]
}
工具结果
待办事项已成功修改。请继续使用待办事项列表来跟踪进度。如有适用，请继续处理当前任务。
-
• 现在开始创建项目。首先创建项目的基础结构和配置文件。
截图还是太多了，不想展示太多，其实Vibe Coding除了代码审查，也很少去看
• 现在创建 React 前端应用结构。
• 现在创建各个组件。
以下省略...
-
• 现在创建一个 README 文件来说明如何运行项目。
# 待办事项应用 (Todo App)
一个简单的 React + Express 待办事项应用，使用 TailwindCSS 进行样式设计。
## 功能特性
- ✅ 添加新的待办事项
- ✅ 标记任务为完成/未完成
- ✅ 删除任务
- ✅ 过滤任务视图（全部/未完成/已完成）
- ✅ 搜索任务
- ✅ 本地 JSON 文件数据存储
## 技术栈
- **前端**: React 18 + Vite
- **后端**: Express.js
- **样式**: TailwindCSS
- **数据存储**: 本地 JSON 文件
## 安装和运行
1. 安装依赖：
```bash
npm install
```
2. 启动开发服务器（同时启动前端和后端）：
```bash
npm run dev
```
3. 或者分别启动：
```bash
# 启动后端服务器 (端口 5000)
npm run server
# 启动前端开发服务器 (端口 3000)
npm run client
```
4. 打开浏览器访问：http://localhost:3000
## 项目结构
```
todo-app/
├── server/
│ ├── index.js # Express 服务器
│ └── data/
│ └── todos.json # 数据存储文件
├── src/
│ ├── components/
│ │ ├── TodoForm.jsx # 添加任务表单
│ │ ├── TodoList.jsx # 任务列表
│ │ ├── TodoItem.jsx # 单个任务项
│ │ └── FilterBar.jsx # 过滤和搜索栏
│ ├── App.jsx # 主应用组件
│ ├── main.jsx # React 入口文件
│ └── index.css # 全局样式
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js
```
## API 接口
- `GET /api/todos` - 获取所有任务
- `POST /api/todos` - 添加新任务
- `PATCH /api/todos/:id` - 更新任务状态
- `DELETE /api/todos/:id` - 删除任务
## 构建生产版本
```bash
npm run build
```
构建完成后，可以使用 `npm run preview` 预览生产版本。
-
• 完成！我已经成功创建了一个完整的 Web 待办事项应用。让我总结一下实现的功能：
-
-
-
-
2. 运行
npm run dev 同时启动前后端
-
3. 访问 http://localhost:3000
-
-
•
server/index.js - Express 后端服务器，提供完整的 CRUD API
-
•
src/App.jsx - 主应用组件，管理状态和业务逻辑
-
•
src/components/ - 所有 React 组件
-
•
server/data/todos.json - 数据存储文件
-
应用具有现代化的界面设计，响应式布局，完整的增删改查功能，以及搜索和过滤功能。数据会持久化存储在本地 JSON 文件中。
效果展示
通过Claude Code自动生成了代码，在项目文件夹中按Shift + 右键 选择在此处打开Powershell窗口，然后执行命令 npm install
执行完后，再运行环境 npm run dev ,最后打开
http://localhost:3000/
于是我们就自己设计了一个实用工具，全程都不没有自己编写代码。
引用链接
