Claude + Codex + Gemini + OpenClaw 重建落地页

我在一天内把自己的落地页重做出来了，过程中一起使用了 Claude Design、Codex、Gemini 和 OpenClaw。

这是一个 10 步流程，每个工具负责工作中的不同部分。

下面是我做的全部事情：

1. 快速生成多个方向

这里的指导原则是：先发散，最后收敛。

我先写了一个 Prompt，一次生成 5 种不同的落地页审美方向。

每一个都是可以让模型一键生成示例落地页的详细 Prompt。这样就能并行得到 5 个 UI 方向。

这一步很重要，因为它立刻消除了空白画布状态。

这里的 Prompt 灵感来自 @cloudxdev：

你是一名世界级前端设计师和创意总监，拥有 15 年为高知名度科技初创公司打造获奖数字体验的经验。你专长于大胆、令人难忘、跳脱通用模板的设计。你的作品曾出现在 Awwwards、CSS Design Awards 和 The FWA 上。现在请为我生成 5 个截然不同的落地页方向 Prompt，服务于“<company_name>”——<company_description>。该公司的目标用户是 <target_audience>，差异化来自 <key_differentiators>。落地页将是潜在客户的主要转化漏斗。无论如何都要避免“AI 垃圾感”：禁止白色背景上的紫蓝渐变，禁止通用字体（Inter、Roboto、Arial、system-ui），禁止可预测的 Hero-CTA-功能-评价模板，禁止通用几何形状或抽象 blob，禁止看起来像图库素材的图片或陈词滥调的视觉。请生成 5 种激进不同的审美方案，并彻底投入每一个方案：Option A、Option B、Option C、Option D、Option E。这 5 个方案在艺术指导、字体、色彩使用、布局理念和交互风格上必须有实质差异。不要给我同一个落地页的 5 个变体。对每个方案，创建一个可以直接粘贴到另一个模型中生成落地页、完全自洽的 Prompt。每个 Prompt 只能锁定一个审美方向，不得提及其他 4 个方案。在每个方案的 Prompt 前，简要说明：你选择了哪种审美方向以及原因、具体字体搭配、色板、Hero 钩子概念，以及一个要实现的独特交互元素。每个生成的 Prompt 都应要求模型以创意方式构建以下区块：

1. Hero 区块——能够立即制造好奇的钩子、展示能力的交互元素、不超过 12 个词的清晰价值主张、主 CTA：“<primary_cta>”，以及信任信号（Logo、安保徽章）。
2. 问题 / 解决方案叙事——讲故事，不要罗列功能；使用滚动触发的戏剧性揭示，并加入真实场景可视化。
3. 产品展示——可交互的 Demo 预览或动画样机，以视觉方式展示产品运行，并加入技术可信度指标。
4. 社会证明——来自目标用户画像的评价、对 <target_audience> 有意义的指标，以及带悬停状态的客户网格。
5. 技术差异化——清晰的对比或功能网格、集成 / API 预览（如适用），以及安全与合规徽章。
6. 转化区块——带紧迫感的次级 CTA、快速表单（姓名、邮箱、公司），以及备选动作：“<secondary_cta>”。
7. 页脚——极简、精致，只放必要链接，并收集订阅邮箱。

每个生成的 Prompt 还应要求模型输出一个完整、单一的 HTML 文件，内嵌 CSS 和 JavaScript，能够在任何浏览器中无依赖地直接打开；使用真实感占位内容替代 Lorem ipsum，并呈现出接近生产环境的完成度。

每个生成的 Prompt 都必须包含这些技术要求：移动端响应式、流体排版和自适应布局、平滑滚动、使用 animation-delay 的交错式页面加载动画、使用 Intersection Observer 的滚动触发效果、悬停状态微交互、用于主题控制的 CSS 自定义属性、语义化 HTML5 结构、无重型库的性能优化，以及为排版加载 Google Fonts。

动效要求：
页面加载：编排式揭示序列（0ms → 200ms → 400ms 交错）。
滚动：关键视觉使用向上淡入并配合细微视差。
悬停：缩放变换、颜色过渡、下划线动画。
交互：跟随光标的效果、磁吸按钮。
背景：细微环境运动（浮动粒子、渐变变化）。

