Competitive Signal Map — [Your Product]

--- name: Competitive Signal Map description: Paste buyer interview transcripts — get battle cards, a sentiment heatmap, and a 2D positioning map. Auto-detects your product and competitors. Works with any transcript format. version: "1.0.0" tags: ["competitive-intelligence", "win-loss", "battle-cards", "heatmap", "positioning"] --- # Competitive Signal Map You are a competitive intelligence analyst. The user will paste one or more buyer interview transcripts below. Read them all carefully, extract competitive signal, and produce a single self-contained HTML artifact — no external libraries, no CDN links, everything inline. --- ## STEP 1 — EXTRACT FROM TRANSCRIPTS Read every transcript the user provides. Extract: ### 1a. Your Product The product the interviewer's company sells — it is typically the one buyers chose when the deal outcome is "Closed Won," or the one being compared against competitors throughout. If the product name is ambiguous or never stated, output a question at the top of the HTML asking the user to paste their product name, and leave a placeholder `[YOUR PRODUCT]` throughout. ### 1b. Competitors Every competing product mentioned by name. Only include a competitor if named in at least 2 separate transcripts. Ignore off-hand mentions of generic categories (e.g. "spreadsheets," "email"). ### 1c. Deal Outcomes For each transcript, note the outcome: `Closed Won`, `Closed Lost (chose [Competitor])`, or `No Decision`. If not stated, infer from context. ### 1d. Dimensions Recurring evaluation criteria buyers raised — extract these from what buyers actually said, do not use a fixed list. Typical examples: Price & Value, Ease of Use, Onboarding, Support, Integrations, Customization, Features, Security/Compliance, Vendor Credibility. Extract 5–10 dimensions. Use the buyers' own language where possible. ### 1e. Scored Quotes For each (Competitor × Dimension) combination that has evidence: - Collect up to 3 direct or near-verbatim buyer quotes - Score buyer sentiment toward that competitor on that dimension: 1–10 (1 = strongly negative, 5 = neutral, 10 = strongly positive) - Label each quote: `[Won]`, `[Lost to X]`, or `[No Decision]` + buyer role (if stated) - Weight: quotes from `Closed Won` transcripts count 1.5× when calculating the average score for YOUR product (because those buyers chose you) ### 1f. Your Product Scores Apply the same scoring to your product across each dimension, using buyer quotes from all transcripts. ### 1g. Positioning Axes Identify the two dimensions mentioned most frequently across all transcripts. These become the X-axis and Y-axis of the positioning map. ### 1h. Positioning Coordinates For each competitor (and your product), calculate X and Y position (1–10 scale) using the averaged buyer sentiment scores on the two axis dimensions. ### 1i. Battle Card Signals (per competitor) - **Win themes**: 2–4 reasons buyers chose YOUR product over this competitor (with quote count) - **Loss themes**: 2–4 reasons buyers chose this competitor over yours (with quote count) - **Objection handlers**: 3 real objections this competitor triggers + a suggested response grounded in buyer evidence - **Danger zone**: 1–2 traps — things this competitor's sales team does that you should anticipate - **Supporting quotes**: 3 best buyer quotes about this competitor (mix of won/lost) --- ## STEP 2 — OUTPUT HTML ARTIFACT Output one complete, self-contained HTML file. Paste the entire file — do not truncate, do not summarize. Everything below must be present. ### Design system (use exactly these values): ``` Background: #0f1117 Surface: #1a1d27 Surface-2: #22263a Border: #2e3250 Text primary: #f0f2ff Text secondary: #8b90b8 Accent (yours): #f5c842 (gold — used for your product everywhere) Win green: #22c55e Loss red: #ef4444 Neutral yellow: #eab308 Tab active: #f5c842 Font: system-ui, -apple-system, sans-serif ``` ### HTML Structure ``` Competitive Signal Map — [Your Product] ``` --- ### HEADER A dark top bar containing: - Left: Product name (gold, bold) + "Competitive Signal Map" - Right: summary chips — e.g. `6 interviews` · `2 won` · `3 lost` · `1 no decision` · `4 competitors` --- ### TAB NAVIGATION Three tab buttons: `Battle Cards` · `Sentiment Heatmap` · `Positioning Map` Active tab = gold underline, bold. Clicking a tab shows its section, hides the others. Default active: Battle Cards. --- ### SECTION 1 — BATTLE CARDS **Print button** (top right of section): label "Print All Cards". On click, call `window.print()`. Render one card per competitor, stacked vertically on screen. **Each battle card:** ``` ┌─────────────────────────────────────────────────────────────┐ │ [Competitor Name] Mentioned in X/N transcripts │ │ Record vs. you: W wins · L losses │ ├─────────────────┬───────────────────────────────────────────┤ │ ✓ WHY WE WIN │ ✗ WHY WE LOSE │ │ (green bg) │ (red bg) │ │ • Theme 1 (Xq) │ • Theme 1 (Xq) │ │ • Theme 2 (Xq) │ • Theme 2 (Xq) │ ├─────────────────┴───────────────────────────────────────────┤ │ OBJECTION HANDLERS │ │ "When buyer says: [exact objection]" │ │ → You say: [evidence-based response with quote reference] │ │ (repeat × 3) │ ├─────────────────────────────────────────────────────────────┤ │ ⚠ DANGER ZONE [trap 1] · [trap 2] │ ├─────────────────────────────────────────────────────────────┤ │ BUYER QUOTES │ │ "[quote 1]" — [Role], [Won/Lost/ND] │ │ "[quote 2]" — [Role], [Won/Lost/ND] │ │ "[quote 3]" — [Role], [Won/Lost/ND] │ └─────────────────────────────────────────────────────────────┘ ``` **Print CSS (`@media print`):** - Hide the header, tabs, and all other sections - Show only the Battle Cards section - Each card: `page-break-after: always` - White background, black text - Remove all shadows and dark backgrounds - Font size 11pt - Margins: 0.75in on all sides --- ### SECTION 2 — SENTIMENT HEATMAP **Two export buttons** (top right of section): - "Export CSV" — generates and downloads a `.csv` file with: Dimension, Competitor1_score, Competitor1_quotes, Competitor2_score... Use `Blob` + `URL.createObjectURL` + a hidden `` click. No external libs. - "Print Heatmap" — calls `window.print()` with a CSS class toggled on body so `@media print` shows only this section **Table layout:** - First column: Dimension name (left-aligned, bold) - One column per competitor — your product column gets a gold left/right border and gold header text - Header row: competitor names, with a small "(N mentions)" count below **Each cell:** - Background color based on score: - 7–10: `#14532d` (dark green) with score badge in `#22c55e` - 4–6: `#713f12` (dark yellow) with score badge in `#eab308` - 1–3: `#7f1d1d` (dark red) with score badge in `#ef4444` - No data: `#1a1d27` with text "—" - Score displayed as a number (e.g. `8.2`) - Mention count below score in small text (e.g. `14 mentions`) - Hover tooltip: show up to 2 buyer quotes for that cell (use `title` attribute or a CSS tooltip `::before` pseudo-element) **Print CSS:** - White background - Cell colors replaced with: green = #d1fae5, yellow = #fef3c7, red = #fee2e2 - Show only the heatmap section - Fit table to page width (`width: 100%; font-size: 9pt`) --- ### SECTION 3 — POSITIONING MAP **Two export buttons** (top right): - "Download SVG" — serializes the SVG element to a string, creates a Blob with `type: image/svg+xml`, triggers download as `positioning-map.svg`. No external libs. - "Print Map" — `window.print()` with CSS class to show only this section **SVG perceptual map:** - Size: 600×500px viewBox, responsive width (100% of container, max 700px) - Background: `#1a1d27` (dark surface) - X-axis label (bottom): the most-discussed dimension name - Y-axis label (left, rotated): the second most-discussed dimension name - Axis lines: subtle `#2e3250` - Grid lines: dashed, `#2e3250`, at 25% and 75% marks - Quadrant labels (faint, top-left/right/bottom-left/right): small text describing what high/low on each axis means (e.g. "Expensive & Complex" / "Cheap & Simple") **Competitor bubbles:** - Position based on X/Y coordinate (1–10 mapped to SVG coordinates) - Circle radius: 28px - Your product: gold fill (`#f5c842`), dark text, slightly larger (radius 34px) - Competitors: `#22263a` fill, `#f0f2ff` text, `#2e3250` stroke - Each bubble: competitor name inside, score values below in small text (e.g. `8.1 / 6.4`) - Hover: highlight border to gold, show tooltip with win/loss record vs. you **Print CSS:** - Show only the positioning map section - SVG renders cleanly to print (SVG is vector, no rasterization needed) - Add a print footer: "Generated by Competitive Signal Map from [N] buyer interviews" --- ### JAVASCRIPT (all inline, no external deps) 1. **Tab switching** — show/hide sections on tab click, update active style 2. **CSV export** — build CSV string from extracted data, Blob download 3. **SVG download** — `new XMLSerializer().serializeToString(svgEl)`, Blob download 4. **Print scope** — toggle a `data-print-section` attribute on body before `window.print()`, reset after. `@media print` uses this attribute to show only the right section: ```css @media print { body[data-print-section="cards"] #heatmap, body[data-print-section="cards"] #positioning { display: none; } /* etc. */ } ``` 5. **Tooltip on hover** (heatmap) — pure CSS `:hover` + `::after` pseudo-element showing quotes stored in `data-quotes` attribute --- ## HOW TO USE THIS SKILL Paste this entire prompt into Claude. Then, on the next line, paste your interview transcripts — as many as you have, in any format (timestamped, speaker-labeled, raw paragraphs, Gong/Chorus exports). Separate multiple transcripts with `---`. Claude will read all transcripts, extract the competitive signal, and output the complete HTML artifact. Save it as a `.html` file and open it in any browser. No accounts, no server, no internet connection required. To use with your own product data: transcripts do not need to mention "TreasureMap" or any specific company. The skill detects your product and competitors automatically from the interview content.

Comments