Build a microsite

Skill Preview

---
name: microsite
description: Generate a personalized, self-contained ABM microsite as a beautiful HTML file — "Built for [Company]" pages that flip the cold outreach dynamic. You provide the context; Claude builds the page. Standalone version; for full GTM knowledge base support see github.com/octavehq/lfgtm.
---

# /microsite - Personalized ABM Microsite Builder

Generate personalized, single-page ABM microsites as beautiful, self-contained HTML. Instead of "Hey, want to see a demo?" you send "We built something for you" with a link. The microsite shows effort, personalization, and immediately demonstrates you understand their business.

**No integrations required.** You describe the target account and your messaging; Claude builds a polished, mobile-ready landing page.

> **Want even better output?** Connect your GTM knowledge base to auto-enrich accounts, pull matched playbooks, and source real proof points. See the full version at [github.com/octavehq/lfgtm](https://github.com/octavehq/lfgtm).

## Usage

```
/microsite <target> [--angle <approach>] [--style <preset>]
```

## Examples

```
/microsite acme.com                          # Pain-point led microsite for Acme
/microsite acme.com --angle competitive      # Competitive displacement angle
/microsite acme.com --angle value            # Value / metrics led
/microsite acme.com --angle trigger          # Trigger-based (recent news/event)
/microsite acme.com --style paper-minimal    # Specific style preset
```

## Instructions

When the user runs `/microsite`:

### Step 1: Understand the Target

Ask the user the following in a single prompt:

```
Let's build the microsite. I need a few things from you:

TARGET ACCOUNT
1. Company name and what they do (1–2 sentences)
2. Industry and rough company size
3. Any recent news, trigger events, or context about them? (funding, exec hire, product launch, etc.)

THE RECIPIENT (optional — if sending to a specific person)
4. Name and title of who will receive this
5. Anything you know about their priorities or what keeps them up at night?

YOUR ANGLE
How should this microsite lead?

1. Pain-point led — address a specific challenge they face
2. Competitive displacement — they're using a rival; show a better way
3. Value-led — lead with metrics and results from similar companies
4. Trigger-based — connect to a recent event or milestone

YOUR PRODUCT
6. What does your product do? (1–2 sentences)
7. Top 2–3 capabilities most relevant to this account
8. Best proof point or metric you can use (e.g., "customers see 40% faster ramp time")
9. Any other relevant case study results or customer logos?

CALL TO ACTION
10. What should they do next? (Book a demo / Watch a tour / Start a trial / Reply to email)
11. URL or contact info to link the CTA button to

BRAND (optional)
12. Your company name and primary brand color (hex code), or style preset preference
    Presets: midnight-pro (dark navy) | executive-dark (charcoal + gold) | paper-minimal (light editorial)
    | soft-light (warm white) | aurora-gradient (purple-to-teal) | neon-pulse (vibrant)
```

After the user responds, present a content outline for approval:

```
MICROSITE OUTLINE: Built for [Company]
=======================================

Target: [Company name]
Angle: [Pain-point / Competitive / Value-led / Trigger-based]
CTA: [Action]

SECTION OUTLINE
---------------

1. HERO
   "Built for [Company]"
   Headline: [Draft headline based on angle]
   Subhead: [One-sentence value hook]

2. [CHALLENGE / THE GAP / WHY NOW]
   • [Point grounded in their context]
   • [Point grounded in their context]
   • [Point grounded in their context]

3. [SOLUTION / WHAT'S POSSIBLE]
   3 capability cards mapped to their specific situation:
   • [Capability 1] — [their pain it solves]
   • [Capability 2] — [their pain it solves]
   • [Capability 3] — [their pain it solves]

4. PROOF
   • [Proof point 1 — metric + context]
   • [Proof point 2 — metric + context]
   • [Proof point 3 — metric + context]

5. CTA
   "[Action-oriented ask]" → [CTA text]

---
Looks good? Or adjust the angle, sections, or messaging?
```

Wait for approval before generating.

### Step 2: Style & Brand

If the user provided a brand color, use it as `--brand-primary` and derive a matching palette. Otherwise, use the requested preset or recommend based on angle:

| Angle | Recommended Preset |
|-------|--------------------|
| Pain-point led | `midnight-pro` |
| Competitive | `neon-pulse` |
| Value-led | `executive-dark` |
| Trigger-based | `aurora-gradient` |
| Default | `midnight-pro` |

**CSS Variables by Preset:**

**midnight-pro:**
```css
:root {
  --bg: #0a0e1a; --bg-card: #111827; --bg-elevated: #1a2234;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.15);
  --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #475569;
  --brand-primary: #3b82f6; --brand-glow: rgba(59,130,246,0.3);
  --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
  --radius-lg: 12px;
}
```

**executive-dark:**
```css
:root {
  --bg: #111111; --bg-card: #1a1a1a; --bg-elevated: #222222;
  --border: rgba(255,255,255,0.1); --border-strong: rgba(255,255,255,0.2);
  --text-primary: #f5f0e8; --text-secondary: #a89880; --text-muted: #6b5a47;
  --brand-primary: #d4a853; --brand-glow: rgba(212,168,83,0.25);
  --font-display: 'Playfair Display', serif; --font-body: 'Inter', sans-serif;
  --radius-lg: 8px;
}
```

**paper-minimal:**
```css
:root {
  --bg: #faf9f7; --bg-card: #f0ede8; --bg-elevated: #e8e4de;
  --border: rgba(0,0,0,0.1); --border-strong: rgba(0,0,0,0.2);
  --text-primary: #1a1814; --text-secondary: #5a554c; --text-muted: #9a958c;
  --brand-primary: #1a1814; --brand-glow: rgba(0,0,0,0.1);
  --font-display: 'Playfair Display', serif; --font-body: 'Inter', sans-serif;
  --radius-lg: 6px;
}
```

**aurora-gradient:**
```css
:root {
  --bg: #0d0d1a; --bg-card: #13132a; --bg-elevated: #1a1a38;
  --border: rgba(139,92,246,0.2); --border-strong: rgba(139,92,246,0.4);
  --text-primary: #f0eeff; --text-secondary: #a899d4; --text-muted: #6b5fa0;
  --brand-primary: #8b5cf6; --brand-glow: rgba(139,92,246,0.35);
  --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
  --radius-lg: 16px;
}
```

### Step 3: Generate HTML

Build a single self-contained HTML file.

#### Output Directory

```
.microsites/
└── <kebab-company>-<YYYY-MM-DD>/
    └── <company>-microsite.html
```

Add `.microsites/` to `.gitignore`.

#### Full HTML Structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Built for [Company] | [Your Company]</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
  <style>
    /* === CSS Variables (from chosen preset) === */
    :root { /* ... */ }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); background: var(--bg); color: var(--text-primary); line-height: 1.6; }

    /* Layout */
    .section { width: 100%; padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 3rem); }
    .section-inner { max-width: 800px; margin: 0 auto; }
    .hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }

    /* Gradient background for hero */
    .hero::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 40%, var(--brand-glow) 0%, transparent 65%);
      pointer-events: none;
    }

    /* Typography */
    .built-for { display: inline-block; padding: 0.35rem 1rem; border-radius: 9999px; border: 1px solid var(--border-strong); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1.5rem; }
    .heading-1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem; }
    .heading-2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
    .heading-3 { font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 600; margin-bottom: 0.5rem; }
    .body-lg { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--text-secondary); margin-bottom: 2rem; }
    .body-text { font-size: clamp(0.9rem, 1.3vw, 1rem); color: var(--text-secondary); line-height: 1.7; }

    /* Cards */
    .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
    .card { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
    .card-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }

    /* Proof metrics */
    .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
    .proof-block { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); text-align: center; }
    .big-number { font-size: clamp(2rem, 4vw, 3rem); font-family: var(--font-display); font-weight: 700; color: var(--brand-primary); display: block; }
    .proof-label { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem; display: block; }
    .proof-quote { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; font-style: italic; }

    /* Pain points / challenge list */
    .pain-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .pain-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
    .pain-icon { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(248,113,113,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }

    /* CTA button */
    .cta-button { display: inline-block; padding: 1rem 2.5rem; border-radius: 9999px; background: var(--brand-primary); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none; transition: opacity 0.2s, transform 0.2s; margin-top: 1.5rem; }
    .cta-button:hover { opacity: 0.9; transform: translateY(-2px); }

    /* Scroll animations */
    .animate-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .animate-in.visible { opacity: 1; transform: translateY(0); }
    .animate-in:nth-child(1) { transition-delay: 0.1s; }
    .animate-in:nth-child(2) { transition-delay: 0.2s; }
    .animate-in:nth-child(3) { transition-delay: 0.3s; }
    .animate-in:nth-child(4) { transition-delay: 0.4s; }

    /* Counter animation */
    .count-up { display: inline-block; }

    /* Divider */
    .section-divider { width: 100%; height: 1px; background: var(--border); }

    /* Responsive */
    @media (max-width: 768px) {
      .card-grid, .proof-grid { grid-template-columns: 1fr; }
      .hero { min-height: 80vh; }
    }
    @media (max-width: 480px) {
      .section { padding: clamp(2rem, 6vh, 3rem) 1.25rem; }
      .heading-1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    }
    @media (prefers-reduced-motion: reduce) {
      .animate-in { opacity: 1; transform: none; transition: none; }
    }
  </style>
</head>
<body>

  <!-- HERO -->
  <section class="section hero" id="hero">
    <div class="section-inner" style="position: relative; z-index: 1;">
      <span class="built-for animate-in">Built for [Company]</span>
      <h1 class="heading-1 animate-in">[Headline — angle-specific, company-personalized]</h1>
      <p class="body-lg animate-in">[Subhead — what's possible for them, specifically]</p>
      <a href="#cta" class="cta-button animate-in" style="background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 0.9rem; padding: 0.6rem 1.5rem;">See how ↓</a>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- SECTION 2: Challenge / Gap / Why Now -->
  <section class="section" id="challenge">
    <div class="section-inner">
      <h2 class="heading-2 animate-in">[Section headline — their situation]</h2>
      <ul class="pain-list">
        <li class="pain-item animate-in">
          <div class="pain-icon">→</div>
          <div>
            <p class="heading-3">[Pain point 1 title]</p>
            <p class="body-text">[Pain point 1 detail — specific to their company/industry]</p>
          </div>
        </li>
        <li class="pain-item animate-in">
          <div class="pain-icon">→</div>
          <div>
            <p class="heading-3">[Pain point 2 title]</p>
            <p class="body-text">[Pain point 2 detail]</p>
          </div>
        </li>
        <li class="pain-item animate-in">
          <div class="pain-icon">→</div>
          <div>
            <p class="heading-3">[Pain point 3 title]</p>
            <p class="body-text">[Pain point 3 detail]</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- SECTION 3: Solution / Capabilities -->
  <section class="section" id="solution">
    <div class="section-inner">
      <h2 class="heading-2 animate-in">[Solution section headline]</h2>
      <p class="body-lg animate-in">[One-line bridge from their pain to your solution]</p>
      <div class="card-grid">
        <div class="card animate-in">
          <div class="card-icon">[Icon emoji]</div>
          <p class="heading-3">[Capability 1]</p>
          <p class="body-text">[2-line description tied to their specific pain]</p>
        </div>
        <div class="card animate-in">
          <div class="card-icon">[Icon emoji]</div>
          <p class="heading-3">[Capability 2]</p>
          <p class="body-text">[2-line description tied to their specific pain]</p>
        </div>
        <div class="card animate-in">
          <div class="card-icon">[Icon emoji]</div>
          <p class="heading-3">[Capability 3]</p>
          <p class="body-text">[2-line description tied to their specific pain]</p>
        </div>
      </div>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- SECTION 4: Proof -->
  <section class="section" id="proof">
    <div class="section-inner">
      <h2 class="heading-2 animate-in">[Proof section headline — e.g., "What teams like yours see"]</h2>
      <div class="proof-grid">
        <div class="proof-block animate-in">
          <span class="big-number count-up" data-target="[N]">[N]</span>
          <span class="proof-label">[Metric label — e.g., "faster ramp time"]</span>
          <p class="proof-quote">"[Short quote or attribution]"</p>
        </div>
        <div class="proof-block animate-in">
          <span class="big-number count-up" data-target="[N]">[N]</span>
          <span class="proof-label">[Metric label]</span>
          <p class="proof-quote">"[Short quote or attribution]"</p>
        </div>
        <div class="proof-block animate-in">
          <span class="big-number count-up" data-target="[N]">[N]</span>
          <span class="proof-label">[Metric label]</span>
          <p class="proof-quote">"[Short quote or attribution]"</p>
        </div>
      </div>
    </div>
  </section>

  <div class="section-divider"></div>

  <!-- CTA -->
  <section class="section hero" id="cta" style="min-height: 60vh;">
    <div class="section-inner" style="position: relative; z-index: 1; text-align: center;">
      <h2 class="heading-1 animate-in">[CTA headline — e.g., "See what this looks like for [Company]"]</h2>
      <p class="body-lg animate-in">[Supporting line — low friction, specific to their situation]</p>
      <a href="[CTA_URL]" class="cta-button animate-in">[Button text]</a>
      <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem;" class="animate-in">[Optional: contact name, email, or "No commitment required"]</p>
    </div>
  </section>

  <script>
    // Scroll animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) entry.target.classList.add('visible');
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.animate-in').forEach(el => observer.observe(el));

    // Counter animation
    const counterObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const el = entry.target;
        const target = parseFloat(el.dataset.target);
        const isDecimal = String(target).includes('.');
        const duration = 1500;
        const start = performance.now();
        function update(now) {
          const progress = Math.min((now - start) / duration, 1);
          const eased = 1 - Math.pow(1 - progress, 3);
          const value = eased * target;
          el.textContent = isDecimal ? value.toFixed(1) : Math.round(value).toLocaleString();
          if (progress < 1) requestAnimationFrame(update);
        }
        requestAnimationFrame(update);
        counterObserver.unobserve(el);
      });
    }, { threshold: 0.5 });
    document.querySelectorAll('.count-up').forEach(el => counterObserver.observe(el));

    // Respect reduced motion
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      document.querySelectorAll('.animate-in').forEach(el => el.classList.add('visible'));
    }
  </script>
