Enhancing Landing Page Banners with Programmatic Generation

Introduction

We recently faced a challenge with our landing page banners on the devlog-ist/landing project. Initially, we relied on AI image generation (Gemini) to create these banners. However, inconsistencies and errors, particularly misspellings, became a recurring issue. To address this, we transitioned to a programmatic approach using Playwright for HTML rendering, leveraging the H7 presentation design system.

The Problem with AI-Generated Images

While AI image generation offers speed and creativity, its unreliability in accurately rendering text within images posed a significant problem. This led to a lack of consistency and required constant manual review and correction.

The Solution: Programmatic Banner Generation

Our solution involves generating banners directly from code. We use Playwright to render HTML templates based on the H7 design system, which incorporates:

• Space Grotesk and Mono fonts
• A neo-brutalist color palette
• Colorful tech tags and corner accents
• A rainbow strip for visual appeal

This approach ensures pixel-perfect accuracy and complete control over the banner's content and appearance.

Implementation Details

The process can be illustrated with a simple example. First, define the HTML structure of the banner:

<div class="banner">
  <h1>Welcome to Our Platform</h1>
  <p>Learn about our cutting-edge technology.</p>
  <span class="tag">JavaScript</span>
</div>

Then, use Playwright to render this HTML to an image:

const playwright = require('playwright');

async function generateBanner() {
  const browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent('<div class="banner"><h1>Welcome to Our Platform</h1><p>Learn about our cutting-edge technology.</p><span class="tag">JavaScript</span></div>');
  await page.screenshot({ path: 'banner.png' });
  await browser.close();
}

generateBanner();

This code launches a Chromium browser, sets the HTML content of a page, takes a screenshot, and saves it as banner.png. The CSS classes would be defined in your H7 design system to style the banner according to your brand guidelines.

Benefits

• Accuracy: Eliminates misspellings and ensures consistent rendering.
• Control: Provides complete control over every aspect of the banner design.
• Automation: Enables automated generation of banners based on data or configuration changes.

Conclusion

Switching from AI image generation to programmatic banner creation has significantly improved the quality and consistency of our landing page visuals. This approach offers greater control, accuracy, and automation capabilities. If you're struggling with similar issues, consider exploring programmatic image generation as a robust and reliable alternative.