DEV Community

Cover image for AI Image Generation vs Code: Which Makes Better Banners?
Turtleand
Turtleand

Posted on

AI Image Generation vs Code: Which Makes Better Banners?

#ai #tutorial #programming #opensource

I needed a banner for my X profile. Simple stuff: dark background, tagline text, a URL. Professional and minimal. 1500x500 pixels.

So I tried two approaches with the same brief. The results surprised me.

The brief

  • Dark navy background (#0a1628) matching my website
  • "Where Humans and Technology Evolve Together" in clean typography
  • My URL underneath
  • Professional, minimal

Approach 1: AI image generation

I gave a standard image generation model a detailed prompt:

Create a Twitter/X header banner (1500x500 pixels).

- Background: dark navy (#0a1628)
- Subtle circuit-board pattern in slightly lighter navy
- Main text: "Where Humans and Technology Evolve Together"
  - Elegant serif font, warm off-white (#e0d8c8)
- Below: "turtleand.com" in muted gold (#D4A03A)
- Thin gold divider line between text and URL
- Feel: premium, minimal, professional
Enter fullscreen mode Exit fullscreen mode

The result:

where humans and technology evolve together ai portrait image

Not bad at first glance. But look closer:

  • The typography is uneven. Letter spacing is all over the place.
  • Text is left-aligned awkwardly instead of properly centered.
  • The italic on "Together" feels accidental, not intentional.
  • The background texture is too visible and competes with the text.
  • The overall feel is "close but not quite." The uncanny valley of design.

This is the core limitation of image generation for typography. The model understands what text looks like but doesn't understand typographic rules. Kerning, baseline alignment, optical centering. These are precise crafts, not vibes.

Approach 2: OpenClaw + code

I asked OpenClaw to solve it differently. Instead of generating an image, OpenClaw wrote an HTML file:

<body style="width:1500px; height:500px; background:#0a1628">
  <div class="container">
    <div class="tagline">
      Where Humans and Technology<br>
      Evolve <em>Together</em>
    </div>
    <div class="divider"></div>
    <div class="url">turtleand.com</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

With CSS handling the design:

.tagline {
  font-family: 'Cinzel', serif;
  font-size: 52px;
  color: #e0d8c8;
  text-align: center;
}
.tagline em { color: #D4A03A; }
.divider {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4A03A, transparent);
}
.url {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  color: #D4A03A;
  letter-spacing: 0.15em;
}
Enter fullscreen mode Exit fullscreen mode

Then OpenClaw rendered it to a 1500x500 PNG using a headless browser (Playwright):

const page = await browser.newPage();
await page.setViewportSize({ width: 1500, height: 500 });
await page.goto('file:///path/to/banner.html');
await page.screenshot({ path: 'x-banner.png' });
Enter fullscreen mode Exit fullscreen mode

The result:

where humans and technology evolve together openclaw code-generated image

Night and day.

Side by side

Aspect AI Image Gen OpenClaw + Code
Typography precision ❌ Inconsistent ✅ Pixel-perfect
Color accuracy ~Close ✅ Exact hex values
Font matching ❌ Approximate ✅ Exact font (Cinzel)
Centering/alignment ❌ Off ✅ CSS handles it
Background subtlety ❌ Too visible ✅ Controlled opacity
Time to generate ~30 seconds ~5 minutes
Iteration speed Slow (re-prompt) Fast (edit CSS, re-run)
Reproducibility ❌ Different each time ✅ Identical every time

What this teaches us

AI image generation is great for creative exploration. Concepts, mood boards, illustrations where imperfection adds character. But for anything requiring typographic precision, code wins. Banners, social headers, business cards, slides.

Here's the interesting part. OpenClaw wrote the code that generated the banner. AI wasn't removed from the process. It just operated at the right layer. Instead of generating pixels directly, OpenClaw generated the instructions (HTML/CSS) that a rendering engine turned into pixels.

AI at the right abstraction level beats AI doing everything end-to-end.

This pattern keeps showing up. The best results come not from asking AI to do the whole job. They come from finding the layer where it adds the most value, then letting deterministic tools handle the rest.

Try it yourself

The full HTML template is about 40 lines. Swap the text, colors, and fonts for your own brand. Use any headless browser (Playwright, Puppeteer) to screenshot it. You'll get a pixel-perfect banner in minutes.

Originally published at turtleand.com

Built with OpenClaw + Playwright. I asked OpenClaw to make the banner. It wrote the code. The browser rendered it. I just approved it.

Top comments (0)