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

小码农叔叔2026-07-21 11:32

目录

一、前言

[二、Vibe Coding 介绍](#二、Vibe Coding 介绍)

[2.1 什么是Vibe Coding](#2.1 什么是Vibe Coding)

[2.2 Vibe Coding可以做什么](#2.2 Vibe Coding可以做什么)

[2.3 Vibe Coding适用人群](#2.3 Vibe Coding适用人群)

[2.4 Vibe Coding挑战与局限](#2.4 Vibe Coding挑战与局限)

[三、Vibe Coding 环境准备](#三、Vibe Coding 环境准备)

[3.1 搭建本地基础开发环境](#3.1 搭建本地基础开发环境)

[3.1.1 git 本地安装](#3.1.1 git 本地安装)

[3.1.2 注册一个git 账号](#3.1.2 注册一个git 账号)

[3.1.3 安装Node-Js](#3.1.3 安装Node-Js)

[3.1.4 安装Python](#3.1.4 安装Python)

[3.2 AI 编程工具准备](#3.2 AI 编程工具准备)

[3.2.1 Trae（国产）](#3.2.1 Trae（国产）)

[3.2.2 Claude Code](#3.2.2 Claude Code)

[3.2.3 Codex](#3.2.3 Codex)

[3.2.4 Cursor](#3.2.4 Cursor)

四、项目实战过程

[4.1 需求调研阶段](#4.1 需求调研阶段)

[4.1.1 找对标的软件或网站](#4.1.1 找对标的软件或网站)

[4.1.2 通过自然语言生成需求文档](#4.1.2 通过自然语言生成需求文档)

[4.1.3 通过截图+自然语言生成需求文档](#4.1.3 通过截图+自然语言生成需求文档)

[4.2 生成需求文档](#4.2 生成需求文档)

[4.3 规划开发设计方案](#4.3 规划开发设计方案)

[4.4 编程开发](#4.4 编程开发)

[4.5 功能测试与验收](#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的适用人群非常广泛，它打破了"只有专业程序员才能开发软件"的传统壁垒。我把人群分为四大类，你可以对号入座：

  1. 非技术背景的"创意实干家"（最核心人群） 这是Vibe Coding最大的受益群体。他们脑子里有绝妙的点子，但不会写代码。比如产品经理、设计师、创业者、运营人员、在校学生等。他们可以绕过学习语法，直接用自然语言把想法变成可用的原型或工具，快速验证市场。

  2. 追求效率的"专业开发者"（辅助增效人群） 对于程序员，Vibe Coding是个"超级外挂"。它能接手枯燥的样板代码（如CRUD接口）、生成复杂算法，或帮你快速上手一门新语言。程序员可以把精力从"怎么写"释放到"做什么"和"怎么更好"上，去思考架构和系统设计。

  3. 跨领域"超级个体"和极客爱好者 如果你懂一点业务逻辑或设计，Vibe Coding能帮你补齐代码短板。自由职业者、独立开发者、数据分析师、科研人员，可以用它快速写脚本处理数据、制作可视化图表，或开发个人网站，实现"一人公司"的效率。

  4. 想从"零"起步的编程初学者（学习辅助人群） 对新手来说，Vibe Coding是个"7x24小时的一对一私教"。你可以用它来学习代码、解释报错、重构逻辑。但要注意：别让它完全替你做作业，否则你永远学不会调试和设计。它适合用来"辅助理解"，而不是"替代学习"。

重要提醒：

以上四类人都能从中获益，但有一个能力是所有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编程的效率，本次安装的环境主要包括下面几个：

  1. git ，代码管理工具

    1. 如果你开发的软件需要长期维持，持续迭代，则需要一个位置托管你的代码，对普通人来说，省时省力的就是放在github代码仓库中管理

    2. 对你每次更新提交的代码都可以完整的追溯

    3. 还可以将你的代码分享给其他人使用

  2. Node Js，前端开发运行环境

    1. 生成网页交互功能，以及前端包管理的依赖环境

  3. python ，AI工具在执行各种任务的时候，可能会调用python脚本，或者基于python语言开发

    1. 语法简单，容易上手

    2. 社区丰富活跃，遇到问题很容易找到解决方案

    3. 编程效率较高

    4. Vibe Coding 过程中核心开发语言

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 本地安装很简单，基于上述已经安装完成的node-js，在命令行窗口下执行下面的命令即可完成安装

bash 复制代码 
# 安装命令
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这样的网站效果，拿到网页地址，附上下面这句提示词即可：

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

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

更通用的做法如下：

  • 列出功能点

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

      • 员工信息的增删改查

      • 员工管理个人账户信息

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

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

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

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

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

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

4.2 生成需求文档

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

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

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

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

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

然后等待AI的响应

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

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

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

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

4.3 规划开发设计方案

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

  1. 开发本次项目涉及到的技术栈，比如前端用什么语言，后端用什么语言，是否用到数据库等

  2. 是前后端不分离项目，还是采用分离的模式

  3. 采用什么样的技术架构

  4. 是网页版的，还是移动端、小程序等等

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

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

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

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

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

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

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

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

4.4 编程开发

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

bash 复制代码 
按照上面的开发设计方案开始编码

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

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

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

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

4.5 功能测试与验收

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

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

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

五、写在文末

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

相关推荐
hhzz1 天前
飞算Java实战：制造业设备预测性维护与工单闭环系统
vibe coding·飞算javaai·飞算java ai炫技赛
云泽8083 天前
飞算 JavaAI 实战：如何自动化生成全流程追溯系统
运维·自动化·vibe coding·飞算javaai·飞算java ai炫技赛
一战成名9964 天前
一条巡检任务如何安全起降：飞算Java搭建低空无人机调度平台
vibe coding·飞算javaai·飞算java ai炫技赛
七月稻草人5 天前
通过飞算Java智能体协作：把短视频审核、确权与推荐串成一条可追溯的业务链
vibe coding·飞算javaai·飞算java ai炫技赛
承渊政道5 天前
飞算Java炫技赛:Java×Unity数字孪生园区平台的从零落地记录
java·开发语言·unity·技术分享·vibe coding·飞算javaai·飞算java ai炫技赛
AI-Frontiers5 天前
企业级落地方案：Docker 部署 CodeGraph 多项目统一 MCP 网关，附源码
vibe coding
一颗小行星-7 天前
我用AI“ vibe“出了一个小程序的记录和感想
ai·vibe coding
小博测试成长之路8 天前
基于飞算JavaAI，从零落地企业线上培训考核管理系统
人工智能·vibe coding·飞算javaai·飞算java·飞算java ai炫技赛
码哥字节8 天前
11 万 Star 的 Spec Kit，90% 的工程师只用它解决了 10% 的问题
设计模式·vibe coding·github spec kit
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03如何新建文件夹？ 电脑新建文件夹的4种方法04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05AI科技热点日报 | 2026年07月01日06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08【AI前线观察】2026年国产开源大模型全面横评：从 DeepSeek V4 到 Kimi K3，谁才是开发者的最优选择？092026 年 AI 大模型 & AI 编程工具实战全总结102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？