LeadMagic/gtm-skills

v0 落地页构建器

概述

v0 by Vercel 是构建生产级落地页的最快方式。您用自然语言描述页面，v0 生成 React/Next.js/Tailwind 代码。您可以通过对话方式迭代，然后导出并部署。过去需要设计师 + 开发人员 1-2 周的工作，现在创始人或营销人员只需 2-4 小时即可完成。本技能是一份使用 v0 构建各种类型 GTM 落地页的分步指南。

权威基础

• v0 by Vercel — 生成式 UI 平台（Guillermo Rauch）
• shadcn/ui — 为 v0 提供支持的组件库
• Tailwind CSS — 实用优先的 CSS 框架
• Next.js — 用于生产的 React 框架

使用时机

触发短语：“使用 v0 构建落地页”、“v0 教程”、“v0 落地页提示”、“针对营销的 v0 by Vercel”、“AI 落地页构建器”、“使用 v0 生成落地页”、“v0 定价页”、“v0 候补名单”

v0 基础知识

它是什么： v0.dev — Vercel 的生成式 UI 平台。您输入内容，它使用 shadcn/ui + Tailwind CSS 生成 React 组件。您可以：

• 通过单个提示生成完整页面
• 迭代特定区域（“更改主屏标题”）
• 生成单个组件（“带有头像的推荐卡”）
• 将代码导出到您的 Next.js 项目
• 直接部署到 Vercel

定价： 免费套餐（每月 200 次生成）。Pro 套餐（$20/月）无限生成。

分步流程

阶段 1：准备（打开 v0 之前）

在第一个提示之前定义 5 件事：

1. 页面类型： 落地页、定价页、候补名单页、活动页、功能公告页还是微型网站？
2. 受众： 他们是谁？什么对他们最重要？
3. 行动： 您希望他们做哪一件事？（开始试用、预约演示、加入候补名单、立即购买）
4. 品牌： 颜色（主色/辅助色/中性色）、字体（Inter 很安全）、基调（专业、有趣、技术、高端）
5. 参考： 应该感觉像哪个现有网站？“像 Stripe 一样简洁”或“像 Vercel 一样技术化”或“像 Linear 一样大胆”

品牌背景文档（粘贴到您的第一个 v0 提示中）：

品牌背景：
- 公司：[名称]
- 产品：[一句话介绍]
- 主色：#0066FF
- 辅助色：#FF6600
- 字体：Inter
- 基调：直接、基于数据、自信
- 参考：Stripe（简洁、极简）+ Linear（黑暗、技术）
- 禁止：渐变、表情符号、库存照片、通用 SaaS 老套内容

阶段 2：生成页面（提示工程）

主提示模板：

为 [公司/产品] 构建一个 [页面类型]。

受众：[理想客户画像]。他们关心 [前 3 大关注点]。

区域（按顺序）：
1. 导航：[公司标志在左，链接居中，行动号召按钮在右 — “开始免费试用”]
2. 主屏：标题 [以利益为导向，少于 10 个词]。副标题 [一句话扩展]。主要行动号召 [“开始免费试用”]。次要行动号召 [“查看工作原理”]。主屏图片/视频占位符。
3. 社交证明：6 个客户标志排成一行。“受到 2,000+ 个团队的信赖”
4. 价值主张：3 列。每列：图标、标题、一句话。关注结果，而非功能。
5. 工作原理：3 步。每步：步骤编号、标题、一句话。图片：截图/GIF 占位符。
6. 功能：2 列网格。6 个功能。每个：功能名称 + 一句话。
7. 推荐语：3 个引用卡。每个：引用（1-2 句话）、姓名、头衔、公司、头像占位符。
8. 定价（如果是定价页）：3 个套餐。月付/年付切换。推荐套餐高亮。每个套餐：价格、描述、5 个功能、行动号召。
9. 常见问题：6 个问题，带有可展开的答案。涵盖定价、设置、安全性、支持、取消、对比。
10. 最终行动号召：与主屏行动号召相同。“开始免费试用。”无需信用卡。
11. 页脚：标志、链接、版权、社交图标。

样式：
- 深色主题（或浅色 — 选择一个）
- 调色板：主色 #0066FF，辅助色 #FF6600，背景 #0A0A0A，文本 #FFFFFF，静默 #9CA3AF
- 排版：Inter，标题加粗，正文常规
- 间距：宽敞。区域之间 80-120px
- 卡片：微妙的边框，8px 圆角，悬停上浮效果
- 按钮：主要按钮（填充、白色文本），次要按钮（轮廓、主色）
- 最大宽度：1200px，居中

技术要求：
- 移动端响应式：在移动端将区域垂直堆叠
- 触控目标：移动端 44px+
- 动画：滚动时微妙的淡入效果（Intersection Observer）
- 无重动画。尊重 prefers-reduced-motion。

为什么这个提示有效：

