⚠️
重要前提
安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →
落地页优化器 - 提升转化率的AI工具 | 页面结构模板与SEO检查清单
landing-page-optimizer by onewave-ai/claude-skills
安装命令
npx skills add https://github.com/onewave-ai/claude-skills --skill landing-page-optimizer🇨🇳中文介绍
落地页优化器
说明
优化落地页时：
- 审核当前页面（速度、用户体验、转化元素）
- 识别改进领域
- 实施优化
- 设置跟踪
首屏检查清单
- 清晰的标题 - 5秒内传达价值主张
- 辅助副标题 - 详细说明益处
- 主视觉图片/视频 - 相关、高质量
- 主要行动号召 - 对比色、行动导向
- 社会证明 - 徽标、评分、推荐语
- 无导航干扰 - 最小化或隐藏导航
页面结构模板
// 最佳落地页结构
<main>
{/* 1. 主视觉区域 */}
<section className="min-h-[80vh] flex items-center">
<div className="max-w-6xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
<div>
<Badge>New Feature</Badge>
<h1 className="text-4xl lg:text-6xl font-bold mt-4">
Main Value Proposition
</h1>
<p className="text-xl text-gray-600 mt-6">
Supporting statement that expands on the benefit
</p>
<div className="flex gap-4 mt-8">
<Button size="lg">Primary CTA</Button>
<Button size="lg" variant="outline">Secondary CTA</Button>
</div>
<div className="flex items-center gap-6 mt-8">
<div className="flex -space-x-2">
{avatars.map(a => <Avatar key={a.id} src={a.src} />)}
</div>
<p className="text-sm text-gray-600">
<strong>2,000+</strong> happy customers
</p>
</div>
</div>
<div>
<img src="/hero-image.png" alt="Product preview" />
</div>
</div>
</section>
{/* 2. 社会证明 - 徽标 */}
<section className="py-12 bg-gray-50">
<p className="text-center text-gray-500 mb-8">Trusted by leading companies</p>
<div className="flex justify-center gap-12 opacity-60">
{logos.map(logo => <img key={logo.name} src={logo.src} alt={logo.name} />)}
</div>
</section>
{/* 3. 问题/解决方案 */}
<section className="py-20">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl font-bold">The Problem</h2>
<p className="text-xl text-gray-600 mt-4">
Describe the pain point your audience faces
</p>
</div>
</section>
{/* 4. 功能/益处 */}
<section className="py-20 bg-gray-50">
<h2 className="text-3xl font-bold text-center">How It Works</h2>
<div className="grid md:grid-cols-3 gap-8 mt-12 max-w-6xl mx-auto">
{features.map(feature => (
<Card key={feature.title}>
<feature.icon className="w-12 h-12 text-primary-500" />
<h3 className="text-xl font-semibold mt-4">{feature.title}</h3>
<p className="text-gray-600 mt-2">{feature.description}</p>
</Card>
))}
</div>
</section>
{/* 5. 推荐语 */}
<section className="py-20">
<h2 className="text-3xl font-bold text-center">What Customers Say</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
{testimonials.map(t => (
<TestimonialCard key={t.name} {...t} />
))}
</div>
</section>
{/* 6. 定价（如适用） */}
<section className="py-20 bg-gray-50">
<PricingTable plans={plans} />
</section>
{/* 7. 常见问题 */}
<section className="py-20">
<h2 className="text-3xl font-bold text-center">FAQ</h2>
<Accordion items={faqs} className="max-w-3xl mx-auto mt-12" />
</section>
{/* 8. 最终行动号召 */}
<section className="py-20 bg-primary-600 text-white text-center">
<h2 className="text-3xl font-bold">Ready to Get Started?</h2>
<p className="text-xl opacity-90 mt-4">Join 2,000+ companies already using our product</p>
<Button size="lg" variant="secondary" className="mt-8">
Start Free Trial
</Button>
<p className="text-sm opacity-75 mt-4">No credit card required</p>
</section>
</main>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
