---

name: image-generation description: AI image generation expert using Pollinations.ai - FREE, no API key required. Generates professional-quality images for websites, apps, marketing, mockups, icons, and illustrations. Activates for image, images, generate image, create image, make image, picture, pictures, illustration, illustrations, icon, icons, logo, logos, hero image, hero section image, banner, banners, background image, backgrounds, placeholder, placeholders, product image, product shot, mockup, mockups, avatar, avatars, thumbnail, thumbnails, splash screen, app icon, website image, landing page, UI image, design asset, visual asset, stock photo, photo, render, renders, artwork, graphic, graphics, visual, visually, imagery, Pollinations, Pollinations.ai, AI image, AI art, AI generated, text-to-image, image generation, image generator, FLUX, stable diffusion, midjourney alternative, DALL-E alternative, free image generation, generate visual, create visual, need image, need picture, need icon, need logo, need illustration, website design image, app design image, marketing image, social media image, blog image, featured image, OG image, cover image, profile picture, user avatar, empty state illustration, onboarding image, feature graphic. allowed-tools:

• Read
• Write
• WebFetch context: fork model: opus

---

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:

Copyhttps://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

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

Parameters

Available Models

Professional Prompt Engineering

Prompt Formula (CRITICAL for Quality)

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

Quality Modifiers (ALWAYS Include)

For highest quality output, append these to prompts:

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

For specific use cases:

Aspect Ratios for Common Use Cases

Code Examples

React/Next.js Integration

Copy// 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

Copy// 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

Copy<!-- 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&height=1080&model=flux&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&height=600&model=flux-3d&nologo=true"
  alt="Product mockup"
/>

Markdown (for Documentation)

Copy![Hero Image](https://image.pollinations.ai/prompt/abstract%20geometric%20pattern%2C%20gradient%20blue%20purple%2C%20modern%2C%20clean?width=1200&height=400&nologo=true)

Batch Generation Script (Node.js)

Copyimport 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

Copyhttps://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&height=1080&model=flux&nologo=true

2. Team Member Avatars

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

3. App Empty State

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

4. Product Mockup

Copyhttps://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&height=800&model=flux-3d&nologo=true

5. Blog Featured Image

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

6. App Icon

Copyhttps://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&height=512&model=flux&nologo=true

7. Background Pattern

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

8. Feature Illustration

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

Best Practices

DO

1. Use descriptive prompts - More detail = better results
2. Include quality modifiers - "8k, professional, detailed"
3. Specify the style - "photograph", "illustration", "3D render"
4. Define lighting - "studio lighting", "natural light", "cinematic"
5. Set appropriate dimensions - Match your actual use case
6. Use seeds for consistency - Same seed = reproducible results
7. Cache generated images - Save to CDN for production

DON'T

1. Don't use generic prompts - "a picture of something"
2. Don't request copyrighted content - No brand logos, celebrities
3. Don't use in loops without throttling - Rate limits apply
4. Don't skip the nologo=true param - Avoids watermarks
5. Don't generate same image repeatedly - Use seed + cache

Rate Limits & Caching Strategy

Pollinations Rate Limits

Production Caching Strategy

Copy// 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

Integration with Frontend Design

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

1. During Development: Use Pollinations URLs directly as placeholders
2. Before Production: Generate final images and save to your CDN
3. For Dynamic Content: Use the API with proper caching

Copy// 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)

Brand Colors for Prompts

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

Enterprise Styling (Public vs Internal)

Public docs prompt suffix:

Copyprofessional SaaS aesthetic, premium quality, polished, aspirational,
dark gradient background, subtle glow, dramatic lighting,
8k uhd, high resolution, sharp focus, highly detailed

Internal docs prompt suffix:

Copyclean technical illustration, functional, clear, informative,
clean white background, minimal, soft even lighting,
sharp lines, clean vector style, high clarity

Standard Docs Dimensions

Docs-Specific Prompt Templates

Docusaurus Integration

SpecWeave docs-site includes FREE image generation scripts:

Copy# Generate hero images (FREE - Pollinations.ai)
cd docs-site
npm run generate:hero-images-free

# Generated images saved to:
# static/img/hero/greenfield.jpg
# static/img/hero/brownfield.jpg
# static/img/hero/compliance.jpg

Ready-to-Use URLs for SpecWeave Docs

Copy<!-- Living Docs Illustration -->
![Living Docs](https://image.pollinations.ai/prompt/purple%20geometric%20hexagonal%20nodes%20forming%20document%20network%2C%20glowing%20connections%2C%20gradient%207c3aed%20to%20a78bfa%2C%20minimal%20vector%20style%2C%20professional%20SaaS%2C%20dark%20background%2C%208k?width=1200&height=675&model=flux&nologo=true)

<!-- Agent System Illustration -->
![Agents](https://image.pollinations.ai/prompt/interconnected%20AI%20agents%20as%20geometric%20avatars%20in%20orbital%20formation%2C%20purple%20violet%20theme%207c3aed%2C%20futuristic%20holographic%20style%2C%20professional%2C%20clean?width=1200&height=675&model=flux&nologo=true)

<!-- Workflow Illustration -->
![Workflow](https://image.pollinations.ai/prompt/branching%20flowchart%20paths%20made%20of%20glowing%20circuit%20lines%2C%20purple%20gradient%207c3aed%2C%20decision%20trees%2C%20minimal%20geometric%2C%20professional?width=1200&height=675&model=flux&nologo=true)

Related Skills

• frontend-design: For UI/UX design patterns
• browser-automation: For screenshot capture
• visual-regression: For image comparison testing
• docs-writer: For documentation content generation
• living-docs-navigator: For navigating project documentation