Visual design

Image generation and presentations.

Image generation

Create and edit images from the command line using nanobanana CLI via OpenRouter.

# Install nanobanana CLI
npm install -g @factory/nanobanana

# Configure to use OpenRouter
export NANOBANANA_PROVIDER=openrouter
export OPENROUTER_API_KEY="your-key"

# Generate images
nanobanana generate "company logo" --count=4 --styles=modern,minimal
nanobanana edit photo.png "remove background"
nanobanana icon "settings gear" --style=flat
nanobanana diagram "auth flow" --type=flowchart

Handles: logos, icons, diagrams, patterns, photo restoration, UI assets, visual sequences.

Alternative: Direct OpenRouter API

You can also use OpenRouter directly without the CLI:

import { createOpenRouter } from "@openrouter/ai-sdk-provider";
import { generateText } from "ai";

const openrouter = createOpenRouter({ apiKey: process.env.OPENROUTER_API_KEY });
const MODEL = "google/gemini-2.5-flash-image"; // Nano Banana 2

const { files } = await generateText({
  model: openrouter.chat(MODEL),
  messages: [{ role: "user", content: "Generate a sunset over mountains" }],
  providerOptions: { openrouter: { modalities: ["image", "text"] } },
});

// files[0].base64 contains the image

See: image-generation.md

Helper Scripts

This skill includes TypeScript helper scripts for direct OpenRouter integration:

# Generate images
npx tsx scripts/generate-image.ts "sunset over mountains" --output sunset.png

# Edit images
npx tsx scripts/edit-image.ts photo.png "remove background" --output transparent.png

# Morph multiple images (virtual try-on, style transfer)
npx tsx scripts/morph-images.ts person.png jacket.png "put this jacket on the person"

Scripts are located in ~/.factory/skills/visual-design/scripts/

Presentations

Create slides using Slidev, a markdown-based presentation tool.

npm init slidev@latest
slidev                    # dev server
slidev export --format pptx   # export to PowerPoint
slidev build              # build as hostable SPA

Write slides in markdown, get code highlighting, animations, diagrams, and Vue components.

See: presentations.md and reference-slide-example.md