메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
| name | octave-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. |
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:
/octave-one-pager — one-pager is a post-meeting leave-behind; microsite is a pre-meeting attention grabber for outreach/octave-proposal — proposal is formal and detailed; microsite is concise and designed to generate interest/octave-deck — deck is for presenting; microsite is for sharing a linkThis landing page is customer-facing and personalized ("Built for [Company]"), so default to the recipient's (the target company's) brand — a page in the prospect's own identity is the whole point of an ABM microsite; the sender's brand is the fallback. "The company" below = the recipient. Then:
<slug> and check for a cached brand kit at ~/.octave/brands/<slug>/manifest.json.tokens.css (:root + the embedded @font-face) and get-brand-components/assets/kit_base.css into the output <style>;brand-kit.md → Signature moves, and reuse the kit's real logo, images/, and icons.json;get-brand-components/scripts/render_kit.py (hero / split / logos / pricing / cta / footer blocks)./octave-get-brand-components <domain>, then proceed.The brand kit is the strongest styling signal — when one is available, prefer it over generic
--stylepresets. See theget-brand-componentsskill for the kit format, token contract, and renderer.
After generating, run the review pass by default — don't wait to be asked. In interactive mode, tell the user at intake that you'll review before finishing (recommended) and that they can opt out with --skip-review or "skip review". Follow get-brand-components/references/asset-review.md: the always-on preflight (em dashes, broken images/logos, link target, themed scrollbars, leaked internals) plus the visual pass (render/screenshot, inspect the pixels across the dimensions — groundedness/verification matters most — report a short located scorecard, fix, re-verify). The visual pass defaults off only in a --research fast run; the preflight always runs.
When generating, follow the output rules in get-brand-components/references/presentation-principles.md — the generation-time companion to the review pass (label every value, no tool names in the output, confirmed vs hypothesized, lean and deal-specific).
/octave-microsite <target> [--angle <approach>] [--style <preset>]
/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)
When the user runs /octave-microsite:
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?"
Whose brand should the microsite reflect?
1. My brand (the sender) — extract from my website (give the URL)
2. The recipient's brand — mirror the target account's look for maximum ABM personalization (give *their* URL)
3. I'll provide brand assets directly (colors, fonts, logo)
4. No brand — pick from style presets
5. Use Octave brand styling
Your choice:
This choice decides which website we fetch for styling — your domain (option 1) or the target account's domain (option 2). It's separate from the recipient context below, which always personalizes the content regardless of whose brand styles the page.
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 + Motion ICP cell narrative + 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 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 for the microsite outline template.
Wait for user approval before proceeding.
Two layers of brand apply to microsites:
If user chose brand extraction in Step 1:
Use the same tiered brand extraction approach as the deck skill (see /octave-deck Step 3 for full detail):
get_external_brand_assets (first-party, fast) — one call returns brand colors, logo variants, and backdrop images. Sanity-check the result: a strip of varied logos is usually a "trusted by" customer wall, not the brand's own logo, and brandName can grab a customer — prefer the favicon/nav wordmark and verify against the domain.scrape_website ({ format: "html", includeScreenshot: true }) — pull the homepage and one representative page; read fonts + CSS custom properties from the html, and the component/layout vocabulary (button shapes, card radii, spacing, gradients, section patterns) from the screenshot. Microsites especially benefit — the goal is to look like the sender's site, not just borrow its colors.Confirm the brand config with the user before proceeding.
If user chose a style preset:
Reference the deck skill's 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.
Build a single, self-contained HTML file. A microsite is a single scrolling page — visually striking, mobile-responsive, and heavily personalized.
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.
See page-sections-by-angle.md for page section templates for each angle (pain-point led, competitive displacement, value-led, trigger-based).
See html-architecture.md for the full HTML/CSS scaffold with sections, typography, and layout components.
These rules are non-negotiable for microsites:
clamp() values must work at 375px width. Test aggressively.| 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.
Scroll-triggered entrance animations using Intersection Observer:
.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):
transform: scale(0.96) to scale(1) on revealAlways respect prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
.animate-in { opacity: 1; transform: none; transition: none; }
}
/* 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); }
}
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.
After generating the HTML file:
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:
• Live URL (recommended): bash "${CLAUDE_PLUGIN_ROOT:-.}"/scripts/deploy.sh .octave-microsites/<company>-<date>/ — deploys to Vercel and returns a public link to drop in your outreach
• PDF: bash "${CLAUDE_PLUGIN_ROOT:-.}"/scripts/export-pdf.sh .octave-microsites/<company>-<date>/<company>-microsite.html — or Cmd+P / Ctrl+P -> Save as PDF
• Host on any static file server, S3 bucket, or Netlify drop
• Or send the HTML file directly as an attachment
---
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
enrich_company - Full company intelligence profileenrich_person - Full person intelligence reportfind_person - Find contacts at a company by title/rolequalify_company - ICP fit scoring for a companyqualify_person - ICP fit scoring for a personlist_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 entitylist_motions - Motions for the offeringlist_motion_playbooks - Default + Custom Motion Playbooks under a Motionget_motion_playbook - Full Motion Playbook detailslist_motion_icps - Persona × segment matrix for a Motionfind_motion_icp - Full per-cell narrative + Learning Loop learningssearch_knowledge_base - Semantic search across library entities and resourceslist_resources - Browse uploaded docs, URLs, and Google Drive filessearch_resources - Semantic search across uploaded resourceslist_findings - Recent conversation findings and insightslist_events - Deal events (won, lost, created, etc.)get_event_detail - Full details for a specific eventgenerate_call_prep - Synthesized prep brief for accountsgenerate_content - Generate positioning or messaging contentlist_all_entities (entityType: "brand_voice") - Available brand voices in workspacelist_writing_styles - Available writing styles in workspaceOctave 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:
- Proceed with general positioning from your library — I'll use your best-fit Motion ICP cell
- Try a different domain or email
- 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:
- Use your strongest proof points from adjacent industries
- Use general metrics without company-specific quotes
- 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:
- Switch to a different angle (pain-point led or value-led)
- Use general competitive positioning without naming the competitor
- Provide competitor details manually and I'll build the narrative
No Matching Motion ICP Cell:
No Motion ICP cell matches this audience profile directly.
I'll use your general positioning. After the microsite is built, consider layering a Custom Motion Playbook (Thematic / Milestone / Account / Competitive) on the relevant Motion for this angle:
/octave-library create motion-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.
/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)Visual competitive battlecard document rendered as interactive HTML with expandable sections and color-coded comparisons. Use when user says "battlecard document", "visual battlecard", "competitive reference doc", or wants a formatted HTML version of competitive intelligence. Do NOT use for text-based competitive analysis — use /octave-battlecard instead.
Generate competitive battlecards, displacement campaigns, trap questions, and objection counters as text-based analysis grounded in library data and real deal evidence. Use when user says "battlecard for [competitor]", "how do we beat [competitor]", "competitive intel", "trap questions", "displacement campaign", or mentions competing against a rival. Do NOT use for visual HTML battlecard documents — use /octave-battlecard-doc instead.
Account dossier and call prep document rendered as a scannable HTML reference page for internal use. Use when user says "brief me on [company]", "account dossier", "call prep doc", "background on [person]", or asks for an internal reference document. Do NOT use for customer-facing documents — use /octave-one-pager or /octave-proposal instead.
Deal coaching — role-play, coaching microsites, decks, and quizzes built around the Resonate → Elevate → Compel methodology and grounded in your Octave library. Use when user says 'deal coaching', 'deal coach role play', 'coaching quiz', 'coaching deck', 'deal-coach', 'practice deal coaching', 'coaching microsite', 'sales methodology training', or asks for deal coaching.
Octave-powered presentation builder that researches, structures, and generates self-contained HTML slide decks. Use when user says "build a deck", "create a presentation", "pitch deck", "QBR slides", "sales deck", or asks for slides on any topic.
Capture a brand's visual design system from its website and build a reusable component kit. Walks key pages on a domain (screenshots + HTML via the Octave scrape tool), derives design tokens (colors, type, spacing, radius, shadow), and produces a minimal component library (buttons, cards, headers, stats, tables, badges, hero, footer) as a self-contained HTML reference plus CSS tokens. Use when the user says "get brand components", "capture the brand", "build a component kit for <domain>", "make outputs look like <company>", or wants other skills to generate on-brand HTML for a target company.