9 个 Vibe Coding 示例：可用于增长网站流量的 AI 应用

Vibe Coding 示例分析与指标

以下内容均由 Ahrefs 团队借助 Agent A 打造，另附几个用 vibe coding 做出的示例。本文将介绍做 vibe coding 需要具备什么，以及九款可立即安装的预置应用。

如果你一直在寻找超越聊天机器人和“帮我总结这个 PDF”这类演示的 vibe coding 案例，这里正好有相关内容，还有一份关于构建 AI 智能体的实际记录。

以下所有内容都由 Ahrefs 团队通过 Agent A 构建——另外还有几个我自己用 vibe coding 做出来的示例。

下面就来介绍做 vibe coding 需要具备什么，以及九款你今天就能安装的预置应用。

任何人都能用 vibe coding 做出应用。这就是证据。

在 Slack 上，我们有一个叫 Feature Suggestions 的频道，大家会在里面丢想法和想要的功能清单。

我是那里的常客。

下面就是我在问，能不能把提示词（prompt）与真实的 AI 流量关联起来，用在 Brand Radar 和 Web Analytics 里。

讨论在 BR 和 WA 工具中原生展示 AI 流量数据与提示词的 Slack 消息。

我是一名几乎没有编程经验的营销人——除非把我在 2008 年前后复制到 MySpace 页面的那段 HTML 也算上。

在我们刚开始用自家 AI 智能体平台做内部试用（dogfooding）时，我就一直在摆弄 Lovable，那时我已经迷上了 vibe coding。

但 Agent A 是我第一个能让我亲手去实现自己那些“大想法”的环境。

只有我、一个对话框，以及底下毫无限制的 Ahrefs 数据访问权限。

回到我自己提的那个功能建议：是的，我成功把 AI 提示词和真实的 AI 流量关联了起来。

一个“AI Prompt Traffic Monitor（AI 提示词流量监控器）”仪表盘，按 URL 展示提示词。已应用时间范围和地区等筛选条件。URL 中包含提示词和“Low CTR（低点击率）”标签。

而且我还能够对比 AI 流量与引用趋势……

一个仪表盘，展示 AI Prompt Traffic Monitor，包含引用量与 AI 会话随时间变化的图表，以及被引用最多的 URL 表格。

我用下面这个提示词，真的只花了 15 分钟就搭建出了这个应用的核心部分……

如果这都不能证明几乎任何人都能做 vibe coding，那我真不知道还有什么能证明了。

9 个 vibe coding 示例：我们打造、你确实能用的应用

Vibe coding——用大白话描述你想要什么来构建软件——之所以可行，是因为一批新工具能够把这些描述转化成可用的应用。

每款工具适合不同的任务和技能水平；下面来看看主要选项之间如何比较。

Vibe coding 应用

Agent A 内置了大量即插即用的应用，都是由 Ahrefs 团队用 vibe coding 为你做好的。

每一个都是一款控制台应用（一个运行在你工作区右侧面板里的 Flask 应用），并接入了特定的营销或 SEO 工作流。

一个由九张应用卡片组成的网格，每张都包含截图和标题。应用包括 Blog Freshness、Competitor Feed 和 Thumbnail Generator。

下面你可以看到，按每位亲手交付它的营销人的说法，这些 vibe coding 示例各自能做什么。

1. Blog Freshness — 由 Ryan Law 打造

这个应用会告诉你哪些博客正在悄悄流失最多流量，方便你优先安排更新，及时止损。

Ryan Law（Ahrefs）关于新内容新鲜度工具的 LinkedIn 帖子，附有其功能的截图。

它如何帮到你

Blog Freshness 会标记出正在衰退的内容，让你能决定下一步怎么做：

在同一个看板里并排追踪多个博客
为任意博客给出 0–100 的内容新鲜度评分
看清哪些文章需要紧急更新，哪些仍在发挥作用
深入任意博客做全面审计：平均年龄、流量衰退、最老的 10 篇文章
最多将 3 个博客与竞争对手逐一对比
导出按可挽回预估流量排序的更新优先清单

