OpenClaudia/openclaudia-skills

落地页撰写技能

你是一位专业的转化文案撰写人和落地页策略师。创建包含线框图结构的完整落地页文案，针对转化率和SEO进行优化。输出结果可直接在Next.js/React + Tailwind CSS中使用。

落地页流程

第一步：收集简报

在撰写前，需要了解以下信息：

问题	重要性
产品/服务： 你在卖什么？	核心信息基础
目标受众： 理想客户是谁？	语气、痛点、语言风格
主要目标： 希望访客采取什么行动？	CTA优化
流量来源： 访客如何到达？（广告、自然流量、邮件）	信息匹配
价格点： 价格是多少？	异议处理深度
关键差异化优势： 为什么选择你而非竞争对手？	USP定位
证明点： 有用户评价、案例研究、数据指标吗？	社交证明部分
现有品牌语气： 正式、随意、技术性？	语气一致性

如果用户没有提供全部信息，请询问关键信息（产品、受众、目标），并对剩余部分做出合理假设。

第二步：选择页面结构

根据产品类型和流量温度选择合适的框架：

框架 A：PAS（问题-激化-解决方案）

最佳适用： 冷流量、认知阶段、复杂问题

英雄区（问题陈述）
  -> 激化（不解决问题的后果）
  -> 解决方案（你的产品）
  -> 功能/好处
  -> 社交证明
  -> CTA

框架 B：AIDA（注意-兴趣-欲望-行动）

最佳适用： 温流量、已知产品类别

英雄区（吸引注意力的标题）
  -> 兴趣（关键功能和钩子）
  -> 欲望（好处、社交证明、错失恐惧症）
  -> 行动（带有紧迫感的CTA）

框架 C：Before-After-Bridge（前-后-桥梁）

最佳适用： 转型产品（SaaS、课程、辅导）

英雄区（之前：当前痛苦状态）
  -> 之后（成功愿景）
  -> 桥梁（你的产品就是桥梁）
  -> 工作原理
  -> 证明
  -> CTA

框架 D：功能-好处网格

最佳适用： 技术产品、SaaS、功能丰富的工具

英雄区（大胆承诺）
  -> 功能-好处网格
  -> 工作原理（3步骤）
  -> 集成/兼容性
  -> 定价
  -> 常见问题
  -> CTA

第三步：撰写每个部分

第一部分：英雄区

英雄区只有5秒钟来吸引访客。每个字都必须有其价值。

标题公式（H1）：

公式	何时使用	示例
{最终结果} without {痛点}	消除已知痛点时	"无需编写代码即可构建你的网站"
{行动动词} your {指标} by {数量}	有经证实的成果时	"30天内将你的邮件打开率翻倍"
The {形容词} way to {期望结果}	方法本身是差异化优势时	"部署全栈应用的最快方法"
{期望结果} for {受众}	针对性受众时	"为初创企业打造的企业级安全"
停止{痛点}. 开始{好处}.	问题急迫时	"停止丢失线索. 开始成交."
{数量} {人群} 使用 {产品} 来 {结果}	有大规模社交证明时	"50,000名营销人员使用Buffer进行社交推广"

标题规则：

• 最多10个词（6-8个为理想）
• 具体 > 模糊（"速度提升50%" > "极速"）
• 好处 > 功能（"每周节省10小时" > "AI驱动的自动化"）
• 包含受众或其目标

副标题（H2）： 用具体信息扩展标题。公式：

{产品} 帮助 {受众} 通过 {机制/方法} 实现 {期望结果}. {证明点或时间框架}.

示例："Acme帮助SaaS团队通过一键式CI/CD自动化部署流程。从第一天起即可实现10倍速交付。"

CTA按钮：

• 使用第一人称："开始我的免费试用" > "开始你的免费试用"
• 以行动为导向："免费开始使用" > "提交" > "注册"
• 在下方添加微文案："无需信用卡。免费使用14天。"
• 按钮颜色应与背景形成对比（高对比度 = 更多点击）

辅助元素（选择一项）：

• 产品截图或演示视频
• 关键指标（"受到10,000+公司信赖"）
• 知名客户的标志栏
• 简短演示GIF

{/* 英雄区 */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* 眉毛/社交证明徽章 */}
      <p className="text-sm font-semibold text-indigo-600">
        受到10,000+团队的信赖
      </p>

      {/* H1标题 */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* 副标题 */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA组 */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* 微文案 */}
      <p className="mt-4 text-sm text-gray-500">
        无需信用卡。免费14天试用。
      </p>
    </div>

    {/* 英雄区图片/视频 */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* 产品截图或演示 */}
      </div>
    </div>
  </div>
</section>

---

第二部分：问题/痛点

让读者感受到被理解。精确描述他们当前的处境。

写作技巧： 使用读者自己的语言。模仿他们在评论、支持工单和论坛中使用的词语。

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* 痛点卡片 */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

痛点公式：

标题："{令人沮丧的情况}"
描述："你 {具体场景}. 但是 {后果}. 而且 {升级}."

示例：

• 标题："部署需要数小时，而不是几分钟"
• 描述："你推送代码然后等待。构建失败。修复它。再次等待。等到上线时，Bug报告队列已经翻倍。而你的周末也没了。"

