前言

试想这样的场景：凌晨一点，你只是个毫无编程基础的普通人，却突然萌生搭建个人网站的念头。没有懂技术的朋友相助，也无力雇佣专业开发者，手边仅有一台电脑和键盘上敲出的零星关键词。这时，AI登场了——它为你自动生成页面框架，智能搭配色彩与字体，甚至能用自然语言直接输出HTML、CSS、JavaScript及后端逻辑代码。短短几分钟后，展现在你眼前的已不再是空白文档，而是一个立即可预览、可交互的网站雏形。

曾几何时，这需要设计师、前端、后端、运维等多个角色的协同配合；如今，AI将这些职能"压缩"进了同一个对话框之中。

正文

1.实战演练

正如前言所说，我萌生了一个想法，我突发奇想想制作一个测试MBTI性格的网站，但是我很多都不懂，那怎么办？拜托！现在已经是2025年了，想要自定义一个网站已经不是难事了，现在把目光转向已经落地的AI软件，例如Windsurf，Cursor，v0.app，Claude Code等等，这里只举例这些比较知名的氛围编码软件，到这你可能就提出疑问了：“氛围编码是什么？”

什么是氛围编码？

氛围编码是一种大量使用大型语言模型 (LLM) 来生成代码的软件开发方法。“氛围编码”这个术语的意思是 AI 辅助编码，它由 OpenAI 联合创始人 Andrej Karpathy 于 2025 年 2 月在 X 社交平台上的一篇帖子中提出：

我把一种新的编码方式称为“氛围编码”，也就是说，让人完全沉浸于氛围，拥抱指数级增长，甚至忘记代码的存在。这可能是因为 LLM（例如Cursor Composer w sonnet）正变得越来越强大...代码越来越长，超出了我通常的理解能力范围，我不得不花一段时间仔细阅读。有时，LLM 无法修复某个错误，我就需要设法解决或要求随机更改，直到它消失为止……对于一次性的周末项目来说，这还不算太糟糕，但仍然相当有趣。

尽管 Karpathy 定义了这个术语，但随着 ChatGPT 和 Copilot 等 LLM 的公开发布，许多开发人员已经开始尝试类似的 AI 辅助方法。

氛围编码的目标是更快速地启动可运行的应用和新功能。过去，编码是一项非常精确的活动；而氛围编码则让开发人员能够向 LLM 提供通用的高级指令，然后 LLM 生成精确指令，包含在可运行的代码中。

一句话概括：
用自然语言告诉 AI 要加什么功能，AI 自动写代码；报错就甩回去，AI 修到跑通为止。

更具体的请查看：什么是氛围编码？

如何使用AI进行氛围编码

1.挑选合适的氛围编码器

我个人是推荐Claude Code+v0.app+Windsurf

2.V0.app

打开 v0 by Vercel (v0.dev)，免费用户每月可获得 5 美元的额度。 在这里，你可以向 AI 描述您的设计需求，AI 将自动进行设计并呈现最终结果。以我的网站为例，可以看到其完成度相当不错。

v0 by Vercel 是一个由 Vercel 开发的生成式 UI 设计工具，它结合了生成式 AI 和前端开发的最佳实践，能够根据自然语言描述生成可复用的 React 代码，并基于 Tailwind CSS 和 Shadcn UI 进行样式和组件设计。 该工具还支持文件解析、任务管理和版本分享等功能，能够帮助开发者和设计师快速构建产品的初版，简化前端开发流程。

同时，你也可以“手动”更改代码。选中输入框中的“Design”，就可以手动选择容器进行更改了。这里以网站标题为例，可以看到左侧会弹出许多输入框，你可以在其中随意调整文字的大小、边距等属性，完全不需要掌握代码。

注意事项

你可以告诉 AI 接下来还要在网站里加什么，但账户里得先有足够的刀乐。v0 按量计费，AI 写多少代码就扣多少钱。

我更推荐用别的氛围编码工具，比如 WindSurf：15 刀套餐，比 v0 的 20 刀套餐便宜，而且按次计费。

3.使用Windsurf进行编程

接下来我们把刚刚在V0做好的，下载ZIP压缩包

然后下载并安装Windsurf，打开Windsurf - The best AI for Coding

选择对应你电脑系统的安装包下载

登陆后可以在此处下载中文插件，然后重启软件就支持中文了

• 接下来我们把刚刚在V0做好的，下载ZIP压缩包

