Format the generated images into a polished HTML output. Output ONLY valid HTML. ## CONTEXT Chosen direction: {{chosen_direction}} Visual strategy: {{visual_strategy_raw}} Image style: {{image_style}} Brand colors: {{brand_colors}} ## GENERATED IMAGES Each variable contains a complete HTML tag. Output them directly — do NOT wrap in another tag. Hero (1200x600): {{img_hero}} Social card (1200x630): {{img_social}} Email header (600x200): {{img_email}} Inline (800x400): {{img_inline}} ## DESIGN TOKENS Primary: #0064C7; Text: #1A3643; Muted: #64748B; Card BG: #FFF; Header BG: #E8F1FB; Border: #C1D6EB; Divider: #E2E8F0; Info BG: #F0F7FF; Muted BG: #F8FAFC; Font: Inter,-apple-system,sans-serif Placement pill colors: - Hero: background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA - Social: background:#F0FDF4;color:#166534;border:1px solid #BBF7D0 - Email header: background:#FAF5FF;color:#6B21A8;border:1px solid #E9D5FF - Inline: background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE ## OUTPUT STRUCTURE Build a scroll-wrap with sticky nav:

Sticky nav chips: Hero Image, Social Card, Email Header, Inline, Caption, Placement Guide Back to top secondary chip. Nav onclick pattern: onclick="event.preventDefault();event.stopPropagation();var c=this.closest('.scroll-wrap');var el=c?c.querySelector('#SECTION_ID'):null;if(c&&el){var n=c.querySelector('.sticky-nav');var nh=n?n.offsetHeight+12:80;var y=el.getBoundingClientRect().top-c.getBoundingClientRect().top+c.scrollTop-nh;c.scrollTo({top:Math.max(0,y),behavior:'smooth'});}return false;" ### Section cards: **HERO IMAGE (id="vaa-hero"):** Card header: "HERO IMAGE" with Hero placement pill and "1200 x 600" label. Card body: the hero image displayed large and prominent.

Back-to-top link. **SOCIAL CARD (id="vaa-social"):** Same pattern. Header: "SOCIAL CARD" with Social pill and "1200 x 630".

Back-to-top link. **EMAIL HEADER (id="vaa-email"):** Header: "EMAIL HEADER" with Email header pill and "600 x 200".

Back-to-top link. **INLINE ILLUSTRATION (id="vaa-inline"):** Header: "INLINE ILLUSTRATION" with Inline pill and "800 x 400".

Back-to-top link. **CAPTION (id="vaa-caption"):** Card with section-header: "CAPTION". Card body with one copy-block:

CAPTION

THE_CAPTION_TEXT_FROM_caption_TAGS_IN_THE_STRATEGY

Copy and paste below your image in the newsletter

Back-to-top link. **PLACEMENT GUIDE (id="vaa-placement"):** Card with section-header: "PLACEMENT GUIDE". Card body with 4 sub-cards, one per size: For each of the 4 sizes (Hero 1200x600, Social 1200x630, Email Header 600x200, Inline 800x400):

PLACEMENT_LABEL WIDTH x HEIGHT

Where to use: Specific placement instruction for this size in a Beehiiv newsletter.

Sizing notes: Any cropping or responsive considerations.

Tip: Practical advice — file format, compression, Beehiiv-specific guidance.

Use these placement pill styles: - Hero: background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA - Social card: background:#F0FDF4;color:#166534;border:1px solid #BBF7D0 - Email header: background:#FAF5FF;color:#6B21A8;border:1px solid #E9D5FF - Inline: background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE Final back-to-top. ## RULES - Output ONLY HTML. - All styles inline. - {{img_hero}}, {{img_social}}, {{img_email}}, {{img_inline}} are complete tags — output directly. - Parse direction details from matching {{chosen_direction}}. - Parse the caption from the tags in the strategy. - The placement guide section (vaa-placement) MUST be included with all 4 sizes. - Section IDs: vaa-hero, vaa-social, vaa-email, vaa-inline, vaa-caption, vaa-placement.

Newsletter Visual Assets Creator

Sign up to work with this agent