【AI编程】Vibe Coding 开发环境搭建与项目实战操作详解

目录

一、前言

二、Vibe Coding 介绍

2.1 什么是Vibe Coding

2.2 Vibe Coding可以做什么

2.3 Vibe Coding适用人群

2.4 Vibe Coding挑战与局限

三、Vibe Coding 环境准备

3.1 搭建本地基础开发环境

3.1.1 git 本地安装

3.1.2 注册一个git 账号

3.1.3 安装Node-Js

3.1.4 安装Python

3.2 AI 编程工具准备

3.2.1 Trae（国产）

3.2.2 Claude Code

3.2.3 Codex

3.2.4 Cursor

四、项目实战过程

4.1 需求调研阶段

4.1.1 找对标的软件或网站

4.1.2 通过自然语言生成需求文档

4.1.3 通过截图+自然语言生成需求文档

4.2 生成需求文档

4.3 规划开发设计方案

4.4 编程开发

4.5 功能测试与验收

五、写在文末

一、前言

随着AI大模型的能力完善，各类AI工具的广泛使用，Vibe Coding这个潮流从一开始的概念逐渐变成现实，对很多不懂编程的人来说，在当今的趋势下，通过自然语言与大模型交换就可以实现一款个人软件从开发到上线已经成为现实，本篇将详细介绍Vibe Coding从环境搭建到一个项目完整部署上线的全流程。

二、Vibe Coding 介绍

Vibe Coding（氛围编程）是一种AI驱动软件开发的新范式。它的核心是用自然语言“描述需求”来代替逐行“编写代码”，让即使不懂编程的人也能快速创造软件。

2.1 什么是Vibe Coding

Vibe Coding这个概念，是由OpenAI联合创始人安德烈·卡帕西（Andrej Karpathy）在2025年初提出的。他描述这种开发状态是：“完全沉浸于氛围，拥抱指数增长，甚至忘记代码的存在”。

它的精髓可以总结为两点：

• 从“写”到“说”：开发者只需像聊天一样，用自然语言向AI描述想要什么，AI（如Cursor、Claude Code等）负责生成和修改代码。

• “氛围”优先：与传统开发的严谨审查不同，Vibe Coding更看重快速实现创意和保持流畅的开发状态（即“氛围”），代码的细节实现交给AI。

2.2 Vibe Coding可以做什么

Vibe Coding正在降低软件开发的门槛，其应用场景很广泛：

• 对普通人：让创意快速落地。比如，一位考研学生用它做出了“考点便签”网站，一位潮汕青年开发了模拟“侨批”的家书生成器，还有人用它来做“午餐大转盘”这种生活小工具。

• 对专业程序员：提升效率。它可以用来快速原型制作、生成代码框架、重构代码或集成新功能，让开发者能专注于更高层的架构设计。

2.3 Vibe Coding适用人群

Vibe Coding的适用人群非常广泛，它打破了“只有专业程序员才能开发软件”的传统壁垒。我把人群分为四大类，你可以对号入座：

重要提醒：

以上四类人都能从中获益，但有一个能力是所有Vibe Coding用户的必备项——清晰、结构化地描述需求。你描述得越精确，AI产出的代码质量越高。

总的来说，Vibe Coding是“将创意转化为软件的门槛大幅降低”的体现。只要你有点子、有好奇心，都能用它来创造点东西。

2.4 Vibe Coding挑战与局限

尽管很强大，但Vibe Coding 也并非万能，目前它面临着一些核心挑战：

• 质量与安全风险：AI生成的代码可能存在Bug、安全漏洞或逻辑错误，对于复杂的项目尤其如此。盲目接受所有AI建议，可能导致难以维护的“脆皮”系统。

• 新能力的崛起：当“写代码”变得简单后，清晰地表达需求、严密的逻辑思考、良好的审美品味（taste） 以及审核AI产出结果的能力，反而变得更加重要。

Vibe Coding更准确的定位是“创意放大器”。它非常适用于快速原型验证、个人小工具、学习探索等场景。但对于需要高可靠性、高安全性的企业级生产系统，它依然离不开经验丰富的工程师来把关和主导。

