Vibe Coding's Missing Piece: Visual Assets Inside Your Agent

Vibe coding ships working software fast. You describe what you want in plain language, the agent writes the code, and twenty minutes later you have a landing page, a dashboard, or a mobile screen that actually runs. The gap that shows up every time: the visuals are still placeholders.

The hero section says "1200x630 hero image here." The feature cards have grey boxes. The OG image is missing. You have a working app and a broken-looking one, simultaneously. This post covers why that gap exists, why leaving the editor to fix it costs more than it seems, and how to close it without leaving your agent conversation.

What vibe coding actually is

Vibe coding is the practice of building software by describing intent to an agent and letting the agent write the implementation. The term was coined by Andrej Karpathy in February 2025: you say "build me a landing page for a developer tool, two-column hero, three feature cards, dark mode," and the agent produces markup, styles, and logic. You review the result, refine the description, and iterate.

The agent has context: it knows your project structure, your stack, your naming conventions. It can write code that fits. This is what makes the loop fast. You are not specifying every implementation detail. You are describing the outcome and trusting the agent to fill in the competent middle.

The workflow has a ceiling, though. Language models are very good at code. They are not image generators. Ask an agent to produce a hero illustration and you get a placeholder comment, a stock-photo recommendation, or a <div> with a background color. The code part of your app is done in minutes. The visual part is still unsolved.

The asset gap in a vibe-coded project

When you scaffold a landing page in one agent session, the asset list is longer than it looks.

A typical small landing page needs: a hero illustration or photo, an OG image for social sharing, icons for each feature section, maybe a product screenshot with a clean background, possibly a logo or wordmark. That is four to six distinct visual assets before you have a page that looks like it belongs to a real product.

Each one is a context switch. You finish the coding session, open a separate image tool, figure out the interface, generate something, download it, size it, upload it to your project, update the import path, realize the style is wrong, repeat. By the time you have a passable set of assets, you have spent as much time as the coding took.

The other cost is subtler: you lose the thread. The agent session where you built the page had all your context: the brand tone, the color palette in your CSS variables, the copy, the layout rationale. When you open an external tool, that context is gone. You are describing your project from scratch to a different interface that knows nothing about what you just built.

Why the context switch costs more than the minutes

The break is not just calendar time. When you leave your editor to handle images, you are exiting the environment where all your project knowledge lives.

Your agent, at the point you need the hero image, already knows:

• the primary color in your Tailwind config
• the tone and product name from your landing page copy
• the folder structure where assets belong
• the size constraints from your responsive layout

A separate image tool has none of this. You reconstruct a brief from memory, guess at the right output dimensions, download a file named download (3).png, and manually drop it into the right folder. The file is probably the wrong size or the wrong style. You iterate outside the context that could have helped.

The context switch is where vibe-coding momentum dies.

Generating vibe-coding assets in-agent with AgentBrush

AgentBrush is an MCP server. Once it is connected to your agent (Claude Code, Cursor, Codex CLI, Gemini CLI, or any MCP-compatible client), your agent gains image-generation tools it can call directly. You describe what you need in the same conversation where you built the page, and the image lands in your project folder.

The key mechanic: your agent already knows your project when it calls AgentBrush. You do not reconstruct context. You extend the conversation.

Generate a hero illustration for the landing page we just built.
Flat illustration style, a developer at a terminal with code flowing
from the screen into abstract geometric shapes, dark background matching
the --color-bg-dark CSS variable, 1200x630 for OG and hero use.
Output to apps/web/public/images/hero.png
preset: flat_illustration · quality: medium

The agent sends that call to AgentBrush, AgentBrush calls gpt-image-2, and the file appears in your project. No download, no manual copy, no lost naming context.

For transparent-background assets (icons, product cutouts, decorative elements), AgentBrush handles that in two steps: generate on a clean backdrop, then call agentbrush_remove_background. The removal runs locally and costs zero tokens. The output is always a PNG with a real alpha channel.

Generate a set of three feature icons: a lightning bolt for "Fast",
a shield for "Secure", a code bracket for "Extensible".
White line art on a light gray background, consistent 2px stroke weight,
centered, 256x256 each. Then remove the backgrounds on all three.
preset: flat_illustration · quality: low
Output to apps/web/public/icons/

A worked vibe-coding session