• 它按顺序指定了每个区域（v0 从上到下构建）
• 它包含了视觉样式（颜色、排版、间距）
• 它包含了技术要求（响应式、可访问）
• 它给出了具体示例（“开始免费试用”而不是“在此处添加行动号召”）

阶段 3：逐区域迭代

不要在一个提示中修复所有内容。逐区域迭代：

迭代顺序（15-30 分钟）：

1. “主屏标题太通用。将其具体化：‘[公司] 帮助 [理想客户画像] 在 [时间范围] 内完成 [事情]’”
2. “价值主张以功能为导向。将它们重写为结果：‘2 小时内推出营销活动，而不是 2 周’而不是‘AI 驱动的营销活动构建器’”
3. “推荐语太长。每条引用最多 1-2 句话”
4. “在常见问题上方添加一个对比表格。5 行：[功能]，我们，竞争对手 A，竞争对手 B。我们这边打勾。竞争对手缺失的地方，使用‘—’”
5. “定价卡需要悬停状态。为推荐套餐添加微妙的 scale(1.02) + 阴影”
6. “将主屏图片占位符替换为截图组件。深色背景，圆角，微妙的边框”
7. “行动号召按钮感觉太小。增加至 16px 内边距，16px 字体”
8. “在移动端，导航应折叠成汉堡菜单。向我展示移动版”
9. “添加一个粘性行动号召栏，在滚动经过主屏后出现。‘开始免费试用’按钮，白色背景，微妙的阴影”
10. “使整个页面响应式。在 375px、768px、1024px、1440px 处测试”

阶段 4：生成单个组件

当整个页面不错但某个区域需要更多工作时：

“只生成推荐语部分。3 张卡排成一行。每张卡：
- 背景：比页面背景略亮
- 边框：1px，微妙
- 内边距：32px
- 顶部引用：大号、斜体
- 下方作者：头像（圆形，48px）+ 姓名 + 头衔 + 公司标志
- 悬停：微妙的边框强调色，无上浮”

v0 将重新生成该组件。用改进后的版本替换现有区域。

阶段 5：打磨以投入生产

在部署之前，迭代以下内容：

1. 文案： 将所有 lorem ipsum 替换为真实文案。“v0 会生成占位文本 — 您必须替换它。”编写真实的标题、真实的价值主张、真实的推荐语。

2. 图片： 将占位符替换为真实图片：

   • 主屏：产品截图（Cmd+Shift+4，上传到 v0）
   • 客户标志：实际客户标志（上传）
   • 推荐头像：实际客户照片

3. 链接： 连接所有按钮和链接：

   • “开始免费试用” → 注册 URL
   • “预约演示” → Calendly 链接
   • “查看定价” → 定价区域锚点
   • 页脚链接 → 实际页面

4. 表单： 如果您的页面有表单（候补名单、联系、演示请求）：

   • 连接到表单后端（ConvertKit、HubSpot、Google Forms 或 API）
   • 添加验证（电子邮件格式、必填字段）
   • 添加成功消息（“谢谢！我们会与您联系。”）
   • 添加错误处理

5. 分析： 在部署前添加：

   <!-- 添加到 head -->
   <script defer data-domain="yourdomain.com"
    src="https://plausible.io/js/script.js"></script>
   

   或者 Google Analytics、PostHog 等。

阶段 6：导出和部署

选项 A：直接从 v0 部署（最快）

1. 在 v0 中点击“部署”
2. 连接您的 Vercel 账户
3. 在 Vercel 设置中添加自定义域名
4. 完成 — 不到 5 分钟即可上线

选项 B：导出到 Next.js 项目（更多控制）

1. npx shadcn@latest add [组件-URL] — 将 v0 组件添加到您现有的 Next.js 项目
2. 或者：手动从 v0 复制代码 → 粘贴到您的项目
3. git push → Vercel 在推送时自动部署

选项 C：导出为静态 HTML（最简单）

1. 复制生成的 HTML/CSS
2. 粘贴到一个新文件
3. 部署到任何静态主机（Netlify、Cloudflare Pages、GitHub Pages）

阶段 7：上线后迭代

上线后，基于数据进行迭代：

基于分析的提示：

1. “主屏行动号召点击率为 2.1%。生成 3 个具有不同标题和行动号召的主屏变体进行 A/B 测试”
2. “移动端跳出率为 68%。审计移动版并修复任何布局问题。将所有区域垂直堆叠。确保触控目标 44px+”
3. “定价页转化率为 1.2%。生成 3 个定价页变体：一个以年付为默认，一个以月付为默认，一个在中间套餐上带有‘最受欢迎’标记”
4. “页面加载时间为 4.2 秒。优化：延迟加载折叠线以下的图片，移除未使用的 CSS，延迟非关键脚本”

针对特定页面类型的 v0 提示

SaaS 落地页

“为 [产品] 构建一个 SaaS 落地页。深色主题。区域：主屏、社交证明（标志）、3 个价值主张（结果）、工作原理（3 步）、推荐语（3）、定价（3 个套餐，年付默认，增长版推荐）、常见问题（6）、最终行动号召、页脚。样式：像 Stripe 一样简洁，像 Linear 一样黑暗。主色：#0066FF。字体：Inter。”

