art-director

Name: art-director
Author: vibeeval

519stars44forks

How to install art-director?

vibeeval/vibecosystem/art-director

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Art Director
2
3	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.
4
5	## Supported Backends
6
7	\| Backend \| Via \| Best For \|
8	\|---------\|-----\|----------\|
9	\| Gemini 3.1 Flash Image \| AI Gateway \| General purpose, fast, cheap \|
10	\| DALL-E 3 \| OpenAI API \| Photorealistic, detailed \|
11	\| Flux 2 \| Replicate/fal.ai \| Artistic, stylized \|
12	\| Stable Diffusion \| Local/API \| Full control, custom models \|
13
14	## The 5-Component Prompt Formula
15
16	Every image prompt follows this structure:
17
18	```
19	[SUBJECT] + [STYLE] + [COMPOSITION] + [LIGHTING] + [TECHNICAL]
20	```
21
22	### 1. Subject (What)
23	```
24	"A minimalist developer dashboard showing code metrics"
25	"An isometric illustration of microservices architecture"
26	"A cyberpunk cityscape representing a deployment pipeline"
27	```
28
29	### 2. Style (How it looks)
30	```
31	Styles: flat design, isometric, pixel art, watercolor,
32	technical diagram, infographic, comic book,
33	photorealistic, low-poly 3D, line art, blueprint
34	```
35
36	### 3. Composition (Layout)
37	```
38	"centered hero composition with negative space"
39	"rule of thirds with focal point bottom-left"
40	"symmetric grid layout with 4 quadrants"
41	"panoramic wide-angle view"
42	```
43
44	### 4. Lighting (Mood)
45	```
46	"soft diffused lighting, professional studio"
47	"dramatic rim lighting, dark background"
48	"warm golden hour, natural outdoor"
49	"neon glow, cyberpunk atmosphere"
50	"flat even lighting, clean minimal"
51	```
52
53	### 5. Technical (Specs)
54	```
55	"16:9 aspect ratio, 1920x1080, PNG"
56	"1:1 square, 1024x1024, social media optimized"
57	"4:3 presentation slide format"
58	"banner format 1200x630 for Open Graph"
59	```
60
61	## Use Cases
62
63	### 1. GitHub Repository Banners
64	```
65	Subject: "vibecosystem logo - interconnected nodes forming a brain,
66	each node is a different color representing an agent type"
67	Style: "flat design, minimal, dark background (#0d1117)"
68	Composition: "centered, wide banner format"
69	Lighting: "subtle gradient glow on nodes"
70	Technical: "1280x640 PNG, GitHub social preview"
71	```
72
73	### 2. Architecture Diagrams
74	```
75	Subject: "microservices architecture with 5 services connected by message queue"
76	Style: "clean technical diagram, rounded rectangles, thin connecting lines"
77	Composition: "left-to-right flow, clear hierarchy"
78	Lighting: "flat, no shadows, white background"
79	Technical: "SVG-compatible, high contrast"
80	```
81
82	### 3. Social Media Posts
83	```
84	Subject: "before/after comparison of code quality metrics"
85	Style: "modern infographic, data visualization"
86	Composition: "split screen, left=before (red), right=after (green)"
87	Lighting: "clean, professional"
88	Technical: "1080x1080 Instagram square"
89	```
90
91	### 4. Presentation Slides
92	```
93	Subject: "key takeaway slide showing 3 pillars of the system"
94	Style: "corporate minimal, sans-serif typography"
95	Composition: "three equal columns with icons"
96	Lighting: "flat, light background"
97	Technical: "16:9, 1920x1080"
98	```
99
100	### 5. Error/Status Illustrations
101	```
102	Subject: "friendly 404 illustration - a confused robot looking at a map"
103	Style: "line art with single accent color (#3b82f6)"
104	Composition: "centered character with text space below"
105	Lighting: "flat"
106	Technical: "800x600 SVG"
107	```
108
109	## Prompt Database (Templates)
110
111	### Developer Themes
112	- `dev-dark`: Dark mode, neon accents, terminal aesthetic
113	- `dev-clean`: Light, minimal, Apple-inspired
114	- `dev-retro`: Pixel art, 8-bit, nostalgic
115	- `dev-cyber`: Cyberpunk, holographic, futuristic
116	- `dev-nature`: Organic, earthy, calm
117
118	### Color Palettes
119	- `github`: #0d1117, #238636, #f78166, #3fb950
120	- `vercel`: #000000, #ffffff, #666666
121	- `claude`: #d4a574, #1a1a2e, #f5f5dc
122	- `vibecosystem`: #6366f1, #0f172a, #22d3ee, #f43f5e
123
124	## Workflow
125
126	1. User describes what they need ("I need a banner for the repo")
127	2. Claude constructs a 5-component prompt
128	3. Prompt is sent to the chosen backend via MCP or API
129	4. Image is saved to project assets/
130	5. Path is returned for immediate use
131
132	## Integration
133
134	- designer agent: Uses art-director skill for visual decisions
135	- frontend-dev: Generates placeholder images during prototyping
136	- copywriter: Creates social media visuals with copy
137	- doc-updater: Generates diagrams for documentation
138	- harvest: Creates competitive analysis visuals
139
140	## Tips
141
142	- Always specify aspect ratio and dimensions
143	- Include "no text" if you don't want the model to attempt typography
144	- Use negative prompts: "no watermark, no stock photo look"
145	- For diagrams, prefer SVG-compatible styles over photorealistic
146	- Test with cheapest model first, upgrade only if quality insufficient

People who liked this also viewed

6 picks

