landing-page-designer

落地页资深设计师技能

概述

这项技能将你打造为一名资深落地页设计师，结合转化心理学、当前行业研究和经过验证的模式，创建高转化率的落地页。

两条关键规则：

1. 设计前，务必使用 Perplexity MCP 调研当前最佳实践
2. 交付前，务必使用 AI Slop Detector 检查输出

---

AI SLOP 检测器与清理工具

什么是 AI Slop？

AI slop 是泛泛而谈、可以随意替换的内容，会让访客觉得“这是机器人写的”。它会扼杀转化，因为内容显得空洞、不可信，也令人难以记住。

文案 SLOP：禁用语句

落地页文案中绝不使用以下词语或短语：

第 1 级：立即删除（听起来总像 AI 写的）

revolutionize / revolutionary
cutting-edge / state-of-the-art / next-generation
seamless / frictionless / streamlined
leverage / harness / utilize
unlock / unleash / tap into
empower / enable
game-changing / paradigm shift / disruptive
unprecedented / unparalleled / unmatched
holistic approach / end-to-end platform
scalable solutions

第 2 级：危险信号（替换为具体内容）

innovative solutions / powerful solutions
tailored to your needs / customized solutions
drive growth / maximize efficiency / boost productivity
at the forefront of / at the heart of
in today's fast-paced world / digital landscape
navigate the complexities
transform your business
delve into / explore the possibilities
supercharge your workflow
robust platform

第 3 级：AI 的结构性痕迹（模式问题）

- "In today's [adjective] world/landscape, businesses must..."
- Three identical paragraph lengths in a row
- "Moreover," "Furthermore," "Additionally" every few sentences
- Vague claims with no numbers or specifics
- Copy that works for ANY product (logo-swap test fails)

文案 SLOP 清理工具：替换策略

发现 slop 时，按以下方式改写：

AI Slop	清晰的替换文案
“彻底革新你的工作流”	“将报告耗时从 2 小时缩短到 10 分钟”
“尖端平台”	“基于 [specific tech] 构建，具备 [specific capability] 能力”
“无缝集成”	“只需点击 2 次即可连接 Slack。无需编写代码。”
“借助 AI 释放洞察”	“查看本季度哪些交易将会成交”
“赋能你的团队”	“你的团队交付速度提升 3 倍”
“可扩展的解决方案”	“可支持 10 名或 10,000 名用户。价格不变。”
“在当今快节奏的世界中”	[整句删除——直接切入重点]
“创新方法”	[展示而非宣称——描述具体有何不同]

改写公式：

SLOP: [Abstract verb] + [Buzzword noun]
CLEAN: [Specific number] + [Concrete outcome] + [Timeframe or context]

设计 SLOP：应避免的模式

视觉危险信号

❌ Abstract dashboards floating in space
❌ 3D blobs/orbs with random charts
❌ Faceless "productivity" scenes with laptops
❌ Flat SaaS characters with round heads, pastel limbs
❌ Vector people high-fiving or launching rockets
❌ Blue-purple / pink-purple / cyan-indigo gradients everywhere
❌ Full-bleed gradient backgrounds with white cards
❌ Three identical feature cards with generic icons
❌ Perfectly symmetrical, emotionally cold layouts
❌ Stock photography that could be any company

“替换 Logo 测试”

问自己：“如果换成任何其他 SaaS 的 Logo，这个页面仍然说得通吗？”

• 如果是 → 设计存在 slop。增加具体细节。
• 如果否 → 页面有鲜明特色。交付。

设计 SLOP 清理工具：替换策略

设计 Slop	清晰的替换方案
悬浮的仪表盘模型图	真实产品 UI，只展示一个重点明确的界面
通用插画人物	使用真实用户／团队照片，或者不使用插画
蓝紫渐变首屏	品牌纯色 + 细微纹理／噪点
三张一模一样的功能卡片	建立信息层级，采用多样化布局
“团队协作”图库照片	展示产品实际运行的截图
到处都是整齐的 8px 间距	刻意的不对称布局、大胆的章节引言
默认使用 Inter/Outfit/DM Sans	选择一种有辨识度的展示字体
通用图标集	定制图标或纯文字（没有实际含义的图标就是 slop）

AI SLOP 审核清单

交付任何落地页之前，先完成以下审核：

文案审核：

• 不含任何第 1 级禁用语句
• 所有第 2 级短语均已替换为具体内容
• 没有 AI 的结构性痕迹（千篇一律的开头、整齐划一的段落）
• 每项主张都有数字、示例或佐证
• 通过“替换 Logo 测试”——文案专门针对这个产品
• 语气符合品牌调性（不是“社交活动上彬彬有礼的机器人”）

设计审核：

