Art director

Skill vibeeval/vibecosystem/skills/art-director

AI software team for Claude Code - 138 agents, 295 skills, 73 hooks. Self-learning, multi-agent swarm, autonomous skill evolution.

Install

npx -y skills add vibeeval/vibecosystem --skill art-director

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.7 KB, as published. Nobody here has run it

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

User describes what they need ("I need a banner for the repo")
Claude constructs a 5-component prompt
Prompt is sent to the chosen backend via MCP or API
Image is saved to project assets/
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