The page is finished. The pictures are why it has not shipped.
Copy: done. Layout: done. Eleven grey rectangles where the artwork goes, a Slack thread with a designer who has three other things on, and a stock library where everything costs money and looks like everything else. This is the part of a launch that never appears on the plan.
Count the image slots on your page
A typical marketing page has more of them than anyone estimates. Here is the usual set, with the tool and the shape each one wants.
Hero
generate_imageThe one image people actually see. Worth a premium model and two or three attempts.
Feature cards
generate_imageThree or four, all from the same reference image so the row reads as a set.
Logo strip
text_to_svgPlaceholder marks as vector while real partner logos are still being chased.
Avatars
generate_transparent_imageCut out, so they sit correctly on any card colour and in dark mode.
Product shot
edit_imageUsually a real screenshot placed into a generated device or environment.
OG image
generate_imageThe preview every share renders. Text-free — overlay copy at build time.
The workflow that keeps a page looking designed
Generating eleven images is easy. Generating eleven images that belong on the same page is the actual problem, and it is solved by order of operations rather than by better prompts.
- 1
Establish the look on one image
Spend your iterations on the hero. Lock the palette, the medium and the lighting there — a flat vector hero and a photoreal feature card will never sit together.
- 2
Make that image the reference
Every subsequent call passes the approved hero in referenceImages. The model now has an example rather than an adjective.
- 3
Batch the repeats
Six avatars or four feature illustrations are independent. Send them through multicall and they come back together, all from the same reference.
- 4
Cut out what overlaps
Anything crossing a card edge or a heading needs alpha. Generate those with generate_transparent_image rather than fixing them later.
- 5
Compress before you commit
WebP at quality 75–82 for hero and feature art, 55–65 for avatars. This is the step that keeps Largest Contentful Paint honest.
- 6
Write the alt text as you go
The agent that generated the image knows exactly what is in it. That is the cheapest good alt text you will ever get.
Build the images for /pricing.
1. Hero, 21:9, premium model — warm cream
background, paper-craft illustration of
a set of scales. Show me before continuing.
2. Once I approve, use it as the reference
for three 4:3 feature illustrations:
billing, usage limits, team seats.
3. Six 1:1 transparent avatars, same style.
4. Compress everything to WebP. Hero at 82,
features at 75, avatars at 60.
5. Write them to public/pricing/ and update
the JSX with real alt text.Five ways generated pages go wrong
Text baked into the image
Models still mangle small type, and baked-in text cannot be translated, selected or read by a screen reader. Generate the picture; overlay the words in HTML.
Eleven different art directions
The symptom of not using a reference image. Each prompt was fine; the set is incoherent.
4 MB PNG heroes
A generated asset is not a shipped asset until it has been compressed. One credit fixes it.
Square images stretched into banners
Ask for 21:9 at generation time. Cropping a 1:1 down to a strip throws away the composition you paid for.
Empty alt attributes
Decorative images take alt="". Everything else needs a description — and the agent already knows what it drew.
What one page costs
| Asset | Calls | Credits |
|---|---|---|
| Hero, three attempts on a premium model | 3 × generate_image | 90 |
| Three feature illustrations, standard model | 3 × generate_image | 45 |
| Six transparent avatars, fast model | 6 × generate_transparent_image | 96 |
| OG image, standard model | 1 × generate_image | 15 |
| Compression pass | 13 × compress_image | 13 |
| One complete page | ≈ 259 | |
Roughly a quarter of a Starter plan’s monthly credits, revisions included. See plans →
Landing page image questions
How do I stop eight generated images looking like eight different websites?
Generate one image you like, then pass it in referenceImages for every subsequent call. That single habit does more for visual consistency than any amount of prompt engineering, because the model has a concrete example instead of an adjective.
What aspect ratios does a typical landing page need?
21:9 or 16:9 for the hero, 4:3 or 1:1 for feature cards, 1:1 for avatars and logos, and 16:9 for the Open Graph image. Ask for the right shape up front — cropping a square into a banner throws away half the composition.
Will AI-generated imagery hurt my SEO?
Search engines rank pages, not the provenance of pixels. What does affect ranking is page weight, layout shift and whether the image is relevant enough that people stay — so compress the assets, set explicit dimensions, and write real alt text describing what the image actually shows.
How many credits does a full page cost?
A typical page — one hero, three feature illustrations, six avatars, one OG image — is roughly eleven generations plus compression. On a standard model that is around 170 credits, comfortably inside the Starter plan’s monthly allowance with room for revisions.
Can the agent write the images into my repo itself?
Yes. Every call returns a hosted URL; a coding agent can fetch it, write the file into your public directory and update the JSX reference in the same turn. That is the whole reason for putting the tools inside the agent rather than in a separate tab.