banner-design

Name: banner-design
Author: nguyenphp

39stars12forks

How to install banner-design?

nguyenphp/antigravity-marketing/banner-design

$npx -y skills add nguyenphp/antigravity-marketing --skill banner-design

Installs into the current project.

Summary

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print.

Files · 1

View on GitHub

SKILL.md

1	# Banner Design - Multi-Format Creative Banner System
2
3	Design banners across social, ads, web, and print formats. Generates multiple art direction options per request with AI-powered visual elements. This skill handles banner design only. Does NOT handle video editing, full website design, or print production.
4
5	## When to Activate
6
7	- User requests banner, cover, or header design
8	- Social media cover/header creation
9	- Ad banner or display ad design
10	- Website hero section visual design
11	- Event/print banner design
12	- Creative asset generation for campaigns
13
14	## Workflow
15
16	### Step 1: Gather Requirements (AskUserQuestion)
17
18	Collect via AskUserQuestion:
19	1. Purpose — social cover, ad banner, website hero, print, or creative asset?
20	2. Platform/size — which platform or custom dimensions?
21	3. Content — headline, subtext, CTA, logo placement?
22	4. Brand — existing brand guidelines? (check `docs/brand-guidelines.md`)
23	5. Style preference — any art direction? (show style options if unsure)
24	6. Quantity — how many options to generate? (default: 3)
25
26	### Step 2: Research & Art Direction
27
28	1. Activate `ui-ux-pro-max` skill for design intelligence
29	2. Use Chrome browser to research Pinterest for design references:
30	```
31	Navigate to pinterest.com → search "[purpose] banner design [style]"
32	Screenshot 3-5 reference pins for art direction inspiration
33	```
34	3. Select 2-3 complementary art direction styles from references:
35	`references/banner-sizes-and-styles.md`
36
37	### Step 3: Design & Generate Options
38
39	For each art direction option:
40
41	1. Create HTML/CSS banner using `frontend-design` skill
42	- Use exact platform dimensions from size reference
43	- Apply safe zone rules (critical content in central 70-80%)
44	- Max 2 typefaces, single CTA, 4.5:1 contrast ratio
45	- Inject brand context via `inject-brand-context.cjs`
46
47	2. Generate visual elements with `ai-artist` + `ai-multimodal` skills
48
49	a) Search prompt inspiration (6000+ examples in ai-artist):
50	```bash
51	python3 .claude/skills/ai-artist/scripts/search.py "<banner style keywords>"
52	```
53
54	b) Generate with Standard model (fast, good for backgrounds/patterns):
55	```bash
56	.claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
57	--task generate --model gemini-2.5-flash-image \
58	--prompt "<banner visual prompt>" --aspect-ratio <platform-ratio> \
59	--size 2K --output assets/banners/
60	```
61
62	c) Generate with Pro model (4K, complex illustrations/hero visuals):
63	```bash
64	.claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
65	--task generate --model gemini-3-pro-image-preview \
66	--prompt "<creative banner prompt>" --aspect-ratio <platform-ratio> \
67	--size 4K --output assets/banners/
68	```
69
70	When to use which model:
71	\| Use Case \| Model \| Quality \|
72	\|----------\|-------\|---------\|
73	\| Backgrounds, gradients, patterns \| Standard (Flash) \| 2K, fast \|
74	\| Hero illustrations, product shots \| Pro \| 4K, detailed \|
75	\| Photorealistic scenes, complex art \| Pro \| 4K, best quality \|
76	\| Quick iterations, A/B variants \| Standard (Flash) \| 2K, fast \|
77
78	Aspect ratios: `1:1`, `16:9`, `9:16`, `3:4`, `4:3`, `2:3`, `3:2`
79	Match to platform - e.g., Twitter header = `3:1` (use `3:2` closest), Instagram story = `9:16`
80
81	Pro model prompt tips (see `ai-artist` references/nano-banana-pro-examples.md):
82	- Be descriptive: style, lighting, mood, composition, color palette
83	- Include art direction: "minimalist flat design", "cyberpunk neon", "editorial photography"
84	- Specify no-text: "no text, no letters, no words" (text overlaid in HTML step)
85
86	3. Compose final banner — overlay text, CTA, logo on generated visual in HTML/CSS
87
88	### Step 4: Export Banners to Images
89
90	After designing HTML banners, export each to PNG using `chrome-devtools` skill:
91
92	1. Serve HTML files via local server (python http.server or similar)
93	2. Screenshot each banner at exact platform dimensions:
94	```bash
95	# Export banner to PNG at exact dimensions
96	node .claude/skills/chrome-devtools/scripts/screenshot.js \
97	--url "http://localhost:8765/banner-01-minimalist.html" \
98	--width 1500 --height 500 \
99	--output "assets/banners/{campaign}/{variant}-{size}.png"
100	```
101	3. Auto-compress

