Marketing Design

Marketing Design

Unified marketing brand-asset skill: logo, CIP, banners, SVG icons, social photos, posters. Generates raster images - default engine is Codex gpt-image-2 (ChatGPT subscription, codex login), falling back to Gemini Nano Banana (GEMINI_API_KEY, the same key omnimedia uses). For HTML/web artifacts and slide decks, use opendesign.

When to Use

• Logo design and AI generation
• Corporate identity program (CIP) deliverables - business card, letterhead, signage, packaging, apparel
• Brand visual identity assets
• Banner design for social media, ads, web, print
• Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
• Poster design (event, editorial, marketing) with locked-style + varied-composition prompts
• SVG icons and icon sets

Not this skill: HTML/web pages, dashboards, and slide decks → opendesign. Token systems / shadcn-Tailwind code → vd:uiuxdesign.

Sub-skill Routing

All built-in modules are self-contained (references + scripts + data in this skill). Route HTML artifacts and frontend implementation to the installed repo skills listed below.

Image Generation Backend

Raster generators (logo, cip) default to Codex $imagegen (gpt-image-2) on the ChatGPT subscription - no API key. One-time setup: brew install codex && codex login. If Codex is unavailable (not installed / not logged in / quota), they fall back to Gemini automatically.

--provider: codex (default) · gemini (force Nano Banana) · auto (codex→gemini). Codex takes 5-30s/image. Reference-image compositing requires codex-cli ≥ 0.137.

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Default engine: Codex gpt-image-2 (Gemini fallback).

Resolve Paths (run once)

Resolve the skill dir and a Python interpreter once, then reuse $SKILL / $PY in every command below (works under Claude Code, Codex, or a dev clone).

SKILL="${CLAUDE_SKILL_DIR:-$(for d in "$HOME/skills/skills/marketing-design" "$HOME/.claude/skills/marketing-design" "$HOME/.agents/skills/marketing-design"; do [ -d "$d" ] && { echo "$d"; break; }; done)}"
PY="$([ -x "$HOME/.claude/skills/.venv/bin/python3" ] && echo "$HOME/.claude/skills/.venv/bin/python3" || echo python3)"

Logo: Generate Design Brief

python3 $SKILL/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 $SKILL/scripts/logo/search.py "minimalist clean" --domain style
python3 $SKILL/scripts/logo/search.py "tech professional" --domain color
python3 $SKILL/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

# Default: Codex gpt-image-2 (run `codex login` once)
python3 $SKILL/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 $SKILL/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

# Force Gemini Nano Banana (e.g. for aspect-ratio control or --pro)
python3 $SKILL/scripts/logo/generate.py --brand "TechFlow" --provider gemini --pro

# Variant batch (Gemini - Codex has no batch mode)
python3 $SKILL/scripts/logo/generate.py --brand "TechFlow" --batch 9 --output-dir ./logos

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ask whether the user wants an HTML preview gallery. If yes, use vd:opendesign for a static gallery artifact.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Default engine: Codex gpt-image-2 with the brand logo attached as a reference image (-i); Gemini Nano Banana fallback.

CIP: Generate Brief

python3 $SKILL/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 $SKILL/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 $SKILL/scripts/cip/search.py "luxury premium elegant" --domain style
python3 $SKILL/scripts/cip/search.py "hospitality hotel" --domain industry
python3 $SKILL/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 $SKILL/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 $SKILL/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 $SKILL/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 $SKILL/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

# Force Gemini (faster for large --set)
python3 $SKILL/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --industry "consulting" --set --provider gemini

Engines: Codex gpt-image-2 (default, logo attached as reference image). Gemini fallback models - --model flash (gemini-2.5-flash-image), --model pro (gemini-3-pro-image-preview).

CIP: Render HTML Presentation

python3 $SKILL/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Tip: If no logo exists, use Logo Design section above first.

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses the built-in banner reference, this skill's raster generation flow when imagery is needed, and browser/Playwright screenshots for exact-pixel export.

Load references/banner-sizes-and-styles.md for complete sizes and styles reference.

Banner: Workflow

