前言

试想这样的场景：凌晨一点，你只是个毫无编程基础的普通人，却突然萌生搭建个人网站的念头。没有懂技术的朋友相助，也无力雇佣专业开发者，手边仅有一台电脑和键盘上敲出的零星关键词。这时，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，选择适合电脑系统的安装包进行下载。

登录后，可在此处下载中文插件，安装后重启软件即可支持中文。

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

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

• 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 表示需要自行提供密钥（可以忽略，或者理解为后缀带 BYOK 的模型无法直接使用）。

这里我以免费模型为例进行演示。建议你们在实际使用时优先选择我推荐的模型，否则可能需要花费整晚时间调试代码，甚至无法解决问题。

可以看到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