AI Image Generation Skill

Expert in generating professional-quality images using Pollinations.ai - a FREE, open-source AI image generation platform requiring NO API keys.

Quick Reference

Generate any image instantly:

https://image.pollinations.ai/prompt/YOUR_PROMPT_HERE

When This Skill Activates

This skill auto-activates when you need images for:

• Web Development: Hero sections, backgrounds, banners, thumbnails

• App Design: Splash screens, onboarding, placeholders, icons

• Marketing: Product mockups, social media, ads, landing pages

• UI/UX: Illustrations, avatars, empty states, feature graphics

• Prototyping: Concept visualization, wireframe assets

Pollinations.ai API

Basic URL Structure

https://image.pollinations.ai/prompt/{prompt}?{parameters}

Parameters

Parameter Values Default Description

width

256-2048 1024 Image width in pixels

height

256-2048 1024 Image height in pixels

model

flux, turbo, flux-realism, flux-anime, flux-3d, flux-cablyai flux AI model to use

seed

any integer random Reproducible results

nologo

true false Remove watermark

enhance

true false Prompt enhancement

safe

true false Safety filter

Available Models

Model Best For Quality Speed

flux

General purpose, photorealistic Highest Medium

flux-realism

Ultra-realistic photos Very High Medium

flux-anime

Anime/illustration style High Fast

flux-3d

3D renders, product mockups High Medium

flux-cablyai

Artistic, creative styles High Fast

turbo

Quick iterations, drafts Medium Fastest

Professional Prompt Engineering

Prompt Formula (CRITICAL for Quality)

[Subject] + [Style/Medium] + [Lighting] + [Composition] + [Quality Modifiers]

Quality Modifiers (ALWAYS Include)

For highest quality output, append these to prompts:

, professional photography, 8k uhd, high resolution, sharp focus, highly detailed

For specific use cases:

Use Case Quality Modifiers

Website Hero cinematic lighting, professional photography, 8k, sharp focus, volumetric lighting

Product Shot studio lighting, white background, commercial photography, product photography, clean

App Icon minimal, flat design, vector style, clean lines, app icon, centered, simple background

Illustration digital illustration, vibrant colors, clean lines, professional artwork, detailed

Avatar portrait, centered, professional headshot, neutral background, high quality

Background seamless pattern, tileable, abstract, subtle, muted colors, non-distracting

Aspect Ratios for Common Use Cases

Use Case Width Height Ratio

Hero Banner 1920 1080 16:9

Social Media Post 1200 1200 1:1

Portrait/Avatar 800 1200 2:3

Product Card 800 600 4:3

Mobile Splash 1080 1920 9:16

App Icon 512 512 1:1

OG Image 1200 630 ~1.9:1

Thumbnail 400 300 4:3

Code Examples

React/Next.js Integration

// components/GeneratedImage.tsx interface GeneratedImageProps { prompt: string; width?: number; height?: number; model?: 'flux' | 'flux-realism' | 'flux-anime' | 'flux-3d' | 'turbo'; className?: string; alt: string; }

export function GeneratedImage({ prompt, width = 1024, height = 1024, model = 'flux', className, alt, }: GeneratedImageProps) { const encodedPrompt = encodeURIComponent(prompt); const url = https://image.pollinations.ai/prompt/${encodedPrompt}?width=${width}&height=${height}&model=${model}&nologo=true;

return ( <img src={url} alt={alt} width={width} height={height} className={className} loading="lazy" /> ); }

// Usage <GeneratedImage prompt="Modern tech startup office, glass walls, natural lighting, professional photography, 8k" width={1920} height={1080} alt="Hero background" className="w-full h-auto object-cover" />

With Next.js Image Optimization

// next.config.js module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'image.pollinations.ai', }, ], }, };

// components/OptimizedGeneratedImage.tsx import Image from 'next/image';

export function OptimizedGeneratedImage({ prompt, width, height, alt }) { const url = https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=${width}&height=${height}&model=flux&nologo=true;

return ( <Image src={url} alt={alt} width={width} height={height} priority={false} /> ); }

HTML Direct Embed

<!-- Hero Image --> <img src="https://image.pollinations.ai/prompt/futuristic%20city%20skyline%20at%20sunset%2C%20cyberpunk%2C%20neon%20lights%2C%20cinematic%2C%208k?width=1920&#x26;height=1080&#x26;model=flux&#x26;nologo=true" alt="Hero background" loading="lazy" />

<!-- Product Mockup --> <img src="https://image.pollinations.ai/prompt/smartphone%20mockup%20on%20marble%20desk%2C%20minimal%2C%20studio%20lighting%2C%20product%20photography?width=800&#x26;height=600&#x26;model=flux-3d&#x26;nologo=true" alt="Product mockup" />

Markdown (for Documentation)

Batch Generation Script (Node.js)

import fs from 'fs'; import https from 'https';

