marketing-website（营销网站）

Marketing Website

Marketing sites have one job: convert visitors into customers. Every element serves that goal.

Related skills:

• ux-design — Structure, usability, accessibility foundations
• aesthetic-ui-designer — Visual execution, typography, motion

This skill adds the conversion and persuasion layer.

Core Principles

1. Clarity Over Cleverness

• Visitors decide in 5 seconds: Is this for me? Can it help?
• Clear beats clever. Don't make them think.
• Jargon-free unless audience expects it

2. One Goal Per Page

• Each page has ONE primary CTA
• Secondary actions are visually subordinate
• Don't dilute focus with competing asks

3. Value Before Friction

• Show value before asking for anything
• Delay signup/pricing until interest established
• Progressive commitment: small asks before big asks

4. Social Proof Everywhere

• Testimonials, logos, numbers, case studies
• Specificity beats vagueness: "47% faster" not "much faster"
• Real names, photos, companies when possible

5. Answer the Core Questions

Every visitor asks:

1. What is this? (Clear headline)
2. Is it for me? (Target audience clarity)
3. Why should I care? (Benefits, not features)
4. Why trust you? (Social proof)
5. What do I do next? (Clear CTA)

Copywriting Essentials

Headline Formula

Structure: [End result] + [Time period] + [Address objection]

Examples:

• "Launch your app in 2 weeks — no coding required"
• "Cut meeting time in half without losing alignment"

Headline Types:

Subheadline Role

The subhead explains what the headline promises.

• Headline: Hook, intrigue, emotion
• Subhead: Clarity, specifics, logic

Headline: Ship faster, sleep better
Subhead: Automated deployments with instant rollback.
         Your code goes live in seconds, not sprints.

CTA Copy

Verb + Value, not generic labels:

• ❌ "Submit" / "Click here" / "Learn more"
• ✅ "Start free trial" / "Get your report" / "See pricing"

First-person often outperforms:

• "Start my free trial" vs "Start your free trial"

Reduce friction in language:

• "Create free account" vs "Sign up" (implies commitment)
• "See plans" vs "View pricing" (less scary)

Frameworks

PAS (Problem → Agitate → Solution):

1. State the problem they face
2. Agitate: make them feel the pain
3. Present your solution as relief

AIDA (Attention → Interest → Desire → Action):

1. Grab attention (headline)
2. Build interest (benefits, story)
3. Create desire (social proof, outcomes)
4. Prompt action (CTA)

BAB (Before → After → Bridge):

1. Before: Current painful state
2. After: Desired future state
3. Bridge: Your product makes the transformation

For detailed frameworks and examples: See references/copywriting.md

Page Structure

Landing Page Anatomy

┌─────────────────────────────────────┐
│ Nav: Logo | Links | CTA            │
├─────────────────────────────────────┤
│ HERO                                │
│ Headline + Subhead + CTA            │
│ [Visual: product/hero image]        │
├─────────────────────────────────────┤
│ SOCIAL PROOF BAR                    │
│ "Trusted by" + logos                │
├─────────────────────────────────────┤
│ PROBLEM / PAIN POINTS               │
│ Articulate their struggle           │
├─────────────────────────────────────┤
│ SOLUTION / FEATURES                 │
│ How you solve it (benefits focus)   │
├─────────────────────────────────────┤
│ HOW IT WORKS                        │
│ 3-step process or demo              │
├─────────────────────────────────────┤
│ TESTIMONIALS / CASE STUDIES         │
│ Proof it works                      │
├─────────────────────────────────────┤
│ PRICING (if applicable)             │
├─────────────────────────────────────┤
│ FAQ                                 │
│ Handle objections                   │
├─────────────────────────────────────┤
│ FINAL CTA                           │
│ Repeat primary action               │
├─────────────────────────────────────┤
│ FOOTER                              │
│ Links, legal, secondary nav         │
└─────────────────────────────────────┘

Multi-Page Site Structure

For detailed page patterns: See references/page-patterns.md

Conversion Patterns

Social Proof Types

Pricing Psychology

• Anchor high: Show expensive option first
• Highlight recommended: "Most popular" badge
• Use 9s: $49 vs $50 (still works)
• Annual discount: Show monthly + annual savings
• Remove currency friction: "$49/mo" cleaner than "$49.00 USD/month"

Objection Handling

Address objections before they ask:

• Too expensive → ROI calculator, guarantee, comparison to cost of problem
• Too complicated → "3 steps" simplicity, demo, free trial
• Don't trust you → Social proof, security badges, guarantee
• Need to think → Urgency (genuine), reminder of pain point
• Need approval → Shareable assets, ROI documentation

For detailed conversion tactics: See references/conversion.md

SEO Essentials

Page-Level Basics

<!-- Unique, descriptive, 50-60 chars -->
<title>Project Management for Remote Teams | AppName</title>

<!-- Compelling, 150-160 chars, include CTA -->
<meta name="description" content="Ship projects faster with async collaboration. Free for teams up to 10. Start in 2 minutes.">

<!-- One H1 per page, includes primary keyword -->
<h1>Project Management Built for Remote Teams</h1>

<!-- Logical heading hierarchy -->
<h2>Features</h2>
  <h3>Async Updates</h3>
  <h3>Time Zone Smart</h3>

Technical Basics

• Mobile-friendly (responsive)
• Fast loading (<3s, ideally <1.5s)
• HTTPS everywhere
• Clean URL structure: /features/collaboration not /page?id=47
• Image alt text (descriptive, not keyword-stuffed)

Content Strategy

• One primary keyword per page
• Answer questions your audience searches
• Internal linking between related content
• Regular fresh content (blog) for authority

For detailed SEO guidance: See references/seo-essentials.md

Mobile Considerations

• Thumb-friendly CTAs: Primary buttons in easy reach
• Shorter headlines: Less space, faster scanning
• Tap-to-call: Phone numbers clickable
• Simplified nav: Hamburger acceptable, but keep CTA visible
• Fast loading: Mobile networks less reliable
• Form optimization: Fewer fields, appropriate keyboards

Pre-Launch Checklist

Copy

• Headline clear in 5 seconds
• Value proposition specific, not generic
• Benefits over features
• CTAs are action-oriented
• Social proof present

Structure

• One primary CTA per page
• Logical flow (problem → solution → proof → action)
• FAQ addresses top objections
• Mobile-responsive

Trust

• Real testimonials with specifics
• Security/privacy addressed if relevant
• Contact information visible
• Professional, error-free copy

SEO

• Unique title tags
• Meta descriptions written
• H1 on every page
• Images have alt text
• Site loads fast

References:

• references/copywriting.md — Detailed frameworks, headline formulas, CTA patterns
• references/page-patterns.md — Section-by-section patterns for each page type
• references/conversion.md — Social proof, pricing, objection handling, lead capture
• references/seo-essentials.md — Technical SEO, content strategy, structured data

Industry-specific guidance:

• references/industry-saas.md — SaaS, software, apps
• references/industry-ecommerce.md — E-commerce, physical products
• references/industry-services.md — Professional services, agencies
• references/industry-apps.md — Mobile apps, app store presence