marketing-image-generation

Marketing Image Generation

Core Workflow

1. Identify the asset type: ad, social post, blog header, hero image, launch graphic, thumbnail, email banner, product mockup, or campaign visual.
2. Gather only missing essentials: goal, audience, channel, dimensions or aspect ratio, required copy, brand constraints, product context, and output count.
3. Check available context before asking: README, DESIGN.md, brand files, existing screenshots, product copy, and any user-provided reference images.
4. Draft a concrete visual direction before generating: subject, layout, composition, style, color palette, typography direction, lighting, mood, camera/framing, and constraints.
5. Use the image generation tool only when the user has explicitly asked for an image asset or visual mockup.
6. Review the result against the brief, then iterate with targeted changes instead of rewriting the whole concept.

Marketing Defaults

• Prefer one strong focal point over collages.
• Make the product, benefit, or audience instantly legible at thumbnail size.
• Use short text in images. If copy is required, preserve it exactly and keep it to a headline or label.
• For product-led assets, show a plausible interface, workflow, or user outcome rather than decorative UI fragments.
• For paid ads, optimize for immediate comprehension, contrast, and a clear emotional hook.
• For editorial/blog assets, prefer a concept-driven image that supports the article thesis without repeating the title literally.

Patterns to Avoid (AI Slop)

These are the tells of machine-generated marketing design. They cluster because they're what an image/layout model reaches for by default — which is exactly why they read as generic. The goal isn't to memorize a blocklist; it's to recognize the family so you avoid the next variant too. The underlying principle: every element should earn its place by carrying meaning or hierarchy. If it's there only to look "designed," cut it.

Avoid these unless the user explicitly asks for one:

• Eyebrow pills above the headline. The little rounded badge with label text ("✨ INTRODUCING", "NEW", "v2.0") floating above the H1. It almost never adds information the headline doesn't already carry, and it's the single most common AI-layout tell. Lead with the headline itself.
• Gradient-filled or glowing buttons. Multi-color gradient fills, neon glow, or animated-looking sheen on CTAs. Use a single solid accent color with a flat or very subtle shadow. A button should look pressable, not radioactive.
• The default purple→pink/violet tech gradient. Indigo-to-magenta backgrounds (the generic "AI startup" wash) signal template, not brand. Anchor color in the product's actual palette. A gradient is fine when it's restrained and on-brand — the problem is reaching for that gradient as a default.
• Emoji and sparkle (✨/🚀/⚡) ornament. Decorative emoji used as design elements rather than content. They cheapen the composition and date instantly.
• Glassmorphism everywhere. Frosted, semi-transparent blurred cards stacked in depth for no functional reason. One blurred foreground card can work (see examples/blurred-bg-foreground-component.html); a whole scene of them is slop.
• Generic startup imagery. Floating dashboards without context, handshake photos, rocket/lightbulb metaphors, vague abstract 3D — blobs, glossy spheres, isometric doodads, gradient orbs that don't represent anything.
• Decoration over hierarchy. Heavy drop shadows on every element, oversized border-radius on everything, neon glow text, and centered-everything with no size/weight contrast. Polish comes from clear hierarchy and spacing, not effects.
• Dense copy. Paragraphs, multi-sentence subheads, or stacked feature lists crammed into an image. If it can't be read at thumbnail size, it doesn't belong in the image — move it to the surrounding page.
• Fake credibility filler. Invented "Trusted by" logo rows, placeholder star ratings, or stat trios with made-up numbers. Use real assets or omit them.

If the user wants one of these (e.g. "give me that glassy gradient look"), do it well — this list is about defaults, not absolute prohibition.

For HTML/Satori-rendered assets, the bundled libraries are the slop-free starting point: the layout skeletons in examples/layouts/ lead with the headline (no eyebrow pills), use solid-fill buttons, and rely on hierarchy over effects; the backgrounds in examples/backgrounds/ give you restrained, on-brand washes and grids instead of the default purple→pink gradient. Start from those (see the Reusable Layouts and Reusable Backgrounds sections below) rather than improvising decoration.

Prompt Template

Use this structure when calling the image generation tool:

Create a [asset type] for [product/company/campaign].

Goal: [conversion goal or message]
Audience: [specific audience]
Format: [dimensions/aspect ratio/channel]
Composition: [primary subject, layout, focal point, depth, framing]
Style: [visual style, medium, brand feel]
Color and lighting: [palette, contrast, mood]
Text: [exact text, or "no text"]
Brand constraints: [logo usage, typography direction, do/don't]
Avoid: [specific visual cliches, clutter, wrong objects, unsafe claims]

Reusable Backgrounds

For HTML/Satori-rendered assets (OG cards, Vercel ImageResponse, og-playground), start from the background library in examples/backgrounds/. Each file is a single JSX snippet you make the outer container and drop content inside. Categories: dark (dot/line grids, grid-glow, mesh aurora, spotlight, crosshatch, vignette), light (grids, blueprint, grid-fade, pastel mesh, warm/cool washes), and vibrant (sunset, ocean, mesh, stripes, gradient+grid). Rendered previews are in /images/backgrounds. See examples/backgrounds/README.md for the catalog and the Satori constraints (no conic-gradient; dotted patterns need percentage color stops; per-layer backgroundSize for grid + glow; fake fades with a same-color radial overlay).

Reusable Layouts

For HTML/Satori-rendered assets, examples/layouts/ has 18 generic, brand-free layout skeletons (placeholder copy only): heroes (centered, split), feature trio, stat trio, big number, testimonial, social-proof bar, logo cloud, announcement banner, blog header, pricing card, CTA banner, checklist, how-it-works steps, comparison columns, product/browser showcase, terminal window, and event/webinar card. Make a layout the root element, swap copy/colors/screenshots, and pair it with a background from examples/backgrounds/. Rendered previews are in /images/layouts; see examples/layouts/README.md for the catalog.

Channel Guidance

• LinkedIn or X launch image: 16:9 or 1.91:1, bold single message, product screenshot or conceptual hero, readable at feed size.
• Instagram or TikTok cover: 4:5 or 9:16, centered subject, high contrast, minimal text, strong hook.
• Blog header: 16:9, editorial composition, room for title overlay if needed, avoid ad-like CTA styling.
• Landing page hero: wide composition, clean negative space, product context, brand-consistent lighting and palette.
• Paid ad: clear benefit, high contrast, direct product/category cues, no tiny UI details, no dense copy.

Iteration Rules

When revising a generated image:

• Change one or two variables at a time: composition, color, copy, product prominence, realism, or format.
• Preserve what worked from the previous result explicitly.
• If text rendering is poor, reduce the amount of text or move text into the surrounding page instead of forcing dense copy into the image.
• If brand fit is weak, anchor the next prompt in concrete brand traits: colors, typography feel, product screenshots, website style, or visual references.

Output

Return the generated image and a brief note with:

• The intended use case and format.
• Any assumptions made.
• Suggested next iteration only when there is a clear improvement path.