接着这一步，在编程软件中打开解压后的压缩包会得到这些：

📂 根目录文件/文件夹说明

• app/
  这是 Next.js 13/14 的 App Router 目录，放页面文件（page.tsx）、布局文件（layout.tsx）、API routes 等。

• components/
  存放你自己写的 React 组件，例如按钮、表单、卡片等可复用的 UI 组件。

• hooks/
  存放 React 自定义 Hook（比如 useAuth、useTheme、useFetch）。

• lib/
  一般用来放一些工具函数、服务端逻辑、API 封装（例如 lib/db.ts 数据库连接）。

• public/
  Next.js 静态资源目录，放图片、字体、favicon 等。通过 /xxx.png 直接访问。

• styles/
  样式文件目录，比如全局样式 globals.css，Tailwind 配置样式等。

📄 配置文件说明

• .gitignore
  Git 版本管理要忽略的文件（比如 node_modules/、.env）。

• components.json
  UI 库配置文件（ shadcn/ui 或其他组件库的配置）。

• next.config.mjs
  Next.js 的项目配置文件，比如启用图片优化、重写路由、环境变量。

• package.json
  记录依赖包、脚本命令、项目信息。

• pnpm-lock.yaml
  依赖锁文件（ pnpm 包管理器）。确保依赖版本一致。

• postcss.config.mjs
  PostCSS 配置文件（通常配合 TailwindCSS 使用）。

• tsconfig.json
  TypeScript 配置文件，定义编译规则、路径别名等。

4.在本地运行项目

接着我们需要在本地跑起来这个ai写的项目，但是不会这么？那当然是请教AI啦，点击这个图标然后与AI对话


插个小话题，我建议使用这些模型：Claude Sonnet 4 ThinKing，GPT-5（medium），GPT-5-Codex，这些模型后面的x1 x2的意思是消耗的积分是多少倍，Free就是免费的意思，BYOK的意思是你要自己提供Key（这个可以不管，你也可以理解为后缀带BYOK的无法使用），这里我就用免费的模型作为示例，你们在自己用的时候最好是用我推荐的，不然有的时候你可能要盯着模型改一个晚上的bug都可能改不好

可以看到ai让我们去下载node，接下来来到node官网下载node
Node.js — Run JavaScript Everywhere

下载windows安装程序后并运行，依次勾选选项完成安装


然后在终端中验证是否安装（验证前建议重启一次电脑，添加的系统变量才会生效），在此处新建终端


可能会出现以下情况，是因为 PowerShell 的执行策略阻止运行脚本（Windows 默认安全限制）
使用此命令解开就好了

# 只修改当前对话的策略
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

# 永久修改用户策略
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned -Forc

接下来我们使用pnpm安装依赖，并启动，首先安装pnpm，打开cmd运行以下指令

npm install -g pnpm

然后回到我们的终端使用pnpm安装依赖并启动，使用pnpm install安装依赖，然后使用pnpm dev启动项目



然后我们就可以在浏览器中打开http://localhost:3000查看了，可以看到和我们在v0上看见的是一模一样的

5.使用Windsurf增加更多功能

接着我们就可以使用ai帮助我们在网站中增加更多功能了，例如我想让ai吧那个 了解更多 页面做出来，稍后AI会自动读取项目中的文件，然后自行编辑文件，AI有的时候会需要你同意它执行命令


点击Accept All同意AI的修改

出现的问题可以全部复制然后粘贴给ai，让ai自行解决，直到没有出现问题为止

接下来让我们来验收一下AI的结果，看看了解更多页面做的如何

可以看到效果很不错，但是没有跟首页的那个了解按钮链接上，不过简单和ai说一下就可以了

可以看到AI很快就完成我们的要求了

结语

完成开发后，想要部署？如果这章的流量不错的话，我再单独出一篇：讲一下我是怎么部署到服务器上的

总的原则是：先确认现有代码结构能否承载所需功能，再动手开发。AI 并非万能，强行实现超出架构能力的需求，只会让 AI 也束手无策。因此，在新增任何功能前，务必先咨询评估。

给大家看看我完全使用AI做的例子吧，我的这个网站连同首页的视频都是AI做的
网站的介绍，详细可以看此链接：我使用GPT-5开发了一个MBTI性格测试网站 - 资源荟萃 - LINUX DO
点击前往→Aurora MBTI