文科生Vibe Coding实战：一个链接聚合页如何斩获万级流量

一位文科背景的创作者，用Gemini对话式AI完成了人生第一个Vibe Coding作品——一个演唱会座位视角查询网站。功能极其简单，却在小红书获得1.5万浏览、2000+互动。她的经历揭示了一个被很多人忽视的道理：入门Vibe Coding的关键不是技术，而是找到一个足够简单且切中痛点的idea。

什么是Vibe Coding？ 这一概念由AI研究员Andrej Karpathy于2025年初提出，核心理念是「完全沉浸在氛围中，忘掉代码的存在」——开发者用自然语言描述想要的功能，由AI生成全部代码，人类只负责提需求和验收结果。与传统编程的根本区别在于：你不需要理解代码如何运作，只需要知道自己想要什么。这一范式的兴起，背后是大语言模型代码生成能力的质变，使得非技术人员也能通过对话驱动完整的软件开发流程。

一个「链接聚合页」为何能火

这个网站的功能简单到令人意外：一张演唱会场馆的座位图，每个区域设置了可点击的热区按钮，点击后跳转到小红书「AI问一问」的总结链接，用户可以查看该区域的视角照片和网友评价。

本质上，它就是一个链接聚合页。但正是这个看似毫无技术含量的产品，精准击中了演唱会观众的核心痛点——买票前想知道每个座位区看到的实际视角是什么样的。小红书上大量用户会分享各场馆各座位的实拍视角图（称为「视角建设」），但信息分散，查找成本高。这个网站把散落的信息用一张可视化座位图串联起来，体验瞬间提升了一个量级。

值得一提的是，小红书「AI问一问」功能本身已经完成了信息聚合的核心工作——它能自动抓取平台内与特定关键词相关的笔记，通过大语言模型总结归纳，生成结构化答案页面并附带原始引用。这位创作者的聪明之处，在于识别出这个现成的「信息基础设施」，用一张可视化座位图作为导航层叠加在上面，以极低的内容生产成本实现了显著的体验提升。

核心启示：Idea比技术重要一百倍。 哪怕功能再简单，只要切中真实需求，就能获得用户认可。

如何把「不可能」砍成「能做到」

创作者最初的设想远比最终版本复杂得多，她的需求简化过程非常值得学习：

• 第一版构想：点击座位后展示3D VR全景视角 → 技术门槛极高，大公司都难做，果断放弃
• 第二版构想：展示该座位的实拍图片 → 需要自己搜集筛选大量图片，工作量巨大，继续简化
• 第三版构想：直接链接到小红书AI问一问的总结页 → 零内容生产成本，AI已经帮你做好了总结
• 交互简化：原本想做「区域→座位号→视角」的三级导航 → 砍到只保留「区域→视角」一级跳转

每一次简化都遵循同一个原则：以最简单的方式从0到0.1。 先做出来，先跑通流程，先验证想法，再考虑迭代。这种思路对零基础做网站的新手尤其重要。

不需要Cursor，Gemini对话就够了

很多人一听到Vibe Coding就想到Cursor、Claude Code这些专业工具，心理门槛瞬间拉高。但这位创作者全程只用了Google Gemini的对话界面完成AI编程。

Gemini Canvas是Google推出的交互式创作功能，类似于Anthropic Claude的Artifacts。其核心是「所见即所得」的双栏界面：左侧显示AI生成的代码，右侧实时渲染预览效果。你不需要搭建本地开发环境，不需要安装任何软件，只需在浏览器中与AI对话，就能看到网页的真实样子并即时调整。

具体流程非常简单：

1. 在Gemini中用自然语言描述需求：想做什么网站、有什么功能、怎样的交互
2. Gemini通过Canvas功能直接生成代码，左边是代码，右边是实时预览
3. 对效果不满意就继续对话调整
4. 最终把代码复制到文本文件，保存为.html格式
5. 上传到GitHub Pages，免费部署上线

GitHub Pages是微软旗下GitHub平台提供的静态网站托管服务，完全免费。用户只需将HTML等静态文件上传至GitHub仓库，开启Pages功能后即可获得一个公开可访问的网址。对于Vibe Coding新手而言，这是最低门槛的发布渠道：无需购买服务器、无需配置域名、无需了解后端部署，整个上线流程可在10分钟内完成。

不要让想象中的困难成为心理障碍。 很多人（包括创作者自己）一直在收藏教程却从未动手，就是因为觉得那些专业工具「应该很难」。结果发现，日常用的对话AI就能完成Vibe Coding的全部流程。

踩过的坑：需求文档和坐标标注

创作者在实践中走了两段弯路，反而带来了最有价值的经验教训。

弯路一：写PRD需求文档

受一些硅谷博主和技术KOL的影响，她先让AI帮忙生成了一份完整的PRD（产品需求文档），包含版本号、日期、目标用户、背景分析等等。

PRD（Product Requirements Document）是传统软件开发中的标准交付物，用于在产品经理、设计师和工程师之间对齐需求，通常包含功能列表、交互逻辑、验收标准等内容。在AI编程工作流中，部分技术博主推荐先让AI生成PRD再开始编码，理论上可以让AI更好地理解项目全貌——但这套方法论本质上是为复杂的多人协作项目设计的。

对于这种极简项目，PRD完全是多余的。那些博主需要PRD是因为他们在做完整的MVP产品，会用到多个AI工具协作。而对于一个单页HTML网站，PRD引入的结构化开销远大于其带来的价值，反而让新手陷入「准备陷阱」，在真正动手之前就消耗掉大量精力和信心。直接用自然语言描述需求就足够了。

弯路二：手动标注座位坐标

AI生成的PRD要求她提供JSON格式的座位坐标数据。于是她花了一个多小时在各种在线标注工具上手动框选50多个区域、逐一命名。很多工具还要付费，体验极差。

最后她索性放弃标注，直接把需求描述发给Gemini——结果AI自己就能生成带有可点击区域的页面。虽然位置不完全精准，但基本功能已经实现。图片无法通过上传识别，最终通过提供图片的在线URL链接解决了。

核心教训：不要在准备阶段过度投入。 先直接执行，看看最简方案能不能跑通，再决定是否需要那些「准备工作」。很多你以为必须的前置步骤，可能根本不需要。

给Vibe Coding新手的行动清单

基于这次实践，总结出几条对零基础用户最实用的建议：

1. 从自己的兴趣和痛点出发找idea：你了解用户需求，做起来有热情，不容易半途而废
2. 功能砍到不能再砍：一个页面、一个核心功能、没有设计要求，这就是最好的第一个项目
3. 不要被工具吓退：Gemini、ChatGPT等对话AI就能写代码，不必从Cursor入手
4. 先做再说，别过度准备：不写PRD、不标坐标、不做设计稿，直接告诉AI你要什么
5. 快速发布，获取反馈：GitHub Pages免费部署，做完就发，用真实数据验证价值

这位创作者的经历证明，Vibe Coding的门槛已经低到「文科生+Gemini+一个下午」就能产出一个有真实用户价值的产品。真正阻碍大多数人的，从来不是技术，而是迟迟不肯迈出的第一步。

核心要点

• Vibe Coding入门的关键是找到足够简单且切中痛点的idea，而非掌握复杂技术
• 全程仅用Gemini对话AI即可完成网站开发，无需Cursor等专业编程工具
• 功能要反复简化：从3D VR视角→实拍图片→小红书链接聚合，砍到最简可执行方案
• 不要过度准备：PRD文档和坐标标注等前置工作可能完全不必要，先执行再迭代
• 一个仅有单页链接聚合功能的网站，因精准切中演唱会选座痛点获得1.5万浏览量