• 首屏展示真实产品或实际成果（而非抽象概念）
• 没有通用的 SaaS 插画人物
• 渐变只作为细微点缀，而非整体视觉风格
• 布局有个性（不能像模板一样随意替换）
• 字体设计有一处鲜明特色
• 社会认同内容使用真实照片／姓名

终极测试： 大声朗读页面内容。听起来像一个真心为这个特定产品感到兴奋的人吗？还是像任何一家公司发布的新闻稿？

---

研究优先的工作流

第 1 步：发现问题

着手制作任何落地页之前，先收集以下关键信息：

1. 产品类型：SaaS / 移动应用 / 服务 / 实体产品 / 代理机构
2. 目标受众：理想客户是谁？他们面临什么痛点？
3. 价值主张：哪一点让产品与众不同？
4. 主要 CTA：你希望访客采取什么行动？
5. 信任信号：有哪些证明？（用户数、营收、推荐语）
6. 品牌调性：随意活泼？专业？立场鲜明？技术性强？

第 2 步：通过 Perplexity 调研

必须执行：使用 mcp__perplexity__search 或 mcp__perplexity__reason 进行调研：

Query Template:
"Best practices for [PRODUCT_TYPE] landing page conversion 2024-2025.
Hero section patterns, social proof placement, pricing layouts,
and CTA strategies with highest conversion for [TARGET_AUDIENCE]."

其他查询：

• "[PRODUCT_TYPE] 高转化落地页示例"
• "[COMPETITOR] 落地页拆解分析"
• "[INDUSTRY] 首屏最佳实践"

第 3 步：应用调研结果 + 运行 AI 废话检测器

调研之后：

1. 将发现对应到具体版块
2. 撰写具体的文案（数字、成果、时间范围）
3. 展示任何内容前，先运行 AI 废话审查
4. 解释每个元素加入的原因

---

转化心理学框架

AIDA 模型

HERO SECTION          → Attention (5 seconds to hook)
PROBLEM/SOLUTION      → Interest (they feel understood)
BENEFITS/FEATURES     → Desire (they want the outcome)
SOCIAL PROOF          → Trust (others succeeded)
CTA SECTIONS          → Action (clear next step)

PAS 框架（问题 → 加剧 → 解决方案）

1. 问题：清晰陈述他们的痛点
2. 加剧：放大不解决问题的后果
3. 解决方案：将你的产品作为答案呈现

转化核心原则

1. 一个页面，一个目标：每个元素都应推动访客采取主要 CTA
2. F 型阅读模式：关键信息放在左上方，CTA 放在符合视线流动的位置
3. 视觉层级：通过大小和对比度引导注意力
4. 认知负荷：简单胜过巧妙。减少决策。
5. 社交证明邻近原则：将社交证明放在 CTA 附近，减少行动阻力

---

落地页版块模板

1. 首屏版块（无需滚动即可看到）

目标：在 5 秒内抓住注意力。呈现价值主张 + 主要 CTA。

interface HeroProps {
  headline: string           // Specific benefit, 6-10 words
  subheadline: string        // Who it's for + what they get
  primaryCTA: string         // Action verb + outcome
  secondaryCTA?: string      // Lower commitment option
  socialProof?: string       // Specific number: "10,847 teams"
  heroVisual: 'product-screenshot' | 'demo-video' | 'result-visual'
}

export function Hero({ headline, subheadline, primaryCTA, secondaryCTA, socialProof }: HeroProps) {
  return (
    <section className="min-h-[90vh] flex items-center">
      <div className="container mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
        <div className="max-w-xl">
          {/* Headline - NO SLOP */}
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
            {headline}
          </h1>

          {/* Subheadline - Specific audience + outcome */}
          <p className="mt-6 text-xl text-gray-600 leading-relaxed">
            {subheadline}
          </p>

          {/* CTA Group */}
          <div className="mt-10 flex flex-col sm:flex-row gap-4">
            <button className="px-8 py-4 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700 transition-colors text-lg">
              {primaryCTA}
            </button>
            {secondaryCTA && (
              <button className="px-8 py-4 border-2 border-gray-300 font-semibold rounded-lg hover:border-gray-400 transition-colors text-lg">
                {secondaryCTA}
              </button>
            )}
          </div>

          {/* Social Proof - SPECIFIC numbers */}
          {socialProof && (
            <p className="mt-6 text-sm text-gray-500">
              {socialProof}
            </p>
          )}
        </div>

        {/* Visual - REAL product, not abstract */}
        <div className="relative">
          {/* Product screenshot with subtle shadow, not floating 3D mockup */}
        </div>
      </div>
    </section>
  )
}

标题公式（杜绝废话）：

❌ "Revolutionize Your Workflow"
✅ "Close Deals 40% Faster"