三、Vibe Coding 环境准备

尽管听起来很厉害，但还是需要做一些前置的准备，比如AI工具的基本使用，Vibe Coding 依赖的基础编程环境等，参考下面的操作流程完成前置的准备工作。

3.1 搭建本地基础开发环境

后面通过自然语言驱动AI工具进行编程开发时，AI工具在编程过程中，需要依赖本地安装的环境，虽然如果你没有提前安装，有些高级的AI工具会自动安装，但是仍然建议提前在本地安装好，这样一方面可以确保软件环境是稳定的，同时可以提升AI编程的效率，本次安装的环境主要包括下面几个：

3.1.1 git 本地安装

以windows 为例，git 客户端下载地址：Git – Install for Windows

下载到本地

双击exe文件，下一步下一步即可，注意安装位置可以选择在除了C盘之外的其他目录，安装完成后，在CMD窗口中，输入下面的命令，看到图中的显示说明安装成功

也可以在当前的任何一个目录下，右键，就可以看到打开Git 的控制窗口

打开后效果如下，在这个窗口下你可以执行任何git 命令

3.1.2 注册一个git 账号

进入git 官方网站，使用自己的邮箱注册一个git的账号，方便后续提交代码并托管到git仓库，git地址：GitHub · Change is constant. GitHub keeps you ahead. · GitHub

3.1.3 安装Node-Js

安装包下载地址 : Node.js — Download Node.js®

• 安装最新版的即可

下载到本地之后，双击安装包，一直下一步即可完成安装，安装完成，打开CMD黑窗口

输入命令：node -v ，看到下面的效果，说明安装完成

3.1.4 安装Python

安装包下载地址：Welcome to Python.org

下载到本地之后，一路下一步即可，安装完成后，CMD黑窗口执行命令：python –version ，看到下面的效果，说明安装完成

3.2 AI 编程工具准备

目前，市面上很多主流的AI工具都支持AI编程，但是在Vibe Coding 模式下，不同的AI编程工具，在使用体验，编程效率，编程质量等方面还是有较大的差异，为了接下来能够顺利实现本地Vibe Coding，提供几种相对热门主流的AI编程大模型或者编程工具，方便个人选择。

3.2.1 Trae（国产）

Trae 是字节跳动推出的一款 AI 原生编程工具，旨在帮助开发者更高效地完成软件开发任务，具体来说：

• 基本定位

  • AI原生集成开发环境（AI IDE），定位为“智能协作AI搭档”

• 核心模式

  • Builder模式（从0到1构建项目）、Chat模式（侧边对话与内嵌问答）

• 核心功能

  • 代码自动补全、智能排查Bug、技术问答、基于自然语言生成项目、多模态输入（如图片生成代码）

• 模型支持

  • 国内版：默认搭载豆包-1.5-pro，支持切换DeepSeek-R1/V3；海外版：支持GPT-4o、Claude-3.5-Sonnet

• 系统平台

  • 支持 macOS (10.15+) 和 Windows (10, 11)，Linux版本即将推出

• 独特优势

  • 深度本土化优化、对中文语境和国内开发框架支持良好、基础功能免费

Trae 下载安装地址：TRAE – The Real AI Engineer | TRAE – The Real AI Engineer

3.2.2 Claude Code

号称地表最强AI编程Agent，不仅可以编程，在各个领域都表现强劲。

Claude Code是Anthropic推出的本地化AI编程助手，专为开发者设计。它不是一个简单的代码补全工具，而是一个能理解你的项目、执行复杂任务、自动化开发流程的智能编程伙伴。

• 官网：Claude Code by Anthropic | AI Coding Agent, Terminal, IDE

• 官方文档：Overview – Claude Code Docs

Claude Code 本地安装很简单，基于上述已经安装完成的node-js，在命令行窗口下执行下面的命令即可完成安装

# 安装命令
npm install -g @anthropic-ai/claude-code

#卸载命令
npm uninstall -g @anthropic-ai/claude-code

安装完成后，使用 claude -v 命令检查下版本

3.2.3 Codex

