---
name: art-director
description: "AI art direction system. Claude directs image generation models (Gemini, DALL-E, Flux) via structured prompts. Generate banners, diagrams, logos, screenshots, and social media visuals without leaving the terminal."
---

# 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


---
Source attribution: vibeeval
Original project: https://github.com/vibeeval/vibecosystem/blob/3b763b1fb288f57bfa3cce76ef18184b96461a78/skills/art-director/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 vibeeval

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: vibeeval
Original project: https://github.com/vibeeval/vibecosystem/blob/3b763b1fb288f57bfa3cce76ef18184b96461a78/skills/art-director/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Marketing
Roles: Content Marketer, Graphic Designer, Product Designer, Social Media Manager, UX Designer
Specialties: Design
Tools: DALL-E, Stable Diffusion
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 9c4e3e8aeae73b7bc6442ed019c0c2e326fcd234171c27eed08b0cb32532297f