We share our vibe-coded websites | The Vergecast

以下是内容的中文翻译： 最新一期的 VergeCast 节目回顾了“氛围编程挑战”，主持人 David Pierce 和他的同事 Jake Castronakis、Hayden Field 用了一个月的时间，利用 AI 编程工具开发网站，以解决个人问题。虽然 David 对他的作品“自豪得有些不合情理”，但他的同事们却分享了更多令人沮丧的经历。 在深入探讨挑战之前，David 播报了 2026 年 8 月 10 日的“Verge 90 秒新闻快报”： * Mark Zuckerberg 发表了一篇 6500 字的关于 AI 未来发展的宣言，主张政府监管而非禁止外国模型。他强调“创新而非自动化”是超级智能最伟大的贡献。 * 应用商店领域传来大新闻：Aptoid，首个非谷歌的安卓应用商店（专注于游戏），现已在 Play Store 上架。此举是在与 Epic（《堡垒之夜》创作者）进行法律诉讼之后发生的，标志着应用经济的一次重大转变，也反映了与苹果和 iOS 持续进行的斗争。 * Verge 撰稿人 Georgiana Torbit 报道了 Reflect Orbital 公司，该公司获得了 FCC 批准，将发射一颗“镜面卫星”，旨在将阳光反射到地球上，用于照明或太阳能发电。虽然目前只有一颗卫星，但 Reflect 公司的目标是 5 万颗，这引起了天文学家对光污染和科学观测的担忧。 **氛围编程挑战进展汇报** Jake 和 Hayden 都将他们的经历描述为远非“有趣和充实”，经常对着 AI“大声怒吼”。他们发现这些工具会自主尝试做太多事情，经常“走错了方向”。 **Jake 的项目：“农产品共享分享”（Farm Share Share）** Jake 旨在解决他从农产品共享（CSA）中收到过多不想要蔬菜的问题，特别是“每周都有蒲公英叶”。他设想了一个网站，朋友们可以在上面认领他多余的农产品。 * **使用工具：** 从 Claude Code 切换到 Codex（OpenAI 的编程 AI）。 * **体验：** 他形容使用 Codex “糟糕透顶”。他不得不不断开启新的聊天线程，因为 Codex 经常遇到访问问题或“放弃”，声称无法继续。 * **设计：** 最初的标志概念变得“写实”且“俗气”，最终 Jake 选择了极简的几何设计，看起来像“斑点和线条”。 * **功能：** 该网站具有“好友密码”登录功能（Jake 指出这是 AI 生成的文本），显示可供朋友“认领”的蔬菜。一个所谓的通知系统应该在物品被认领时提醒 Jake，但他尚未测试。 * **重大挫折：** Jake 无法发布该网站。尽管 ChatGPT 本身建议使用“ChatGPT Sites”插件进行发布，但 Codex 始终无法与其配合使用，并声称存在权限问题。Jake 总结说，该网站目前只有他自己才能使用。 **Hayden 的项目：个人作品集网站** Hayden 的目标是更新她 2022 年的“令人尴尬的”个人网站。 * **使用工具：** 从 Claude Free 开始（觉得它“丑得要命”，并且很快用完了 tokens），然后切换到 Gemini，Gemini 成为她的主要工具。 * **体验：** 她发现这个过程令人沮丧，导致她对着 Gemini“大声怒吼”。 * **设计：** 她要求一个“时尚”的网站，带有“九十年代彩蛋元素”。Gemini 提供了一个“九十年代模式”，配色方案为青色和粉色，并带有一个粗大、会发光的星形光标。 * **挑战：** Gemini 在简单的设计请求上表现不佳，例如“云朵形状”的按钮，它生成了“疯狂的、不合理的切口”。讽刺的是，它却完美地做了一个更复杂的 90 年代风格按钮。Hayden 还发现 Gemini 很难抓取她已发表的文章，迫使她从“29 页作品”中手动整理链接。此外，Gemini 的“指导方针”阻止它嵌入 YouTube 视频，即使是来自 The Verge 的视频也不行，尽管嵌入代码随时可用。 * **发布：** 她使用 GitHub Pages 和她现有的域名成功发布了网站，放弃了 Wix。 **David 的项目：安全照片分享和通讯档案** David 使用 Claude Code 构建了两个项目。 * **项目 1：家庭照片分享网站** * **问题：** 与家人分享年幼孩子照片效率低下，导致笨重的 Google 相册专辑或需要滚动浏览相机胶卷。 * **解决方案：** 一个安全、直接的照片和视频网格。 * **安全性：** 这是最重要的。Claude Code 实现了管理员/用户密码，为每个家庭成员提供了可撤销的“魔术链接”（类似于 Google Docs 的分享方式），访问日志，以及 Cloudflare 集成。 * **关键发现：** Claude Code 在未经要求的情况下，作为安全措施*自动剥离了上传照片中的 EXIF 数据*。这最初阻止了按“拍摄日期”对照片进行排序。David 不得不重新设计系统，先提取 EXIF 日期，然后再剥离其余元数据。 * **功能：** 支持拖放上传、用于从 iPhone 相机胶卷快速分享的 Apple 快捷方式、按添加日期或拍摄日期排序、视频上传（缩略图不完善）以及用于轻松备份的“全部下载”按钮。 * **评估：** David 发现这个项目完美地解决了他的问题，并且功能强大到他考虑将其出售。 * **项目 2（附加）：“Installer 档案”** * **问题：** 他的每周“Installer”通讯中包含的大量链接没有可搜索、可排序的档案。 * **解决方案：** 一个归档了 136 期通讯中 5997 个链接的网站。 * **功能：** 一个分类和标签不完善的列表，具有搜索功能（例如搜索“Obsidian”或“电影”），并链接到 TMDB 等外部数据库。所有分类和链接都是自动完成的。 * **挑战：** 该项目在一周内消耗了“4000 亿个 token”，由于 AI 需要理解上下文并将链接与外部数据匹配，因此需要大量的迭代和 token 使用。 * **评估：** 尽管存在缺陷，David 发现它对于他的个人需求来说“极其有用”。 **总体总结** 三位主持人总结道，AI 编程工具在构建解决个人问题的*个人*工具方面表现出色。然而，他们强调，从这样一个功能性的个人原型到一款精良、安全、用户友好且可扩展的商业产品之间存在着“巨大”且“令人难以置信的艰巨”的差距。这种差距需要扎实的干净代码、安全性、用户体验和扩展性方面的额外技能，而这些是 AI 目前无法自主提供的。他们还指出，AI 倾向于设置不合逻辑的防护措施或拒绝执行基本任务，这往往导致用户沮丧，并促使他们转向与聊天机器人进行更直接、更强硬的互动。

