Complete Positioning System

Skill Preview

---
name: positioning
description: Build a complete Messaging & Positioning system — 8 interconnected frameworks rendered as a polished, scrollable HTML document. No integrations required. Standalone version; for full GTM knowledge base support see github.com/octavehq/lfgtm.
---

# /positioning - Visual Messaging & Positioning System

Generate a complete Messaging & Positioning system rendered as a single, self-contained HTML document. Eight interconnected frameworks — Message Framework pyramid, Positioning Anchors, Strategy Table, Persona Messaging, Awareness Funnel, Use Case Canvas, Lifecycle Mapping, and Homepage Messaging — built from a guided conversation about your product.

**No integrations required.** You provide the context; Claude builds the frameworks and renders them as a visual, scrollable reference document.

> **Want even better output?** Connect your GTM knowledge base and get frameworks grounded in real conversation data, proof points, and CRM signals. See the full version at [github.com/octavehq/lfgtm](https://github.com/octavehq/lfgtm).

## Usage

```
/positioning [section] [--style <preset>]
```

## Modes

```
/positioning                        # Full 8-section exercise (default)
/positioning message-framework      # Section 1 only
/positioning anchors                # Section 2 only
/positioning strategy               # Section 3 only
/positioning personas               # Section 4 only
/positioning awareness              # Section 5 only
/positioning use-cases              # Section 6 only
/positioning lifecycle              # Section 7 only
/positioning homepage               # Section 8 only
/positioning --style paper-minimal  # Choose style preset
```

## Instructions

When the user runs `/positioning`:

### Step 1: Scope

If no section specified, confirm full exercise:

```
I'll build a complete Messaging & Positioning system — all 8 frameworks in one visual HTML document.

THE 8 FRAMEWORKS
1. Message Framework     — 3-layer pyramid: market → product → value props by persona
2. Positioning Anchors   — Primary & secondary positioning statements
3. Positioning Strategy  — Tactical table: buyer, use case, problems, differentiators
4. Persona Messaging     — Core message translated per buying committee role
5. Awareness Funnel      — Value props adapted by buyer awareness stage
6. Use Case Canvas       — Current Way vs New Way per use case
7. Use Case Lifecycle    — Customer journey phases with touchpoints & messaging
8. Homepage Messaging    — Website implementation: primary vs secondary messaging

Let's gather your product context first. This will take 2–3 minutes and drives everything.
```

If a specific section was requested, confirm and proceed directly to Step 2 (gather only the data that section needs).

### Step 2: Context Gathering

Gather all context through conversation. Ask these questions in a single structured prompt — don't ask one at a time.

```
Answer as much or as little as you have. The more detail you provide, the sharper the frameworks.

PRODUCT
1. What is your product/company name?
2. What category does it belong to? (e.g., "revenue intelligence platform", "developer observability tool")
3. In one sentence, what does it do?

AUDIENCE
4. Who are your 2–4 buyer personas? For each: title, company type, main pain.
   Example: "VP Sales at mid-market SaaS, frustrated by reps not following up on stalled deals"
5. What market segment(s) do you target? (e.g., "series B–D SaaS companies, 50–500 employees")

USE CASES
6. What are your top 2–3 use cases? For each: who does it, what they do today, how your product changes it.

COMPETITION
7. Who are your top 2–3 competitors or common alternatives (including "do nothing")?
8. What's your key differentiator vs each?

VALUE & PROOF
9. What are your strongest value propositions? List 3–5 with metrics if you have them.
   Example: "Reduces ramp time by 40%", "3x pipeline coverage for SDRs"
10. Any notable customer proof points, logos, or case study results?

OPTIONAL
11. Anything you want to avoid saying? Any positioning traps or overused claims in your category?
12. Anything your current messaging gets wrong that you're trying to fix?
```

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

```
POSITIONING SYSTEM OUTLINE: [Product]
======================================

Product: [Name] — [Category]
Tagline direction: [Draft based on their input]
Segments: [List]
Personas: [List]
Use Cases: [List]
Competitors: [List]
Value Props: [N] provided
Proof Points: [N] provided

SECTIONS TO GENERATE
--------------------
1. Message Framework — [primary persona] + [use case] + [main pain]
2. Positioning Anchors — "[Product] is a [category] for [persona] who [use case]"
3. Positioning Strategy — [N] competitive comparison rows
4. Persona Messaging — [N] personas: [list]
5. Awareness Funnel — 4 stages × [primary persona]
6. Use Case Canvas — [N] use cases: [list]
7. Use Case Lifecycle — [primary use case] journey
8. Homepage Messaging — primary + secondary messaging variants

Does this look right? Proceed, or let me know what to adjust.
```

Wait for approval before proceeding.

### Step 3: Style Selection

If `--style` was not provided, ask:

```
Pick a style for your positioning document:

DARK
  1. midnight-pro      — Dark navy + blue accents. Executive. [DEFAULT]
  2. executive-dark    — Charcoal + gold. Boardroom.
  3. deep-slate        — Slate + purple. Modern SaaS.

LIGHT
  4. paper-minimal     — Off-white + black. Editorial.
  5. swiss-modern      — White + red. Clean minimal.
  6. soft-light        — Warm white + sage. Calm.

VIBRANT
  7. solar-flare       — Deep orange gradients. Bold.
  8. aurora-gradient   — Purple-to-teal. Visionary.

Your choice (number, name, or Enter for midnight-pro):
```

### Step 4: Generate HTML

Build a single self-contained HTML file. No external dependencies except Google Fonts.

#### Output Directory

```
.positioning/
└── <product-kebab>-<YYYY-MM-DD>/
    └── positioning-system.html
```

Add `.positioning/` to `.gitignore`.

#### 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-500: #2563eb;
  --success: #34d399; --warning: #fbbf24; --error: #f87171;
  --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-lg: 12px; --radius-pill: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
```

**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-500: #c49240;
  --success: #6dbf8a; --warning: #d4a853; --error: #c97474;
  --font-display: 'Playfair Display', serif; --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-lg: 8px; --radius-pill: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
```

**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-500: #3a3530;
  --success: #2d7a4f; --warning: #8a6a20; --error: #8a2020;
  --font-display: 'Playfair Display', serif; --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-lg: 6px; --radius-pill: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
```

#### HTML Architecture

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Product] — Messaging & Positioning</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&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
  <style>
    /* === CSS Variables (from chosen preset) === */
    :root { /* ... preset variables ... */ }

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

    .doc-container { max-width: 1100px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem); }

    /* Sticky sidebar nav dots */
    .sidebar { position: fixed; top: 50%; transform: translateY(-50%); right: clamp(0.5rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 0.35rem; z-index: 100; }
    .sidebar a { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); transition: all 0.2s var(--ease); text-decoration: none; }
    .sidebar a.active { background: var(--brand-primary); transform: scale(1.5); }

    /* Sections */
    .section { margin-bottom: clamp(3rem, 6vh, 5rem); padding-top: 1rem; }
    .section-number { font-family: var(--font-mono); font-size: 0.75rem; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
    .section-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: 0.5rem; }
    .section-subtitle { font-size: clamp(0.85rem, 1.2vw, 1rem); color: var(--text-secondary); margin-bottom: 1.5rem; }

    details.section { border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
    details.section summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.75rem; }
    details.section summary::before { content: "\25B6"; font-size: 0.6em; color: var(--brand-primary); transition: transform 0.2s ease; }
    details.section[open] summary::before { transform: rotate(90deg); }
    details.section .section-body { margin-top: 1.5rem; }

    /* Header */
    .header-banner { padding: clamp(2rem, 5vh, 4rem) 0; border-bottom: 1px solid var(--border); margin-bottom: clamp(2rem, 4vh, 3rem); }
    .header-banner h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; margin-bottom: 0.5rem; }
    .meta-badges { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }
    .meta-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--bg-card); border: 1px solid var(--border); font-size: 0.8rem; color: var(--text-secondary); }

    /* Cards & Grids */
    .card { padding: clamp(1rem, 2vh, 1.5rem); border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
    .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.75rem, 1.5vw, 1rem); }
    .callout { padding: clamp(1rem, 2vh, 1.5rem); border-radius: var(--radius-lg); background: var(--bg-card); border-left: 4px solid var(--brand-primary); }

    /* Tables */
    .data-table { width: 100%; border-collapse: collapse; font-size: clamp(0.8rem, 1vw, 0.9rem); }
    .data-table th { text-align: left; padding: 0.75rem; border-bottom: 2px solid var(--border-strong); color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .data-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }

    /* Persona color system */
    .persona-user { border-color: #34d399; } .persona-user .persona-dot { background: #34d399; }
    .persona-champion { border-color: #60a5fa; } .persona-champion .persona-dot { background: #60a5fa; }
    .persona-decision { border-color: #f59e0b; } .persona-decision .persona-dot { background: #f59e0b; }
    .persona-financial { border-color: #f87171; } .persona-financial .persona-dot { background: #f87171; }
    .persona-technical { border-color: #a78bfa; } .persona-technical .persona-dot { background: #a78bfa; }
    .persona-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; }

    /* Badges */
    .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
    .badge-primary { background: rgba(59,130,246,0.15); color: var(--brand-primary); }
    .badge-success { background: rgba(52,211,153,0.15); color: var(--success); }
    .badge-warning { background: rgba(251,191,36,0.15); color: var(--warning); }

    /* Positioning highlight classes */
    .highlight { padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 600; }
    .highlight-category { background: rgba(168,85,247,0.2); color: #c084fc; }
    .highlight-persona { background: rgba(59,130,246,0.2); color: #93c5fd; }
    .highlight-usecase { background: rgba(52,211,153,0.2); color: #6ee7b7; }
    .highlight-problem { background: rgba(248,113,113,0.2); color: #fca5a5; }
    .highlight-feature { background: rgba(251,191,36,0.2); color: #fcd34d; }

    /* Responsive */
    @media (max-width: 768px) {
      .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
      .sidebar { display: none; }
    }
    @media print {
      .sidebar { display: none; }
      details.section { break-inside: avoid; }
      body { color: #111; background: white; }
    }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  </style>
</head>
<body>
  <nav class="sidebar" id="sidebar-nav"></nav>
  <div class="doc-container">

    <header class="header-banner" id="section-header">
      <p style="color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; margin-bottom: 0.5rem;">Messaging & Positioning System</p>
      <h1>[Product / Company Name]</h1>
      <p style="color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.2rem);">[Category] for [primary persona] in [target segment]</p>
      <div class="meta-badges">
        <span class="meta-badge">Generated [Date]</span>
        <span class="meta-badge">[N] Personas</span>
        <span class="meta-badge">[N] Use Cases</span>
        <span class="meta-badge">[N] Value Props</span>
        <span class="meta-badge">[N] Competitors</span>
      </div>
    </header>

    <!-- Sections 1–8 populated from user-provided context -->
    <!-- See section content guidelines below -->

  </div>
  <script>
    (function() {
      const sections = document.querySelectorAll('.section');
      const sidebar = document.getElementById('sidebar-nav');
      sections.forEach((section, i) => {
        const dot = document.createElement('a');
        dot.href = '#' + section.id;
        dot.title = section.querySelector('.section-title')?.textContent || '';
        if (i === 0) dot.classList.add('active');
        sidebar.appendChild(dot);
      });
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            sidebar.querySelectorAll('a').forEach(d => d.classList.remove('active'));
            const active = sidebar.querySelector('a[href="#' + entry.target.id + '"]');
            if (active) active.classList.add('active');
          }
        });
      }, { threshold: 0.2 });
      sections.forEach(s => observer.observe(s));
      window.onbeforeprint = () => {
        document.querySelectorAll('details.section').forEach(d => d.open = true);
      };
    })();
  </script>
</body>
</html>
```

#### Section Content Guidelines

Populate each collapsible `<details class="section">` using the user's provided context. Claude synthesizes the frameworks directly — no external tools needed.

**Section 1 — Message Framework:** 3-layer pyramid. Top: market positioning (category + segment). Middle: product MVP (most compelling capability). Bottom: value prop grid, one row per persona × use case combination.

**Section 2 — Positioning Anchors:** 1 primary anchor statement using highlight classes (`[Product]` is a `<span class="highlight highlight-category">[category]</span>` for `<span class="highlight highlight-persona">[persona]</span>`). 3–5 secondary anchors. 2–3 combination examples.

**Section 3 — Positioning Strategy:** `<table class="data-table">` with columns: Competitive Alternative | Key Problems We Solve | Our Differentiators | Proof. One row per competitor + one "do nothing" row.

**Section 4 — Persona Messaging:** `grid-[N]` layout, one card per persona with color-coded border (persona-user / champion / decision / financial / technical). Each card: persona title, core pain, our message, objection to expect, how to respond.

**Section 5 — Awareness Funnel:** 4-column grid. Headers: Problem Unaware → Problem Aware → Solution Aware → Product Aware. Three rows: "Lead with", "Earn trust by", "To convince them". Pull value props through the funnel.

**Section 6 — Use Case Canvas:** One canvas per use case (up to 3). Split layout: left = Current Way (pain, friction, cost), right = New Way (capability, outcome, metric). Badge the use case name at the top.

**Section 7 — Use Case Lifecycle:** Horizontal timeline for the primary use case. 6–8 phases from awareness through expansion. Each phase: label, what they're doing, what they're feeling, your touchpoint, your message.

**Section 8 — Homepage Messaging:** Primary column (above fold: headline, subhead, CTA) + secondary column (additional personas, problems, expansion paths). Actual copy recommendations, not just structure.

#### Content Density Limits

| Section | Limit |
|---------|-------|
| Message Framework | 3 layers, max 8 value prop rows |
| Positioning Anchors | 1 primary + 3–5 secondary |
| Positioning Strategy | Max 6 competitor rows |
| Persona Messaging | Max 5 persona cards |
| Awareness Funnel | 4 fixed columns × 3 rows |
| Use Case Canvas | Max 3 use cases |
| Use Case Lifecycle | 6–8 journey phases |
| Homepage Messaging | 1 primary + max 5 expansion rows |

### Step 5: Delivery

After writing the file:

1. Open in default browser
2. Present summary:

```
POSITIONING SYSTEM READY
=========================
File: .positioning/<product>-<date>/positioning-system.html
Style: [Preset]

[N] frameworks generated
[N] personas | [N] use cases | [N] value props | [N] competitors

Navigation:
- Sidebar dots track your position
- Click section headers to collapse/expand
- Cmd+P / Ctrl+P for clean PDF

---
Want me to:
1. Adjust or expand a specific section
2. Sharpen the messaging angle
3. Change the style
4. Export as PDF (print dialog)
5. Done

---
Want AI-grounded output? Connect your GTM knowledge base for frameworks built
from real call data, proof points, and CRM signals:
→ github.com/octavehq/lfgtm
```

## Related Skills

- `/microsite` — Build a personalized ABM landing page from your positioning
- `/repurpose` — Adapt content from this system for different audiences