颜色指导：如果选择深色主题，背景使用 #0a0a0f 到 #12121a 范围内的深色，标题使用纯白（#ffffff），正文使用柔和灰（#a0a0a0），并谨慎使用一种醒目的强调色，例如电光青、亮珊瑚或酸绿色。如果选择浅色主题，使用米白或奶油色背景、深炭色文字，以及一种出人意料的大胆强调色，例如陶土色、森林绿或蓝宝石色。

排版指导：选择有辨识度的搭配，标题使用展示衬线体（Playfair Display）或几何无衬线体（Clash Display、Cabinet Grotesk），正文要易读但有个性（Source Serif Pro、Satoshi），技术元素使用 JetBrains Mono 或 IBM Plex Mono，并且必须避免 Inter、Roboto、Arial、SF Pro、Open Sans。

输出格式：严格返回 5 个标记为 Option A 到 Option E 的区块。每个方案包含：（1）审美方向的简短名称，（2）对该方向的简短解释，（3）放在代码块中的完整 Prompt。不要自行生成任何 HTML，只生成这 5 个 Prompt。

这个 Prompt 实际返回了以下内容：

A - Swiss Brutalist：奶油色 + 墨色，搭配酸绿色强调色；磁吸网格会把光标吸附到数据点
B - Terminal Luxury：深空色 + 青色；真实命令行输入模拟列表生成
C - Editorial Authority：森林绿 + 纸张色 + 珊瑚色；区块之间使用视差“墨水渗开”转场
D - Bauhaus Engineering：海军蓝 + 亮珊瑚；交互式蓝图叠加层展示 AI 逻辑
E - Kinetic Minimalism：午夜色 + 钴蓝；液态金属光标轨迹会根据页面速度变化

5 个真正有观点的方向。

耗时：2 分钟

2. 运行 5 个 Prompt 并选出赢家

这是免费“氛围编程”5 个落地页的最佳方法：

1. 打开 5 个 aistudio(.)google(.)com/apps 标签页
2. 把上面的 5 个 Prompt 分别粘贴进去
3. 看它们运行

很多人不知道，Gemini 3.1 Pro 的视觉品味远胜 Opus 4.7（是的），也胜过 GPT 5.5（笑）。

这一步会把审美从抽象方向变成你能直接感受到的真实 UI。

当你看到 5 个页面都渲染出来后，哪个最适合你的想法通常就很明显了。

然后我直接选了赢家。

有个好笑的旁注：我第一个落地页版本就是使用这里选中的赢家方向的一个非常基础的版本。它实际上只有一个 Hero 和下面的一条用户评价，却给我带来了最初的 20 个客户。

值得记住：传达正确信息的粗糙页面，胜过一个漂亮但什么都没说清楚的页面。也许现在你只需要这个。

耗时：10 分钟

3. 把赢家方向带进 Claude Design

接下来，把最好的设计导出并上传到 Claude Design。

Claude Design 有一个专门的“设置你的设计系统”选项——使用它。把第 2 步的赢家 HTML 放进去，它会提取颜色、字体、组件和可应用于网站其他部分的复用系统。

耗时：2 分钟

4. 为文案做研究前置

Claude Design 生成设计系统时，我用 11 个通过 claude -p 启动的 Agent，分析了 10 个竞争对手落地页和我的 ICP。

这是写文案前的准备工作。在写页面之前，你需要知道买家想要什么，以及其他人都在宣称什么。

这些内容都可以作为上下文喂给下一步。

耗时：5 分钟

5. 把研究转成定位

然后我把这些内容交给我的 OpenClaw Zoe，让她把它们和我们业务的一切信息（会议记录、邮件、CRM）结合起来。

她生成了一份 10 个区块的落地页拆解：Hero 需要做出什么主张、哪些异议需要提前处理、哪些证明应该出现在首屏上方，以及访客到达 CTA 时应该相信什么。

这是整个流程中最大的突破点之一。

