mcpField
T
taste-landing-page

taste-landing-page

github.com/madebymustafa营销与增长20052 次安装11 周前更新
代码仓库

关于 taste-landing-page

taste-landing-page 是一项落地页结构技能,围绕访客决策安排首屏、证明信息、定价和最终 CTA。它为开发者与设计师提供受众文案、信任信息位置及移动端布局规则。

主要功能

  1. 01首屏信息与 CTA 标准
  2. 02按销售顺序安排页面区块
  3. 03针对不同受众的首屏模式
  4. 04CTA 一致性与信任信息布局
  5. 05定价与移动端布局指引

适用场景

  1. 01规划能快速说明价值的落地页
  2. 02围绕购买者疑问安排功能与证明信息
  3. 03检查 CTA 位置和定价呈现
  4. 04调整落地页区块以适配移动端

安装

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

$npx skills add https://github.com/madebymustafa/design-taste --skill taste-landing-page

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

详细介绍

taste-landing-page

落地页只有一个任务:推动读者从好奇走向决策。结构就是文案;这项技能就是结构。

1. 8 秒阅读法(先设计页面上方三分之一)

访客必须在 8 秒内、不滚动页面,就能回答三个问题:

  1. 这是什么?——H1 应说明产品或成果,而非类别(“无需数据团队的分析” > “企业级分析平台”)。
  2. 面向谁?——副标题应点明受众(“面向独立创始人和一人 SaaS 团队”)。
  3. 我要做什么?——恰好一个主要 CTA,清晰可见,并位于首屏。

如果页面上方三分之一无法回答这三个问题,后面的内容就只是折扣。

2. 栏目顺序(销售流程)

  1. 主视觉区——承诺 + 主要 CTA(+ 产品本身,作为视觉证据)。
  2. 背书栏——徽标、用户数量或媒体报道。先建立信任,再提出主张。
  3. 问题——用读者自己的措辞点明一个痛点(而不是“现代团队需要……”)。不超过 3 行。
  4. 解决机制——最多 3 项功能,每项用一句话说明 + 一个证明点。落地页上超过 3 项功能,就成了规格表,而不是推介。
  5. 证明——带数字的指标说明、附姓名和职位的客户引言,或两者兼有。在这里没有证据支撑的主张,就会在这里失效。
  6. 工作原理——仅 3 个步骤(适用于需要说明的产品)。
  7. 定价——最多 3 个档位;突出中间档。落地页上绝不要设置 4 个或更多档位。
  8. 收尾——用一句话消除残余疑虑(“无需信用卡。4 分钟即可完成设置。”)+ 再次放置 CTA + 一句有人情味的话(“联系真人 →”)。

每个栏目都必须通过回答读者当下的疑虑来证明其存在价值。如果一个栏目没有回答任何问题,那它就是装饰。

3. 主视觉区模式(根据受众选择一种)

受众模式H1 示例结构
开发者工具问题 → 机制“少打字,多交付。” + 终端/产品面板
B2B 买家成果 + 适用对象限定“通过自助式入门流程,将支持工单减少 40%”
消费者愿望 + 消除阻碍“你的照片,在你睡觉时整理妥当”
企业类别 + 证据“面向受监管行业的身份安全” + 合规标识
独立创作者/爱好者身份认同 + 邀请“打造助你获得工作的作品集”

绝不要组合两种模式(在一个 H1 中同时呈现成果和身份认同,会显得含糊)。在读者理解承诺之前,主视觉区绝不要展示产品截图。

4. CTA 原则

  • 每个视口只设置一个主要 CTA。 次要操作应使用文本链接或弱化按钮;两个同等醒目的按钮就等于没有按钮。
  • 主要 CTA 标签应说明成果或操作:“开始免费试用” > “开始使用” > “提交”。第一人称标签(“开始我的免费试用”)能提高消费类页面的点击率。
  • CTA 的颜色就是强调色——该强调色在同一视口内不得出现在其他地方。
  • 最终 CTA 的标签必须与主视觉区的 CTA 相同。绝不要在页面中途更改名称。
  • 表单 CTA:尽量减少字段(试用只需电子邮箱 + 密码;只有企业级方案才需要公司名称)。

5. 证明与信任的放置位置

  • 徽标:使用灰度效果,放在功能介绍之前;不超过 6 个徽标(更多会显得虚假)。
  • 指标说明:数字 + 衡量内容 + 来源说明。“试用转付费率 18.4%”毫无意义;“4,120 个团队的试用转付费率为 18.4%”才有意义。
  • 引言:注明姓名、职位和公司——绝不要写“来自加利福尼亚的 John D.”。
  • 合规标识(SOC 2、GDPR、ISO 27001)应放在定价和表单旁边,也就是用户做决定的地方——不要藏在页脚。
  • 在风险最高的地方提供一项保障:表单附近(“14 天免费试用。两次点击即可取消。”)。

6. 定价心理(锚定式三档)

  • 三档定价:入门档(免费或低价)、主推档(最受欢迎——视觉上突出,使用一种强调色)、高端档(高价或“联系我们”)。
  • 主推档是锚点:用户会以它为基准进行比较;让它在视觉上突出,但不要过于强势。
  • 每档都将价值最高的条目列在最前面。面向消费者时,将 $29/month 换算为“≈ 每天 $1”;面向 B2B 时,提供年度计费,并标注“免费赠送 2 个月”。
  • 绝不要让三个价格栏的视觉权重相同——视觉焦点必须落在其中一档上。

7. 移动端表现(第二个页面)

  • 移动端保持相同的版块顺序;在小屏幕上,将主视觉区副标题和信任证明条前置(信任证明优先于功能介绍)。
  • CTA:宽度占满,高度 ≥ 48px;无论滚动到页面顶部还是底部,都要能轻松用拇指触及。
  • 将表格改为纵向堆叠的卡片,或支持横向滚动并提供提示;价格档位纵向堆叠,移动端将主推档置于最前面。

8. 检查清单(出现以下情况时,页面不合格……)

  • 页面顶部三分之一区域未能在 8 秒内说明产品是什么、面向谁、能做什么。
  • 任一视口中有多个主要 CTA。
  • 列出功能,却未在附近提供证明。
  • 任一声明未在同一视口中注明来源。
  • 定价栏视觉权重相同,或定价档位达到 4 档及以上。
  • 存在无法回应任何异议的版块。
  • 主视觉区 CTA 标签与最终 CTA 标签不同。

评论

支持 Markdown