async function generateImage(prompt: string, filename: string, options = {}) { const { width = 1024, height = 1024, model = 'flux' } = options; const url = https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=${width}&height=${height}&model=${model}&nologo=true;

return new Promise((resolve, reject) => { https.get(url, (response) => { const file = fs.createWriteStream(filename); response.pipe(file); file.on('finish', () => { file.close(); resolve(filename); }); }).on('error', reject); }); }

// Generate multiple images const assets = [ { prompt: 'hero background, abstract waves, blue gradient', file: 'hero.png', width: 1920, height: 1080 }, { prompt: 'user avatar placeholder, geometric face', file: 'avatar.png', width: 200, height: 200 }, { prompt: 'empty state illustration, no results found', file: 'empty.png', width: 400, height: 300 }, ];

for (const asset of assets) { await generateImage(asset.prompt, asset.file, { width: asset.width, height: asset.height }); console.log(Generated: ${asset.file}); }

Use Case Recipes

1. Landing Page Hero

https://image.pollinations.ai/prompt/modern%20SaaS%20dashboard%20floating%20in%20space%2C%20dark%20theme%2C%20glowing%20UI%20elements%2C%20professional%203D%20render%2C%20cinematic%20lighting%2C%208k%20uhd?width=1920&#x26;height=1080&#x26;model=flux&#x26;nologo=true

2. Team Member Avatars

https://image.pollinations.ai/prompt/professional%20headshot%2C%20friendly%20smile%2C%20neutral%20gray%20background%2C%20studio%20lighting%2C%20business%20casual?width=400&#x26;height=400&#x26;model=flux-realism&#x26;nologo=true

3. App Empty State

https://image.pollinations.ai/prompt/cute%20illustration%20of%20empty%20box%2C%20minimal%20flat%20design%2C%20soft%20pastel%20colors%2C%20friendly%2C%20vector%20style?width=400&#x26;height=300&#x26;model=flux-anime&#x26;nologo=true

4. Product Mockup

https://image.pollinations.ai/prompt/iPhone%2015%20mockup%20on%20wooden%20desk%2C%20coffee%20cup%2C%20minimal%2C%20lifestyle%20photography%2C%20warm%20lighting%2C%20professional?width=1200&#x26;height=800&#x26;model=flux-3d&#x26;nologo=true

5. Blog Featured Image

https://image.pollinations.ai/prompt/abstract%20visualization%20of%20artificial%20intelligence%2C%20neural%20networks%2C%20blue%20and%20purple%2C%20futuristic%2C%20clean?width=1200&#x26;height=630&#x26;model=flux&#x26;nologo=true

6. App Icon

https://image.pollinations.ai/prompt/minimalist%20app%20icon%2C%20letter%20A%2C%20gradient%20blue%20to%20purple%2C%20rounded%20corners%2C%20flat%20design%2C%20iOS%20style?width=512&#x26;height=512&#x26;model=flux&#x26;nologo=true

7. Background Pattern

https://image.pollinations.ai/prompt/seamless%20geometric%20pattern%2C%20subtle%20gray%20on%20white%2C%20minimalist%2C%20tileable%2C%20modern?width=512&#x26;height=512&#x26;model=flux&#x26;nologo=true

8. Feature Illustration

https://image.pollinations.ai/prompt/isometric%20illustration%20of%20cloud%20computing%2C%20servers%2C%20data%20flow%2C%20blue%20and%20white%2C%20clean%20vector%20style?width=800&#x26;height=600&#x26;model=flux&#x26;nologo=true

Best Practices

DO

• Use descriptive prompts - More detail = better results

• Include quality modifiers - "8k, professional, detailed"

• Specify the style - "photograph", "illustration", "3D render"

• Define lighting - "studio lighting", "natural light", "cinematic"

• Set appropriate dimensions - Match your actual use case

• Use seeds for consistency - Same seed = reproducible results

• Cache generated images - Save to CDN for production

DON'T

• Don't use generic prompts - "a picture of something"

• Don't request copyrighted content - No brand logos, celebrities

• Don't use in loops without throttling - Rate limits apply

• Don't skip the nologo=true param - Avoids watermarks

• Don't generate same image repeatedly - Use seed + cache

Rate Limits & Caching Strategy

Pollinations Rate Limits

Tier Limit Signup

Anonymous 1 req/15s None

Seed (free) 1 req/5s Free registration

Flower 1 req/3s Paid

Production Caching Strategy

// Cache generated images to your CDN async function getOrGenerateImage(prompt: string, options: ImageOptions) { const cacheKey = createHash('md5') .update(prompt + JSON.stringify(options)) .digest('hex');

// Check CDN cache first const cached = await cdn.get(images/${cacheKey}.png); if (cached) return cached.url;

// Generate and cache const imageUrl = buildPollinationsUrl(prompt, options); const imageBuffer = await fetch(imageUrl).then(r => r.buffer()); const cdnUrl = await cdn.upload(images/${cacheKey}.png, imageBuffer);

