Art Director Skill for Claude
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.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/vibeeval/vibecosystem --skill art-directorThe instruction itself
20 sections, as written by the authorArt 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 aestheticdev-clean: Light, minimal, Apple-inspireddev-retro: Pixel art, 8-bit, nostalgicdev-cyber: Cyberpunk, holographic, futuristicdev-nature: Organic, earthy, calm
Color Palettes
github: #0d1117, #238636, #f78166, #3fb950vercel: #000000, #ffffff, #666666claude: #d4a574, #1a1a2e, #f5f5dcvibecosystem: #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
Other skills for the same job
different authors, same section of the catalogue
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.
Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.
Lightweight WSI tile extraction and preprocessing. Use for basic slide processing tissue detection, tile extraction, stain normalization for H&E images. Best for simple pipelines, dataset preparation, quick tile-based analysis. For advanced spatial proteomics, multiplexed imaging, or deep learning pipelines use pathml.
Microscopy data management platform. Access images via Python, retrieve datasets, analyze pixels, manage ROIs/annotations, batch processing, for high-content screening and microscopy workflows.
Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.
This skill should be used when working with pre-trained transformer models for natural language processing, computer vision, audio, or multimodal tasks. Use for text generation, classification, question answering, translation, summarization, image classification, object detection, speech recognition, and fine-tuning models on custom datasets.
How to use it
Take vibeeval/art-director from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.