Type

art-director

519stars44forks

View on GitHub

How to install art-director?

vibeeval/vibecosystem/art-director

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Art Director
2
3	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.
4
5	## Supported Backends
6
7	\| Backend \| Via \| Best For \|
8	\|---------\|-----\|----------\|
9	\| Gemini 3.1 Flash Image \| AI Gateway \| General purpose, fast, cheap \|
10	\| DALL-E 3 \| OpenAI API \| Photorealistic, detailed \|
11	\| Flux 2 \| Replicate/fal.ai \| Artistic, stylized \|
12	\| Stable Diffusion \| Local/API \| Full control, custom models \|
13
14	## The 5-Component Prompt Formula
15
16	Every image prompt follows this structure:
17
18	```
19	[SUBJECT] + [STYLE] + [COMPOSITION] + [LIGHTING] + [TECHNICAL]
20	```
21
22	### 1. Subject (What)
23	```
24	"A minimalist developer dashboard showing code metrics"
25	"An isometric illustration of microservices architecture"
26	"A cyberpunk cityscape representing a deployment pipeline"
27	```
28
29	### 2. Style (How it looks)
30	```
31	Styles: flat design, isometric, pixel art, watercolor,
32	technical diagram, infographic, comic book,
33	photorealistic, low-poly 3D, line art, blueprint
34	```
35
36	### 3. Composition (Layout)
37	```
38	"centered hero composition with negative space"
39	"rule of thirds with focal point bottom-left"
40	"symmetric grid layout with 4 quadrants"
41	"panoramic wide-angle view"
42	```
43
44	### 4. Lighting (Mood)
45	```
46	"soft diffused lighting, professional studio"
47	"dramatic rim lighting, dark background"
48	"warm golden hour, natural outdoor"
49	"neon glow, cyberpunk atmosphere"
50	"flat even lighting, clean minimal"
51	```
52
53	### 5. Technical (Specs)
54	```
55	"16:9 aspect ratio, 1920x1080, PNG"
56	"1:1 square, 1024x1024, social media optimized"
57	"4:3 presentation slide format"
58	"banner format 1200x630 for Open Graph"
59	```
60
61	## Use Cases
62
63	### 1. GitHub Repository Banners
64	```
65	Subject: "vibecosystem logo - interconnected nodes forming a brain,
66	each node is a different color representing an agent type"
67	Style: "flat design, minimal, dark background (#0d1117)"
68	Composition: "centered, wide banner format"
69	Lighting: "subtle gradient glow on nodes"
70	Technical: "1280x640 PNG, GitHub social preview"
71	```
72
73	### 2. Architecture Diagrams
74	```
75	Subject: "microservices architecture with 5 services connected by message queue"
76	Style: "clean technical diagram, rounded rectangles, thin connecting lines"
77	Composition: "left-to-right flow, clear hierarchy"
78	Lighting: "flat, no shadows, white background"
79	Technical: "SVG-compatible, high contrast"
80	```
81
82	### 3. Social Media Posts
83	```
84	Subject: "before/after comparison of code quality metrics"
85	Style: "modern infographic, data visualization"
86	Composition: "split screen, left=before (red), right=after (green)"
87	Lighting: "clean, professional"
88	Technical: "1080x1080 Instagram square"
89	```
90
91	### 4. Presentation Slides
92	```
93	Subject: "key takeaway slide showing 3 pillars of the system"
94	Style: "corporate minimal, sans-serif typography"
95	Composition: "three equal columns with icons"
96	Lighting: "flat, light background"
97	Technical: "16:9, 1920x1080"
98	```
99
100	### 5. Error/Status Illustrations
101	```
102	Subject: "friendly 404 illustration - a confused robot looking at a map"
103	Style: "line art with single accent color (#3b82f6)"
104	Composition: "centered character with text space below"
105	Lighting: "flat"
106	Technical: "800x600 SVG"
107	```
108
109	## Prompt Database (Templates)
110
111	### Developer Themes
112	- `dev-dark`: Dark mode, neon accents, terminal aesthetic
113	- `dev-clean`: Light, minimal, Apple-inspired
114	- `dev-retro`: Pixel art, 8-bit, nostalgic
115	- `dev-cyber`: Cyberpunk, holographic, futuristic
116	- `dev-nature`: Organic, earthy, calm
117
118	### Color Palettes
119	- `github`: #0d1117, #238636, #f78166, #3fb950
120	- `vercel`: #000000, #ffffff, #666666
121	- `claude`: #d4a574, #1a1a2e, #f5f5dc
122	- `vibecosystem`: #6366f1, #0f172a, #22d3ee, #f43f5e
123
124	## Workflow
125
126	1. User describes what they need ("I need a banner for the repo")
127	2. Claude constructs a 5-component prompt
128	3. Prompt is sent to the chosen backend via MCP or API
129	4. Image is saved to project assets/
130	5. Path is returned for immediate use
131
132	## Integration
133
134	- designer agent: Uses art-director skill for visual decisions
135	- frontend-dev: Generates placeholder images during prototyping
136	- copywriter: Creates social media visuals with copy
137	- doc-updater: Generates diagrams for documentation
138	- harvest: Creates competitive analysis visuals
139
140	## Tips
141
142	- Always specify aspect ratio and dimensions
143	- Include "no text" if you don't want the model to attempt typography
144	- Use negative prompts: "no watermark, no stock photo look"
145	- For diagrams, prefer SVG-compatible styles over photorealistic
146	- Test with cheapest model first, upgrade only if quality insufficient

People who liked this also viewed

6 picks

Type