---
name: microsite
description: Personalized ABM microsite builder that generates self-contained HTML landing pages using GTM intelligence. Use when user says "microsite for [company]", "personalized landing page", "ABM page", or asks for a personalized web page for a target account.
---

# /octave:microsite - Personalized ABM Microsite Builder

Generate personalized, single-page ABM microsites as beautiful self-contained HTML, powered by your Octave GTM knowledge base. 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.

**Why microsites work:** They flip the cold outreach dynamic. A personalized landing page — "Built for [Company]" — is a pattern interrupt. It proves you researched the account, tailored your message, and invested time before asking for theirs.

**How this differs from other skills:**
- vs `/octave:one-pager` — one-pager is a post-meeting leave-behind; microsite is a pre-meeting attention grabber for outreach
- vs `/octave:proposal` — proposal is formal and detailed; microsite is concise and designed to generate interest
- vs `/octave:deck` — deck is for presenting; microsite is for sharing a link

## Usage

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

## Examples

```
/octave:microsite acme.com                                    # Personalized microsite for Acme
/octave:microsite acme.com --angle competitive                # Competitive angle (they use rival)
/octave:microsite jane@acme.com --angle pain-point            # Person-specific, pain-led
/octave:microsite "enterprise healthcare companies"           # Segment-level microsite template
/octave:microsite acme.com --style octave-brand               # Specific style preset
/octave:microsite acme.com --angle trigger                    # Trigger-based (recent news/event)
```

## Instructions

When the user runs `/octave:microsite`:

### Step 1: Understand the Context

If not provided via flags, ask the user interactively:

**Target — "Who is this for?"**

```
Who is this microsite for?

Provide any of the following:
- Company domain (e.g., acme.com)
- Person email (e.g., jane@acme.com)
- Segment description (e.g., "enterprise healthcare companies")

Target:
```

**Angle — "What approach should this take?"**

```
What angle should the microsite lead with?

1. Pain-point led — address a specific challenge they face
2. Competitive displacement — show a better way than their current approach
3. Value-led — lead with results and metrics from similar companies
4. Trigger-based — connect to a recent event, news, or milestone
5. Industry-specific — demonstrate deep expertise in their vertical

Your choice:
```

**Call to Action — "What should they do next?"**

```
What action should the microsite drive?

1. Book a demo
2. See a case study
3. Watch a video / product tour
4. Start a free trial
5. Reply to an email / start a conversation
6. Custom (describe it)

Your choice:
```

**Brand — "Use your company's brand styling?"**

```
Should the microsite use your company's brand?

1. Yes — extract from my website (provide URL)
2. Yes — I'll provide brand assets (colors, fonts, logo)
3. No — I'll pick from style presets
4. Use Octave brand styling

Your choice:
```

### Step 2: Octave Context Gathering

Based on the target, angle, and CTA, use Octave MCP tools to build deep personalization context. **Always tell the user what you're researching and why.**

**Call as many tools as needed.** The more you know about the account, the more personalized the microsite. A great microsite layers company enrichment + playbook messaging + proof points + competitive intel into a narrative that feels hand-crafted. Don't stop at one tool when four would give you a stronger page.

**List vs Search — when to use which:**

| Tool | Purpose | Use when... |
|------|---------|-------------|
| `list_all_entities({ entityType })` | Fetch all entities of a type (minimal fields) | You want a quick inventory — "show me all our proof points" |
| `list_entities({ entityType })` | Fetch entities with full data (paginated) | You need the actual content — "get full proof point details" |
| `get_entity({ oId })` | Deep dive on one specific entity | You found something relevant and need the complete picture |
| `search_knowledge_base({ query })` | Semantic search across library + resources | You have a concept or question — "how do we help healthcare?" |
| `list_resources()` / `search_resources({ query })` | Uploaded docs, URLs, Google Drive files | You need reference material, uploaded assets, or source docs |

---

See [octave-tool-reference.md](references/octave-tool-reference.md) for the full tool reference tables (always-run, person-specific, social proof, competitive, trigger-based, and additional context).

---

**Output of this step:** Present a content outline to the user for approval:

See [microsite-outline-template.md](references/microsite-outline-template.md) for the microsite outline template.

**Wait for user approval before proceeding.**

### Step 3: Style & Brand

