您可能听说过“氛围编码”这个术语。这是使用人工智能创建软件的一种新思维方式。它是由 Andrej Karpathy 创造的，他将氛围编码描述为“顺应氛围，拥抱指数，甚至忘记代码的存在”。Karpathy 使用人工智能编码助手，他采用“接受一切”的理念，假设人工智能编码助手将编写和修复他正在创建的软件。
虽然这种编码方式听起来很诱人，但考虑到当今的大型语言模型限制（LLM）和整体不断变化的环境，它能产生足够准确的结果吗？你能毫无问题地编写一个完整的应用程序吗？你能让它创建测试吗？它如何处理与设计的不一致？这是一种时尚，还是开发人员应该学习和采用的真正的长期战略？
我也有同样的疑问，所以我决定自己做一个实验。在没有任何先验知识的情况下，我想更新我旧的、坦率地说已经过时的个人博客。
我会进入一个新的、希望是更好看、功能更好的网站。我为自己设定的防护栏是，我不能进入代码并进行任何更改。一切都必须使用提示和编码助手来完成。此外，我会尽力假设我对 Web 开发一无所知。剧透，我违反了第二条规则 - 我们稍后会详细讨论。
如果您想跟随，我制作了一段完整的体验视频！
让我们开始了解如何设置这个实验！
全面披露 – 我是 AWS 的高级开发人员倡导者！
设置
对于这个实验，我使用Amazon Q CLI作为我的编码助手。这个命令行界面 (CLI) 工具将是我的代理，我将提示它创建我的新个人网站。我是 CLI 工具的忠实粉丝，这对我的实验来说非常有效。如果您想跟着做，Q CLI 易于安装并支持多种不同的操作系统，包括我最喜欢的 MacOS、WSL 和 Linux。如果需要，您甚至可以通过 SSH 进行设置。另外，别忘了注册Builder ID，注册是免费的，您需要它才能使用 CLI 登录。
为了加快速度，我使用 Nuxt 3 和 Tailwind CSS 4 创建了一个全新的应用程序。我按照 Nuxt 安装指南中的步骤进行操作，然后选择包含Tailwind CSS 4 的Nuxt UI 安装。我清除了启动文件，并从一个简单的 index.vue 文件开始。
这是我的起点。
值得一提的是，尽管我使用了使用 Vue.js 的 Nuxt，但我几乎可以肯定，使用 React、Angular 甚至 Svelte，这个实验会以同样的方式甚至更好地进行。
建立我的个人网站
我知道，提示应该尽量具体。所以我从最基本的提示开始。
这个提示明确写成是为了生成一个个人网站，带有春天的色彩和动画。然后我列出了我想要的博客、联系我、个人资料图片和个人简介页面。为了保险起见，我补充说我正在使用 Tailwind CSS 4，并且它已经配置好了。虽然没有必要，但我总是尽量礼貌地提出提示，我一定会包括“请”和“谢谢”。
输入提示符并按下回车键后，我注意到 Q CLI 读取了我的目录并总结了它要做什么。很高兴看到事情正在朝着正确的方向发展。
此时，Q CLI 开始创建页面，我开始盲目地接受每个更改的“y”。
值得注意的是，您可以在开始 q chat 时使用 /acceptall 配置或 -a 参数将 Q CLI 设置为接受所有更改。但是，在此示例中，我决定手动接受所有更改。
缺少图片
在我按了几次键盘上的“y”并接受所有更改之后，我注意到bio.vue刚刚创建的页面存在一个小问题。
没问题！我告诉 Q 修复文件，然后一切就继续了！
Nuxt 配置更新
当我继续确认所有更改时，出现一条消息，确认nuxt.config.ts文件有新的更新。
我进行这项实验的目标之一是假设我对 Web 开发一无所知，并盲目地“接受”所有更改。但是，为了节省时间并解决一个明显的问题，当 Q CLI 尝试修改文件时，我停止了它nuxt.config.ts。此文件的主要职责之一是添加模块。Q CLI 想要删除我的nuxt-ui模块，这会破坏应用程序中所有的 Tailwind CSS。
查看输出，我认为 Q CLI 感到困惑，并想添加一些 PostCSS 配置，这些配置在 Tailwind CSS 3 中更常用。为了安全起见，我no在这里输入并提醒 Q CLI 我正在使用一个模块，我不需要这个配置。它继续运行，没有出现问题，也没有更新这个文件。
网站首次迭代
经过几分钟接受更多更改并修复前面提到的小错误后，我的新个人网站出现了！
它包含了我期望的大多数功能，包括特色项目部分。但有一个功能无法使用，那就是博客部分。所以我回去要求它创建它。
几分钟后，它就添加了一个交互式博客。它甚至还添加了分页、标签和搜索功能！
总体而言，它在博客方面做得很好。它为每个页面创建了单独的动态路由，标签过滤和搜索也运行良好。我唯一担心的是一些与移动响应相关的小设计问题。
添加更多更新
我又花了几分钟来清理设计。我让 Q CLI 用 Unsplash 中的图片更新所有占位符图片。然后我让它清理了一些小的视觉问题。这确实让网站看起来更干净一些。
然后我让它使用 git 将更改提交到自己的分支中。拥有一种在提交之间回滚或更改的简单方法非常重要。这样做的额外好处是，Q CLI 开始提交我的所有更改，而无需我在每次更新后询问。
测试
对于您创建的任何软件来说，测试都非常重要。这是确保您在更新代码库时不会破坏任何东西的好方法。在使用 AI 编码助手时，这一点更为重要。通过创建测试，AI 代理可以检查他们的更改是否没有破坏任何东西，以及是否修复了问题。
为了帮助测试这一理念，我要求 Q CLI 对应用程序中的每个页面进行一些简单的测试。几秒钟内，它就安装了 vitest 和 test-utils，并开始为每个页面创建测试。
让我感到惊讶的是，在创建了所有这些测试之后，它们都没有通过。Q CLI 回去做了 3-4 次更改，直到每个测试都通过。令我印象深刻的是，它能够在没有额外提示的情况下自我纠正。之后我快速检查了测试，它们看起来对这个项目来说很好。
结论
目标是让代码充满活力，而这很成功。我能够创建一个专业、美观的个人网站，其中包含博客、联系页面和个人简介。我从来没有亲自修复过代码中的任何内容，而且我能够及时解决发生的所有错误和问题。
话虽如此，如果我对 Web 开发一无所知，那将是一次完全不同的体验。Q CLI 将 Tailwind CSS 3 和 4 混淆了，如果我盲目接受所有更改，就会出现问题。另一方面，我相信我本可以按照自己的方式修复它，只是会花更长的时间。当您阅读本文时，这个问题可能已经修复，但请注意，当您使用最新的库时，您最喜欢的编码助手可能不是最新的。
氛围编码是一种时尚吗？我不这么认为。这是一种完全有效的软件创建方式，随着 LLM 和 AI 编码助手的进步，更正或错误的数量将会减少。氛围编码当然不能替代真正的软件开发人员，我可以想象，当您尝试将氛围编码融入更复杂的应用程序时，它不会那么有效。您总是需要开发人员来帮助解决 LLM 所缺乏的问题。至于我，我将很快用这个新代码更新我的个人网站！在我使用氛围编码后，我会再更新一些。