目前是世界上最全面的一款AI工具，OpenAI 旗下AI全能助手工具，不仅能编程，还能处理各种工作中的任务。

登录入口：https://chatgpt.com/codex

简单来说，可以把 Codex 看作一个“能帮你干活的AI工程师”。

• 它是“目标驱动”而非“指令驱动”：你只需告诉它最终的目标（例如：“帮我搭建一个带用户登录功能的网站”），它会自动拆解任务，规划步骤并执行，而不需要你一步步告诉它该怎么做。

• 它不只是一个聊天框：虽然你可以在ChatGPT网页版找到它，但它真正的威力在于桌面应用和命令行工具（CLI）。在这些地方，它可以直接访问你的文件系统、运行终端命令，甚至操作其他软件。

• 它的用户远超程序员：官方数据显示，Codex每周有超过300万用户，其中近一半（50%）的使用场景并非编码。从写周报、整理文档到数据分析，它都足以胜任。

安装完成后，在本地就是一个下图这样的客户端工具，打开之后，在对话框中通过自然语言完成各类任务

3.2.4 Cursor

Cursor 是一款性价比很高，综合性能优秀的AI全能助手工具，最早是以高效的AI编程工具进入大家的视野，成熟稳定，经过了市场的考验。

Cursor是一个类VSCode的智能编程IDE，集成了GPT-4、Claude3.5等先进大语言模型(LLM)，本质上是一个内置AI助手的VSCode。它不仅支持自然语言编程，还提供从代码编写、调试、重构到部署的智能辅助。你可以像和人交流一样与AI协作，大幅提升开发效率和代码质量。官网：https://cursor.com/

Cursor 主要包括如下核心特点：

• AI原生设计:

  • 从底层架构就融入了AI能力，而非后期添加的插件智能代码生成:通过自然语言描述快速生成代码片段

• 上下文感知:

  • 深度理解项目结构和代码关系

• 实时协助:

  • 在编程过程中提供即时的建议和优化

• 多模型支持:

  • 集成了多种先进的大语言模型

接下来，本文选择Cursor 作为AI编程工具为例进行演示说明，上述任何一种你都可以选择使用。

四、项目实战过程

接下来通过一个实际项目案例，演示一个项目从需求整理到产品文档，编码开发，到最终使用的完整过程，也就是Vibe Coding的完整效果。

4.1 需求调研阶段

模拟实际的项目开发过程，第一步就是先要把自己要做的需求搞明白，比如你做的这个软件界面长什么样，有哪些功能，交互大概是什么样，给哪些人用等等，只有理清楚了需求，才能支撑后续的编码开发，但是在当下这个AI时代，可能有人会说，我只是一个普通人，不知道怎么梳理需求，也不知道需求文档长什么样，没关系，找AI帮忙就可以了，下面是几个具体可以帮你完成需求调研的思路。

4.1.1 找对标的软件或网站

比如你要做一个类似淘宝这样的电商网站，或者在网上看到一个效果比较好的软件，只需要将这个网站的链接丢给AI工具即可，，比如我想做一个类似DeepSeek这样的网站效果，拿到网页地址，附上下面这句提示词即可：

参考这个网站：https://www.deepseek.com/，帮我做一个类似的网页

4.1.2 通过自然语言生成需求文档

更通用的做法如下：

• 列出功能点

  • 比如我要做一个员工管理系统，这个系统中需要包含哪些功能点

    • 员工信息的增删改查

    • 员工管理个人账户信息

• 将功能点整理好之后丢给AI，让AI为我整理出一份需求文档

• 对整理出来的需求文档进行审查，完善

• 下载整理好的需求文档，作为后续指导AI编程的需求说明书

4.1.3 通过截图+自然语言生成需求文档

如果你对如何通过自然语言描述得到需求文档还不是很熟悉，可以将一些现有的功能参考截图丢给AI，然后跟AI说：

我想要这些图中的功能，帮我出一份需求说明文档

4.2 生成需求文档

接下来，我们通过自然语言的方式来整理需求文档，本次我要做的项目案例是，做一个员工管理系统，包括完整的前后台，首先，我整理了一份自己的需求功能清单，如下：