Two layers of brand apply to microsites:
1. **Your brand** (the sender's brand) — logo, colors, fonts. This is what the microsite is styled with.
2. **Their context** (the recipient's company) — the personalization that shows you researched them. This appears as content, not styling.

**If user chose brand extraction in Step 1:**

Use the same tiered brand extraction approach as the deck skill:

1. **Tier 1: browser-use** (best quality) — open the website, screenshot, extract computed styles (colors, fonts, logos) via JS eval, confirm with user
2. **Tier 2: WebFetch** (fallback) — fetch homepage HTML/CSS, parse CSS custom properties, font-family declarations, logo URLs, and meta theme-color
3. **Tier 3: Manual** (if neither works) — ask user to provide hex colors, font names, and logo files directly

**If user chose a style preset:**

Reference the deck skill's [style-presets.md](../deck/references/style-presets.md). Use the same CSS variable system. Recommended defaults for microsites:

| Angle | Recommended Preset |
|-------|--------------------|
| Pain-point led | `midnight-pro` |
| Competitive displacement | `neon-pulse` |
| Value-led | `executive-dark` |
| Trigger-based | `aurora-gradient` |
| Industry-specific | `soft-light` |

Tell the user what you picked and why. Let them override.

### Step 4: Generate HTML

Build a single, self-contained HTML file. A microsite is a single scrolling page — visually striking, mobile-responsive, and heavily personalized.

#### Output Directory

Every microsite gets its own folder under `.octave-microsites/`:

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

Example: `/octave:microsite acme.com` produces `.octave-microsites/acme-2026-02-11/acme-microsite.html`

The entire `.octave-microsites/` directory is in `.gitignore` — nothing here gets committed.

#### Page Sections by Angle

See [page-sections-by-angle.md](references/page-sections-by-angle.md) for page section templates for each angle (pain-point led, competitive displacement, value-led, trigger-based).

#### HTML Architecture

See [html-architecture.md](references/html-architecture.md) for the full HTML/CSS scaffold with sections, typography, and layout components.

#### Key Design Principles

These rules are non-negotiable for microsites:

1. **First impression matters** — the hero must be visually striking with a gradient background, full viewport height, and the company name front and center
2. **Personalization must be visible immediately** — company name in the hero, not buried below the fold
3. **Keep it SHORT** — 4-5 sections max, each scannable in 5 seconds. This is not a blog post.
4. **One CTA, repeated** — the same ask in the hero (subtle) and the closing section (prominent). Do not confuse with multiple different asks.
5. **Mobile-first** — this WILL be opened from email on a phone. All `clamp()` values must work at 375px width. Test aggressively.
6. **No sidebar, no navigation bar** — single vertical scroll. Smooth, clean, focused.
7. **Self-contained** — inline CSS, no external requests beyond Google Fonts. NO tracking pixels, analytics, or third-party scripts.

#### Content Density Limits

| Section | Max Content |
|---------|------------|
| Hero | 1 "Built for" tag + 1 headline (2 lines max) + 1 subhead (2 lines max) |
| Challenge / Gap | 1 heading + 3-4 short paragraphs or bullet points |
| Solution / Cards | 1 heading + 3 cards (icon + title + 2-line description each) |
| Proof / Metrics | 1 heading + 3 proof blocks (metric + company + 1-line quote each) |
| CTA | 1 heading + 1 supporting line + 1 button |

If content exceeds limits, cut ruthlessly. Microsites are scannable, not comprehensive.

#### Animation Patterns

Scroll-triggered entrance animations using Intersection Observer:

```css
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children within a section */
.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; }
```

Additional effects (use sparingly):
- **Counter animation** for metrics: numbers count up when scrolled into view
- **Fade-scale** for cards: `transform: scale(0.96)` to `scale(1)` on reveal
- **Gradient shift** on hero: subtle background gradient animation via CSS keyframes

Always respect `prefers-reduced-motion`:
```css
@media (prefers-reduced-motion: reduce) {
  .animate-in { opacity: 1; transform: none; transition: none; }
}
```

#### Responsive Breakpoints

```css
/* Tablet */
@media (max-width: 768px) {
  .card-grid { grid-template-columns: 1fr; }
  .hero { min-height: 80vh; }
}

/* Mobile */
@media (max-width: 480px) {
  .section { padding: clamp(2rem, 6vh, 3rem) 1.25rem; }
  .heading-1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
}
```

#### Section Templates

Each section follows the pattern: `<section class="section" id="[id]"><div class="section-inner">...</div></section>`. Hero and CTA sections add the `hero` class for full-viewport layout.

**Hero:** `built-for` tag + `heading-1` headline + `body-lg` subhead + optional soft CTA link to `#cta`
**Challenge / Problem:** `heading-2` + 3 pain-point blocks (each: `heading-3` + `body-text`)
**Solution / Cards:** `heading-2` + `card-grid` with 3 cards (each: icon + `heading-3` + `body-text`)
**Proof / Metrics:** `heading-2` + `proof-grid` with 3 proof blocks (each: `big-number` metric + label + short quote with attribution)
**Process / Steps:** `heading-2` + numbered steps (each: `step-number` + `heading-3` + `body-text`)
**CTA:** `heading-1` headline + `body-lg` supporting line + `cta-button` link + optional contact info

All content elements use the `animate-in` class for scroll-triggered entrance animations.

### Step 5: Delivery

After generating the HTML file:

1. **Open the microsite** in the default browser
2. **Test mobile viewport** if browser-use is available (resize to 375px width)
3. **Present a summary:**

```
MICROSITE READY
===============

Folder: .octave-microsites/<company>-<date>/
File:   .octave-microsites/<company>-<date>/<company>-microsite.html
Target: [Company name]
Angle:  [Pain-point / Competitive / Value-led / Trigger-based]
CTA:    [Book a demo / etc.]
Style:  [Preset name or "Custom Brand"]
Size:   [file size]

How to share:
• Host on any static file server, S3 bucket, or Netlify drop
• Or send the HTML file directly as an attachment
• Best shared as a link in your outreach email

---

Want me to:
1. Adjust the messaging or tone
2. Change the angle (e.g., switch from pain-led to value-led)
3. Add or remove sections
4. Create versions for different contacts at the same company
5. Generate the outreach email that includes this link (/octave:generate)
6. Done
```

## MCP Tools Used

### Research & Enrichment
- `enrich_company` - Full company intelligence profile
- `enrich_person` - Full person intelligence report
- `find_person` - Find contacts at a company by title/role
- `qualify_company` - ICP fit scoring for a company
- `qualify_person` - ICP fit scoring for a person

### Library -- Fetching Entities
- `list_all_entities` - Quick scan of all entities of a type (minimal fields, no pagination)
- `list_entities` - Fetch entities with full data and pagination (proof points, references, etc.)
- `get_entity` - Deep dive on one specific entity
- `get_playbook` - Retrieve a playbook with full content and value props
- `list_value_props` - Value propositions for a specific playbook

### Library -- Searching
- `search_knowledge_base` - Semantic search across library entities and resources
- `list_resources` - Browse uploaded docs, URLs, and Google Drive files
- `search_resources` - Semantic search across uploaded resources

### Intelligence & Signals
- `list_findings` - Recent conversation findings and insights
- `list_events` - Deal events (won, lost, created, etc.)
- `get_event_detail` - Full details for a specific event

### Content Generation
- `generate_call_prep` - Synthesized prep brief for accounts
- `generate_content` - Generate positioning or messaging content

### Brand & Style
- `list_all_entities` (entityType: "brand_voice") - Available brand voices in workspace
- `list_writing_styles` - Available writing styles in workspace

## Error Handling

**Octave Connection Failed:**
> Could not connect to your Octave workspace.
>
> The microsite builder can still work without Octave — you provide the content manually, and I'll handle structure, style, and HTML generation. The result won't have Octave-powered personalization, but it will still look great.
>
> To reconnect: check your MCP configuration or run `/octave:workspace status`

**Company Not Found:**
> I couldn't find detailed intelligence for [target].
>
> Options:
> 1. Proceed with general positioning from your library — I'll use your best-fit playbook
> 2. Try a different domain or email
> 3. Provide company details manually (industry, size, challenges) and I'll personalize from that

**No Relevant Proof Points:**
> I couldn't find proof points in [their industry / of their size].
>
> Options:
> 1. Use your strongest proof points from adjacent industries
> 2. Use general metrics without company-specific quotes
> 3. Skip the proof section and lead with a stronger solution narrative

**No Competitor Data (for Competitive Angle):**
> I don't have data on the competitor they likely use.
>
> Options:
> 1. Switch to a different angle (pain-point led or value-led)
> 2. Use general competitive positioning without naming the competitor
> 3. Provide competitor details manually and I'll build the narrative

**No Matching Playbook:**
> No playbook matches this audience profile directly.
>
> I'll use your general value props and positioning. After the microsite is built, consider creating a playbook for this segment: `/octave:library create playbook`

**Browser-Use Unavailable (Brand Extraction):**
> Browser automation isn't available for brand extraction.
>
> Falling back to web fetch. If that doesn't capture your brand accurately, you can provide colors and fonts manually.

## Related Skills

- `/octave:one-pager` - Post-meeting leave-behind (microsite is pre-meeting)
- `/octave:research` - Deeper research on the account
- `/octave:generate` - Generate the outreach email that includes the microsite link
- `/octave:prospector` - Find more companies to create microsites for
- `/octave:abm` - Full ABM campaign planning with stakeholder mapping
- `/octave:campaign` - Campaign strategy that includes microsites
- `/octave:deck` - Presentation deck (for meetings, not sharing a link)
- `/octave:battlecard` - Competitive intelligence (for competitive angle microsites)