营销人的 Vibe Coding：用 Claude 半天搞定落地页文案 + 3 组 A/B 变体（不用等开发）

那是一个周二下午 4 点 17 分。我们的开发团队正埋头重构结账流程，要到周五才能腾出手。增长组的同事发来消息："我们周一之前要上一个新的 SaaS 试用注册页——文案部分你能先锁一版吗？"

两个小时后，我在 Claude Artifacts 窗口里拿到了一整个可点击的 HTML 落地页，包含三套不同的主标题、两种副标题方向，以及一个 CTA（Call To Action, 行动号召）测试矩阵。不是 Figma，不是 Google Doc，是一个真正能点、能看的页面。开发同事第二天一早就把它接进了生产环境的 CMS（Content Management System, 内容管理系统）。

我一行代码都没写。代码看都没看。我只描述了"想要的感觉"，剩下的 LLM 全包了。

这就是 Andrej Karpathy 在 2025 年 2 月提出 Vibe Coding（氛围编程） 时想表达的意思："完全顺应感觉，拥抱指数级增长，忘掉代码本身的存在。" 这套说法原本是说给工程师听的。但这套技术——不是这个词——恰恰是营销人一直缺的那块拼图。

如果你也曾在 Notion 文档里列了一堆要点，然后苦等开发排期，这篇文章就是为你写的。

对非开发者来说，Vibe Coding 到底意味着什么

剥掉所有包装，Vibe Coding 就是三个动词的循环：看（see）→ 说（say）→ 跑（run）。

• 看 一个画面、一个布局、一个问题
• 说 出哪里不对、想要什么，用大白话
• 跑 一下输出结果，再告诉 AI 怎么改

你不需要 IDE（Integrated Development Environment, 集成开发环境），也不需要知道 HTML 是什么。你需要的是：一个 Claude 或 ChatGPT 账号、对页面目标的清晰认知、以及像导演给初级设计师提修改意见那样的耐心。

对营销人来说，最大的红利是速度。大部分落地页 A/B 测试的瓶颈从来不是策略，而是——必须有人"把它做出来"——你才能知道这个想法到底行不行。Vibe Coding 把"做出来"这一步从几天缩短到几分钟。

我用的 6 步工作流

这就是我一直在用的完整流程。我把它存成了 Notion 模板，你直接照搬就行。

第 1 步：打开 Claude 之前先写 brief

打开一个空白文档，回答下面五个问题。别跳过这一步——这里每花一分钟，后面能省十分钟。

1. 这是给谁看的？ 要具体。"种子轮到 A 轮的 B2B SaaS 创始人"，不是"做生意的"。
2. 你希望他们做什么动作？ 一个动作。试用注册、预约演示、下载电子书。
3. 这个页面承诺什么，一句话说清楚？ 你的价值主张，压缩到一句话。
4. 最强的反对意见是什么？ 价格？上手时间？"能不能对接 X 系统？"
5. 具体的 offer 是什么？ 免费试用、14 天免信用卡、首月 7 折。

第五个问题是绝大多数营销人没做扎实的。没有明确 offer 的页面只是装饰；有明确 offer 的页面才是工具。

第 2 步：选好你的 Vibe Coding 环境

目前有三个比较现实的选择：

工具	它能做什么	适合谁
Claude Artifacts（claude.ai）	在侧边栏实时渲染 HTML/CSS/React，可直接迭代	90% 的营销人——零配置
Cursor	把 AI 嵌入编辑器的完整 IDE	想在原型基础上继续深入的高阶用户
Replit Agent	一句话生成完整应用，并附带托管	想直接发布上线的落地页

对 90% 的营销落地页工作，Claude Artifacts 就是答案。它在对话里直接给你一个可点击的页面，你能看到 HTML，也可以把整段代码复制到 Google Doc、Figma 或者丢给开发同事。没有账号、没有安装。

第 3 步：第一个 prompt——生成脚手架

这就是我那天用的 prompt。结构是关键，具体内容你自己填。

扮演一名资深转化文案（conversion copywriter）。为一个产品
（[product name]）生成一个单页落地页。它是 [category]，目标用户是
[audience]。唯一希望用户完成的动作是 [CTA]。

调性：[3 个形容词，比如 confident, technical, plainspoken]
长度：中等——首屏（above-the-fold，即访客无需滚动就能看到的首屏内容）
不超过 4 个区块。

按以下顺序使用这些区块：
1. Hero 区：H1 主标题 + 副标题 + 主 CTA + 次要文字链
2. "How it works"——3 个步骤
3. 一条带署名的客户证言
4. 价格摘要（或"查看完整价格"链接）
5. FAQ——4 个问题，针对最强反对意见
6. 收尾 CTA 区块

输出一个完整的 HTML 文件，使用内联 CSS。字体使用干净的系统字体栈。
不要用 lorem ipsum 占位符。请按指定调性写真实的文案。

这条 prompt 里有三个细节值得注意：