它返回的拆解是：
1. Hero——一句价值主张 + 聊天框
2. 社会证明——媒体 Logo + 用户评价
3. 工作方式——3 步：故事 → 匹配 → 推介
4. 功能——4 行，每行对应一个它要回答的买家异议
5. 案例研究——真实媒体报道
6. 定价
7. FAQ——剩余异议
8. 对比——我们 vs 传统方案 vs DIY vs 雇人
9. 创始人信——我为什么构建它
10. 最终 CTA——再次出现聊天框

耗时：10 分钟

6. 为每个区块生成 5 个变体

现在 Claude Design 已经完成了第 3 步的设计系统。我把 10 个区块的落地页拆解交给 Claude Design，让它为每个区块生成 5 个变体。

流程就是在这里真正连起来的。

相比 5 个完整落地页，我现在比较的是 5 个 Hero、5 个证明区块、5 个工作流区块和 5 个 CTA 区块。

这和第 1 步的先发散原则相同，只是应用在区块层级。你不再决定“哪个页面最好”，而是在决定“哪个 Hero 最好”。认知负担低得多，结果也好得多。

耗时：1 分钟（另加等待 20 分钟）

7. 选出最喜欢的方案并拼接

我逐个浏览每个区块，选出最喜欢的变体，在需要的地方给反馈，然后让 Claude Design 把它们拼成一个协调统一的页面。

我的 Prompt 大概是“ABDEADABC”，哈哈。

这就是收敛阶段。第 6 步发散，在这里收敛。

耗时：5 分钟

8. 把动画单独分工

页面结构生成的同时，我另开一个会话，专门处理 4 个动画。

模型无法像看页面那样直接看到动画，所以这部分需要更多来回调整。

耗时：20 分钟

9. 导出、实现并锁定设计系统

设计完成后，我把它导出为 HTML，再在 Codex 中使用 /goal 和 Playwright 端到端实现。

这部分到现在仍然有点像违规操作。

通常设计到实现之间有巨大的翻译成本。现在通过 /goal，很多成本直接消失了。

给 Codex Agent 的一个额外提示：Google 最近推出了 DESIGN .md。使用它锁定设计系统，让未来的 Agent 不要偏离你刚实现的视觉语言。

耗时：2 分钟（另加等待 1 小时……）

10. 最长的部分仍然是文案

Codex 工作时，我就继续定稿文案。

此时页面已经有了上面定位工作产出的粗稿，但仍然是 AI 文案。

方向上是对的，但太安全、太普通。

这次重写中最重要的文案经验是：

把该说的直接说出来。

别再写这些：
- “释放外联潜力的全部价值”
- “面向现代销售团队的一体化平台”

如果你的页面是这种话，你就是在求客户不要读。

把你的真实意思说出来。点名竞争对手。功能就按它真正做的事情来描述。把竞争对手的荒谬之处说出来。

例如，我把 Claude 写给定价区块上方的小眉题从：

修改前：“透明定价”
修改后：“为什么一个媒体数据库每年还要收费 15,000 美元？”

这一行文案比三段“释放潜力”式文案更有作用。它点出了问题、点出了竞争对手，并在展示价格之前就完成了定价锚定，让我们的价格显得是显而易见的答案。

这一部分仍然需要人工判断。

耗时：4 小时

结论

总耗时：6 小时 14 分钟。其中 4 小时花在文案上，设计和构建不到 2 小时。

这能拿设计奖吗？当然不能。
它能让陌生访客转化吗？绝对可以。

我优化的是 ARR 100 万美元的 SaaS，而不是设计师职位。这是两种不同的游戏。

别只听我说——打开 trustmrr .com 排行榜前 20 的网站，它们没有一个拿设计奖，但都在赚钱。

现在的情况是：
AI 能快速让你达到设计前 10%，再叠加文案前 10% 和产品前 10%。

这样你就能得到一个强大、高转化的页面，而且不需要雇设计师、开发者或文案。

最棒的是，这一切只是第一次迭代。

接下来我会把页面分析接回 OpenClaw，让 Zoe 自动运行 Hero、H1、H2、CTA 的 A/B 测试并持续改进页面。

6 小时把页面发出去。然后再用 6 个月弄清楚它到底该说什么。

AI 没有改变最难的部分，只是拿走了借口。