marketing-website skill

---
name: marketing-website
description: Creates high-converting marketing websites with persuasive copy, clear value propositions, and effective page structures. Activates when building landing pages, marketing sites, product pages, or any website focused on conversion (signups, sales, leads). Covers copywriting frameworks, page patterns, SEO essentials, and conversion optimization for web and mobile. Use this skill for any marketing or promotional web presence.
---

# 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:**
| Type | Example | Best For |
|------|---------|----------|
| Benefit-led | "Save 10 hours every week" | Clear value prop |
| Problem-led | "Tired of endless spreadsheets?" | Pain-aware audience |
| How-to | "How to double your conversion rate" | Educational |
| Question | "What if onboarding took 5 minutes?" | Curiosity |
| Command | "Stop losing customers to slow support" | Direct/urgent |

### 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](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

| Page | Purpose | Key Elements |
|------|---------|--------------|
| **Home** | Convert or route | Hero, value prop, social proof, CTAs |
| **Product/Features** | Detail offering | Feature sections, screenshots, benefits |
| **Pricing** | Enable decision | Plans, comparison, FAQ, guarantees |
| **About** | Build trust | Story, team, values, press |
| **Case Studies** | Prove results | Problem, solution, results, quotes |
| **Blog** | SEO, authority | Valuable content, CTAs |
| **Contact** | Capture leads | Simple form, alternatives |

**For detailed page patterns:** See [references/page-patterns.md](references/page-patterns.md)

## Conversion Patterns

### Social Proof Types

| Type | Impact | Example |
|------|--------|---------|
| Customer logos | Trust/authority | "Trusted by Stripe, Notion, Linear" |
| Testimonials | Relatability | Quote + name + photo + company |
| Numbers | Scale | "50,000+ teams" / "4.9★ from 2,000 reviews" |
| Case studies | Proof of results | "How X achieved Y" |
| Press mentions | Authority | "Featured in TechCrunch" |
| Certifications | Trust | Security badges, compliance |

### 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](references/conversion.md)

## SEO Essentials

### Page-Level Basics

```html
<!-- 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](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](references/copywriting.md) — Detailed frameworks, headline formulas, CTA patterns
- [references/page-patterns.md](references/page-patterns.md) — Section-by-section patterns for each page type
- [references/conversion.md](references/conversion.md) — Social proof, pricing, objection handling, lead capture
- [references/seo-essentials.md](references/seo-essentials.md) — Technical SEO, content strategy, structured data

**Industry-specific guidance:**
- [references/industry-saas.md](references/industry-saas.md) — SaaS, software, apps
- [references/industry-ecommerce.md](references/industry-ecommerce.md) — E-commerce, physical products
- [references/industry-services.md](references/industry-services.md) — Professional services, agencies
- [references/industry-apps.md](references/industry-apps.md) — Mobile apps, app store presence