Communitygithub.com

Camilexx/enviosxpress-web

使用经过验证的CRO（转化率优化）模式构建高转化率着陆页。涵盖英雄区域、定价表、社会证明、表单优化、文案撰写公式和A/B测试策略。

enviosxpress-web 是什么？

该AI技能旨在帮助开发者和营销人员构建高转化率的着陆页，通过应用经过验证的CRO（转化率优化）模式来提升用户转化率。它支持构建完整的着陆页面流，从英雄区域、社会证明、定价表到常见问题解答等，每个元素都基于转化心理学和经过测试的模式。该技能特别适合用于需要快速构建高转化率页面的场景，如产品发布、营销活动或网站重新设计。它提供了一套清晰的层次结构来检查转化要素，如价值主张、行动号召、社会证明和摩擦最小化。此外，还包含了详细的HTML和CSS代码示例，帮助用户快速实现各种页面组件。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Camilexx/enviosxpress-web/tree/HEAD/skills/landing-page-cro
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

预览

来自技能 README

enviosxpress-web preview
enviosxpress-web preview

文档

🚀 着陆页CRO技巧

构建能将访客转化为客户的着陆页。 每个元素都基于转化心理学和经过验证的模式。

快速参考

转化层次结构（按此顺序检查）：
1. 价值主张在5秒内清晰可见？→ 英雄标题
2. 行动号召在首屏可见？→ 按钮位置
3. 存在社会证明？→ 推荐、标志、数字
4. 解决了反对意见？→ 常见问题、保证
5. 减少了摩擦？→ 表单字段、加载速度

章节架构（从上到下）

最佳着陆页流程：
┌─────────────────────────────────────────┐
│  1. 导航栏 — Logo + 导航 + 行动号召按钮 │
├─────────────────────────────────────────┤
│  2. 英雄区域 — 标题 + 副标题 + 行动号召 + 图片 │
│     （首屏，< 3秒）                       │
├─────────────────────────────────────────┤
│  3. 社会证明栏 — 标志 / 数字              │
├─────────────────────────────────────────┤
│  4. 问题 — 痛点（PAS格式）                │
├─────────────────────────────────────────┤
│  5. 解决方案 — 你的产品作为答案            │
├─────────────────────────────────────────┤
│  6. 功能 — 3-6个关键好处                 │
├─────────────────────────────────────────┤
│  7. 工作原理 — 3个步骤                   │
├─────────────────────────────────────────┤
│  8. 推荐 — 真实用户评价                   │
├─────────────────────────────────────────┤
│  9. 定价 — 计划 + 比较                   │
├─────────────────────────────────────────┤
│ 10. 常见问题 — 反对意见处理              │
├─────────────────────────────────────────┤
│ 11. 最终行动号召 — 最后转化推动          │
├─────────────────────────────────────────┤
│ 12. 页脚 — 链接 + 法律 + 联系方式        │
└─────────────────────────────────────────┘

英雄区域模式

模式1：分屏英雄（标题左，视觉右）

<section class="hero">
  <div class="hero-grid">
    <!-- 左侧：文案 -->
    <div class="hero-content">
      <span class="hero-badge">🚀 2026年新功能</span>
      <h1 class="hero-title">
        寄包裹到
        <span class="text-gradient">全厄瓜多尔</span>
        只需 $2.50
      </h1>
      <p class="hero-subtitle">
        最快速、最可靠的快递服务。
        24-48小时送达，实时跟踪。
      </p>
      <div class="hero-actions">
        <a href="#cotizar" class="btn btn-primary btn-lg">
          免费估算运费
          <svg><!-- 箭头图标 --></svg>
        </a>
        <a href="#como-funciona" class="btn btn-secondary btn-lg">
          查看工作原理
        </a>
      </div>
      <div class="hero-proof">
        <div class="hero-avatars"><!-- 堆叠头像 --></div>
        <p><strong>+2,500</strong> 位创业者信赖我们</p>
      </div>
    </div>
    
    <!-- 右侧：视觉 -->
    <div class="hero-visual">
      <!-- 产品截图、插图或视频 -->
    </div>
  </div>
</section>

.hero {
  padding: var(--space-section) 0;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hero-avatars {
  display: flex;
}
.hero-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -8px;
}
.hero-avatars img:first-child {
  margin-left: 0;
}

/* 移动端 */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-proof { justify-content: center; }
  .hero-visual { order: -1; }
}

社会证明模式

Logo栏

<section class="social-proof-bar">
  <p class="social-proof-label">信赖我们</p>
  <div class="logo-scroll">
    <div class="logo-track">
      <!-- 重复Logo 2次以形成无限滚动 -->
      <img src="/logos/brand1.svg" alt="品牌1" />
      <img src="/logos/brand2.svg" alt="品牌2" />
      <!-- ... -->
    </div>
  </div>
