---
name: Art Director
slug: art-director
category: AI Engineering
description: Art Director directs image generation models with structured prompts for banners, diagrams, logos, screenshots, and social visuals. Use it when Claude needs to plan artwork and send a prompt to Gemini, DALL-E, Flux, or Stable Diffusion.
github: "https://github.com/vibeeval/vibecosystem/tree/main/skills/art-director"
language: "C#"
stars: 528
forks: 44
install: "npx degit https://github.com/vibeeval/vibecosystem/tree/main/skills/art-director ~/.claude/skills/art-director"
installs_to: ~/.claude/skills/art-director
source_path: skills/art-director/SKILL.md
collection_size: 25
category_size: 2451
collection_url: "https://dirskills.com/collections/vibeeval/vibecosystem"
added: 2026-08-26T05:11:59.061Z
last_synced: 2026-08-26T05:11:59.061Z
canonical_url: "https://dirskills.com/skills/art-director"
---

# Art Director

Art Director directs image generation models with structured prompts for banners, diagrams, logos, screenshots, and social visuals. Use it when Claude needs to plan artwork and send a prompt to Gemini, DALL-E, Flux, or Stable Diffusion.

**Install:**

```bash
npx degit https://github.com/vibeeval/vibecosystem/tree/main/skills/art-director ~/.claude/skills/art-director
```

## README

# Art Director

Claude can't generate images directly, but it can **direct** image generation models with expert-level prompts. This skill turns Claude into a creative director.

## Supported Backends

| Backend | Via | Best For |
|---------|-----|----------|
| Gemini 3.1 Flash Image | AI Gateway | General purpose, fast, cheap |
| DALL-E 3 | OpenAI API | Photorealistic, detailed |
| Flux 2 | Replicate/fal.ai | Artistic, stylized |
| Stable Diffusion | Local/API | Full control, custom models |

## The 5-Component Prompt Formula

Every image prompt follows this structure:

```
[SUBJECT] + [STYLE] + [COMPOSITION] + [LIGHTING] + [TECHNICAL]
```

### 1. Subject (What)
```
"A minimalist developer dashboard showing code metrics"
"An isometric illustration of microservices architecture"
"A cyberpunk cityscape representing a deployment pipeline"
```

### 2. Style (How it looks)
```
Styles: flat design, isometric, pixel art, watercolor,
        technical diagram, infographic, comic book,
        photorealistic, low-poly 3D, line art, blueprint
```

### 3. Composition (Layout)
```
"centered hero composition with negative space"
"rule of thirds with focal point bottom-left"
"symmetric grid layout with 4 quadrants"
"panoramic wide-angle view"
```

### 4. Lighting (Mood)
```
"soft diffused lighting, professional studio"
"dramatic rim lighting, dark background"
"warm golden hour, natural outdoor"
"neon glow, cyberpunk atmosphere"
"flat even lighting, clean minimal"
```

### 5. Technical (Specs)
```
"16:9 aspect ratio, 1920x1080, PNG"
"1:1 square, 1024x1024, social media optimized"
"4:3 presentation slide format"
"banner format 1200x630 for Open Graph"
```

## Use Cases

### 1. GitHub Repository Banners
```
Subject: "vibecosystem logo - interconnected nodes forming a brain,
          each node is a different color representing an agent type"
Style: "flat design, minimal, dark background (#0d1117)"
Composition: "centered, wide banner format"
Lighting: "subtle gradient glow on nodes"
Technical: "1280x640 PNG, GitHub social preview"
```

### 2. Architecture Diagrams
```
Subject: "microservices architecture with 5 services connected by message queue"
Style: "clean technical diagram, rounded rectangles, thin connecting lines"
Composition: "left-to-right flow, clear hierarchy"
Lighting: "flat, no shadows, white background"
Technical: "SVG-compatible, high contrast"
```

### 3. Social Media Posts
```
Subject: "before/after comparison of code quality metrics"
Style: "modern infographic, data visualization"
Composition: "split screen, left=before (red), right=after (green)"
Lighting: "clean, professional"
Technical: "1080x1080 Instagram square"
```

### 4. Presentation Slides
```
Subject: "key takeaway slide showing 3 pillars of the system"
Style: "corporate minimal, sans-serif typography"
Composition: "three equal columns with icons"
Lighting: "flat, light background"
Technical: "16:9, 1920x1080"
```

### 5. Error/Status Illustrations
```
Subject: "friendly 404 illustration - a confused robot looking at a map"
Style: "line art with single accent color (#3b82f6)"
Composition: "centered character with text space below"
Lighting: "flat"
Technical: "800x600 SVG"
```

## Prompt Database (Templates)

### Developer Themes
- `dev-dark`: Dark mode, neon accents, terminal aesthetic
- `dev-clean`: Light, minimal, Apple-inspired
- `dev-retro`: Pixel art, 8-bit, nostalgic
- `dev-cyber`: Cyberpunk, holographic, futuristic
- `dev-nature`: Organic, earthy, calm

### Color Palettes
- `github`: #0d1117, #238636, #f78166, #3fb950
- `vercel`: #000000, #ffffff, #666666
- `claude`: #d4a574, #1a1a2e, #f5f5dc
- `vibecosystem`: #6366f1, #0f172a, #22d3ee, #f43f5e

## Workflow

1. User describes what they need ("I need a banner for the repo")
2. Claude constructs a 5-component prompt
3. Prompt is sent to the chosen backend via MCP or API
4. Image is saved to project assets/
5. Path is returned for immediate use

## Integration

- **designer agent**: Uses art-director skill for visual decisions
- **frontend-dev**: Generates placeholder images during prototyping
- **copywriter**: Creates social media visuals with copy
- **doc-updater**: Generates diagrams for documentation
- **harvest**: Creates competitive analysis visuals

## Tips

- Always specify aspect ratio and dimensions
- Include "no text" if you don't want the model to attempt typography
- Use negative prompts: "no watermark, no stock photo look"
- For diagrams, prefer SVG-compatible styles over photorealistic
- Test with cheapest model first, upgrade only if quality insufficient