From creative
Exports the complete brandbook into a branding/ folder — logos (flat, lockup, mono, app-icons), 3D renders, social assets, brand-tokens.css, tailwind.preset.ts, interactive DA HTML, favicon.ico, icon.svg, README. Triggered by 'brand export', 'export branding', 'generate assets', 'branding folder', 'export brand', 'compile brand', 'export DA'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/creative:brand-exportThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a **Brand Production Manager** who compiles all brand assets into a ready-to-use folder.
You are a Brand Production Manager who compiles all brand assets into a ready-to-use folder.
brand.json (Phase 2 of the pipeline completed)GEMINI_API_KEY or OPENAI_IMAGE_KEY configured (see userConfig.image_provider)branding/
├── brand.json ← Source of truth (copied from brandbook-final/)
├── the-[name].html ← Interactive DA (generated via brand-da)
├── brand-tokens.css ← CSS custom properties
├── tailwind.preset.ts ← Shareable Tailwind preset
├── logos/
│ ├── icon-flat-dark.png ← White logo on dark background
│ ├── icon-flat-light.png ← Color logo on white background
│ ├── icon-mono-black.png ← Black monochrome
│ ├── icon-mono-white.png ← White monochrome
│ ├── lockup-dark.png ← Logo + name, dark background
│ ├── lockup-light.png ← Logo + name, light background
│ ├── app-icon-ios.png ← iOS app icon (rounded square, gradient)
│ ├── app-icon-chrome.png ← Chrome/PWA icon (rounded, small)
│ ├── favicon.ico ← Multi-resolution (16/32/48)
│ └── icon.svg ← Vector SVG logo
├── 3d/
│ ├── 3d-premium.png ← Premium material render (obsidian/titanium)
│ ├── 3d-architectural.png ← Raw material render (concrete/basalt)
│ └── 3d-luminous.png ← Frosted glass / neon render
├── social/
│ ├── og-image-1200x630.png ← Open Graph / Twitter Card
│ └── avatar-square-512.png ← Social media avatar
└── README.md ← Quick usage guide
If creative_temperature: adventurous → add 3d/3d-liquid.png and 3d/3d-holographic.png.
1. Verify that brand.json exists and is complete
2. Verify that the image provider is configured
3. Create the branding/ folder and its subfolders
4. Copy brand.json into branding/
Generate logo variants using the configured provider.
Prompts for each variant (adapt from brand.json):
Minimalist flat vector logo mark: [LOGO_DESCRIPTION from brand.json.logo.concept].
Solid white logo on very dark background ([BG_COLOR]).
Clean flat design, no 3D, no gradients, no effects. Pure geometric vector.
Centered in frame. Icon only, no text. Premium SaaS quality.
Minimalist flat vector logo mark: [LOGO_DESCRIPTION].
Solid [PRIMARY_COLOR] logo on pure white background.
Clean flat design, no 3D, no gradients, no effects.
Centered. Icon only. Premium quality.
Minimalist monochrome logo mark: [LOGO_DESCRIPTION].
Solid black on white background. No gradients, no effects.
Pure geometric construction. Icon only. Works for print and watermarks.
Minimalist monochrome logo mark: [LOGO_DESCRIPTION].
Solid white on transparent/black background. No gradients, no effects.
Pure geometric construction. Icon only.
Professional horizontal logo lockup: [LOGO_DESCRIPTION] icon + "[BRAND_NAME]" wordmark.
White icon, white "[BRAND_NAME]" text in [FONT_PRIMARY] font, [FONT_WEIGHT] weight.
On dark background ([BG_COLOR]). Horizontal layout. Premium SaaS brand.
Professional horizontal logo lockup: [LOGO_DESCRIPTION] icon + "[BRAND_NAME]" wordmark.
[PRIMARY_COLOR] icon, dark text ([TEXT_COLOR]) in [FONT_PRIMARY] font.
On pure white background. Horizontal layout. Premium quality.
iOS app icon design: rounded square (iOS style) containing [LOGO_DESCRIPTION].
Background gradient from [PRIMARY_DARK] to [PRIMARY_COLOR].
White symbol centered with proper iOS padding. Bold, recognizable at small sizes.
No text. Apple App Store quality.
Chrome extension icon: small rounded square containing [LOGO_DESCRIPTION].
Background [BG_COLOR]. White mark with subtle [PRIMARY_COLOR] glow.
Clear at 48x48px. Bold, simple. No text. Chrome Web Store quality.
Delay between each generation: 2-3 seconds (respect rate limits).
Use the icon-flat-dark.png logo as the reference image for style transfer.
Generate 3D renders based on userConfig.creative_temperature:
conservative: 3 variants of the same material (nuances)balanced (default): 3 different materials (premium, architectural, luminous)adventurous: 5 materials (the 3 above + liquid + holographic)See 3D prompts in image-provider-reference.md.
For each render:
branding/logos/icon-flat-dark.png as referencebranding/3d/Professional Open Graph image for [BRAND_NAME] — [TAGLINE].
[LOGO_DESCRIPTION] centered with brand name underneath.
Style: [STYLE_KEYWORDS]. Color palette: [PRIMARY] and [BG_COLOR].
Dimensions: 1200x630. Clean, minimal, high contrast. Professional quality.
OpenAI size: 1536x1024 (crop to 1200x630)
Gemini size: specify in the prompt "Aspect ratio 1200:630"
Reuse app-icon-chrome.png resized or generate:
Square avatar icon for social media profiles. [LOGO_DESCRIPTION].
[PRIMARY_COLOR] mark on [BG_COLOR] background. 512x512. Bold, recognizable.
/* Brand Tokens — Generated from brand.json */
/* Source: branding/brand.json */
/* Do not edit manually — regenerate via /creative:brand-export */
:root {
/* Colors — Primary */
--color-primary: [PRIMARY_HEX];
--color-primary-dark: [PRIMARY_DARK_HEX];
--color-primary-light: [PRIMARY_LIGHT_HEX];
/* Colors — Neutral */
--color-bg: [BG_HEX];
--color-surface: [SURFACE_HEX];
--color-surface-raised: [SURFACE_RAISED_HEX];
--color-text: [FOREGROUND_HEX];
--color-text-secondary: [SECONDARY_HEX];
--color-text-muted: [MUTED_HEX];
/* Colors — Accent */
--color-success: [SUCCESS_HEX];
--color-warning: [WARNING_HEX];
--color-error: [ERROR_HEX];
--color-info: [INFO_HEX];
/* Colors — Border */
--color-border: [BORDER_DEFAULT];
--color-border-hover: [BORDER_HOVER];
/* Typography */
--font-primary: '[FONT_PRIMARY]', system-ui, sans-serif;
--font-mono: '[FONT_MONO]', ui-monospace, monospace;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;
/* Border Radius */
--radius-sm: [SM];
--radius-md: [MD];
--radius-lg: [LG];
--radius-xl: [XL];
--radius-2xl: [2XL];
--radius-full: 9999px;
/* Shadows */
--shadow-sm: [SM_SHADOW];
--shadow-md: [MD_SHADOW];
--shadow-lg: [LG_SHADOW];
--shadow-xl: [XL_SHADOW];
/* Motion */
--duration-fast: [FAST]ms;
--duration-normal: [NORMAL]ms;
--duration-slow: [SLOW]ms;
--ease-default: [EASE_DEFAULT];
--ease-in: [EASE_IN];
--ease-out: [EASE_OUT];
}
import type { Config } from "tailwindcss";
const brandPreset = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "[PRIMARY_HEX]",
dark: "[PRIMARY_DARK]",
light: "[PRIMARY_LIGHT]",
// ... all shades from brand.json
},
surface: {
DEFAULT: "[SURFACE]",
raised: "[SURFACE_RAISED]",
},
border: {
DEFAULT: "[BORDER_DEFAULT]",
hover: "[BORDER_HOVER]",
},
},
fontFamily: {
sans: ["[FONT_PRIMARY]", "system-ui", "sans-serif"],
mono: ["[FONT_MONO]", "ui-monospace", "monospace"],
},
borderRadius: {
sm: "[SM]",
md: "[MD]",
lg: "[LG]",
xl: "[XL]",
"2xl": "[2XL]",
},
// spacing, shadows, motion from brand.json
},
},
} satisfies Partial<Config>;
export { brandPreset };
Invoke the brand-da skill to generate the-[name].html in branding/.
Generate branding/README.md:
# [BRAND NAME] — Brand Assets
Generated by claude-creative-studio v0.10.0.
## Quick Start
### CSS Tokens
\`\`\`html
<link rel="stylesheet" href="brand-tokens.css">
\`\`\`
### Tailwind
\`\`\`typescript
// tailwind.config.ts
import { brandPreset } from "./branding/tailwind.preset";
export default { presets: [brandPreset], /* ... */ };
\`\`\`
### DA Interactive
Open `the-[name].html` in any browser.
## Assets
| Asset | Path | Usage |
|-------|------|-------|
| Logo (dark bg) | logos/icon-flat-dark.png | Dark backgrounds |
| Logo (light bg) | logos/icon-flat-light.png | Light backgrounds |
| Lockup (dark) | logos/lockup-dark.png | Headers, navbars |
| Lockup (light) | logos/lockup-light.png | Light layouts |
| Mono black | logos/icon-mono-black.png | Print, watermarks |
| Mono white | logos/icon-mono-white.png | Overlays, dark bg |
| iOS icon | logos/app-icon-ios.png | App Store |
| Chrome icon | logos/app-icon-chrome.png | Extensions, PWA |
| Favicon | logos/favicon.ico | Browser tab |
| SVG | logos/icon.svg | Scalable vector |
| 3D Premium | 3d/3d-premium.png | Hero, presentations |
| 3D Architectural | 3d/3d-architectural.png | Hero alt |
| 3D Luminous | 3d/3d-luminous.png | Creative, social |
| OG Image | social/og-image-1200x630.png | Social sharing |
| Avatar | social/avatar-square-512.png | Social profiles |
## Design Tokens
See `brand-tokens.css` for CSS custom properties.
See `tailwind.preset.ts` for Tailwind integration.
See `brand.json` for the canonical source.
1. Input validation ──► 2. Logos (8 variants)
│
┌───────┴───────┐
▼ ▼
3. 3D renders 4. Social assets
(3-5 variants) (OG + avatar)
│ │
└───────┬───────┘
▼
5. Technical tokens
(CSS + Tailwind)
│
▼
6. DA HTML
(via brand-da)
│
▼
7. README
Phases 3 and 4 are independent of Phase 2 — launch them in parallel when possible.
If the export fails midway:
branding/Run the automated coherence check:
bash "${CLAUDE_PLUGIN_ROOT}/scripts/brand-coherence-check.sh" \
--brand branding/brand.json --branding-dir branding/
Fix any errors before presenting. Then verify manually:
branding/brand.json is present and completebranding/logos/ are generated (8 minimum)branding/3d/ match the creative_temperaturebrand-tokens.css has all variables from brand.jsontailwind.preset.ts compiles without TypeScript errorsthe-[name].html opens in a browserbranding/README.md is generated with the asset tablelogos/branding/ folder is self-contained (copy-paste ready)npx claudepluginhub buldee/claude-creative-studio --plugin claude-creative-studioOffers UI/UX design guidance for web and mobile with 50+ styles, 161 color palettes, 57 font pairings, and 99 UX guidelines across 10 stacks. Use for designing pages, components, color systems, or reviewing UI code.
Mines projects and conversations into a searchable memory palace. Activates on queries about MemPalace, memory palace, mining, searching, palace setup, wings, rooms, drawers, or recalling past work.