• 用三个形容词定义调性，而不是一整段描述。 形容词更容易在多轮迭代中保持一致。
• 明确指定区块顺序。 LLM 默认会给出最通用的页面结构。指定顺序才能拿到你真正想要的结构。
• 禁用 lorem ipsum。 不写这句话，你拿到的就是占位文本。一定要写。

第 4 步：迭代文案——真正的活儿在这里

第一版输出"还行"。但只是"还行"，离"好"还差得远。Vibe Coding 不是"问一次就上线"，而是"问、看、怼回去、再看"。把 AI 当成中级文案：他的初稿是起点，不是终稿。

几个实用的追问 prompt：

• "Hero 区的副标题太长了。砍到 12 个单词以内，并且要具体。"
• "'How it works' 这部分太泛。每个步骤换成'动词 + 成果'的模式。比如'60 秒接入你的数据'，而不是'轻松上手'。"
• "FAQ 的回答太软。再具体一点。如果反对意见是价格，就给个数字。"
• "写 3 个替代的 H1 主标题，每个都针对最强反对意见发力。"

最后这条 prompt 就是 A/B 变体生成器。一句话，你就拿到了页面上最重要那行字的三个测试候选。

第 5 步：系统化地生成 A/B 变体

基础页面打磨好之后，再让 Claude 沿着明确的维度生成变体。别直接说"给我三个版本"——那只会给你三个随机页面。要沿着真正能撬动转化的轴线来生成。

三条实战中最稳定的轴线：

1. 主标题角度——利益导向 vs. 反对意见导向 vs. 社会证明导向
2. CTA 文案——"Start free trial" vs. "Get my free trial" vs. "See it work in 90 seconds"
3. Hero 区视觉——产品截图 vs. 客户证言 vs. 动画 demo

Prompt：

生成 3 个 Hero 区的备选版本。其它部分保持不变，只变化 H1 角度、
副标题框架和 CTA 文案。给每个变体打上标签：
"Variant A — 利益导向"、"Variant B — 反对意见导向"、"Variant C —
社会证明导向"。其它部分保持完全一致。

这对 A/B 测试（split testing, 流量切分实验）非常有用。大部分团队做的"主标题测试"其实根本没有隔离变量——他们改了主标题，却不小心也动了副标题和 CTA。这条 prompt 能保证其它条件不变。

要做更深的变体测试时，我有时会先生成一个小的文案矩阵：

位置	变体 A	变体 B	变体 C
H1	利益导向	反对意见导向	社会证明导向
副标题	功能	成果	客户证言
CTA	动作	拥有感	速度

主标题先跑 A vs. B，CTA 再跑 A vs. B，依次进行。两次干净的测试，胜过一次"换了个新页面"的嘈杂测试。

第 6 步：交付给工程

这是大多数营销人会跳过的步骤，但也正是决定你的成果是上线，还是死在 Slack 里的关键。

写一页交付文档，包含：

• Claude Artifact 链接（工程师可以直接复制 HTML）
• 一份"不能动"的清单（品牌色、字体、法律页脚）
• 一份"会动"的清单（响应式断点、埋点事件、可访问性走查）
• 你在用的生产 CMS 模板链接
• 一个粗略的测试计划——先跑哪个变体、衡量什么指标

工程师还是会做一版生产实现，但他们做的是几小时，而不是几天的活——因为所有决策都已经定了。

Vibe Coding 不擅长什么

有三件事，提前知道能少踩坑：

1. 生产级响应式。 Claude 生成的 HTML 在 1440px 宽下看起来很棒。但在 Pixel 6 的 375px 屏上，你会看到布局问题。别直接拿这个上移动端。把它当参考稿，不要当发布稿。
2. 可访问性。 输出默认会跳过 ARIA 标签、alt 文本规范、焦点状态。让 AI 加上这些、并人工过一遍；但任何要上线的页面，都要留出真正的可访问性走查时间。
3. 任何具有法律效力的内容。 价格、条款、医疗声明、金融数字。所有 AI 输出里的数字和声明，都先当成"待人工核实"的草稿，再让它上正式页面。

Vibe Coding 用 10% 的时间走完 80% 的路。剩下 20% 是无聊的、细致的工作——而这 20% 才决定你的方案在专业上是不是站得住。

一点小重定义

我把这个方法拿给其他营销人看，最常见的反应是："这不就是个高级点的模板吗？" 不是。模板是你要自己填的起点；Vibe Coding 是你要怼回去的成品草稿。功夫全在"怼"上：知道留什么、砍什么、下一步要什么。

最能从中受益的那批营销人，不是 prompt 写得最花的人，而是品味最好的人——他们看一眼草稿，就能立刻判断 H1 弱了、CTA 太被动、FAQ 回避了真正的问题。这种品味来自多年跑 campaign 的实战经验，不是来自任何模型。

但说到底，品味，够用了。你再也不用苦等开发同事排期，才能验证一个想法到底行不行。