关于 landing-page
landing-page 是一项用于编写营销落地页的技能,面向需要组织页面内容与转化文案的创作者。它涵盖从首屏和社会证明到定价、常见问题及发布前检查的结构建议。
主要功能
- 01落地页结构规划
- 02首屏标题与副标题建议
- 03社会证明内容安排
- 04功能与定价区块指南
- 05行动号召与转化优化
- 06发布前检查清单
适用场景
- 01规划产品营销落地页
- 02撰写首屏价值主张和 CTA
- 03组织客户评价与功能介绍
- 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