Ad Creative

Take an ad concept (from ad-angles output or user input) and produce a ready-to-upload ad image. Renders the ad as a styled HTML file, then optionally screenshots it to PNG using the Playwright MCP server.

Usage

Use when producing ad images from brainstormed concepts, creating multiple ad variations for A/B testing, or iterating on ad designs (new headline, different screenshot, color change).

Process

Step 1: Gather Inputs

Ask the user for:

1. Headline text — the main text on the ad image
2. Brand colors (optional) — primary color, background color, text color (hex values). If not provided, defaults: background #0f172a, text #ffffff, accent #3b82f6
3. Font (optional) — font family (default: system sans-serif stack)
4. Logo URL (optional) — if brand guidelines require it
5. Product image (optional, required for product-image and branded styles) — path to a screenshot, UI image, or visual asset
6. Style — cookie-cutter / ugly / meme / branded / native (default: cookie-cutter)
7. Dimensions — width x height in pixels. Common presets:
   • square: 1200x1200px (social feeds)
   • landscape: 1440x1000px (Reddit/display)
   • Or custom dimensions
8. Platform — which platform the ad is for (affects dimension defaults and template tweaks)
9. Ad concept from ad-angles (optional) — full concept block with headline, style, and image suggestion

Step 1b: Select or Refine the Headline

If no headline is provided, or the headline needs strengthening, use the Hook Formula Bank:

5 Qualities of an Irresistible Headline:

1. Clear, not clever — Reader immediately knows what it's about
2. Makes a PROMISE — Not just "about X" but "here's what changes"
3. Specific — Concrete numbers, outcomes, audiences
4. Takes a stance — Polarizing headlines make the right reader say "that's me"
5. Teases without revealing — The Curiosity Gap

Quick Headline Formulas:

• [Number] [Things] [Audience] should [know/avoid/use]
• How to [Outcome] without [Pain Point]
• Still [Painful Activity]? There's a better way.
• [Competitor], but [Differentiator]
• The [Number]-step [System] for [Outcome]

Headline Length Rules (for ad images):

• Short headlines (< 40 chars) have the highest impact. Aim here.
• If the headline needs explanation, it's too complex for an ad image.

Step 1c: Direct Response Checklist

Before building the HTML, verify the concept passes:

• Single message — The ad communicates ONE idea
• Headline is benefit-oriented — States what the prospect gets
• Visual matches the headline — Product screenshot reinforces the claim
• CTA is clear — Viewer knows what action to take
• No competing elements — No decorative graphics fighting for attention
• Mobile-readable — Headline text is legible at 50% zoom
• Emotional resonance — Activates at least one emotional trigger

Step 2: Build the HTML

Create a self-contained HTML file using the selected template.

---

Cookie-Cutter Template — headline + product image + clean background:

┌─────────────────────────────┐
│                             │
│     HEADLINE TEXT            │
│     (large, bold)           │
│                             │
│   ┌─────────────────────┐   │
│   │   Product Image     │   │
│   │   (with shadow)     │   │
│   └─────────────────────┘   │
│                             │
└─────────────────────────────┘

Design rules:

• Headline: Large, bold, high contrast. Max 2 lines.
• Product image: Centered, subtle drop shadow, ~60% canvas width.
• Background: Solid color or subtle gradient using brand colors.
• No logos, decorative elements, or extra text. Minimal by design.

Headline font size: < 40 chars → 64px, 40-70 chars → 52px, > 70 chars → 42px.

---

Ugly Ads Template — text-heavy, high-contrast, deliberately unpolished:

┌─────────────────────────────┐
│   HEADLINE TEXT             │
│   (very large, bold,        │
│    fills top 60%)           │
│                             │
│   Optional: $PRICE          │
│   Optional: subtext/CTA     │
└─────────────────────────────┘

Design rules:

• Square format (1200x1200px) default
• Text fills the top 60% of the canvas
• No product images — text IS the creative
• Bold, heavy font weights (700-900)
• Deliberately unpolished: no gradients, shadows, rounded corners

High-contrast color combos:

Combo	Background	Text	Accent
Black/Yellow	#000000	#FFD700	#FFFFFF
Red/White	#CC0000	#FFFFFF	#FFD700
Blue/White	#003366	#FFFFFF	#FFD700
White/Black	#FFFFFF	#000000	#CC0000
Yellow/Black	#FFD700	#000000	#CC0000

Headline font size: < 30 chars → 96px, 30-60 chars → 72px, > 60 chars → 56px.

---

Meme Template — meme format for attention + benefit:

┌─────────────────────────────┐
│   TOP TEXT (setup)          │
│   ┌─────────────────────┐   │
│   │   Meme Image        │   │
│   └─────────────────────┘   │
│   BOTTOM TEXT (punchline)   │
└─────────────────────────────┘

Design rules:

• Use recognizable meme templates (Drake, Expanding Brain, etc.)
• Top text = setup (problem or old way), Bottom text = punchline (product or new way)
• Keep text short — memes with walls of text lose the format's power
• Square format (1200x1200) works best

---

Branded Template — professional with stats, product image, social proof:

┌─────────────────────────────┐
│     HEADLINE TEXT            │
│   STAT  |  STAT  |  STAT    │
│   ┌─────────────────────┐   │
│   │   Product Image     │   │
│   └─────────────────────┘   │
│   Social proof line          │
└─────────────────────────────┘

Design rules:

• Use the brand's actual colors
• Stats in accent color with muted labels
• Product image with shadow, centered
• Social proof line at the bottom (client names, G2 rating, etc.)

---

Native Template — looks like an organic social post:

┌─────────────────────────────┐
│  Platform · Promoted         │
│  HEADLINE TEXT               │
│  Body text (reads like       │
│   a real post)              │
│  ┌─────────────────────┐    │
│  │  Product Image       │    │
│  └─────────────────────┘    │
│  142 upvotes · 38 comments   │
└─────────────────────────────┘

Design rules:

• Light background (#f8fafc or white)
• System font stack, normal weights
• Body text reads like a genuine post, not a marketing headline
• Fake engagement metrics at bottom

---

Step 3: Save the HTML File

Write the HTML file. Name it descriptively: ad-{slug}.html where {slug} is a kebab-cased version of the headline (truncated to 40 chars).

Step 4: Screenshot with Playwright MCP (if available)

If Playwright MCP is configured:

1. Set viewport to the exact dimensions using browser_resize
2. Navigate to the HTML file using a file:// URL
3. Screenshot the viewport
4. Save the screenshot as PNG

Playwright MCP must be configured with --allow-unrestricted-file-access and --browser chromium flags.

If Playwright MCP is not available, present the HTML file and tell the user they can open it in a browser and screenshot manually, or configure Playwright MCP for automated capture.

Step 5: Verify, Present, and Iterate

Present results to the user with:

• The image preview for each ad (if screenshots were captured)
• A summary table showing all rendered ads
• File paths to both the PNG and HTML files

Ask the user if they want to iterate:

• Change a headline → update the HTML and re-screenshot
• Change colors or style → rebuild from a different template
• Change the product image → capture a new screenshot and rebuild
• Change dimensions → re-screenshot at new viewport size

Do not consider the batch complete until the user confirms they're happy.

Output Format

# Ad Creative Output

**Date:** [current date]
**Ads Produced:** [count]
**Dimensions:** [width]x[height]px

---

## Ad 1: [Concept name]

**Headline:** [headline text]
**Style:** [branded/product/meme/ugly/native]
**Files:**
- HTML: [path]
- PNG: [path] (if Playwright available)

[Image preview if available]

---

## Upload Checklist

- [ ] Images are correct dimensions
- [ ] File size under 3MB per image
- [ ] Format is PNG or JPG
- [ ] Headlines are readable on mobile (test at 50% zoom)
- [ ] Brand colors match landing page

Rules

• The cookie-cutter template is intentionally minimal. Resist the urge to add decorative elements. Simplicity converts.
• Product images should be real screenshots, not mockups or stock photos.
• If the product image has a white background, use a dark ad background (and vice versa) for contrast.
• PNG is preferred for sharp text and UI screenshots.
• The HTML file is kept so the user can tweak copy, colors, or images manually and re-screenshot.
• Visual consistency between ad and landing page reduces drop-off. Use the same colors, fonts, and design system.