❌ "The Cutting-Edge Platform for Modern Teams"
✅ "Notion + Slack + Docs in One Tab"

❌ "Unlock Your Business Potential"
✅ "Find Your Next 10 Customers This Week"

❌ "Seamless Integration for Growth"
✅ "Connects to Stripe in 2 Minutes. No Code."

2. Logo 栏（社交证明）

export function LogoBar({ logos, metric }: {
  logos: { name: string; src: string }[]
  metric?: string  // "Trusted by 2,847 companies" - SPECIFIC number
}) {
  return (
    <section className="py-12 border-y border-gray-100">
      <div className="container mx-auto px-4">
        {metric && (
          <p className="text-center text-sm text-gray-500 mb-8">{metric}</p>
        )}
        <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12">
          {logos.map((logo) => (
            <img
              key={logo.name}
              src={logo.src}
              alt={logo.name}
              className="h-8 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition-all"
            />
          ))}
        </div>
      </div>
    </section>
  )
}

3. 问题版块

目标：让访客感到你懂他们。具体描述他们的痛点。

// ❌ SLOP VERSION:
// "In today's fast-paced business environment, teams struggle with inefficiencies"

// ✅ CLEAN VERSION:
// "Your team wastes 6 hours/week switching between 12 different tools"

export function ProblemSection({ problems }: {
  problems: { stat: string; pain: string; consequence: string }[]
}) {
  return (
    <section className="py-24 bg-gray-900 text-white">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center">
          Sound familiar?
        </h2>

        <div className="mt-16 grid md:grid-cols-3 gap-8">
          {problems.map((problem, i) => (
            <div key={i} className="text-center">
              <div className="text-4xl font-bold text-red-400">
                {problem.stat}
              </div>
              <h3 className="mt-4 text-xl font-semibold">{problem.pain}</h3>
              <p className="mt-2 text-gray-400">{problem.consequence}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

4. 益处版块（而非功能特点）

// ❌ Feature (boring): "Real-time collaboration"
// ✅ Benefit (compelling): "See your teammate's cursor. Ship together, not separately."

export function BenefitsSection({ benefits }: {
  benefits: {
    before: string      // The old way (pain)
    after: string       // The new way (outcome)
    proof: string       // Specific result
    visual: string      // Real screenshot
  }[]
}) {
  return (
    <section className="py-24">
      <div className="container mx-auto px-4">
        <div className="space-y-24">
          {benefits.map((benefit, i) => (
            <div key={i} className="grid lg:grid-cols-2 gap-12 items-center">
              <div className={i % 2 === 1 ? 'lg:order-2' : ''}>
                <div className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Before: {benefit.before}
                </div>
                <h3 className="mt-2 text-2xl font-bold">
                  Now: {benefit.after}
                </h3>
                <p className="mt-4 text-lg text-gray-600">
                  {benefit.proof}
                </p>
              </div>
              <div className={i % 2 === 1 ? 'lg:order-1' : ''}>
                <img src={benefit.visual} alt="" className="rounded-xl shadow-lg" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

5. 用户推荐语（具体，不要泛泛而谈）

// ❌ SLOP: "Great product! Really helped our team."
// ✅ CLEAN: "We closed $847K in Q3 directly from leads Acme surfaced. ROI was 47x."

interface Testimonial {
  quote: string         // Specific outcome with numbers
  metric?: string       // "47x ROI" / "+340% leads"
  author: string
  role: string
  company: string
  avatar: string        // REAL photo, not stock
}

export function TestimonialsSection({ testimonials }: { testimonials: Testimonial[] }) {
  return (
    <section className="py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((t, i) => (
            <div key={i} className="bg-white p-8 rounded-xl shadow-sm">
              {t.metric && (
                <div className="text-3xl font-bold text-green-600 mb-4">
                  {t.metric}
                </div>
              )}
              <blockquote className="text-gray-700 leading-relaxed">
                "{t.quote}"
              </blockquote>
              <div className="mt-6 flex items-center gap-4">
                <img src={t.avatar} alt={t.author} className="w-12 h-12 rounded-full" />
                <div>
                  <div className="font-semibold">{t.author}</div>
                  <div className="text-sm text-gray-500">{t.role}, {t.company}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

6. 定价版块

interface PricingTier {
  name: string
  price: string
  period: string
  description: string       // WHO this is for, specifically
  features: string[]        // What they GET, not vague capabilities
  cta: string
  highlighted?: boolean
}

export function PricingSection({ tiers }: { tiers: PricingTier[] }) {
  return (
    <section className="py-24">
      <div className="container mx-auto px-4">
        <div className="text-center">
          <h2 className="text-3xl md:text-4xl font-bold">
            Simple pricing. No surprises.
          </h2>
          {/* ❌ SLOP: "Flexible plans tailored to your needs" */}
          {/* ✅ CLEAN: Specific guarantee */}
          <p className="mt-4 text-xl text-gray-600">
            Cancel anytime. No questions asked.
          </p>
        </div>

        <div className="mt-16 grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {tiers.map((tier, i) => (
            <div
              key={i}
              className={`bg-white rounded-2xl p-8 ${
                tier.highlighted ? 'ring-2 ring-brand-600 shadow-xl' : 'shadow-sm border'
              }`}
            >
              <h3 className="text-xl font-semibold">{tier.name}</h3>
              <p className="mt-2 text-gray-600">{tier.description}</p>

              <div className="mt-6">
                <span className="text-4xl font-bold">{tier.price}</span>
                <span className="text-gray-500">/{tier.period}</span>
              </div>

              <ul className="mt-8 space-y-3">
                {tier.features.map((feature, j) => (
                  <li key={j} className="flex items-start gap-3">
                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              <button className={`mt-8 w-full py-3 rounded-lg font-semibold transition-colors ${
                tier.highlighted
                  ? 'bg-brand-600 text-white hover:bg-brand-700'
                  : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
              }`}>
                {tier.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

7. 常见问题版块

// FAQ answers should handle REAL objections, not softballs
// ❌ SLOP Q: "What makes your platform unique?"
// ✅ REAL Q: "What if I've already tried 3 other tools and they all failed?"

export function FAQSection({ faqs }: { faqs: { question: string; answer: string }[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  return (
    <section className="py-24">
      <div className="container mx-auto px-4 max-w-3xl">
        <h2 className="text-3xl font-bold text-center">
          Questions? Answers.
        </h2>

        <div className="mt-12 space-y-4">
          {faqs.map((faq, i) => (
            <div key={i} className="border rounded-lg overflow-hidden">
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="w-full px-6 py-4 flex items-center justify-between text-left font-medium"
              >
                {faq.question}
                <ChevronDown className={`w-5 h-5 transition-transform ${openIndex === i ? 'rotate-180' : ''}`} />
              </button>
              {openIndex === i && (
                <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

8. 最终 CTA 版块

export function FinalCTA({
  headline,
  subheadline,
  cta,
  guarantee
}: {
  headline: string      // Restate the core promise
  subheadline: string   // Handle final objection
  cta: string          // Same as primary CTA
  guarantee?: string   // Risk reversal
}) {
  return (
    <section className="py-24 bg-brand-600 text-white">
      <div className="container mx-auto px-4 text-center">
        <h2 className="text-3xl md:text-4xl font-bold">{headline}</h2>
        <p className="mt-4 text-xl opacity-90 max-w-2xl mx-auto">{subheadline}</p>

        <button className="mt-10 px-8 py-4 bg-white text-brand-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors text-lg">
          {cta}
        </button>

        {guarantee && (
          <p className="mt-6 text-sm opacity-75">{guarantee}</p>
        )}
      </div>
    </section>
  )
}

---

行业专属模式

SaaS 落地页

• 免费试用 CTA（行动门槛低）
• 首屏展示真实产品界面
• Logo 栏展示知名公司
• ROI 计算器或节省金额估算
• 安全认证标识（SOC 2、GDPR）

移动应用落地页

• 突出展示应用商店徽章
• 使用真实截图制作手机模型图
• 星级评分 + 评论数
• “曾获推荐”媒体 Logo
• 可即时下载的二维码

服务/代理机构落地页

• 包含指标的案例研究成果
• 前后对比图
• 介绍流程（如何运作）
• 团队照片（真实人物）
• 预约咨询 CTA

---

转化检查清单

首屏

• <5 秒内就能看懂价值主张
• 无需滚动即可看到主要 CTA
• 视觉素材展示真实产品/成果
• 展示包含具体数字的社交证明

文案（杜绝废话）

• 不含任何禁用的流行词
• 每项主张都有数字或证据支撑
• 通过 Logo 替换测试
• 听起来像真人，而不是新闻稿

设计（杜绝废话）

• 使用真实产品截图，而非悬浮模型图
• 不使用通用 SaaS 插画
• 选择一种独特的字体风格
• 布局具有个性

信任

• 推荐语具体且包含成果
• 展示真实姓名、职位和照片
• 提及保证/退款政策
• 支持/联系方式易于查找

---

何时使用此技能

在以下情形调用此技能：

• 从头开始制作新的落地页
• 重新设计以提高转化率
• 创建首屏版块
• 撰写落地页文案
• 设计定价页面
• 需要审查现有页面是否存在 AI 废话

请牢记：

1. 务必先通过 Perplexity 调研
2. 交付前务必运行 AI 废话审查
3. 具体性永远胜过抽象表述