| name | ai-generated-readme-banners |
| description | Create professional ultra-wide cinematic banners for GitHub READMEs using modern AI image models with typography |
| tier | standard |
| applyTo | **/*banner*,**/*readme*,**/generate-readme* |
AI-Generated README Banners
Ultra-wide cinematic project branding — from ASCII art to professional visuals in minutes.
Last Updated: April 2026 | Models Verified: Replicate API
Core Pattern
Problem: ASCII art and SVG banners are limited; professional banner design is expensive and time-consuming.
Solution: Generate ultra-wide photorealistic banners using modern AI models with crystal-clear typography, professional composition, and project-specific branding in minutes.
Quality: Current-generation models (Ideogram v3, Recraft v4, FLUX Kontext, Imagen 4) produce stunning photorealistic results with excellent text rendering.
Model Selection Matrix (April 2026)
Typography-Capable Models (Recommended for Banners)
| Model | Cost | Typography | Speed | Best For |
|---|
| Ideogram v3 Turbo | $0.03 | ✅ Excellent | ~6s | Best value — fast, cheap, great text |
| Ideogram v3 Balanced | $0.06 | ✅ Excellent | ~12s | Balance quality/cost |
| Ideogram v3 Quality | $0.09 | ✅ Best | ~20s | Premium + style references |
| Recraft v4 | $0.04 | ✅ Integrated | ~10s | Design taste, art-directed |
| Recraft v4 Pro | varies | ✅ Integrated | ~28s | Print-ready 2048px |
| FLUX Kontext Max | $0.08 | ✅ Improved | ~5s | Image editing + typography |
| Google Imagen 4 | $0.04 | ✅ Good | ~4s | Fine detail, versatile |
| Imagen 4 Fast | $0.02 | ✅ Good | <1s | 10× faster, budget |
| Nano Banana Pro | $0.15 | ✅ Best multilingual | ~60s | Complex layouts, infographics |
| GPT Image 1.5 | $0.01-$0.14 | ✅ Strong | ~20s | Dense text, UI mockups |
Clean Image Models (No/Limited Typography)
| Model | Cost | Best For |
|---|
| FLUX 2 Max | $0.04+ | Highest fidelity, 8 reference images |
| FLUX 2 Pro | ~$0.05 | Production quality, multi-reference |
| FLUX 1.1 Pro | $0.04 | Clean visuals, proven quality |
| FLUX Schnell | $0.003 | Testing, iteration |
| Recraft v4 SVG | varies | Native SVG output |
Recommendations by Use Case
| Need | Model | Why |
|---|
| Budget typography | Ideogram v3 Turbo | $0.03, excellent results |
| Premium quality | Ideogram v3 Quality | Style references, best output |
| Fastest iteration | Imagen 4 Fast | Sub-second, $0.02 |
| Design aesthetic | Recraft v4 | "Design taste" built in |
| SVG/vector | Recraft v4 SVG | Native scalable output |
| Complex text layouts | Nano Banana Pro | Multilingual, infographics |
| Image editing + text | FLUX Kontext Max | Edit existing images |
| Clean visuals (no text) | FLUX 2 Max | Highest fidelity |
Implementation Strategy
1. Default: Ideogram v3 Turbo (Best Value)
const output = await replicate.run("ideogram-ai/ideogram-v3-turbo", {
input: {
prompt: BANNER_PROMPT,
aspect_ratio: '3:1',
magic_prompt_option: 'Auto',
style_preset: 'None',
output_format: 'png',
}
});
2. SVG Format: Recraft v4 SVG
const output = await replicate.run("recraft-ai/recraft-v4-svg", {
input: {
prompt: "Professional ultra-wide banner...",
aspect_ratio: '16:9',
}
});
await writeFile("banner.svg", output);
3. Highest Fidelity: FLUX 2 Max
const output = await replicate.run("black-forest-labs/flux-2-max", {
input: {
prompt: BANNER_PROMPT,
aspect_ratio: '21:9',
resolution: '2 MP',
output_format: 'webp',
}
});
Aspect Ratio Quick Reference
| Model Family | Ultra-Wide | Wide | Standard |
|---|
| Ideogram | 3:1 | 16:9 | 1:1 |
| FLUX 2.x | 21:9 | 16:9 | 1:1 |
| Recraft v4 | 16:9 | 4:3, 3:2 | 1:1 |
| Imagen 4 | ❌ | 16:9 | 1:1, 4:3 |
Note: Ideogram uses 3:1 for ultra-wide (NOT 21:9).
Banner Prompt Engineering
Compositional Structure for Ultra-Wide Format
- Left side: Main character/protagonist (1/3)
- Center: Thematic element/focal point (1/3)
- Right side: Environmental/world context (1/3)
Example Prompt Structure
Cinematic ultra-wide banner illustration for "[PROJECT NAME]" header.
[Genre/aesthetic description]
COMPOSITION (21:9 or 3:1 ultra-wide cinematic format):
- Left: [Character with specific details]
- Center: [Thematic focal point]
- Right: [Environment, atmosphere]
LIGHTING:
- [Specific techniques for each zone]
STYLE:
- [Art direction, realism level]
COLOR PALETTE:
- [Dominant colors, accents]
MOOD: [Emotional tone]
Typography Banners (Ideogram v3)
When to Add Text
- ✅ Project title needs immediate visibility
- ✅ Brand recognition through typography
- ✅ Standalone banner for social sharing
- ❌ Text changes frequently
- ❌ Multi-language support needed (use Nano Banana Pro instead)
Ideogram v3 Parameters (Current — April 2026)
const input = {
prompt: BANNER_PROMPT,
aspect_ratio: '3:1',
magic_prompt_option: 'Auto',
style_preset: 'None',
style_reference_images: [],
output_format: 'png',
};
Style Presets (v3 new feature):
None, 80s Illustration, Art Deco, Watercolor, Oil PaintingPop Art, Vintage Poster, Magazine Editorial, Graffiti, BauhausCollage, Cyberpunk, Steampunk, Minimalist, Maximalist- 60+ more presets available
Ideogram v2 Parameters (Proven — Stable Fallback)
const input = {
prompt: BANNER_PROMPT,
aspect_ratio: '3:1',
magic_prompt_option: 'On',
style_type: 'Realistic',
resolution: '1536x512',
output_format: 'png',
};
Common Ideogram Mistakes
- ❌
magic_prompt_option: 'ON' → Must be 'On' (case-sensitive)
- ❌
style_type: 'CINEMATIC' → Invalid, use 'Realistic'
- ❌
aspect_ratio: '21:9' → Ideogram doesn't support, use '3:1'
- ❌
style_preset on v2 → Only v3 supports presets
Ideogram URL Handling Quirk
let imageUrl;
if (output && typeof output.url === 'function') {
imageUrl = output.url().toString();
} else if (Array.isArray(output)) {
imageUrl = output[0];
} else if (typeof output === 'string') {
imageUrl = output;
} else if (output && output.url) {
imageUrl = typeof output.url === 'object' && output.url.href
? output.url.href
: output.url;
}
Alternative Typography Models
Recraft v4 (Design-Focused)
const output = await replicate.run("recraft-ai/recraft-v4", {
input: {
prompt: BANNER_PROMPT,
aspect_ratio: '16:9',
}
});
Recraft strengths: "Design taste" built in, integrated text as structural element, coherent composition.
Google Imagen 4
const output = await replicate.run("google/imagen-4", {
input: {
prompt: BANNER_PROMPT,
aspect_ratio: '16:9',
safety_filter_level: 'medium',
output_format: 'webp',
}
});
Imagen 4 strengths: Fine detail, fast (~4s), good typography, versatile styles.
Google Nano Banana Pro (Complex Text)
const output = await replicate.run("google/nano-banana-pro", {
input: {
prompt: BANNER_PROMPT,
aspect_ratio: '16:9',
reference_images: [],
output_format: 'webp',
}
});
Nano Banana Pro strengths: Best multilingual text, infographics, complex layouts, 4K output.
OpenAI GPT Image 1.5 (Dense Text)
const output = await replicate.run("openai/gpt-image-1.5", {
input: {
prompt: BANNER_PROMPT,
quality: 'medium',
size: '1536x1024',
}
});
GPT Image 1.5 strengths: Dense text layouts, UI mockups, precise editing, identity preservation.
FLUX Kontext Max (Edit + Typography)
const output = await replicate.run("black-forest-labs/flux-kontext-max", {
input: {
prompt: "Add the text 'PROJECT NAME' in bold...",
input_image: existingImageUrl,
aspect_ratio: '21:9',
}
});
Kontext strengths: Edit existing images, add text overlays, improve typography in existing banners.
Typography Prompt Pattern (Validated)
Structure: Use clear labeled sections for best results with any typography model.
Professional technology banner (3:1 ultra-wide format).
TITLE TEXT (large, centered):
"[EXACT TEXT]"
- Bold modern sans-serif, uppercase
- [Color specification or gradient]
- Crystal clear, perfectly legible
- Sharp crisp lettering
SUBTITLE TEXT (below title):
"[Exact subtitle]"
- Clean font, [color]
- Readable professional typography
[VISUAL ELEMENTS]:
- [Specific objects, positioned where]
- [Prominent features, branding elements]
- Photorealistic 3D rendering
BOTTOM [CORNER] (optional):
- [Logo mark description]
- "[Brand text]" in [color]
BACKGROUND COMPOSITION (3:1 ultra-wide):
- [Gradient colors with hex codes]
- [Atmospheric elements: stars, particles, etc.]
- [Lighting effects: glows, halos]
LIGHTING:
- [Specific lighting techniques]
- [Glow sources and colors]
- Modern cinematic quality
COLOR PALETTE:
- Background: [hex codes]
- Accents: [hex codes]
- Text: [color with effects]
STYLE:
- Photorealistic 3D rendering
- [Aesthetic description]
- Sharp detail, cinematic quality
TEXT QUALITY CRITICAL:
- Crystal clear text rendering
- No distortion whatsoever
- Perfect spelling: "[EXACT TEXT]"
- Professional typographic hierarchy
MOOD: [Emotional tone, brand feeling]
Key Principles:
- Explicit spelling in quotes — always specify exact text
- Structured sections — TITLE TEXT, SUBTITLE TEXT, BACKGROUND, etc.
- Crystal clear demands — "crystal clear", "sharp", "perfectly legible"
- Hex color codes — specific colors (#0078d4) for brand consistency
- Layout variations — left-aligned, centered, right-aligned for variety
- Photorealistic 3D — emphasize render quality in prompt
- TEXT QUALITY CRITICAL section — reinforces typography requirements
Layout Variations Strategy
Generate multiple composition variations for visual comparison:
- Left-aligned — Visual element on left, text on right
- Centered — Centered focal point, text below
- Right-aligned — Visual element on right, text on left
Benefits:
- Side-by-side comparison for stakeholder review
- Audience targeting (different focus areas per banner)
- A/B testing on social media
- Seasonal/campaign variations
Cost (3 variations):
- Ideogram v3 Turbo: $0.09 (best value)
- Imagen 4 Fast: $0.06 (fastest)
- Ideogram v3 Quality: $0.27 (premium)
Cost Comparison (April 2026)
Best Value Typography Options
| Model | Single | 3 Variants | Quality | Speed |
|---|
| Ideogram v3 Turbo | $0.03 | $0.09 | Excellent | ~6s |
| Imagen 4 Fast | $0.02 | $0.06 | Good | <1s |
| Recraft v4 | $0.04 | $0.12 | Excellent | ~10s |
| Imagen 4 | $0.04 | $0.12 | Good | ~4s |
| GPT Image 1.5 (low) | $0.01 | $0.03 | Good | ~20s |
| GPT Image 1.5 (med) | $0.05 | $0.15 | Better | ~20s |
| Ideogram v3 Quality | $0.09 | $0.27 | Best | ~20s |
| Nano Banana Pro | $0.15+ | $0.45+ | Excellent | ~60s |
Clean Visuals (No Typography)
| Model | Cost | Use Case |
|---|
| FLUX Schnell | $0.003 | Testing, iteration |
| FLUX 1.1 Pro | $0.04 | Production quality |
| FLUX 2 Max | $0.04+ | Highest fidelity |
Recommendations
- Budget + Good: Ideogram v3 Turbo ($0.03) or Imagen 4 Fast ($0.02)
- Balanced: Recraft v4 ($0.04) — design taste built in
- Premium: Ideogram v3 Quality ($0.09) — style references
- Complex layouts: Nano Banana Pro ($0.15) — multilingual, infographics
- Iteration: FLUX Schnell ($0.003) + markdown overlay
Script Templates
Recommended: Ideogram v3 Turbo (Best Value)
import Replicate from 'replicate';
import fs from 'fs-extra';
import https from 'https';
const replicate = new Replicate({
auth: process.env.REPLICATE_API_TOKEN,
});
const BANNER_PROMPT = `Professional technology banner (3:1 ultra-wide format).
TITLE TEXT (large, centered):
"PROJECT NAME"
- Bold modern sans-serif, uppercase
- Gradient from deep blue to vibrant purple
- Crystal clear, perfectly legible
BACKGROUND COMPOSITION:
- Deep space gradient (#080810 → #0d1520)
- Modern tech geometric patterns
- Radial glow effects
COLOR PALETTE:
- Background: Deep blue (#0078d4), purple (#7c3aed)
- Text: White with blue glow
TEXT QUALITY CRITICAL:
- Crystal clear sharp letterforms
- Perfect spelling: "PROJECT NAME"
MOOD: Inspiring, professional, cutting-edge technology`;
const output = await replicate.run('ideogram-ai/ideogram-v3-turbo', {
input: {
prompt: BANNER_PROMPT,
aspect_ratio: '3:1',
magic_prompt_option: 'Auto',
style_preset: 'None',
output_format: 'png',
}
});
let imageUrl = Array.isArray(output) ? output[0] : output;
if (typeof imageUrl === 'object') {
imageUrl = imageUrl.url?.() || imageUrl.url || imageUrl.href;
}
await downloadImage(imageUrl.toString(), 'assets/banner.png');
console.log('✅ Banner generated: assets/banner.png');
console.log('💰 Cost: $0.03');
Alternative: Recraft v4 (Design Aesthetic)
const output = await replicate.run('recraft-ai/recraft-v4', {
input: {
prompt: `Ultra-wide banner for "PROJECT NAME" with integrated typography.
Modern tech aesthetic, gradient blues and purples, geometric patterns.
Clean professional design with bold title text.`,
aspect_ratio: '16:9',
}
});
await downloadImage(output[0], 'assets/banner-recraft.png');
console.log('💰 Cost: $0.04');
Alternative: Clean + Markdown (FLUX 2)
const output = await replicate.run('black-forest-labs/flux-2-max', {
input: {
prompt: `Ultra-wide cinematic banner for technology project.
Deep space gradient, scattered stars, radial glow.
Modern tech aesthetic, geometric patterns.
NO TEXT - clean visual composition.`,
aspect_ratio: '21:9',
resolution: '2 MP',
output_format: 'webp',
}
});
await downloadImage(output, 'assets/banner-clean.webp');
console.log('💰 Cost: ~$0.04');
Helper: Download Image
async function downloadImage(url, filepath) {
return new Promise((resolve, reject) => {
const file = fs.createWriteStream(filepath);
const protocol = url.startsWith('https') ? https : require('http');
protocol.get(url, (response) => {
if (response.statusCode === 302 || response.statusCode === 301) {
return downloadImage(response.headers.location, filepath)
.then(resolve).catch(reject);
}
response.pipe(file);
file.on('finish', () => { file.close(); resolve(); });
}).on('error', (err) => {
fs.unlink(filepath, () => {});
reject(err);
});
});
}
Batch Generation with Rate Limiting
const BANNERS = [
{ id: 'main', filename: 'banner-main.png', title: 'PROJECT NAME' },
{ id: 'dev', filename: 'banner-dev.png', title: 'FOR DEVELOPERS' },
{ id: 'learn', filename: 'banner-learn.png', title: 'START LEARNING' },
];
for (const banner of BANNERS) {
const output = await replicate.run('ideogram-ai/ideogram-v3-turbo', {
input: {
prompt: createPrompt(banner.title),
aspect_ratio: '3:1',
magic_prompt_option: 'Auto',
output_format: 'png',
}
});
let url = Array.isArray(output) ? output[0] : output;
if (typeof url === 'object') url = url.url?.() || url.url || url.href;
await downloadImage(url.toString(), `assets/${banner.filename}`);
console.log(`✅ ${banner.filename}`);
await new Promise(r => setTimeout(r, 2000));
}
console.log(`💰 Total: $${(BANNERS.length * 0.03).toFixed(2)}`);
### Package.json Integration
```json
{
"scripts": {
"generate:banner": "node scripts/generate-banner.js",
"generate:banner-text": "node scripts/generate-banner-with-text.js"
}
}
README Integration
With Typography (Ideogram/Recraft)
<div align="center">
**[Tagline]**
</div>
<!-- Generate: npm run generate:banner-text -->
Without Typography (FLUX + Markdown)
<div align="center">
# Project Name
**[Tagline]**
</div>
<!-- Generate: npm run generate:banner -->
Key Insights
Model Selection Strategy
| Priority | Choose | When |
|---|
| Budget | Ideogram v3 Turbo | Most use cases |
| Speed | Imagen 4 Fast | Rapid iteration |
| Quality | Ideogram v3 Quality | Final production |
| Design | Recraft v4 | Art-directed work |
| Complex | Nano Banana Pro | Multilingual, infographics |
| Vector | Recraft v4 SVG | Scalable output |
| Edit | FLUX Kontext Max | Modify existing |
Structured Prompts = Better Results
Pattern: Use labeled sections (TITLE TEXT, BACKGROUND, LIGHTING, etc.)
Why it works:
- Models parse structured input more reliably
- Clear hierarchy produces professional composition
- Explicit requirements prevent ambiguity
- Easier to iterate and refine specific sections
Brand Consistency Through Hex Codes
Technique: Specify exact hex codes in prompts
- Background: Deep space blue (#080810 → #0d1520)
- Primary: Azure blue (#0078d4)
- Accent: Vibrant purple (#7c3aed)
- Highlight: Electric teal (#14b8a6)
Rate Limiting Best Practice
await new Promise(resolve => setTimeout(resolve, 2000));
Requirement: 2-second delay between Replicate API calls to prevent rate limit errors.
Visual Verification (VS Code 1.112+)
After generation, use view_image to assess banner quality:
- Typography legibility — Text is sharp, correctly spelled, readable at README scale
- Brand color accuracy — Palette matches project branding guidelines
- Composition balance — Visual weight distributed evenly, no awkward cropping
- Artifact detection — No smeared text, misshapen objects, or inconsistent edges
Cross-Project Applicability
✅ Ideal use cases:
- GitHub README headers (3:1 aspect ratio)
- Project landing pages
- Documentation portals
- Marketing materials
- Multi-variant A/B campaigns
- Personal branding (LinkedIn, portfolio)
❌ Not ideal:
- Social media (need 1:1, 4:5, 16:9 ratios)
- Book covers (need portrait 2:3, 4:5)
- Character references (need square 1:1)
- Frequent text changes (use FLUX + markdown)
Real-World Validation
Alex Cognitive Architecture (February-April 2026):
- ✅ 6 banners with Ideogram v2 → migrated to v3 Turbo
- ✅ Perfect text rendering with brand colors
- ✅ 63% cost reduction with v3 Turbo ($0.48 → $0.18 for 6 banners)
- ✅ Quality maintained or improved
Validated Models (April 2026):
- Ideogram v3 Turbo: Excellent typography, best value
- Recraft v4: Strong design aesthetic
- FLUX 2 Max: Highest fidelity clean images
- Imagen 4: Fast, good quality
Key Learning: Ideogram v3 Turbo is the new gold standard — 63% cheaper than v2 with equivalent or better quality.
