Strategic Playbook

Strategic Playbook for [Prospect Name]

🎯 LLM INSTRUCTION: Hero Section PERSONALIZATION: Use prospect's name, one-sentence summary of their situation, 3-4 KPI cards showing Before/After (current state vs. post-playbook state). Numbers make it real. Make them feel: "This is built for ME."
"You're managing [N] priorities with [constraint]. This playbook will take you from scattered execution to a clear 7-step path forward. Based on your specific situation. Here's what execution looks like: [KPI card showing time savings, revenue impact, or similar deltas]."
01

The 7-Step Structure

📋 LLM INSTRUCTION: Full Playbook Map Show the prospect the complete journey: Step 0 (foundation) through Step 6 (metrics). Sidebar progress tracking. Interactive checkboxes. Before/After for each step. Reference their exact situation. Make clear: THIS is their plan, already built.
Step 0: Foundation
Ground in current reality. Before/After showing where they start vs. where playbook takes them.
Step 1-2: Strategy + Execution
3-5 clear objectives. Numbered tactical steps. Owner + timeline on each. Dependencies visible.
Step 3-4: Resources + Risks
Inventory what they have/need. Risks + mitigations. At least one risk they didn't mention (foresight).
Step 5-6: Momentum + Metrics
3-5 quick wins (48-hour wins). Success metrics + KPI cards. Validation checklist to confirm plan.
02

Interactive Playbook Experience

âš¡ LLM INSTRUCTION: Interaction Patterns Map ALL the interactive elements that make this a WORKING playbook, not just a document. Checkboxes save to browser localStorage. Progress bar updates in real-time. Step completion changes sidebar indicators from amber to green. Tab nav syncs to scroll. Floating back-to-top button. Copy-to-clipboard on key text.
Sidebar Progress
Sticky sidebar (280px on desktop, hidden mobile). Progress bar showing % complete. Step nav links. Each step turns green with checkmark when marked complete.
localStorage Persistence
All checkboxes save to browser. Refreshing page = progress is still there. User can return tomorrow and continue. "Reset Progress" button clears everything.
Tab Navigation
Sticky tabs below header (Overview, Step 0, Step 1... Step 6, Validate, Resources). Active tab highlights. Tabs scroll on mobile. Clicking tab smoothly scrolls to section.
Before/After Grids
Every step card shows Before (pale, muted) vs. After (green-tinted). Visual proof of transformation at each step.
✓ DO
  • Every step has interactive checkboxes
  • Progress bar fills as steps complete
  • Sidebar step numbers turn green with checkmark when done
  • localStorage saves state on page reload
  • Tab navigation syncs to scroll position
✗ DON'T
  • Static playbook with no interactivity
  • Checkboxes that don't persist
  • Progress bar that doesn't update
  • Step cards without Before/After
  • Missing localStorage reset button
03

How This Playbook is Generated

🔧 LLM INSTRUCTION: Blueprint Explanation Show the prospect HOW we build this. Pass 1: extract their situation into structured fields (goals, constraints, resources, risks). Pass 2: map to playbook structure (7 steps + validation). Pass 3: render with localStorage interactivity. Transparency builds trust.
Pass 1: Extract
Parse their conversation. Identify: current state, 3-5 objectives, tactical steps, resource gaps, risks, quick wins, success metrics.
Pass 2: Structure
Map extraction to 7-step playbook + validation. Every step grounded in something they said. Before/After comparison built from extracted data.
Pass 3: Render
Build HTML with sidebar nav, checkboxes, localStorage state management, tab navigation, progress bar, back-to-top button. Fully interactive from day one.
Quality Check
Validate: Every step references conversation, No vague objectives, Timelines specific, Risks have mitigations, Validation checklist is thorough.

📋 playbook-community Template

Purpose: Full interactive playbook for the AUDIENCE to work through

Key Features: 2-col sidebar layout, checkbox progress tracking, localStorage persistence, tab navigation, Before/After grids

Tone: Collaborative executor. "This is YOUR plan. Work through it. Check off each step. Watch your progress."

Design: Amber accents (#f59e0b), Space Grotesk/Inter, sidebar sticky navigation