1. Gather requirements - purpose, platform, content, brand, style, quantity
2. Research - collect visual references only when the brief lacks a clear direction
3. Design - create HTML/CSS banner variants; generate raster visuals through this skill's image flow when needed
4. Export - screenshot to PNG at exact dimensions via Browser, Playwright, or Chrome
5. Present - Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

Banner: Top Art Styles

Banner: Design Rules

• Safe zones: critical content in central 70-80%
• One CTA per banner, bottom-right, min 44px height
• Max 2 fonts, min 16px body, ≥32px headline
• Text under 20% for ads (Meta penalizes)
• Print: 300 DPI, CMYK, 3-5mm bleed

Icon Design (Built-in)

15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.

Icon: Generate Single Icon

python3 $SKILL/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 $SKILL/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 $SKILL/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 $SKILL/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 $SKILL/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

Model: gemini-3.1-pro-preview - text-only output (SVG is XML text). No image generation API needed.

Poster Design (Built-in)

20-30 curated styles × 15-20 palettes × 10-14 layouts × 8-12 textures. Model-agnostic - emits text prompts only. Use any image model (Gemini Nano Banana 2, GPT Image, Imagen, Midjourney).

Three axes (style, palette, texture) locked per call to preserve identity; layout + variation seed randomized to guarantee per-call variety. 5 calls with same --style → 5 visibly distinct posters that read as one series.

Load references/poster-design.md for the full guide and references/poster-prompt-engineering.md for prompt anatomy + model-specific tweaks.

Poster: Search Knowledge Base

$PY $SKILL/scripts/poster/search.py --domain style --query "swiss editorial"
$PY $SKILL/scripts/poster/search.py --domain palette --query "warm earthy"
$PY $SKILL/scripts/poster/search.py --domain texture --query "risograph"
$PY $SKILL/scripts/poster/search.py --domain layout --query "centered grid"

Poster: Build Brief

$PY $SKILL/scripts/poster/search.py --poster-brief --topic "AI Conference" --query "minimal grid"

Poster: Generate Prompt

$PY $SKILL/scripts/poster/generate.py --topic "AI Conference"
$PY $SKILL/scripts/poster/generate.py --topic "AI Conference" --query "swiss" --aspect a2
$PY $SKILL/scripts/poster/generate.py --topic "AI Conference" --style "Swiss Editorial Grid" --seed 42

Pipe stdout into any image-gen model. For series: same --style, different --seed values (lock identity, vary composition).

Poster: Rebuild Knowledge Base

# Vision analysis (resume-safe; needs GEMINI_API_KEY)
$PY $SKILL/scripts/poster/analyze.py --input-dir /path/to/posters

# Re-cluster + regenerate CSVs
$PY $SKILL/scripts/poster/cluster.py

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses built-in social templates, brand context from the brief, and Browser/Playwright screenshots.

Load references/social-photos-design.md for sizes, templates, best practices.

Social Photos: Workflow

1. Orchestrate - track variants and parallelize independent work when useful
2. Analyze - Parse prompt: subject, platforms, style, brand context, content elements
3. Ideate - 3-5 concepts and present concise options
4. Design - apply brand tokens from the brief; build HTML per idea × size
5. Export - Browser or Playwright screenshot at exact px (2x deviceScaleFactor)
6. Verify - visually inspect exported designs; fix layout/styling issues and re-export
7. Report - Summary to the injected Reports: path with design decisions
8. Organize - sort output files and reports under the chosen artifact directory

Social Photos: Key Sizes

Workflows

Complete Brand Package

1. Logo → scripts/logo/generate.py → Generate logo variants
2. CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups
3. Presentation → use opendesign to build the pitch deck (HTML)

New Design System

1. Brand assets (this skill) → Define visual direction and generate marks/mockups
2. HTML artifact (vd:opendesign) → Explore page/deck direction
3. Implement (vd:uiuxdesign) → Configure Tailwind, shadcn/ui, and frontend screens

References

Scripts

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Integration

Related skills: vd:opendesign, vd:uiuxdesign, vd:fastreact, vd:omnimedia