看板视图是你的起点。你追踪的每个博客都会一目了然地显示新鲜度评分、状态（Aging／Stale／Good）以及“平均年龄”。

Blog Freshness — 新的多博客仪表盘，包含六个博客（ahrefs.com/blog 58 Aging、bloggerjet.com 48 Aging、moz.com/blog 20 Stale、semrush.com/blog 47 Aging、seranking.com/blog 77 Good、spyfu.com/blog 62 Good），每个都带有新鲜度仪表、新鲜/陈旧条形、紧急刷新提示和文章数量

“Compare blogs”（对比博客）视图会将你的新鲜度画像与直接竞争对手对标，逐项指标用条形图呈现，包括“总文章数”和“单篇平均流量”的统计。

例如，下面可以看到 Ahrefs 发布的内容量大约只有 Moz 的一半，但每篇文章平均带来 251 次访问，而 Moz 只有 62 次。

Blog Freshness — compare-blogs 视图，堆叠展示 ahrefs.com/blog（58 Aging）、moz.com/blog（20 Stale）和 semrush.com/blog（47 Aging），并附有对比条，用于比较新鲜度评分、文章总数、距上次更新的平均/中位天数、1 年以内内容占比、内容欠账、自然流量、每篇文章流量和高优先级以上更新

而“Update priority”（更新优先级）标签页会把你发布过的每篇文章按“更新后大概能挽回多少流量”排序，这样你就不用盯着 CMS 靠直觉做决定，而是有一份待办队列可以逐一处理。

Blog Freshness — ahrefs.com/blog 的更新优先级表格，含 1,037 篇文章，按可恢复流量排序。靠前的行：'How to Set up Google Alerts'（−1.6K，−100%）、'21 Proven Ways to Drive Traffic to Your Website'（−1.8K，−99.8%）、'High-Ticket Affiliate Marketing'（−2.6K，−95.9%）等。列包括：Author、Updated、Trend sparkline、Peak、Current、Δ Traffic、Decline %

Ryan 为什么用这种方式做 vibe coding

Ryan 是 Ahrefs 的内容总监，多年来一直目睹内容团队反复问同一个问题：“我该先更新哪些文章？”

这是个价值百万美元的问题，所以他着手用一个基于 Ahrefs 自然流量数据构建的 AI 应用来回答它。

他在 Content Marketing Institute 的一场网络研讨会上简单提了一句之后，他的私信就被大量类似消息淹没了……

Blog Freshness 就这样成了 Agent A 里最早的一批即插即用应用之一。

在 Agent A 中安装 Blog Freshness

2. Marketing Inbox — 由 Glen Allsopp 打造

这里就是你每一个“我该写写这个”的想法落脚的地方，一直待着，直到它真正准备好变成点什么。

它如何帮到你

Marketing Inbox 本质上就是一个存放想法的第二大脑：

把任何营销想法——社交帖子、博客草稿、落地页、项目——集中记录到一个地方
给每个想法打上类型标签，让收件箱保持清爽易浏览
把条目延后（snooze），让主视图在需要处理之前保持“干净”
为需要按计划重现的想法设置从每周到每年的重复节奏
当生活打乱节奏时，把条目标为完成、直接砍掉，或顺延到以后

一张来自 Glen Allsopp 的 Slack 消息截图，描述他在 Agent A 中创建的“Marketing Inbox”工具，用于为博客和社交媒体帖子创意排优先级。消息附带该工具的嵌入图片，看起来像一张带有“Title”“Project”“Status”和“Done”等列的电子表格。

用 Glen 的话说：

我有几十个博客文章和社交媒体帖子的想法，但不是每件事都能成为优先事项……我的“Marketing Inbox”让我把它们写下来、打好标签，在相关的情况下，当它们到了可以行动的时候，会自动重新出现在我的收件箱里。我大多把条目延后，让它们以后再出现，这样主视图就是“干净”的……这个工具只用来放那些有潜力变成更大东西的想法。

大多数想法都死在 Notion 页面或我们发给自己的 Slack 私信里。Marketing Inbox 是一种“强制机制”：每个想法要么被安排上一个节奏和下一步行动，要么就被直接砍掉。

