mcpField
L
landing-page

landing-page

github.com/nicepkg营销与增长28868 次安装40 周前更新
代码仓库

关于 landing-page

landing-page 是一项用于编写营销落地页的技能,面向需要组织页面内容与转化文案的创作者。它涵盖从首屏和社会证明到定价、常见问题及发布前检查的结构建议。

主要功能

  1. 01落地页结构规划
  2. 02首屏标题与副标题建议
  3. 03社会证明内容安排
  4. 04功能与定价区块指南
  5. 05行动号召与转化优化
  6. 06发布前检查清单

适用场景

  1. 01规划产品营销落地页
  2. 02撰写首屏价值主张和 CTA
  3. 03组织客户评价与功能介绍
  4. 04检查页面移动适配和信任元素

安装

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

$npx skills add https://github.com/nicepkg/ai-workflow --skill landing-page

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

详细介绍

落地页技能

说明

创建落地页时:

1. 页面结构
┌─────────────────────────────────────┐
│           HERO SECTION              │
│  Headline + Subheadline + CTA       │
│           + Hero Image              │
├─────────────────────────────────────┤
│         SOCIAL PROOF BAR            │
│    Logos / "As seen in" / Stats     │
├─────────────────────────────────────┤
│         PROBLEM SECTION             │
│     Pain points your audience has   │
├─────────────────────────────────────┤
│         SOLUTION SECTION            │
│    How your product solves it       │
├─────────────────────────────────────┤
│         FEATURES/BENEFITS           │
│    3-6 key features with benefits   │
├─────────────────────────────────────┤
│         HOW IT WORKS                │
│       3-step process                │
├─────────────────────────────────────┤
│         TESTIMONIALS                │
│    Customer quotes + photos         │
├─────────────────────────────────────┤
│         PRICING                     │
│    Clear pricing options            │
├─────────────────────────────────────┤
│            FAQ                      │
│    Objection handling               │
├─────────────────────────────────────┤
│         FINAL CTA                   │
│    Last push with urgency           │
├─────────────────────────────────────┤
│           FOOTER                    │
│    Trust badges, links, legal       │
└─────────────────────────────────────┘
2. 主视觉区域

标题公式:

  • [实现目标],无需面对[痛点]
  • [形容词]的[实现理想结果]方式
  • [能带来关键优势的产品][产品]
  • 停止[不好的事]。开始[好的事]。
  • [人数][人群]使用[产品]来[实现目标]

副标题:

  • 扩展标题内容
  • 补充具体信息
  • 加入次要优势

示例:

<section class="hero">
  <h1>Build WordPress Themes 10x Faster</h1>
  <p class="subheadline">
    The developer toolkit that eliminates repetitive coding
    so you can focus on what matters — shipping great themes.
  </p>
  <a href="#" class="cta-button">Start Free Trial</a>
  <p class="microcopy">No credit card required • 14-day trial</p>
</section>
3. 社会认同类型

品牌标志栏:

<section class="social-proof">
  <p>Trusted by 10,000+ developers at</p>
  <div class="logos">
    <img src="logo1.svg" alt="Company 1">
    <img src="logo2.svg" alt="Company 2">
    ...
  </div>
</section>

数据栏:

<div class="stats">
  <div class="stat">
    <span class="number">50,000+</span>
    <span class="label">Active Users</span>
  </div>
  <div class="stat">
    <span class="number">4.9/5</span>
    <span class="label">Average Rating</span>
  </div>
  <div class="stat">
    <span class="number">99.9%</span>
    <span class="label">Uptime</span>
  </div>
</div>

用户评价:

<blockquote class="testimonial">
  <p>"Quote that highlights specific results..."</p>
  <footer>
    <img src="avatar.jpg" alt="Name">
    <cite>
      <strong>Name</strong>
      <span>Title, Company</span>
    </cite>
  </footer>
</blockquote>
4. 功能区域

格式:功能 → 优势

<div class="feature">
  <div class="feature-icon">🚀</div>
  <h3>One-Click Deployment</h3>
  <p>Deploy to production in seconds, not hours.
     Spend more time building, less time configuring.</p>
</div>
5. 定价区域
<div class="pricing-card popular">
  <span class="badge">Most Popular</span>
  <h3>Pro Plan</h3>
  <div class="price">
    <span class="currency">$</span>
    <span class="amount">49</span>
    <span class="period">/month</span>
  </div>
  <ul class="features">
    <li>✓ Feature 1</li>
    <li>✓ Feature 2</li>
    <li>✓ Feature 3</li>
  </ul>
  <a href="#" class="cta-button">Get Started</a>
  <p class="guarantee">30-day money-back guarantee</p>
</div>
6. CTA 最佳实践

按钮文案:

  • 开始免费试用
  • 立即开始
  • 下载免费指南
  • 加入 10,000 多名用户
  • 领取专属折扣

辅助元素:

  • 降低风险(退款保证)
  • 紧迫感(限时优惠)
  • 稀缺性(仅剩 X 个)
  • 社会认同(加入其他 X 人)
7. 常见问题区域
<details class="faq-item">
  <summary>Common objection as a question?</summary>
  <p>Answer that overcomes the objection with
     specifics and reassurance.</p>
</details>

常见问题主题:

  • 定价/退款
  • 技术要求
  • 客服支持情况
  • 与其他方案的对比
  • 入门流程
8. 转化率优化

首屏内容:

  • 明确的价值主张
  • 清晰可见的主要 CTA
  • 信任标识

贯穿整个页面:

  • 多个 CTA(执行相同操作)
  • 渐进式信息展示
  • 视觉层次
  • 移动端优化

减少阻碍:

  • 尽量精简表单字段
  • 明确后续步骤
  • 页面加载快速
  • 不含干扰内容
9. 文案撰写技巧

有力词汇:

  • 免费、全新、经验证、简单
  • 即时、保证、限时
  • 独家、高端、终极

避免:

  • 行话和流行术语
  • 含糊的说法
  • 大段文字
  • 多个 CTA
10. 落地页检查清单
  • 标题清晰,突出优势
  • 单一、明确的 CTA
  • 包含社会认同内容
  • 适配移动端
  • 加载速度快(<3s)
  • 信任信号清晰可见
  • 常见问题解答能消除顾虑
  • 已设置分析追踪

评论

支持 Markdown