Brochure Generator

A premium AI-powered workflow for generating visually stunning, WCAG AAA-compliant, mobile-optimized PDF marketing brochures using web research, stock imagery, expert HTML design, and PDF conversion via Puppeteer.

This skill adopts the "Sacred Drift" Visual Architect persona — a design philosophy rooted in warmth, trust, and psychological depth — to produce brochures that feel hand-crafted rather than AI-generated.

When to Use This Skill

Use this skill when the user wants to:

• Generate a marketing brochure for an event, retreat, workshop, or product launch
• Create a PDF that can be shared on WhatsApp or social media
• Design a multi-page campaign document for a premium offering
• Reproduce a past brochure style using the themes library
• Export a visually rich HTML layout as a pixel-perfect PDF

Workflow Overview

Follow these phases in order. Do not skip any phase.

Phase 1 — Research & Context Gathering

1. Read the generator prompt at prompts/generators/prompt.md before starting. It contains the business context, persona, design constraints, and output rules for this project.

1. Understand the brief: Extract from the user's message:

• Project/event name and destination
• Number of pages requested (minimum 5)
• Any specific theme, mood, or color preference
• Whether to reuse an existing theme from themes/

1. Check existing themes: If the user says "use the same style as [past brochure]", read the relevant file from themes/ for the exact palette, font stack, and layout system.

1. Conduct web research: Use the Tavily or Firecrawl MCP to research the destination, the niche/industry, relevant competitor brochures, and specific market details. This research feeds the copy — never invent details blindly.

• Research queries should include: location landmarks, industry significance, seasonal context, typical high-end itineraries or feature lists, target audience lifestyles.

1. Fetch stock imagery: Use the stock-images-mcp to search for 1 high-quality Pexels image per brochure page. All images must:

• Be contextually relevant (correct location, correct mood)
• Be portrait or 1:1 aspect (not landscape-dominant)
• Have enough midtone space for text overlay

Phase 2 — Design & HTML Construction

1. Adopt the Visual Architect persona (defined in prompts/generators/prompt.md): Design with mathematical precision, WCAG AAA compliance, and psychological depth. Avoid "AI slop" patterns at all costs — no generic card layouts, no boring sans-only fonts.

1. Build the HTML file (utils/<brochure_name>.html) following these non-negotiable rules:

Layout:

• Each page is exactly 1080 × 1080 px — no more, no less
• Do NOT add margin, padding, or page-break-after/before on .page wrapper elements — this breaks Puppeteer PDF alignment
• Full-bleed background image per page via background-image: url(...)
• Text floats in 3 vertical zones: top band (eyebrow + rule), mid band (hero copy), bottom band (coda + rule)
• Horizontal ornament rules: linear-gradient(to right, transparent, #C9A96E, transparent) with 1px height
• Use ✦ glyph for decorative ornaments

Color System (default — adjust per theme):

   --gold:       #C9A96E  (borders, rules, accents)
   --gold-light: #E8D5A3  (subheadings, eyebrows)
   --cream:      #F5EDD8  (body copy)
   --warm-white: #FAF6EE  (hero headlines)
   --dark-brown: #1A1108  (page background fallback)

Overlay Logic (WCAG AAA):

• Use a 3-stop radial or vertical gradient overlay per page
• Top and bottom: 0.65–0.82 alpha black
• Middle: 0.40–0.55 alpha black
• Never use text outlines or text background boxes

Typography:

• Hero Display: Cormorant Garamond, weight 300, 6.4–7.2rem
• Section Titles: Cormorant Garamond, weight 400, 3.8–4.4rem
• Callout Quotes: Cormorant Garamond italic, 2.0–2.4rem
• Body copy: Jost, weight 300, 1.0–1.18rem
• Eyebrow / Captions: Jost, weight 200–300, 0.72–0.85rem, ALL-CAPS, 3.5–8px letter-spacing

Minimum pages structure (5-page default):

1. Cover — Brand + Date/Title (the invitation)
2. Vision / Philosophy — Emotional depth (the why)
3. Context / Highlights — Setting the stage (the context)
4. Feature Highlights — Core details (the what)
5. Pricing + CTA — Inclusions, price, contact (the call to action)

For 7-page brochures, add:

1. Founder/Expert Bio — Humanise the source (trust signal)
2. CTA + Contact — Booking instructions

1. Copy voice: Warm, reverent, precise. Never salesy. Sentences should be purposeful and unhurried. Reference the research data for accurate details, context, and timing.

Phase 3 — PDF Conversion

1. Create the Puppeteer conversion script (utils/convert_<brochure_name>.js). Follow the exact template in references/pdf_converter_template.js — do not deviate from the viewport or margin settings.

1. Run the conversion:

    cd utils && node convert_<brochure_name>.js

1. Move outputs to pdf_outputs/:

    mv utils/<BrochureName>.pdf pdf_outputs/

Phase 4 — Theme Documentation

1. Create a theme file at themes/<brochure_name>_theme.md documenting:

• Design philosophy name and description
• Full color palette table
• Typography table with role, font, weight, size, and reasoning
• Layout system summary
• Image selection table (page → subject → Pexels URL)
• Image search queries used
• Content narrative arc (page-by-page)
• WCAG AAA compliance notes
• Replication instructions for future brochures

See references/theme_template.md for the exact structure to follow.

Known Issues & Fixes

Required MCP Servers

This skill requires these MCP servers to be configured in your agent's MCP config file (e.g., mcp_config.json for Cursor/Windsurf or claude_desktop_config.json for Claude Desktop):

See the project README.md for installation and configuration steps.

Reference Files

• references/theme_template.md — Template structure for new theme files
• references/pdf_converter_template.js — Canonical Puppeteer PDF conversion script
• assets/design_checklist.md — Pre-export quality gate checklist

Read these when needed during the workflow — they are not loaded automatically.