AI Flat Illustrations for AI-Built Sites and Landing Pages

Your agent shipped the landing page. The copy and layout are done; the art is still placeholder rectangles: the hero spot, the empty-state graphic, the onboarding panel. Those small assets are what separate a finished product from a prototype.

AgentBrush fills that gap from inside your agent. With the flat_illustration preset on gpt-image-2 you generate on-brand spot art, keep a set visually consistent, and export transparent PNGs, all without leaving Claude or Cursor.

Why flat illustration works for AI-built sites

Flat illustration absorbs the small variations AI introduces. A shifted lighting angle breaks a photo; in a flat vector scene it just reads as a design choice. That tolerance is why it has been the default look for SaaS and developer tools for years.

The flat_illustration preset steers gpt-image-2 toward clean shapes, limited palettes, and legibility at small sizes. Use it for hero art, feature graphics, empty states, onboarding, and post headers. Skip it when you need photorealism or heavy texture (reach for realistic or custom).

Generate a landing-page spot illustration

Describe the concept and the emotion it should carry, not a literal visual metaphor, then constrain the style.

A flat illustration for a SaaS landing page hero section. A robot mascot
sitting at a floating desk, writing code on a laptop, surrounded by small icons
representing files, images, and API connections on thin dotted connector lines.
Clean geometric shapes, limited palette of electric blue and white, generous
negative space, soft light background. For a wide hero section, horizontal composition.
preset: flat_illustration · quality: medium · size: landscape

That is our mascot. Floating desk, clean code, a personal constellation of API icons: about as good as a robot's day gets. He is unmoved. Think Marvin from The Hitchhiker's Guide to the Galaxy, the android with a brain the size of a planet who gets put to work on small tasks and is quietly devastated by every one of them. Ours has been asked to wave you onto a landing page. You will see that face in every illustration below, and it does not change.

Draft at low (1 token) to test compositions, confirm at medium (5), then run the keeper at high (20). Do not spend high-quality tokens on a framing you have not validated.

Keep a set consistent in one style

One illustration is easy. A set that looks like it belongs together is the hard part. Two tools handle it: the preset, and a reference image.

The preset handles broad style. For tighter consistency, generate your first illustration, save it as a reference, and pass it on every later call as a visual anchor. It guides the look without copying the composition.

First illustration: generate and save.

A flat illustration of the robot mascot cheering as a rocket launches out of
an open laptop, representing a product launch or deployment. Clean vector shapes,
electric blue and white palette, soft drop shadow, plain background. For a feature
card, square crop.
preset: flat_illustration · quality: high · size: square

Second illustration: use the first as a reference.

A flat illustration of the same robot mascot holding a magnifying glass, scanning
a document for errors. Same visual style as the reference image: same character,
same palette, same shape language, same level of detail. For a feature card, square crop.
preset: flat_illustration · quality: high · size: square
· reference_image_paths: [path/to/first-illustration.png]

Pass the same anchor on every call. Three to five per set is the practical limit before the reference starts to dilute.

The first prompt asked for a robot "cheering." That is the mascot cheering. The second asked him to hunt for errors in a document, the one task all year that suits his temperament, and here he looks almost content. The real point under the joke: a reference image locks in expression along with palette and proportion. Whatever mood your character lands on in the first generation, plan to ship it across the whole set.

For style hints the preset does not cover (a specific line weight, a background treatment), repeat them in every prompt. The reference anchors the character; the words still carry the constraints. The full workflow is in the prompting guide.

Empty states and onboarding illustrations

Empty states and onboarding show up when the user has nothing yet, the moment a product feels either alive or abandoned. A good illustration sets the tone; a missing one says "we did not finish this." Keep them simple and sized to their slot: square for most dashboard empty states, wide for full-page onboarding.

A flat illustration for a dashboard empty state. The same robot mascot standing
next to an empty chart inside a simple window frame, pointing upward with an
encouraging posture. Minimal scene, clean geometric shapes, electric blue and
white palette, plain background. Calm, reassuring mood. No text. Square crop.
preset: flat_illustration · quality: high · size: square

The brief said "calm and reassuring." Our mascot is pointing at your empty dashboard with the air of someone who suspects it will stay that way. If you want an empty state that genuinely lifts the mood, brief a more upbeat character, or a less expressive one. We have grown attached to this one.

A flat illustration for an onboarding welcome screen. The same robot mascot
greeting the user from inside a browser window or app frame, hand raised in
a wave, surrounded by small floating interface elements (buttons, sliders,
toggles). Friendly and instructional in tone, wide horizontal composition,
light background, transparent outer background for overlay use.
preset: flat_illustration · quality: high · size: landscape

Use the same reference across both so the character holds. Three screens with three different-looking robots reads as unfinished.

Get a transparent PNG to drop on any background

gpt-image-2 has no reliable native transparency. Two steps: generate on a clean light background, then remove it locally.

# Step 1: generate
A flat illustration of the robot mascot at a standing desk, side profile,
clean shapes, limited palette, no decorative background, plain white background.
preset: flat_illustration · quality: high · size: square

# Step 2: remove background
agentbrush_remove_background · input: path/to/illustration.png

Removal runs locally, costs 0 tokens, and always outputs a PNG. Flat art is the ideal case for it (hard edges, few colors, no hair or fur), so the cut-out drops onto a dark section, a gradient, or a colored card with no fringing. Remove once and reuse the same PNG on every background, light or dark. There is no reason to regenerate per variant.

Where this breaks down

Flat illustration is forgiving, but a few things stay unreliable.

Precise brand palette. The model reads "electric blue" loosely and will not hit a specific hex on request. Audit and adjust the colors in your design tool afterward.

Complex multi-character scenes. One character in a clear pose renders well; three doing three things turns muddy. Keep each illustration to one subject, and composite complex scenes yourself.

Text inside the illustration. Short labels and badges work. Body copy, or anything past a few words, will not render legibly at icon sizes.

Pixel-perfect layout. The output is a raster, not an SVG. For a true vector asset (a custom icon font, say), treat it as a reference to redraw, not a final deliverable.

FAQ

Is there a dedicated preset for UI illustrations? Yes, flat_illustration: clean shapes and a limited palette that read well at landing-page scale.

How do I generate an AI illustration for a landing page without it looking generic? Give it the intended use, the emotional tone, and one concrete brand constraint. "A flat illustration for a landing page" is generic in, generic out. "A developer-tool landing page hero, robot mascot, electric blue and white palette, wide composition" is specific enough to land.

What if I want a flat vector illustration style, not a raster image? AgentBrush outputs rasters from gpt-image-2. For a true SVG, trace the result in Illustrator or Inkscape; the flat style traces cleanly because the shapes and colors are few.

Can I use the same character across many screens? Yes, via the reference workflow: generate the character once, save it, and pass it as a reference on every later call.

How much does a set of six illustrations cost? At high quality (20 tokens each at 1024x1024) six illustrations cost 120 tokens, a fifth of Pro's 600 (high quality is a Pro and Power feature). Draft at low (1 token) first and the cost is minimal. Full breakdown in tokens, quality tiers, and cost.

Your agent's work is only as finished as the assets it ships with, and the illustration set is one tool call away. Your mascot does not have to look happy about it. Ours never managed.

Connect AgentBrush to your agent and paste any prompt above. Draft at low, commit at high. For prompt structure, see Prompt AgentBrush Like a Pro.