The latest episode of the VergeCast revisited the "Vibe Coding Challenge," where host David Pierce and colleagues Jake Castronakis and Hayden Field spent a month using AI coding tools to develop websites addressing personal problems. While David was "unreasonably proud" of his creations, his colleagues recounted more frustrating experiences. Before diving into the challenge, David provided "90 Seconds on The Verge" news updates for August 10th, 2026: * Mark Zuckerberg published a 6,500-word manifesto on AI's future, favoring government oversight without banning foreign models. He highlighted "invention, not automation" as superintelligence's greatest contribution. * Big news in the App Store world: Aptoid, the first non-Google Android App Store (focused on games), is now available in the Play Store. This follows legal battles with Epic (Fortnite creator) and signifies a major shift in the app economy, mirroring an ongoing fight with Apple and iOS. * Verge contributor Georgiana Torbit reported on Reflect Orbital, a company that won FCC approval to launch a "mirror satellite" designed to reflect sunlight onto Earth for light or solar power. While currently one satellite, Reflect aims for 50,000, raising concerns among astronomers about light pollution and scientific observation. **The Vibe Coding Challenge Check-in** Jake and Hayden both described their experiences as far from "fun and fulfilling," often involving "all caps yelling" at the AI. They found the tools autonomously tried to do too much, often going down "the wrong road." **Jake's Project: "Farm Share Share"** Jake aimed to solve the problem of receiving too many unwanted vegetables from his farm share (CSA), particularly "dandelion greens every week." He envisioned a website where friends could claim his excess produce. * **Tools Used:** Switched from Claude Code to Codex (OpenAI's coding AI). * **Experience:** Described using Codex as "horrible." He constantly had to start new chat threads because Codex would frequently encounter access issues or "give up," stating it couldn't proceed. * **Design:** The initial logo concept went "photo realistic" and "tacky," leading to a minimalist, geometric design that Jake ultimately settled for, resembling "blobs and lines." * **Functionality:** The site features a "friend passcode" login (which Jake noted was AI-generated copy), displaying available veggies for friends to "claim." An alleged notification system is supposed to alert Jake when items are claimed, but he hasn't tested it. * **Major Setback:** Jake couldn't publish the website. Despite ChatGPT itself suggesting the "ChatGPT Sites" plugin for publishing, Codex consistently failed to work with it, citing permission issues. Jake concluded that the site is currently only functional for him. **Hayden's Project: Personal Portfolio Website** Hayden's goal was to update her "embarrassing" personal website from 2022. * **Tools Used:** Started with Claude Free (found it "horribly ugly" and quickly ran out of tokens), then switched to Gemini, which became her primary tool. * **Experience:** Found the process frustrating, leading to moments of "yelling in all caps" at Gemini. * **Design:** Requested a "sleek" site with "nineties, like Easter egg elements." Gemini delivered a "Nineties Mode" with a teal and pink color scheme and a chunky, star-emitting cursor. * **Challenges:** Gemini struggled with simple design requests, like a "cloud-shaped" button, producing "crazy cutouts insane" results. Ironically, it nailed a more complex 90s-style button. Hayden also faced significant difficulty with Gemini scraping her published articles, forcing her to manually compile links from "29 pages of pieces." Additionally, Gemini's "guidelines" prevented it from embedding YouTube videos, even from The Verge, despite embed codes being readily available. * **Publishing:** Successfully published her site using GitHub Pages and her existing domain, moving away from Wix. **David's Projects: Secure Photo Sharing & Newsletter Archive** David, using Claude Code, built two projects. * **Project 1: Family Photo Sharing Site** * **Problem:** Inefficiently sharing photos of his young children with family, leading to cumbersome Google Photos albums or camera roll scrolling. * **Solution:** A secure, straightforward grid of photos and videos. * **Security:** This was paramount. Claude Code implemented admin/user passwords, revocable "magic links" for individual family members (like Google Docs sharing), access logs, and Cloudflare integration. * **Key Learning:** Claude Code *automatically stripped EXIF data* from uploaded photos as a security measure without being asked. This initially prevented sorting photos by "date taken." David had to re-engineer the system to first extract the EXIF date, then strip the rest of the metadata. * **Functionality:** Supports drag-and-drop uploads, an Apple Shortcut for quick sharing from an iPhone camera roll, sorting by date added or date taken, video uploads (with imperfect thumbnails), and a "download all" button for easy backups. * **Assessment:** David found this project perfectly solved his problem and was functional enough that he considered selling it. * **Project 2 (Bonus): "Installer Archive"** * **Problem:** No searchable, sortable archive of the numerous links featured in his weekly "Installer" newsletter. * **Solution:** A website archiving 5,997 links from 136 newsletter issues. * **Functionality:** Imperfectly sorted and categorized list with tags, a search function (e.g., for "Obsidian" or "movies"), and links to external databases like TMDB. All categorization and linking were automatic. * **Challenges:** The project consumed "400,000 billion tokens" over a week, requiring extensive iteration and token usage due to the AI's need to understand context and match links to external data. * **Assessment:** Despite its imperfections, David found it "incredibly useful" for his personal needs. **Overall Takeaways** All three hosts concluded that AI coding tools are exceptionally good for building *personal* tools that solve individual problems. However, they highlighted a "vast" and "unbelievably daunting" gap between such a functional personal prototype and a polished, secure, user-friendly, and scalable commercial product. This gap requires significant additional skills in clean code, security, user experience, and scaling that AI currently cannot autonomously provide. They also noted the AI's tendency to implement illogical guardrails or refuse basic tasks, often leading to user frustration and a shift towards more direct, demanding interaction with the chatbots.