</section>

.social-proof-bar {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
}

.social-proof-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-8);
}

.logo-scroll {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.logo-track {
  display: flex;
  gap: var(--space-12);
  animation: scroll 30s linear infinite;
}

.logo-track img {
  height: 28px;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all var(--duration-normal) var(--ease-out);
}

.logo-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

数据栏

<div class="stats-bar">
  <div class="stat">
    <span class="stat-value" data-count="15000">15,000+</span>
    <span class="stat-label">已交付订单</span>
  </div>
  <div class="stat">
    <span class="stat-value">98.5%</span>
    <span class="stat-label">交付率</span>
  </div>
  <div class="stat">
    <span class="stat-value">24小时</span>
    <span class="stat-label">平均时间</span>
  </div>
  <div class="stat">
    <span class="stat-value">4.9★</span>
    <span class="stat-label">评分</span>
  </div>
</div>

定价部分

三种计划布局与切换

<section class="pricing" id="pricing">
  <div class="container">
    <div class="section-header">
      <h2>简单透明的计划</h2>
      <p>无隐藏费用。随时取消。</p>
    </div>
    
    <!-- 切换 -->
    <div class="pricing-toggle">
      <span class="toggle-label" data-active="monthly">月度</span>
      <button class="toggle-switch" role="switch" aria-checked="false">
        <span class="toggle-thumb"></span>
      </button>
      <span class="toggle-label" data-active="yearly">
        年度 <span class="toggle-badge">-20%</span>
      </span>
    </div>
    
    <!-- 计划网格 -->
    <div class="plans-grid">
      <!-- 基础版 -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>基础版</h3>
          <p class="plan-desc">适合初创创业者</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="$19" data-yearly="$15">$19</span>
          <span class="price-period">/月</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 每月100次配送</li>
          <li class="feature-included">✓ 基础跟踪</li>
          <li class="feature-included">✓ 邮件支持</li>
          <li class="feature-excluded">✗ API访问</li>
          <li class="feature-excluded">✗ 优先支持</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">免费开始</button>
      </div>
      
      <!-- 专业版（特色） -->
      <div class="plan-card plan-featured">
        <div class="plan-badge">最受欢迎</div>
        <div class="plan-header">
          <h3>专业版</h3>
          <p class="plan-desc">适合成长型业务</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="$49" data-yearly="$39">$49</span>
          <span class="price-period">/月</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 每月500次配送</li>
          <li class="feature-included">✓ 实时跟踪</li>
          <li class="feature-included">✓ 优先支持</li>
          <li class="feature-included">✓ API访问</li>
          <li class="feature-included">✓ 仪表盘分析</li>
        </ul>
        <button class="btn btn-primary btn-lg btn-full">立即开始</button>
      </div>
      
      <!-- 企业版 -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>企业版</h3>
          <p class="plan-desc">定制化解决方案</p>
        </div>
        <div class="plan-price">
          <span class="price-amount">定制</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 无限配送</li>
          <li class="feature-included">✓ 专属客户经理</li>
          <li class="feature-included">✓ 保证SLA</li>
          <li class="feature-included">✓ 定制集成</li>
          <li class="feature-included">✓ 企业发票</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">联系销售</button>
      </div>
    </div>
    
    <!-- 保证 -->
    <div class="guarantee">
      <span class="guarantee-icon">🛡️</span>
      <p>30天满意保证。如果您不满意，我们全额退款。</p>
    </div>
  </div>
</section>

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: var(--space-12) auto;
}

.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.plan-featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl);
  transform: scale(1.05);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-included {
  color: var(--color-text);
}

.feature-excluded {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.btn-full {
  width: 100%;
}

@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plan-featured {
    transform: none;
    order: -1;
  }
}

常见问题部分

<section class="faq">
  <div class="container">
    <h2>常见问题</h2>
    <div class="faq-grid">
      <details class="faq-item">
        <summary class="faq-question">
          配送需要多长时间？
          <svg class="faq-arrow"><!-- 箭头 --></svg>
        </summary>
        <div class="faq-answer">
          <p>我们的平均配送时间为主要城市24-48小时，农村地区48-72小时。</p>
        </div>
      </details>
      <!-- 更多项目... -->
    </div>
  </div>
</section>

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

details[open] .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  animation: slideDown 0.3s var(--ease-out);
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}

文案写作公式

英雄标题 (PAS：问题 → 激化 → 解决方案)

公式：[期望结果] + [在特定时间内] + [无主要障碍]

示例：
✅ "寄包裹到全厄瓜多尔只需 $2.50 — 24小时送达"
✅ "在48小时内上线你的网店，无需编程知识"
✅ "通过自动邮件营销在30天内让销售额翻倍"

❌ "最好的配送平台"（通用，无好处）
❌ "创新的物流解决方案"（空洞的企业用语）