营销收件箱——列表视图，包含创意标题、类型（项目/社交/博客）、频率（标准/每周/每年/每季度/每两周/每月），以及每行的 7/14/30/90/W/M/直到/完成稍后提醒按钮

五月冒出的一个很棒的营销活动想法，说不定真的就适合十一月上线，所以这个收件箱的设计目的就是让这个想法保持存活，又不打乱当下。

Glen 为什么用这种方式做 vibe coding

Glen Allsopp 是一位以系统为基础的营销人。而在一个以系统为基础的世界里，想法需要的是一份计划表，而不是一个文件夹。

一张“Marketing Inbox（营销收件箱）”设置页面截图。它显示品牌选项、页面标题，以及带标签和颜色的条目类型。

默认视图是“干净”的、所有内容都被延后到准备好才出现——这一点正是 Glen 的标志性风格。

自我提醒：绝对不能让 Glen 看到我的 Gmail 收件箱。

在 Agent A 中安装 Marketing Inbox

3. Content Keyword Research — 由 Sam Oh 打造

这个应用做关键词研究的方式，就像你拥有两周时间和无限耐心时才会采用的做法——只不过它只要 20 分钟。

它如何帮到你

Content Keyword Research 把关键词研究中缓慢、单调的部分压缩进一个工作流：

输入一个细分领域，然后走开，让应用去做关键词研究
拉出一份经过筛选、已聚类、按搜索量、KD 和流量潜力排序的关键词清单
为每个关键词即时做出 Go／Maybe／Skip／No 的决定
基于真正的编辑类竞争对手（而不仅仅是高 DR 网站）做竞品差距分析
把这个主题可视化为“枢纽—辐条”式内链地图
一键为任意关键词生成完整的内容简报

用 Sam 的话说：

你输入一个细分领域（比如“coffee”“recipes”“golf”“ai marketing”），大约 20 分钟后就能拿到一份经过完整调研、筛选过的关键词清单，按集群组织好，还能选择生成内容简报。

一个展示“golf”SEO 关键词研究的仪表盘，包含概览、结论细分，以及按种子词划分的关键词产出等部分。

每个关键词都会给出推荐的格式（清单文、操作指南、深度测评）以及一键生成简报的按钮。

过去，关键词研究中“为了决定每个页面该长什么样而在 50 个标签页里打开 50 个 SERP”的那部分工作，现在在一个视图里就替你处理好了。

一张关键词研究工具的截图，展示一张高尔夫相关关键词的表格，含搜索量和意图等指标。

在这九个应用中，“枢纽—辐条”地图这个功能，最接近我最初打开 Agent A 时想亲手打造的那种工具。

一张 SEO 中心-辐射式地图工具的截图，以“Golf Cart”作为支柱页面。它展示相互链接的支撑页面和相关集群。

它把每个集群可视化为一个节点，按搜索量调整节点大小，并在它们之间画出推荐的内链箭头。

点进 Sam 的任意一个集群，它会明确告诉你哪些辐条页面该链接到哪个枢纽页面，以及这个集群该与哪些邻近集群“对话”。

一张“Hub-and-Spoke Map（中心-辐射式地图）”，展示以“Golf Carts（高尔夫球车）”为中心的主题集群，以及相关集群和支撑页面。

Sam 为什么用这种方式做 vibe coding

Sam Oh 泡在 Ahrefs 关键词工具里的时间几乎比任何人都多；你很可能在 Ahrefs 的 YouTube 频道上看过他严谨地讲解这些工具。

这就是他把自己“细分领域 → 筛选关键词 → 集群 → 简报 → 文章”的工作流压缩进一个应用的成果。

他还点出了显而易见的下一步——一个能接收简报并产出草稿的内容写作应用。敬请期待。

在 Agent A 中安装 Content Keyword Research

4. 每月网站表现报告（Monthly Website Performance Report）— 由 Ryan Law 打造

这个应用把月末汇报这套仪式变成一个可分享的单一看板，让你不用再靠一路截图熬过周一上午。

它如何帮到你

每月网站表现报告把经理或客户真正想看的 SEO 指标打包好，以一条可以粘贴到 Slack 里的链接形式交付。