我要做一个员工管理系统，第一版主要包括下面的功能：
1、员工列表展示
2、从列表中可以点进去看到员工详细信息
3、员工在职和离职管理
4、能够分配员工的组织机构
5、能够管理员工的考勤

这一个需求清单直接丢给AI编程工具当然是不够严谨的，首先找一个AI工具将这份功能清单转为标准的需求文档，这样的AI工具目前市面上非常多，比如QClaw ，WorkBuddy，龙虾，以及上面的几种AI编程工具都可以，我以Cursor为例说明，将下面的提示词投递给AI

我要做一个员工管理系统，第一版主要包括下面的功能：
1、员工列表展示
2、从列表中可以点进去看到员工详细信息
3、员工在职和离职管理
4、能够分配员工的组织机构
5、能够管理员工的考勤

基于上面的需求描述，为我生成需求文档

然后等待AI的响应

AI很聪明，会通过问询的方式，引导你进一步澄清需求

需求全部澄清之后，AI给出了一份具体可行的编写方案

再次确定后，开始生成需求文档，可以看到，AI会调用本地上面安装的python环境，编写python程序来生成需求文档

最终按照上面已经确定的方案，生成了一份需求设计文档

4.3 规划开发设计方案

有了需求文档，相当于是有了一份做菜的说明书，但是同一道菜做的好不好吃，不同的人做出来的口味却大不相同，这中间很重要的一点就是做菜的经验，工具，配料等，所以在正式开始编程之前，还需要进一步让AI出一个开发计划，或者叫开发设计方案，有了设计方案，AI才不会天马行空，任意发挥，最终开发出来的功能更符合我们的要求，开发方案主要包括下面几点：

如果你对规划设计方案仍然不明白，直接将下面这句话丢给AI，让AI给出出一个开发方案的设计参考

基于上面的需求文档，出一个开发设计方案，用于指导接下来的编码开发

如下，我将提示词丢给AI，让AI生成开发方案

通过中间的日志输出可以看到，AI会自动检查本地的开发环境，它检测到我本地安装了前端开发需要的Node 环境，以及服务端的开发环境 Python 和 Java环境，最后给出了一个自己的选择

不过这里，我不太认同AI选择的技术栈，它给出的全套方案是基于Node 开发，我希望是前后端分离，前端使用vue，后端使用python语言，所以修正开发方案设计

采用前后端分离的模式，前端使用 vue3，后端使用python 语言，重新规划设计方案

然后输入进去，让AI重新生成开发方案

经过一段时间的重新规划之后，生成了最终的开发设计方案

4.4 编程开发

一般来说，AI生成了开发设计方案之后，如果你对编程技术有一定的掌握，最好再审核一下设计方案，毕竟AI做的东西也有遗漏的地方，这里我们基于上面生成好的开发方案开始编码。

按照上面的开发设计方案开始编码

可以看到，AI会自动将开发计划形成任务拆解分模块开发，这也是符合实际软件工程师的编码习惯的

经过一段时间的等待之后，生成了前后端的项目，并且在当前的编辑器区域预览出来页面效果

按照给出的页面访问地址，在浏览器点击进去看看效果

尽管页面效果看起来有些简单，但是基本功能都是符合要求的

4.5 功能测试与验收

在实际项目开发推进过程中，功能做出来之后，接下来就是要做功能集成测试，功能验收了，测试过程中，如果哪些不符合要求，可以对AI提要求，让AI继续调整，比如以登录界面来说，我觉得界面太简陋了，让它调整下页面的效果

经过AI对话调整需求，最终登录页面得到的效果如下

如果你在测试功能过程中，发现问题或者交互、样式上有不满意的地方，也可以参考我上面的这种做法，通过自然语言的对话，让AI不断地调整完善，最终达到可以交付使用的效果。

五、写在文末

本文通过较大的篇幅详细介绍了Vibe Coding 的完整案例演示，有兴趣的同学还可以继续本文演示的案例也做一个自己的互联网项目，本篇到此结束，感谢观看。