Claude Code Plugin

The floimg Claude Code plugin brings composable image workflows to your Claude Code terminal. Generate AI images, resize for social media, add captions, upload to S3—all through natural conversation.

Why FloImg?

The Probabilistic Editing Problem: AI image modification is probabilistic—DALL-E generates new images, inpainting runs diffusion. “Change the colors” might give you a completely different composition. FloImg applies deterministic transforms: adjust hue, resize, add caption—the image stays intact except for exactly what you asked.

The Tool Fragmentation Problem: People wrangle remove.bg, Photoshop, Figma, format converters, cloud services. Each requires learning, signing up, downloading files. FloImg consolidates into one pipeline.

Better Than Glue Code: FloImg isn’t just integration code—it’s accessible through natural language (Claude Code), visual builder (FloImg Studio), SDK, CLI, or MCP. Use whichever fits how you think.

Quick Start

Install the plugin:

npm install -g @teamflojo/floimg-claude

Then describe what you need:

"Create a hero image for my blog, resize to 1200x630, add a caption"
"Generate a product mockup with a subtle watermark"
/floimg:workflow AI hero → resize → caption → save to S3

FloImg handles any mix of creative (AI generation) and practical (resize, format, upload) operations in composable pipelines.

Architecture: CLI Simple, MCP Complex

The plugin uses a hybrid approach for the best experience:

Command Type	Method	Works Immediately?
Simple (`/floimg:qr`, `/floimg:chart`, `/floimg:diagram`, `/floimg:screenshot`)	CLI via npx	Yes
Complex (`/floimg:image`, `/floimg:workflow`)	MCP	After restart

Simple commands are one-shot operations. They work out of the box via CLI.

Complex commands benefit from MCP’s session state for iterative refinement (“make it bluer”), multi-step transforms, and referencing previous images by ID. Restart Claude Code once to enable MCP.

Features

Slash Commands

Six commands for common image tasks:

Command	What It Does	Method
`/floimg:qr`	Create QR codes	CLI
`/floimg:chart`	Data visualizations with QuickChart	CLI
`/floimg:diagram`	Mermaid diagrams (flowcharts, sequences)	CLI
`/floimg:screenshot`	Capture webpages	CLI
`/floimg:image`	Generate any image with transforms	MCP
`/floimg:workflow`	Multi-step pipelines	MCP

Image Architect Agent

A specialized agent for complex image tasks. It understands your requirements, selects optimal generators, and plans efficient workflows.

Auto-Discovery Skill

Claude automatically detects image-related tasks and uses floimg when you mention charts, diagrams, QR codes, screenshots, or image generation.

Usage Examples

AI Image Workflows (Primary Use Case)

Generate and transform images through natural conversation:

User: "Create a hero image for my tech blog"
Claude: [generates with DALL-E]

User: "Make it more vibrant"
Claude: [transforms the same image]

User: "Resize to 1200x630 and add our tagline"
Claude: [resizes, adds caption]

User: "Save to S3"
Claude: [uploads to s3://bucket/hero.png]

Session state enables referencing images by ID, not file paths.

Multi-Step Pipelines

Describe the full workflow:

/floimg:workflow Create a hero image, resize to 1200x630, add caption, save to S3

Simple Generators

Quick one-shot operations:

/floimg:qr https://floimg.com
/floimg:chart pie chart: Desktop 60%, Mobile 30%, Tablet 10%
/floimg:diagram user login flow: user -> form -> auth -> dashboard
/floimg:screenshot https://github.com

Configuration

Set environment variables for optional features:

# AI image generation (DALL-E)
export OPENAI_API_KEY=sk-...

# Cloud storage (S3, R2, Tigris)
export AWS_ACCESS_KEY_ID=...
export AWS_SECRET_ACCESS_KEY=...
export AWS_REGION=us-east-1

MCP Setup (For Complex Workflows)

MCP unlocks:

Multi-step transforms: generate → resize → caption → save
Iterative refinement: “make it bluer”, “add more contrast”
Session state: reference images by ID, not file paths

After installing the plugin, restart Claude Code once. The MCP server auto-configures.

Or manually add to your MCP config:

{
  "mcpServers": {
    "floimg": {
      "command": "npx",
      "args": ["-y", "@teamflojo/floimg", "mcp"]
    }
  }
}

Requirements

Node.js 18+
Claude Code 1.0+