功能列表 (FAB：功能 → 优势 → 好处)

公式：[动作动词] + [做什么] + [为什么重要]

示例：
✅ "实时跟踪每个包裹 — 永远不会丢失包裹"
✅ "货到付款 — 你的客户在收到时付款"
✅ "5分钟集成你的商店 — 无需代码，无需麻烦"

行动号召按钮

公式：[动词] + [好处] + [如果可能，紧迫感]

示例：
✅ "免费估算运费"
✅ "开始14天免费试用"
✅ "获得独家访问权限"
✅ "点击并节省现在"

❌ "提交"、"发送"、"更多信息"
❌ "下载PDF"

表单优化

最小字段原则

每个额外字段都会降低转化率。使用渐进式档案：

<form class="quote-form">
  <div class="form-step active">
    <label for="from">出发地：</label>
    <input type="text" id="from" placeholder="你的城市" required />
    
    <label for="to">目的地：</label>
    <input type="text" id="to" placeholder="目的地城市" required />
    
    <label for="weight">重量（公斤）：</label>
    <input type="number" id="weight" placeholder="例如 5" min="0.5" step="0.5" />
    
    <button type="button" class="btn btn-primary" onclick="nextStep()">
      获取报价
    </button>
  </div>
  
  <div class="form-step">
    <h3>我们已经为你准备好了！</h3>
    <div class="price-display">
      <span class="price-estimate">$12.50</span>
      <p>预计送达时间：24-48小时</p>
    </div>
    <label for="email">你的邮箱：</label>
    <input type="email" id="email" placeholder="[email protected]" required />
    
    <button type="submit" class="btn btn-primary btn-lg btn-full">
      预订配送
    </button>
  </div>
</form>

表单CSS

.quote-form {
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.form-step {
  display: none;
}
.form-step.active {
  display: block;
}

input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  transition: border-color var(--duration-normal);
}

input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

.price-display {
  text-align: center;
  padding: var(--space-8);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.price-estimate {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-primary);
}

A/B测试策略

测试菜单（按优先级排列）

1. 英雄标题和副标题            [最大影响]
2. 主要行动号召：颜色、文案、位置
3. 社会证明：多少？如何显示？
4. 表单字段：数量、标签、顺序
5. 定价：计划、布局、价格锚定
6. 常见问题：顺序、标题、展开状态
7. 页脚：链接、布局、致谢

工具和追踪

  • Google Optimize（免费，用于Google Analytics集成）
  • VWO（视觉网站优化器）
  • Optimizely（企业级）
  • 自带？: 使用？_utm_source=test&_utm_medium=a-b

快速CSS变量模板

:root {
  /* 颜色 */
  --color-primary: #2563eb;
  --color-primary-light: #dbeafe;
  --color-secondary: #7c3aed;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;

  /* 排版 */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --text-hero: clamp(2.5rem, 5vw, 4rem);
  --text-5xl: 3rem;
  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;

  /* 间距 */
  --space-section: clamp(4rem, 8vw, 6rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* 半径 */
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);

  /* 过渡 */
  --duration-normal: 0.2s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 行高 */
  --leading-tight: 1.1;
  --leading-relaxed: 1.625;

  /* 字距 */
  --tracking-tight: -0.025em;
  --tracking-wider: 0.05em;
}

页脚组件

<footer class="footer">
  <div class="container footer-grid">
    <div class="footer-brand">
      <h3>EnvíosXpress</h3>
      <p>厄瓜多尔最快速的快递服务。</p>
    </div>
    <div class="footer-links">
      <h4>公司</h4>
      <a href="/sobre-nosotros">关于我们</a>
      <a href="/blog">博客</a>
      <a href="/prensa">新闻</a>
    </div>
    <div class="footer-links">
      <h4>支持</h4>
      <a href="/contacto">联系我们</a>
      <a href="/faq">常见问题</a>
      <a href="/politica-de-privacidad">隐私政策</a>
    </div>
    <div class="footer-legal">
      <p>&copy; 2026 EnvíosXpress. 保留所有权利。</p>
    </div>
  </div>
</footer>

.footer {
  background: var(--color-text);
  color: white;
  padding: var(--space-section) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.footer-brand h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.footer-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-normal);
}

.footer-links a:hover {
  color: white;
}

.footer-legal {
  grid-column: 1 / -1;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: var(--space-8);
}

策略说明：转化心理学

为什么这种结构有效？

  1. 认知流畅性 — 熟悉的模式减少脑力负担
  2. 减少选择 — 每个部分只有一个目标
  3. 社会证明 — 我们跟随他人的行为
  4. 期望理论 — 客户需要知道他们得到什么以及何时得到

“清晰胜过说服。” 你的登陆页面应该消除疑虑，而不是创造它们。

使用？enviosxpress-web同时具备转化率和速度。

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community