Here is how a real session flows when you treat image generation as part of the build, not a separate step.

You start with the code:

Build a landing page for a developer CLI tool called Relay.
Dark theme, primary color #6366F1, two-column hero (illustration left,
headline + CTA right), three feature cards below. Next.js, Tailwind.

The agent scaffolds the page. The <img> tags have placeholder src values. You continue in the same conversation:

Now generate the hero illustration.
A futuristic relay station in space, satellites connecting with beams
of light against a deep indigo sky, flat illustration aesthetic,
matches the #6366F1 brand color. 1200x630.
preset: flat_illustration · quality: medium
Output to public/images/hero-relay.png

AgentBrush generates, saves the file, and the agent can update the src attribute immediately. Same conversation.

Generate the OG image. Use the same illustration cropped to 1200x630,
add the text "Relay" in large bold at center-left and the tagline
"Ship without the glue" below it. preset: flat_illustration · quality: low
Output to public/images/og-relay.png

Generate three feature icons: a lightning bolt (Fast Deploys),
a branch fork (Version Sync), a lock (Secure by Default).
White line art, 256x256. Remove the backgrounds after.
preset: flat_illustration · quality: low
Output to public/icons/

At the end of the session, you have a running page, a hero illustration, an OG image, and transparent-background icons. Everything is in the right folder, named correctly, because the agent handled the file placement. The whole session, code and visuals together, is one conversation.

Token cost for that set of assets: hero at medium quality is 5 tokens, OG at low is 1, three icons at low are 3 tokens. Total: 9 tokens. At Starter plan ($6.99 for 100 tokens), that is about $0.63 in image tokens for a complete set of launch assets.

Honest limits

AgentBrush is useful for shipping good-enough visuals quickly, and that is the right frame for it. It is not a substitute for a designer when brand precision actually matters.

gpt-image-2 follows instructions well, but it will not replicate an existing brand identity unless you supply reference images. If you have a character, a mascot, or a brand-specific illustration style you want held consistent across outputs, pass your existing assets as reference images via reference_image_paths. Without references, each generation is a fresh roll. The results are often good, but they are not the same illustration in a new context.

Text rendering inside illustrations is much better in gpt-image-2 than in previous models, but it is still not a layout tool. If you need precise typographic control over a poster or a banner, treat the image output as the background and compose the type in CSS or a design tool on top.

The iteration loop is the real value proposition. At low quality, a token costs about $0.07 on Starter. You can afford to generate four variations, discard three, and keep the one that works. That is how you close the quality gap: iterate cheap until it is good enough, then optionally re-run at higher quality for the version you ship.

Starter plan ($6.99/month) covers low and medium quality only. High quality (20 tokens per image) requires Pro or Power. If your landing page hero needs the sharpest possible output, that is a Pro call.

For anything brand-critical at launch, treat AgentBrush outputs as a strong starting point that you hand off to a designer for the final pass. For everything else, a fast, good-enough visual that exists is almost always better than a placeholder that ships.

FAQ

Do I need to break out of my agent session to use AgentBrush? No. Once AgentBrush is installed, your agent can call it directly. You describe what you need in the same conversation, in plain language, and the file lands in your project. See installing AgentBrush for the two-minute setup.

How do I get transparent-background icons and cutouts? Generate on a plain solid background, then ask your agent to call agentbrush_remove_background. The removal runs locally and uses zero tokens. Output is always a PNG with a real alpha channel.

How do I keep the same style across multiple generated assets? Two approaches work well together. First, describe the style explicitly and consistently in each prompt (same preset, same descriptors). Second, pass your first successful output as a reference image in subsequent calls via reference_image_paths, so the model has a visual anchor, not just a text description.

What does a full set of landing-page assets actually cost? A hero (medium quality, 5 tokens), an OG image (low, 1 token), and a few icons (low, 1 token each) typically run 10 to 15 tokens total. On Starter plan ($6.99 for 100 tokens), that is about $1 for a complete set. You will spend more on iteration than on the final assets.

Ready to close the asset gap in your next vibe-coding session? Connect AgentBrush to your agent and generate your first image without leaving the editor. Setup takes about two minutes.

If you are new to the tooling, installing AgentBrush in Claude or Cursor walks through the exact steps. For a deeper look at what the underlying model can do, what gpt-image-2 means for AI agents has the full capability rundown with real prompts.