定价页

“为 [产品] 构建一个定价页。3 个套餐：入门版 $49/月，增长版 $199/月（推荐），企业版（联系我们）。月付/年付切换，年付默认。套餐下方的功能对比表格。包含 8 个问题的常见问题区域。企业版包含‘预约通话’行动号召，而不是价格。”

候补名单页

“为 [产品] 构建一个候补名单页，将于 [月份] 上线。主屏：产品名称、一句话价值主张、电子邮件输入 +‘加入候补名单’按钮。下方：您将获得的 3 项内容（抢先体验、创始定价、优先支持）。社交证明：‘候补名单上有 2,000+ 人。’显示注册人数的计数器。”

活动/网络研讨会页

“为 [活动名称] 于 [日期] 构建一个注册页。主屏：活动名称、日期/时间、一句话描述。下方：3 个参加理由。演讲者区域，包含头像、姓名、头衔、演讲标题。议程/时间线。注册表单：姓名、电子邮件、公司。‘保存我的席位’行动号召。”

输出格式

v0 落地页构建 — [页面名称]

v0 项目 URL：[v0.dev 链接]
部署 URL：[生产 URL]

使用的提示：
[主提示文本]

迭代日志：
1. 生成了 v1 — [什么有效，什么需要更改]
2. [“更改主屏”] — [结果]
3. [“添加推荐语区域”] — [结果]
...

导出方法：[直接部署 / shadcn add / 手动复制]

上线后：
- 分析：[已连接的 Plausible / GA / PostHog]
- 转化率：X%（目标：Y%）
- 下次迭代：[日期 / 触发条件]

实施检查清单

• 真实文案 — 无 lorem ipsum，无 AI 生成的占位文本
• 真实图片 — 产品截图、客户标志、实际头像
• 所有行动号召链接到实际 URL（不是“#”）
• 表单连接到后端（ConvertKit、HubSpot、API）
• 移动端响应式（在 iPhone SE + iPhone Pro Max + iPad 上测试过）
• 页面加载时间低于 3 秒（Lighthouse 分数 90+）
• 已安装并验证分析工具（检查实时仪表板）
• SEO：标题标签、元描述、H1、所有图片的 alt 文本
• 法律：页脚中的隐私政策链接、服务条款链接
• 无 AI“垃圾内容” — 无通用 SVG 插图，无 lorem ipsum

质量检查

在交付前，请验证：

• 输出与用户所述请求匹配
• 命名的框架或来源反映在建议中
• 可交付成果足够具体，便于代理执行
• 任何假设、风险或依赖关系都已明确说明
• 不包含未经支持的声明、编造的事实或私密/内部引用

常见陷阱

1. 一次性提示。 在一个提示中“构建 SaaS 网站” = 通用、无品牌、中庸的输出。修复：逐区域构建。先做主屏。迭代。然后做定价。迭代。

2. 没有品牌背景的通用输出。 没有品牌颜色、字体和参考，v0 会生成通用的 Tailwind。修复：将品牌背景粘贴到第一个提示中。引用一个已知网站作为样式参考。

3. 占位内容发布到生产环境。 v0 生成“Lorem ipsum”和占位图片。将其上线发布 = 业余水平。修复：在部署前替换所有占位内容。

4. 未对移动端进行迭代。 v0 默认以桌面端为先。移动端布局经常会出问题。修复：将“向我展示移动版”作为专门的迭代步骤。

5. 未连接表单。 一个链接到“#”的“开始免费试用”按钮是虚假承诺。修复：在部署前连接表单和行动号召。

6. 区域过多。 如果您要求，v0 会乐意生成 15 个区域。更多区域 = 更多认知负荷 = 更低转化率。修复：最多 6-8 个区域。删除任何不直接支持转化目标的内容。

专家参考

• Guillermo Rauch (@rauchg) — v0 创建者，Vercel CEO。关注他以获取 v0 更新、提示技术和生成式 UI 理念。
• v0 文档： v0.dev/docs — 提示指南、组件库、导出/部署说明
• shadcn/ui： ui.shadcn.com — v0 生成的组件库。学习它以理解 v0 正在构建什么。

执行产物

• references/framework-notes.md — 命名的框架和参考表
• templates/output-template.md — 代理输出的可交付成果模板
• scripts/check-output.py — 轻量级可交付成果验证器

相关技能

• vibe-coding — 完整 AI 开发工具对比（v0、Lovable、Bolt、Cursor）
• vibe-marketing — AI 驱动的规模化营销内容
• landing-pages — CRO 审计、转化优化模式
• design-system-gtm — 品牌令牌、用于一致 AI 输出的 CSS 变量
• popular-web-designs — 54 个品牌设计系统作为视觉参考
• ui-ux-gtm — 落地页 UX、表单设计、可访问性