Skip to main content
ai-generated-readme-banners Create professional ultra-wide cinematic banners for GitHub READMEs using modern AI image models with typography
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/fabioc-aloha/Alex_Plug_In --skill ai-generated-readme-bannersLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés
SOC
Basé sur la classification professionnelle SOC
Explorateur de fichiers
2 fichiers 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
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:116:91:1FLUX 2.x 21:916:91:1Recraft v4 16:94:3, 3:21:1Imagen 4 ❌ 16:91: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, Maximalist60+ 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]
Explicit spelling in quotes — always specify exact textStructured sections — TITLE TEXT, SUBTITLE TEXT, BACKGROUND, etc.Crystal clear demands — "crystal clear", "sharp", "perfectly legible"Hex color codes — specific colors (#0078d4) for brand consistencyLayout variations — left-aligned, centered, right-aligned for varietyPhotorealistic 3D — emphasize render quality in promptTEXT QUALITY CRITICAL section — reinforces typography requirements
Layout Variations Strategy Generate multiple composition variations for visual comparison:
Left-aligned — Visual element on left, text on rightCentered — Centered focal point, text belowRight-aligned — Visual element on right, text on left
Side-by-side comparison for stakeholder review
Audience targeting (different focus areas per banner)
A/B testing on social media
Seasonal/campaign 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 inPremium : Ideogram v3 Quality ($0.09) — style referencesComplex layouts : Nano Banana Pro ($0.15) — multilingual, infographicsIteration : 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" > Project Name ](assets/banner.png )
**[Tagline]**
</div >
Without Typography (FLUX + Markdown) <div align ="center" > Project Name ](assets/banner-clean.webp )
# Project Name
**[Tagline]**
</div >
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.)
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 scaleBrand color accuracy — Palette matches project branding guidelinesComposition balance — Visual weight distributed evenly, no awkward croppingArtifact detection — No smeared text, misshapen objects, or inconsistent edges
Cross-Project Applicability
GitHub README headers (3:1 aspect ratio)
Project landing pages
Documentation portals
Marketing materials
Multi-variant A/B campaigns
Personal branding (LinkedIn, portfolio)
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.
