From creative
Generates visuals consistent with the current project's visual identity.
How this skill is triggered — by the user, by Claude, or both
Slash command
/creative:brand-visualsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generates visuals consistent with the current project's visual identity.
Generates visuals consistent with the current project's visual identity.
userConfig.image_provider:
gemini (default) → GEMINI_API_KEY required — free key: https://aistudio.google.com/apikeyopenai → OPENAI_IMAGE_KEY required/creative:setup-provider| Model | API ID | Usage | Free tier |
|---|---|---|---|
| Flash | gemini-3.1-flash-image-preview | Rapid iteration | ~500/day |
| Pro | gemini-3-pro-image-preview | Final 4K assets | ~3/day |
| Model | Usage | Pricing |
|---|---|---|
gpt-image-1 | High quality, precise control | ~$0.04-0.19/image |
dall-e-3 | Natural prompt, varied styles | ~$0.04-0.12/image |
Default: Flash (Gemini) or gpt-image-1 (OpenAI) for iteration.
Detect the project context rather than using a hardcoded palette.
brand.json or brand.yaml at the project root or .claude/tailwind.config.* → extract theme.extend.colors--color-primary, etc..claude/CLAUDE.md of the project → look for mentions of palette, colors, stylepackage.json → the name and description fields give product contextAlways display the detected palette and ask for validation before generating.
{
"name": "MyProduct",
"tagline": "Short description",
"colors": {
"primary": "#6366F1",
"secondary": "#8B5CF6",
"accent": "#06B6D4",
"background": "#0F172A",
"surface": "#F8FAFC"
},
"style": {
"keywords": ["modern", "clean", "premium"],
"mood": ["professional", "innovative"],
"avoid": ["clipart", "stock-photo", "cartoon"]
}
}
Follow the resolution order above. Display the detected palette.
[TYPE] for [PRODUCT].
Subject: [DESCRIPTION].
Style: [BRAND KEYWORDS].
Palette: [HEX CODES].
Mood: [MOOD].
Composition: [LAYOUT].
Format: [RATIO].
No text unless explicitly requested. Premium quality.
Use the configured provider. See image-provider-reference.md for complete code for each provider.
Gemini: client.models.generateContent() with responseModalities: ["TEXT", "IMAGE"]
OpenAI: client.images.generate() with response_format: "b64_json" or URL
For series consistency, send a validated image as reference:
Gemini: style transfer via inlineData in contents.parts[]
OpenAI: client.images.edit() with image stream
See detailed patterns in image-provider-reference.md.
| Type | Ratio | Composition |
|---|---|---|
| Hero | 16:9 / 21:9 | 40% space for text overlay, high-impact |
| Feature | 1:1 / 4:3 | Centered subject, clean background, one concept |
| OG Image | 1200x630 | Readable at small size, text via Pro |
| Social | 1:1 / 16:9 | Eye-catching, brand-consistent |
| Banner | variable | High contrast, minimal elements |
If generation fails (quota, API error, non-conforming image):
visual-brief.md file for manual generationBuilt prompt:
Hero image for fintech landing page.
Style: modern, clean, premium. Abstract 3D shapes and gradients.
Color palette: #6366F1 primary, #8B5CF6 secondary, #06B6D4 accent.
Mood: professional, innovative, trustworthy.
Composition: 40% left for text overlay, key visual right.
Format: 16:9. No text. Premium quality.
Self-check: faithful palette, sufficient text space, no text in image, mood consistent with brand.json keywords.
Before presenting a visual, verify:
brand.json or the detected sourceProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
npx claudepluginhub buldee/claude-creative-studio --plugin claude-creative-studio