𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗪𝗲𝗯 𝗔𝗽𝗽

I am a writer, not a coder. My technical skills stopped at basic HTML in 1999.

Last week, I built my first real tool. I used Claude to "vibe code" a working photo booth web app for MLH.

Here is how a non-coder built a functional app for live events.

𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH runs many events. We needed a browser-based photo booth.

  • Attendees open a link on their phones.
  • They snap a selfie or upload a photo.
  • They add a branded frame.
  • They save the photo to their camera roll.
  • No accounts. No app stores. Just a link.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 I wanted to use a complex framework. Claude talked me out of it.

For live events, fewer moving parts win. I built the entire tool in one single index.html file. It uses HTML, CSS, and JavaScript. There is no complex build step. It stays on GitHub Pages for free.

𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 I used an HTML canvas to combine the photo and the frame. All processing happens in the user browser. The photo never uploads to a server. This makes it private and secure for attendees.

𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 A static site can still have a backend. I used Supabase for storage.

  • Organizers upload frames to a Supabase bucket.
  • Attendees view those frames through the site.
  • Security lives in database policies, not hidden passwords.

𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Vibe coding helps with architecture, but you must watch for operational details:

  • Databases sleep. I learned to wake up my Supabase project the day before an event.
  • Image security. I had to add a specific line of code to allow the canvas to use remote images.
  • User experience. On phones, a "download" is hard to find. I changed the code to use the native mobile share sheet. This sends the photo straight to the camera roll.

𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂

  1. Pick a project with hard boundaries. A photo booth is a finish line. A social app is not.
  2. Ask the AI "why." The reasoning is more important than the code.
  3. Read the diffs. Do not let the AI change your site without your review.
  4. Own the decisions. The AI handles syntax, but you handle the constraints.

Vibe coding is not about skipping the work. It is about focusing on the right problems.

氛围编程入门：我是如何使用 Claude 构建一个可运行的照片亭 Web 应用的

你听说过“氛围编程”（Vibe Coding）吗？

如果你最近关注 AI 开发领域，你可能已经听到了这个词。它并不是一种新的编程语言，也不是一种新的框架。相反，它代表了一种全新的开发范式：你不再专注于编写每一行语法、处理每一个分号或调试每一个逻辑错误，而是专注于描述你想要实现的“感觉”（vibe）、意图和最终结果，然后让 AI 来完成繁琐的实现工作。

简单来说，你负责“氛围”，AI 负责“代码”。

为了测试这种方法，我决定尝试构建一个完全由 AI 驱动的项目：一个功能齐全的照片亭（Photo Booth）Web 应用。我没有写一行代码，我只用了 Claude。

什么是氛围编程？

在传统的编程中，如果你想创建一个照片亭应用，你需要：

  1. 学习 HTML/CSS 来构建界面。
  2. 学习 JavaScript 来调用摄像头。
  3. 处理复杂的图像处理逻辑。
  4. 调试各种浏览器兼容性问题。

而在“氛围编程”中，你的角色更像是一个导演或产品经理。你向 AI 描述你想要的体验：“我想要一个复古风格的照片亭，背景是霓虹灯感，用户可以点击按钮拍照，然后应用会自动给照片加上复古滤镜，最后允许用户下载。”

你通过不断的对话、反馈和调整来“引导”AI，直到最终的产物符合你心中的“氛围”。

我的项目：照片亭 Web 应用

我的目标是创建一个简单的单页 Web 应用，用户可以通过浏览器：

  • 实时看到摄像头的预览。
  • 点击“拍照”按钮。
  • 自动应用一个有趣的滤镜。
  • 下载保存照片。

我选择了 Claude 3.5 Sonnet，因为它在处理前端逻辑和视觉审美方面表现得非常出色。

开发过程

第一步：设定“氛围”

我并没有从“请写一个 HTML 文件”这种枯燥的指令开始。相反，我直接描述了我的愿景。

我的初始提示词（Prompt）：

“我想构建一个现代、极简主义风格的照片亭 Web 应用。它应该看起来非常酷，有点像那种高端时尚杂志的风格。用户应该能看到摄像头的实时预览，点击一个大大的、有设计感的按钮进行拍照。拍照后，照片应该立即应用一个黑白高对比度的滤镜，并显示一个‘下载照片’的选项。请使用 HTML、CSS 和 JavaScript，并将所有代码放在一个文件中，方便我直接运行。”

结果： Claude 几乎瞬间生成了一个完整的、可以直接运行的代码文件。它不仅实现了功能，甚至还为按钮添加了平滑的过渡动画，并使用了非常优雅的字体。

第二步：迭代与调试

“氛围编程”的核心在于迭代。当第一个版本出来后，我发现它虽然看起来很棒，但有些细节不够完美。

我没有去检查代码里的 addEventListener 是否写对了，我只是告诉 Claude：

“这看起来很棒！但按钮的点击感不够强。能不能让它在点击时有一个稍微缩小的动画效果？另外，滤镜现在太生硬了，能不能让它看起来更柔和一点，带一点颗粒感？”

Claude 的反应： 它立即修改了 CSS 动画逻辑，并引入了简单的 Canvas 滤镜处理，增加了“颗粒感”的效果。

如果遇到了错误（比如摄像头权限被拒绝），我不会去翻文档，我会直接把错误信息丢给它：

“嘿，当我尝试打开摄像头时，浏览器报错了，提示权限问题。你能帮我检查一下代码并告诉我如何修复吗？”

它会迅速定位到权限请求的代码行，并提供修复方案。

第三步：添加高级功能

一旦基础“氛围”定型，我就可以开始添加更复杂的功能了。

“现在，我想增加一个‘连拍’功能。用户点击‘连拍’后，应用应该自动拍摄三张照片，每张之间间隔两秒，最后把这三张照片拼成一张长条形的胶卷照片。”

这涉及到了复杂的逻辑：定时器、Canvas 图像拼接、以及状态管理。对于人类开发者来说，这可能需要写几十行逻辑代码并进行反复测试，但对于 Claude 来说，这只是它“理解意图”后的又一次实现。

学习到的经验教训

通过这次体验，我意识到“氛围编程”并不是魔法，它对开发者提出了新的要求：

  1. 沟通能力至关重要：你描述得越模糊，AI 生成的结果就越平庸。如果你想要“高级感”，你得学会描述什么是“高级感”（例如：极简主义、大量的留白、特定的配色方案）。
  2. 批判性思维：AI 会犯错。虽然你不需要写代码，但你需要具备“审美”和“逻辑判断”能力，能够一眼看出 AI 生成的东西是否符合预期，或者是否在逻辑上存在漏洞。
  3. 从“编写者”转变为“策展人”：你的工作不再是创造像素，而是从 AI 生成的多个选项中挑选、组合并优化出最符合你愿景的方案。

总结

“氛围编程”正在降低创造力的门槛。它让那些有绝佳创意但缺乏深厚编程背景的人，能够通过“描述意图”来将想法变为现实。

我构建的这个照片亭应用不仅是一个功能性的工具，它更像是我与 AI 共同完成的一件艺术品。在这个时代，编程的本质正在从“如何实现”（How）转向“实现什么”（What）。

你准备好开始你的“氛围编程”之旅了吗？