用 AI 做落地页：从零到上线的完整打法

你花了三周把 SaaS 做到了可以演示的程度，现在想让真实用户试用——但没有落地页，流量来了全跑掉。或者反过来，你还什么都没做，只有一个 idea，想先用一个页面测试有没有人感兴趣。

这两种情况都指向同一件事：落地页是最快出活、最适合验证 idea 的单一场景，没有之一。它不需要数据库、不需要后端鉴权，逻辑极简，但它直接决定了你的转化漏斗有没有入口。

在 L5 冒烟测试那节（用 Carrd 半天搭验证页），我们讲了"还没做产品就先验证"的打法。这一节往前进一步：当你需要一个真正属于自己、可以长期维护、能配合产品迭代的落地页时，怎么用 AI 把它做出来。

---

先搞清楚你属于哪种情况

落地页有两条路，选错了要多走很多弯路。

路一：无代码工具（Carrd / Framer / Webflow）

适合你，如果：

• 你只需要一个静态宣传页，不打算改样式、接自定义逻辑
• 你是非技术背景，或者不想碰代码
• 目标是最快上线，哪怕牺牲一点定制空间
• 你的核心精力应该放在内容和推广，而不是页面本身

这类工具的优势是：模板好看，30 分钟能上线，域名绑定简单。劣势是：超出模板能力的改动做不了，比如动态个性化文案、AB 测试、接你自己的后端接口——要么交钱买高级计划，要么做不到。

路二：用 AI 写代码（v0 / Cursor 生成）

适合你，如果：

• 你有一点点技术背景（知道怎么部署静态文件就行）
• 落地页需要和你的产品共享设计系统（相同组件、颜色、字体）
• 你后续要改版、做 AB 测试、接自己的表单后端
• 你在做的事本身是技术产品，落地页需要展示代码、演示交互

这条路的核心工具是 v0 和 Cursor。v0 更适合"从零生成一个完整页面"，Cursor 更适合"在已有代码基础上改和迭代"。两者配合效果更好：v0 生成初稿，Cursor 里精修。

一条判断原则：如果你不打算长期维护这个页面，选无代码工具；如果这个页面是你产品的一部分，用 AI 写代码。

---

用 AI 做落地页的完整步骤

下面五步，每步给真实的提需求示例。

第一步：定好转化动作

落地页有且只有一个核心动作。在动手之前，必须先回答这个问题：

访客来了，我希望他做什么？

常见的选项：

• 留邮箱（等候名单、早鸟通知）
• 点击注册/开始试用
• 预约 Demo
• 联系销售
• 直接购买

一个页面只挂一个 CTA，两个及以上 CTA 会稀释注意力，转化率下降不是一点点。

决定好了之后，带着这个答案进入下一步。

第二步：写文案结构

落地页的文案结构有固定套路，业内叫 AIDA 或者 Hero→Pain→Solution→Proof→CTA。用 AI 生成之前，你需要自己填好这几个槽：

区块	要写什么
Hero（主屏）	一句话说"我帮你解决什么问题"，副标题补充怎么解决
痛点	用户现在的处境，写越具体越好，让他觉得你懂他
解决方案	你的产品/服务是怎么解决的，用利益点描述
信任信号	用户评价、数字指标、媒体提及，或者直接写"已有 XX 人在等"
CTA	一个清晰的行动号召，按钮文案不要写"提交"，要写"我要试试"

给 AI 的真实提需求示例（你可以直接改参数用）：

我要做一个 SaaS 落地页，目标转化动作是"邮箱留资，加入等候名单"。用户是独立开发者，痛点是每次发版都要手动写 changelog，费时间还容易漏。我的产品叫 ChangeFlow，连接 GitHub PR，自动生成人话版 changelog，支持中英双语。帮我生成这个页面的文案结构，包括 Hero 标题（一句话，≤15字）、副标题（≤40字）、3个痛点（每个一句话）、3个利益点（利益>功能的写法）、一句信任语（用"已有 X 人在等候"的格式，X 我来填）、CTA 按钮文案（≤6字）。

注意这个提示里给了：用户画像、痛点描述、产品名字、核心能力、转化动作、格式约束。越具体，AI 产出越可用，你需要改的越少。

第三步：生成页面

文案结构确认后，带着它去 v0 生成页面代码。

给 v0 的提需求示例：

帮我生成一个落地页，技术栈用 React + Tailwind CSS。

设计风格：极简，深色背景（#0f0f0f），主色用蓝紫色（#6366f1），字体用 Inter。

页面结构：

1. Hero 区：大标题"告别手写 Changelog"，副标题"连接 GitHub PR，30 秒自动生成人话版发版说明，中英双语"，下面一个邮箱输入框 + "加入等候名单"按钮，右边放一个 macOS 风格的假 terminal 截图占位。
2. 痛点区：三列卡片，标题分别是"每次发版都要写一遍"/"写完发现漏了半条"/"用户看不懂技术语言"，每张卡片配一个图标。
3. 方案区：三条利益点横排，每条带一个 checkmark 图标。
4. 信任区：一句居中文字"已有 287 人在等候名单"，下面展示 5 个头像。
5. 底部 CTA：再来一个邮箱收集，按钮文案"我要试试"。

表单暂时不接后端，点提交后显示"已收到，我们会第一时间联系你"。

v0 会生成完整的 React 组件代码，你可以直接预览，调整满意后导出。

关键习惯：生成完不要直接用，对着页面从用户视角走一遍：我来了，5 秒内能不能看懂这是什么、对不对我、我该做什么。如果答案有一个不确定，改文案。

第四步：接表单留资