People who liked this also viewed

6 picks

Type

banner-design

39stars12forks

View on GitHub

How to install banner-design?

nguyenphp/antigravity-marketing/banner-design

$npx -y skills add nguyenphp/antigravity-marketing --skill banner-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Banner Design - Multi-Format Creative Banner System
2
3	Design banners across social, ads, web, and print formats. Generates multiple art direction options per request with AI-powered visual elements. This skill handles banner design only. Does NOT handle video editing, full website design, or print production.
4
5	## When to Activate
6
7	- User requests banner, cover, or header design
8	- Social media cover/header creation
9	- Ad banner or display ad design
10	- Website hero section visual design
11	- Event/print banner design
12	- Creative asset generation for campaigns
13
14	## Workflow
15
16	### Step 1: Gather Requirements (AskUserQuestion)
17
18	Collect via AskUserQuestion:
19	1. Purpose — social cover, ad banner, website hero, print, or creative asset?
20	2. Platform/size — which platform or custom dimensions?
21	3. Content — headline, subtext, CTA, logo placement?
22	4. Brand — existing brand guidelines? (check `docs/brand-guidelines.md`)
23	5. Style preference — any art direction? (show style options if unsure)
24	6. Quantity — how many options to generate? (default: 3)
25
26	### Step 2: Research & Art Direction
27
28	1. Activate `ui-ux-pro-max` skill for design intelligence
29	2. Use Chrome browser to research Pinterest for design references:
30	```
31	Navigate to pinterest.com → search "[purpose] banner design [style]"
32	Screenshot 3-5 reference pins for art direction inspiration
33	```
34	3. Select 2-3 complementary art direction styles from references:
35	`references/banner-sizes-and-styles.md`
36
37	### Step 3: Design & Generate Options
38
39	For each art direction option:
40
41	1. Create HTML/CSS banner using `frontend-design` skill
42	- Use exact platform dimensions from size reference
43	- Apply safe zone rules (critical content in central 70-80%)
44	- Max 2 typefaces, single CTA, 4.5:1 contrast ratio
45	- Inject brand context via `inject-brand-context.cjs`
46
47	2. Generate visual elements with `ai-artist` + `ai-multimodal` skills
48
49	a) Search prompt inspiration (6000+ examples in ai-artist):
50	```bash
51	python3 .claude/skills/ai-artist/scripts/search.py "<banner style keywords>"
52	```
53
54	b) Generate with Standard model (fast, good for backgrounds/patterns):
55	```bash
56	.claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
57	--task generate --model gemini-2.5-flash-image \
58	--prompt "<banner visual prompt>" --aspect-ratio <platform-ratio> \
59	--size 2K --output assets/banners/
60	```
61
62	c) Generate with Pro model (4K, complex illustrations/hero visuals):
63	```bash
64	.claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
65	--task generate --model gemini-3-pro-image-preview \
66	--prompt "<creative banner prompt>" --aspect-ratio <platform-ratio> \
67	--size 4K --output assets/banners/
68	```
69
70	When to use which model:
71	\| Use Case \| Model \| Quality \|
72	\|----------\|-------\|---------\|
73	\| Backgrounds, gradients, patterns \| Standard (Flash) \| 2K, fast \|
74	\| Hero illustrations, product shots \| Pro \| 4K, detailed \|
75	\| Photorealistic scenes, complex art \| Pro \| 4K, best quality \|
76	\| Quick iterations, A/B variants \| Standard (Flash) \| 2K, fast \|
77
78	Aspect ratios: `1:1`, `16:9`, `9:16`, `3:4`, `4:3`, `2:3`, `3:2`
79	Match to platform - e.g., Twitter header = `3:1` (use `3:2` closest), Instagram story = `9:16`
80
81	Pro model prompt tips (see `ai-artist` references/nano-banana-pro-examples.md):
82	- Be descriptive: style, lighting, mood, composition, color palette
83	- Include art direction: "minimalist flat design", "cyberpunk neon", "editorial photography"
84	- Specify no-text: "no text, no letters, no words" (text overlaid in HTML step)
85
86	3. Compose final banner — overlay text, CTA, logo on generated visual in HTML/CSS
87
88	### Step 4: Export Banners to Images
89
90	After designing HTML banners, export each to PNG using `chrome-devtools` skill:
91
92	1. Serve HTML files via local server (python http.server or similar)
93	2. Screenshot each banner at exact platform dimensions:
94	```bash
95	# Export banner to PNG at exact dimensions
96	node .claude/skills/chrome-devtools/scripts/screenshot.js \
97	--url "http://localhost:8765/banner-01-minimalist.html" \
98	--width 1500 --height 500 \
99	--output "assets/banners/{campaign}/{variant}-{size}.png"
100	```
101	3. Auto-compress

People who liked this also viewed

6 picks

Type