Template Gallery

Explore ready-to-use templates organized by use case. Each template can be opened in Studio, customized for your needs, or used directly via Claude Code.

17 Templates

4 Categories

17 Claude Code Ready

🤖

AI Workflows

AI-powered image generation with DALL-E and other models

Open in Studio

AI Product Photography

openai

Generate professional product images with AI-controlled lighting and backgrounds

Claude Code

Open in Studio

            const image = await floimg.generate({
  generator: 'openai',
  params: {
    prompt: 'Professional product photo of headphones on white background',
    size: '1024x1024'
  }
});

Open in Studio

AI Hero Image

openai

Create stunning hero images for websites and landing pages

Claude Code

Open in Studio

            const image = await floimg.generate({
  generator: 'openai',
  params: {
    prompt: 'Futuristic city skyline at sunset, cinematic lighting',
    size: '1792x1024'
  }
});

Open in Studio

AI Mascot Generator

openai

Design unique mascots and characters for your brand

Claude Code

Open in Studio

📊

Data Viz

Charts, graphs, diagrams, and data visualization

Open in Studio

Revenue Dashboard

quickchart

Quarterly revenue visualization with gradient bars

Claude Code

Open in Studio

            const chart = await floimg.generate({
  generator: 'quickchart',
  params: {
    type: 'bar',
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [{
        label: 'Revenue ($M)',
        data: [12, 19, 8, 15]
      }]
    }
  }
});

Open in Studio

Framework Usage Stats

quickchart

Compare framework popularity with horizontal bar chart

Claude Code

Open in Studio

User Growth Chart

quickchart

Track monthly user growth with line chart

Claude Code

Open in Studio

Traffic by Device

quickchart

Doughnut chart showing traffic sources by device type

Claude Code

Open in Studio

📐

Preview coming soon

Open in Studio

API Request Flow

mermaid

Sequence diagram showing API authentication flow

Claude Code

Open in Studio

📐

Preview coming soon

Open in Studio

System Architecture

mermaid

Microservices architecture diagram

Claude Code

Open in Studio

🎨

Marketing

Social media assets, branding, and promotional images

Open in Studio

Social Media Kit

pipeline

Generate optimized images for all social platforms from one source

Claude Code Pipeline

Open in Studio

            // One source → all platforms
const socialKit = await floimg.pipeline(heroImage, [
  { op: 'resize', params: { width: 1200, height: 630 }, save: 'og-image.png' },
  { op: 'resize', params: { width: 800, height: 418 }, save: 'twitter-card.png' },
  { op: 'resize', params: { width: 1080, height: 1080 }, save: 'instagram.png' },
]);

Open in Studio

Avatar Processing

pipeline

Generate consistent avatar sizes with circular crop and optimization

Claude Code Pipeline

Open in Studio

            const avatars = await floimg.pipeline(photo, [
  { op: 'crop', params: { shape: 'circle' } },
  { op: 'resize', params: { width: 256 }, save: 'avatar-256.png' },
  { op: 'resize', params: { width: 128 }, save: 'avatar-128.png' },
  { op: 'resize', params: { width: 64 }, save: 'avatar-64.png' },
]);

Open in Studio

Branded Watermark

pipeline

Add your logo watermark to images automatically

Claude Code Pipeline

Open in Studio

Image Filters

pipeline

Apply artistic filters: vintage, dramatic, vibrant, and more

Claude Code Pipeline

Open in Studio

🔧

Utilities

QR codes, thumbnails, format conversion, and more

Open in Studio

Branded QR Code

QR code with custom colors and styling to match your brand

Claude Code

Open in Studio

            const qr = await floimg.generate({
  generator: 'qr',
  params: {
    data: 'https://floimg.com',
    color: '#0d9488',
    backgroundColor: '#ffffff',
    margin: 2
  }
});