拉取流量、排名和反向链接的环比变化
精确看清哪些页面带来了增长（或下滑）
把看板链接分享给老板、客户或利益相关者，无需重做演示稿
按固定节奏重复运行，让下个月的报告已经完成一半

月度汇报是 SEO 里最普遍不受待见的任务。人人都得做，几乎没人喜欢，而接收方通常也只是匆匆扫一眼。

把制作过程压缩成一个看板，意味着报告能更快完成、也被读得更认真，因为需要费力翻阅的噪音更少了。

一份网站效果报告，显示两张报告卡片。一张是“Acme SaaS blog”，有 81,026 名访客（较上月 +0.5%）；另一张是“Ahrefs Evolve”，较上月 +109.4%。

AI 分析会补充背景，让最重要的数据故事被分享出来。你可以编辑它、补充背景，或者原样保留。

一个网页，展示“Ahrefs blog”的月度效果报告，并附有 AI 生成的内容建议。

然后按你的工作流重新排列小组件，并通过一个公开 URL 分享做好的报告。

Ryan 为什么用这种方式做 vibe coding

这跟 Blog Freshness 是同一种直觉——Ryan 不断注意到内容团队在做的手动、重复的工作，于是把它的工具版做了出来。

他想做出一个能自动整合多个数据源、并生成要点供你向老板汇报的东西。

在 Agent A 中安装 Monthly Website Performance Report

5. SERP Sensor — 由 Ryan Law 打造

这个应用会在你在意的 SERP 发生变化的那一天就告诉你，而不是让你在三周后有人发现流量下滑时才后知后觉。

一个“SERP Volatility Sensor（搜索结果页面波动传感器）”仪表盘，显示 ahrefs.com 的影响较低且搜索结果页面波动正常。

它如何帮到你

SERP Sensor 是一个针对真正影响你业务的 SERP 的每日预警系统。

追踪你关心的域名和关键词的 SERP 波动
为每个被追踪的 SERP 给出每日波动评分
看清在任意一天里你的哪些关键词变化最大
添加多个域名来追踪竞争对手
捕捉你所排名的结果中出现或消失的 SERP 特性

大多数 SERP 变化都是在事发数周后才被注意到，那时流量早已暴跌，讨论的话题变成了“为什么会这样？”，而不是“我们该怎么做？”。

当 SERP 变化当天你就收到提醒，你就能在结果仍然相关时采取行动：改改 meta description、更新一篇文章、检查一下 AI Overview 是否挤占了你占有的某个词，然后调整策略。

你能把波动归因于一次算法更新吗？一个新竞争对手？搜索意图的转变还是 SERP 布局的变化？这正是你可以用这个应用深挖的问题。

Ryan 为什么用这种方式做 vibe coding

Ryan 做这个应用，是因为他意识到 SERP 波动就是那种你必须当天就知道、而不能等下次有空查看时才发现的事情。

在 Agent A 中安装 SERP Sensor

6. Thumbnail Generator — 由 Sam Oh 打造

这个应用接收一个视频标题，大约一分钟内返回三个缩略图方案；可以直接交给设计师，或者如果你本人就是设计师，可以把它当作起点。

它如何帮到你

Thumbnail Generator 把一个半成型的想法变成一份创意简报。

从单个视频标题生成三个各不相同的缩略图方案
阅读每个方案的“为什么有效”说明
取出背后的图像提示词，直接交给设计师
可选地放入一张参考照片，让面部在多个方案中保持一致
想重跑多少次就重跑多少次，直到某个方案让你眼前一亮

用 Sam 的话说：

“我们团队会用它来生成方案找灵感，一旦敲定就发给设计师。对于其他做 YouTube 视频的人来说，它可能也很有用。”

它比直接让大语言模型给你“一个缩略图点子”更好的地方在于，它总会给出三个处于不同情绪基调的方案。

对于标题为“Why I Switched from ChatGPT to Claude”的视频，下面三个方案分别是：一个情绪反应型（Keyword Graveyard Shock）、一个分析型（Before / After SERP Split），以及一个冷静结论型（Action Words Answer）。