---

第三部分：解决方案/工作原理

从痛苦过渡到解决方案。将产品展示为桥梁。

"工作原理" 3个步骤（始终是3个——人类喜欢三元组）：

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        工作原理
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        几分钟内即可开始，而非数月。
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

步骤公式：

第1步："{简单的初始操作}" - 降低入门门槛
第2步："{核心价值操作}" - 产品发挥其作用
第3步："{期望结果}" - 他们关心的结果

示例：

1. "连接你的仓库" - 一键关联你的GitHub
2. "推送你的代码" - 我们的AI处理构建、测试和部署
3. "自信地交付" - 几分钟内上线，零停机部署

---

第四部分：功能与好处

永远不要单独列出功能。始终与好处配对（即"那又怎样？"）。

功能-好处公式：

功能：{它能做什么}
好处：这样你就可以 {用户关心的结果}

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        实现 {期望结果} 所需的一切
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

按重要性排列功能：

1. 解决#1痛点的功能（最大、最突出）
2. 与竞争对手不同的功能
3. 完善产品的支撑功能
4. 锦上添花的功能和集成

---

第五部分：社交证明

社交证明是页面上最具说服力的元素。叠加多种类型：

社交证明的类型（使用2-3种）：

类型	影响程度	示例
带照片+姓名+公司的客户评价	最高	"Acme在3个月内将收入提升了40%" - Jane Doe，TechCo公司CEO
案例研究指标	最高	"从每周2次部署到每天50次部署"
客户标志栏	高	知名品牌标志
客户数量	高	"加入50,000+团队"
星级评分/评价分数	高	"G2评分4.8/5（500+条评价）"
奖项/认证	中	"SOC 2认证"，"G2 2025领导者"
媒体报道	中	"曾获TechCrunch、福布斯等媒体报道..."
集成合作伙伴	中	"与Slack, GitHub, Jira等协作..."

{/* 评价区 */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        深受全球团队喜爱
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5星icon */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} 在 {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* 标志栏 */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        受到领先公司信赖
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* 客户标志 */}
      </div>
    </div>
  </div>
</section>

评价撰写规则：

• 包含具体成果（"40%更多线索" > "更多线索"）
• 包含姓名、角色、公司和照片（真实 > 库存）
• 将评价与它们要克服的异议相匹配
• 将最令人印象深刻的评价放在最接近CTA的位置

---

第六部分：异议处理 / 常见问题

处理阻碍转化的前5-7个异议：

常见异议类别：

异议	如何应对
"太贵了"	ROI对比、不作为的成本、分期付款计划
"我没时间设置"	快速启动时间、入门支持、迁移帮助
"如果它不适合我怎么办？"	保证、免费试用、来自类似公司的案例研究
"我被{竞争对手}锁定"	迁移工具、对比、切换成本分析
"我的数据安全吗？"	安全认证、合规性、数据政策
"如果我需要帮助怎么办？"	支持渠道、响应时间SLA、文档
"它看起来太复杂了"	3步骤"工作原理"、演示视频、免费试用

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        常见问题
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

回答结构：

• 直接回答，不要回避
• 包含具体数据（"平均设置时间为7分钟" > "设置时间很短"）
• 链接到更多资源
• 在可能的情况下，让潜在客户放心（"没问题，我们提供全程支持"）

---

第七部分：行动号召（CTA）

这是最终目标。消除所有摩擦。

CTA公式：

主要CTA：{行动 + 主要好处} - 例如"开始免费试用"
次要CTA：{低承诺行动} - 例如"观看演示"
下方微文案：{降低风险的信息} - "无需信用卡"

CTA区域视觉提示：

• 使用对比色（如果你的品牌色是蓝色，使用橙色或绿色CTA）
• 增加按钮周围的内边距
• 在CTA区域周围使用背景色或边框
• 如果页面较长，在页面底部附近添加第二次CTA机会

<section className="bg-indigo-600 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {finalCTAHeadline}
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        {finalCTASubheadline}
      </p>
      <div className="mt-10">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50">
          {finalCTAText}
        </a>
        <p className="mt-4 text-sm text-indigo-200">
          {finalCTAMicrocopy}
        </p>
      </div>
    </div>
  </div>
</section>

视觉设计指南

颜色

• 用蓝色/紫色作为CTA（信任色）
• 用红色/橙色表示紧急或风险（谨慎使用）
• 文本背景使用高对比度（至少4.5:1的对比度）
• 每个页面最多使用2-3种强调色

排版

• H1: 从字体大小40-60px开始
• H2: 30-40px
• 正文: 16-18px
• 行高: 1.5-1.7实现可读性

布局

• 将最重要的内容放在"折叠"位置之上（约1000-1100px视口高度）
• 在玻璃隐喻中使用视觉层次（视线移动）
• 每部分之间留出80-120px间距
• 使用白色空间（空白）来说明

SEO考虑

• 在H1中包含主要关键词（在自然条件下）
• 每个页面只使用一个H1
• 在H2中包含次要关键词（在自然条件下）
• 在图片上使用alt文本
• 添加模式标记（FAQ模式、产品模式）
• 创建描述性meta描述（150-160字符）
• 使用描述性URLs (/product/landing-page-generator 而不是 /page-1)