return cdnUrl; }

Troubleshooting

Issue Solution

Slow generation Use turbo model for faster results

Poor quality Add quality modifiers, use flux or flux-realism

Wrong style Specify style explicitly: "photograph", "illustration"

Watermark appears Add nologo=true parameter

Inconsistent results Use same seed parameter

Rate limited Wait 15s between requests or register for higher limits

Image not loading URL-encode the prompt properly

Integration with Frontend Design

When building websites/apps, this skill works seamlessly with frontend development:

• During Development: Use Pollinations URLs directly as placeholders

• Before Production: Generate final images and save to your CDN

• For Dynamic Content: Use the API with proper caching

// Development: Direct URL (fast iteration) <img src="https://image.pollinations.ai/prompt/..." />

// Production: Cached on your CDN <img src="https://your-cdn.com/images/hero-cached.png" />

Activation Keywords

This skill activates automatically when you mention:

• "generate an image", "create a picture", "make an illustration"

• "hero image for", "banner for", "background for"

• "mockup of", "product shot", "app icon"

• "placeholder image", "avatar", "thumbnail"

• "illustration of", "graphic of", "visual for"

• Any image asset request during web/app development

Documentation Site Assets (SpecWeave Brand)

When generating images for SpecWeave documentation sites, use these brand guidelines:

Brand Colors for Prompts

Color Hex Usage

Primary Purple #7c3aed Main brand color, gradients

Purple Dark #6d28d9 Accents, shadows

Purple Light #a78bfa Highlights, glows

Purple Darkest #5b21b6 Deep backgrounds

Include in prompts: purple violet gradient #7c3aed , professional SaaS aesthetic

Standard Docs Dimensions

Asset Type Width Height Model Usage

Hero Banner 1920 1080 flux Homepage hero, landing pages

Feature Card 800 600 flux Feature illustrations

Section Header 1200 400 flux Section banners

Icon 64 64 flux Navigation, feature icons

Empty State 400 300 flux-anime Empty states, placeholders

Social Card 1200 630 flux OG images, social sharing

Docs-Specific Prompt Templates

Asset Type Prompt Pattern

Hero [concept] in abstract form, purple gradient #7c3aed to #a78bfa, professional SaaS, glowing nodes, dark background, 8k, clean minimal

Feature Illustration isometric illustration of [feature], purple accent #7c3aed, white background, clean vector style, professional

Section Banner abstract [theme] visualization, flowing lines, purple gradient #7c3aed, minimal, professional, wide format

Icon minimal icon [concept], purple fill #7c3aed, white background, app icon style, centered, simple

Living Docs interconnected documents with glowing purple connections #7c3aed, network visualization, professional, clean

Agent System AI agents as geometric shapes in orbital formation, purple violet theme #7c3aed, futuristic, professional

Workflow branching flowchart paths, glowing circuit lines, purple gradient #7c3aed, decision tree visualization, minimal

SpecWeave Docs Ready-to-Use URLs

Living Documentation Illustration:

https://image.pollinations.ai/prompt/interconnected%20hexagonal%20document%20nodes%20forming%20network%2C%20glowing%20purple%20connections%20%237c3aed%2C%20gradient%20to%20%23a78bfa%2C%20professional%20SaaS%2C%20dark%20background%2C%208k%2C%20minimal%20vector?width=800&#x26;height=600&#x26;model=flux&#x26;nologo=true&#x26;seed=42

Multi-Agent System Illustration:

https://image.pollinations.ai/prompt/interconnected%20AI%20agents%20as%20geometric%20avatars%20in%20orbital%20formation%2C%20purple%20violet%20theme%20%237c3aed%2C%20futuristic%20holographic%2C%20professional%2C%20clean%20dark%20background%2C%208k?width=800&#x26;height=600&#x26;model=flux&#x26;nologo=true&#x26;seed=42

Workflow/Decision Tree Illustration:

https://image.pollinations.ai/prompt/branching%20flowchart%20paths%20made%20of%20glowing%20circuit%20lines%2C%20purple%20gradient%20%237c3aed%20to%20%23a78bfa%2C%20decision%20trees%2C%20minimal%20geometric%2C%20professional%2C%20dark%20background?width=800&#x26;height=600&#x26;model=flux&#x26;nologo=true&#x26;seed=42

Related Skills

• frontend-design: For UI/UX design patterns

• browser-automation: For screenshot capture

• docusaurus: For documentation site setup

• technical-writing: For documentation content

Project-Specific Learnings

Before starting work, check for project-specific learnings:

Check if skill memory exists for this skill

cat .specweave/skill-memories/image-generation.md 2>/dev/null || echo "No project learnings yet"

Project learnings are automatically captured by the reflection system when corrections or patterns are identified during development. These learnings help you understand project-specific conventions and past decisions.