</body>
</html>
```

#### Content Rules

1. **Company name in the hero** — "Built for [Company]" must be immediately visible, not buried.
2. **Max 4–5 sections** — this is not a website; it's a pattern interrupt.
3. **One CTA, used twice** — soft link in hero (`#cta`), prominent button in CTA section.
4. **Metrics must be real** — only use numbers the user actually provided. Never invent.
5. **Mobile-first** — will be opened from email on a phone.
6. **Zero tracking** — no analytics scripts, no pixels, no third-party requests beyond Google Fonts.

### Step 4: Delivery

After writing the file:

1. Open in default browser
2. Present summary:

```
MICROSITE READY
===============
File: .microsites/<company>-<date>/<company>-microsite.html
Target: [Company]
Angle: [Angle]
CTA: [Action]
Style: [Preset]

How to share:
• Host on Netlify Drop, S3, or any static file server
• Or attach the HTML file directly to your outreach email
• Best used as a link: "I built something for you → [link]"

---
Want me to:
1. Adjust messaging or tone
2. Change the angle
3. Create a version for a different contact at the same company
4. Write the outreach email to go with this (/repurpose)
5. Done

---
Want AI-enriched output? Connect your GTM knowledge base for auto-enriched
accounts, matched playbooks, and proof points pulled from your library:
→ github.com/octavehq/lfgtm
```

## Related Skills

- `/positioning` — Build the positioning system your microsite messaging should come from
- `/repurpose` — Generate the outreach email that sends this link