落地页最核心的功能就是收邮箱。几种接法：

最简单：用第三方表单服务

Formspark、Formspree、HeroTofu 这类，注册后拿到一个 action URL，把它填到你的 <form action="..."> 里，提交就自动发邮件到你收件箱。不用写后端。

在 Cursor 里让 AI 接表单的提需求示例：

我用 Formspree，表单 action URL 是 https://formspree.io/f/xxxxxyyy。帮我把 Hero 区和底部 CTA 的邮箱表单接上去，提交成功后隐藏表单，显示"已加入等候名单，我们会第一时间联系你 🎉"。提交失败（网络错误或邮箱格式不对）时显示对应的错误提示，不要用 alert，用页面内的红色提示文字。

稍复杂：接自己的后端

如果你用 6.1 的 SaaS 打法已经有了后端，可以直接 POST 到你自己的 /api/waitlist 接口，把邮箱存到数据库。这个在 6.2 后台 Dashboard 里有完整的接口示例可以参考。

第五步：部署上线

React 落地页最快的部署方式是 Vercel 或 Cloudflare Pages，两者都有免费计划，5 分钟能搞定。

给 AI 的提需求示例（让它帮你配 build）：

我的落地页是用 v0 生成的 React + Tailwind 项目，目前只有 src/App.jsx 一个文件，还没有 package.json。帮我创建完整的项目结构，包括 package.json（用 Vite 作为构建工具）、index.html 入口、tailwind.config.js，让我能跑 npm run build 产出 dist 目录，然后上传到 Vercel 部署。

部署完，绑自己的域名，把链接发出去开始收流量。

---

文案要点：讲利益，不讲功能

这是落地页转化率最大的分水岭，值得单独说。

功能描述 vs 利益描述，举几个对比：

功能写法（差）	利益写法（好）
支持 GitHub OAuth 登录	不用记新密码，用 GitHub 账号直接进
自动解析 Markdown 格式	复制粘贴进去就行，格式自动处理好
多语言 i18n 支持	中英双语，海外用户也能看
99.9% 的正常运行时间	你发版那天不会给你掉链子
基于 GPT-4 的 AI 引擎	生成的说明是人话，不是机器翻译腔

检查方法：把你的每一条文案加上"所以怎样"——如果加不进去，说明它已经是利益描述了；如果加进去还能继续说，说明还停在功能层面，再往下挖一层。

Hero 标题的标准：一个陌生人扫一眼能在 3 秒内回答"这是给谁的，它解决什么问题，我该做什么"。如果一条标题做不到，拆成标题+副标题。

---

故障排查表

症状	原因	解法
表单提交后没收到邮件	Formspree/Formspark 未验证域名或邮箱	进服务商后台确认表单激活状态；检查垃圾邮件箱
Tailwind 样式在 build 后消失	content 路径配置不包含组件文件	tailwind.config.js 里的 content 数组加上 "./src/**/*.{js,jsx,ts,tsx}"
页面在手机上文字溢出屏幕	Hero 区标题用了固定 px 尺寸	把字号改成响应式：text-3xl md:text-5xl，用 Cursor 全局搜替换
Google PageSpeed 分低于 60	Hero 区图片未压缩，或引入了大体积字体包	图片转 WebP 并加 loading="lazy"；Google Fonts 只加载实际用到的字重
Vercel 部署后路由 404	单页应用路由没配置 fallback	在项目根目录加 vercel.json，配置 "rewrites": [{"source": "/(.*)", "destination": "/"}]
CTA 按钮点击率极低但流量不差	CTA 文案不够有吸引力，或按钮视觉不够突出	换 3 个不同按钮文案 AB 测试；按钮背景色改成页面最醒目的颜色

---

常见问题

Q：落地页一定要有设计稿才能让 AI 生成吗？

不需要。你给文案结构 + 风格方向（颜色/整体感觉/参考页面 URL）就够了。能给设计稿当然更好，但大多数独立开发者没有，v0 根据文字描述也能生成质量不错的初稿。

Q：v0 生成的代码能直接用吗，还是要改很多？

初稿大概能用 70%，主要需要改的是：真实内容替换（v0 会用占位文案）、颜色/字体细调、表单逻辑。整体省时间是肯定的，从零写要 2-4 小时，v0 + Cursor 修一修 45 分钟以内可以搞定。

Q：一个落地页上线多久没转化就该放弃？

先问流量质量。如果来的人根本不是目标用户（比如你的朋友圈好友），数据没有参考价值。建议：先确保 50-100 个目标用户看过页面，再用 L5 冒烟测试 里的"20 个注册"标准判断继续还是调整。

Q：我要不要在落地页加 FAQ、视频演示这些内容？

早期不要加。先用最精简的版本测转化率，加内容只会让你不知道哪个因素影响了结果。等转化数据稳定了，再逐步加元素测提升。

Q：用 Cursor 修 v0 生成的代码，要注意什么？

v0 生成的代码有时用 shadcn/ui 组件，有时直接写原生 Tailwind，注意先搞清楚依赖是什么，让 Cursor 读一遍项目结构再开始改。别让它自己引入新的组件库，除非你确实需要。

---

下一步

落地页是个开始，不是终点。你的转化漏斗从这里走下去，下一层是：收到邮箱后怎么发 onboarding 邮件、用户进来后怎么引导到产品核心功能。这些在 6.1 SaaS 从零实战 和 6.2 后台 Dashboard 里都有展开。

回 AI 编程教程大全 看你在这条路上的位置。

---

👉 看看我们的 AI 编程实战体系课，或逛 AI 编程教程大全 把基本功打扎实。