mcpField
L
landing-pages

landing-pages

github.com/flitzrrr营销与增长976 次安装30 周前更新
代码仓库

关于 landing-pages

Landing Pages 是用于规划和优化营销落地页的技能,强调每页聚焦一个转化目标,并提供页面结构、行动号召、信任元素、移动端设计和测试方面的指导。

主要功能

  1. 01按目标选择页面类型
  2. 02规划首屏内容结构
  3. 03设计行动导向的 CTA
  4. 04安排社会认同并处理异议
  5. 05规划基于假设的 A/B 测试

适用场景

  1. 01创建潜在客户订阅页
  2. 02围绕单一转化目标设计销售页
  3. 03检查移动端落地页流程
  4. 04规划标题和 CTA 测试

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/flitzrrr/frontend-design-skills --skill landing-pages

安装后在 Claude Code 中输入/landing-pages确认已加载。

详细介绍

落地页

每个落地页都只追求一个主要转化目标。多个相互竞争的目标会降低转化率。一个目标,一个页面。

适用范围

在以下情况下使用此技能:

  • 创建用于获客或销售的落地页
  • 设计 CTA 按钮和转化元素
  • 优化首屏区域
  • 策略性地放置社会认同
  • 为落地页规划 A/B 测试
  • 根据目标选择合适的落地页类型

原则

1. 一个目标,一个页面

每个落地页都只追求一个主要转化目标。多个目标会降低转化率。

2. 落地页不是主页

主页提供广泛的信息。落地页用于销售或获客,目标明确且没有干扰。

3. 访客已通过初步筛选

访问落地页的人都已经看过广告或搜索过关键词。页面必须兑现所做出的承诺。

4. 先建立信任,再促成交易

没有用户会在缺乏信任的情况下转化。社会认同、透明度和专业设计必不可少。

5. 必须优先考虑移动端

超过一半的访客通过移动设备访问。无法在智能手机上正常使用的页面,会浪费一半的潜在机会。

6. 测试胜过主观意见

CTA 按钮应该用红色还是绿色,应由 A/B 测试数据决定,而不是设计师。

规则

应做:选择合适的落地页类型
类型目标长度显著特点
订阅页获取潜在客户短至中等提供免费内容或价值交换
销售页销售产品/服务长回应所有异议
点击跳转页推进至下一步转化漏斗短激发兴趣,不要推销
信息收集页收集最少信息最短只有电子邮件字段和 CTA
网络研讨会/活动页获取报名中等日期、演讲者、倒计时
应做:在首屏传达核心信息

无需滚动即可看到的区域必须包含:

  1. 标题: 用一句话清晰说明收益。不要玩文字游戏,也不要故弄玄虚。
  2. 副标题: 进一步说明内容或回应异议。
  3. 主视觉: 通过图片或视频将收益形象化。
  4. CTA 按钮: 清晰可见、对比鲜明、以行动为导向。
  5. 信任元素: 至少包含一项社会认同元素。
应做:设计以行动为导向的 CTA 按钮
  • 措辞应以行动和收益为核心:“开始免费试用”“申请报价”。
  • 不要使用:“提交”“继续”“点击此处”。
  • 在视觉上要从其他内容中脱颖而出(使用对比色)。
  • 对于较长的页面,每个部分之后都要重复 CTA。
  • 每个页面最多使用 1 种主要 CTA 类型。
应做:遵循转化结构(长篇页面)
  1. 指出问题——表明你理解痛点。
  2. 提出解决方案——说明你的产品或服务如何解决问题。
  3. 列出收益——用项目符号列出优势(而非功能)。
  4. 提供社会认同——客户评价、案例研究、评分。
  5. 回应异议——设置常见问题部分。
  6. 制造紧迫感——仅在确有依据时(如数量有限、倒计时)。
  7. 重复 CTA——在页面结尾醒目地发出行动号召。
应做:尽量精简表单
  • 仅收集绝对必要的信息。每增加一个字段都会降低转化率。
  • 订阅:最好只收集电子邮件。
  • 销售:首次联系时只需姓名和电子邮件。
应做:移除或尽量简化导航
  • 落地页不得包含完整的网站导航。
  • 最多保留:链接到主站的 Logo,以及页脚中的法律声明/隐私政策。
不要做:违背广告承诺
  • 如果广告承诺“免费咨询”,页面就必须确实提供免费咨询。
不要做:使用无关的图库照片
  • 普通的商务图库照片无法建立信任。
  • 使用真实照片或有意义的产品可视化内容。
不要做:提供多个同等重要的 CTA
  • 一个页面只有一个目标。仅此而已。
不要做:未经测试就上线
  • 没有 A/B 测试计划的落地页,就是基于侥幸心理的营销。
  • 至少测试:不同标题、CTA 文案和主视觉图片。

模式

问题-激化-解决方案(PAS)

适用于销售和潜在客户开发:1. 直接点明问题;2. 激化问题(如果不解决会发生什么);3. 将你的产品或服务作为解决方案。详情请参阅 references/conversion-patterns.md。

社会认同夹心结构

在 3 个位置展示社会认同:1. 首屏区域(标志、客户数量);2. 优势介绍之后(附照片的推荐语);3. 最终 CTA 之前(评分、保障)。

视频落地页

适用于需要说明的产品:以禁止自动播放的视频(最长 90 秒)作为主视觉,随后在下方展示文字摘要和 CTA。

倒计时营造紧迫感

适用于限时优惠:在 CTA 上方显示倒计时。仅在确有截止日期时使用。虚假的倒计时会永久摧毁信任。

反模式

信息过载

文字太多、版块太多、视觉元素太多。**解决方案:**每个版块都必须在转化流程中发挥作用。

隐藏的 CTA

CTA 在视觉上不醒目、尺寸过小,或只有大量滚动页面后才会显示。**解决方案:**首屏区域及每个版块之后都要有 CTA。使用对比鲜明的颜色,并确保尺寸足够大。

泛泛的标题

“欢迎”或“我们提供解决方案”。没有用户会觉得这是在对自己说。**解决方案:**使用以收益为导向的标题:“30 天内增加 50% 的潜在客户。”

有问题的移动端转化流程

桌面端体验出色,移动端却无法使用。超过 50% 的流量无法转化。**解决方案:**采用移动端优先设计。确保 CTA 按钮可用拇指轻松点击。

没有假设的 A/B 测试

随机测试不同变体,得不出可执行的见解。**解决方案:**每项测试都要有一个假设:“如果我们更改 X,我们预计会得到 Y,因为 Z。”

检查清单

  • 每个页面恰好定义一个转化目标
  • 选择落地页类型(选择加入、销售、点击跳转等)
  • 首屏区域包含标题、副标题、主视觉、CTA、信任要素
  • CTA 按钮以行动为导向,且对比鲜明
  • 移除导航,或将其精简为标志和法律信息
  • 将表单字段精简至最低限度
  • 至少在 3 个位置展示社会认同
  • 设置 FAQ 版块,解答最常见的异议
  • 单独检查并优化移动端版本
  • 广告承诺与落地页内容保持一致
  • 加载时间少于 3 秒
  • 制定 A/B 测试计划,至少包含 1 个假设
  • 配置跟踪和转化衡量

交叉引用

  • customer-journey — 落地页是一个核心触点
  • design-process — 落地页的创建遵循相同流程
  • ai-design-workflow — AI 可以生成标题、CTA 和文案变体
  • website-audit — 现有落地页属于审计范围
  • usability — 表单和转化优化
  • ui-design — 转化元素的视觉设计

评论

支持 Markdown