domains / design / brand-kit-generation / brandkit

brandkit

Skill card

combined

The two skills share the name 'brandkit' but define fundamentally different procedures. The first (Leonxlnx) is an image-generation skill that produces a single visual brand-guidelines board (a 'brand world' in one image) using art-direction principles, grid layouts, and logo concepting. The second (plugin87) is a code/token-generation skill that produces a structured design-token system (DTCG JSON, CSS variables, OKLCH colors) with automated WCAG verification scripts. They do not overlap in output format, tools, or steps; one is for visual presentation, the other for engineering foundations. Combining them is necessary to capture both the visual identity board and the underlying token system, as neither is a reproduction of the other.

Repositories

Other copies

Combined skill

# Brand Kit Skill

This skill covers two complementary aspects of brand creation: the visual identity board and the underlying design token system.

## Part 1: Visual Identity Board (Image Generation)

**Goal:** Generate a premium brand-kit image that feels like a serious identity studio output.

1. **Brand Intake:** Determine if this is a new identity or an extension. Ask for missing details (logo, colors, mood) only if not provided.
2. **Strategy:** Infer the brand's core metaphor, audience, and visual world.
3. **Generation:** Create a single image (default 3x3 grid, 4:3 or 16:10 aspect ratio) featuring:
   - Dark charcoal canvas with clean grid panels.
   - Logo marks, UI mockups, and typography samples.
   - Minimal text, strong negative space, and cinematic atmosphere.
   - Consistent gutters and connected panels.
4. **Output:** Provide the generated image and explain any dimension limitations.

## Part 2: Design Token System (Code Generation)

**Goal:** Stand up a verified, themeable token foundation.

1. **Check Prerequisites:** Verify the kit directory exists (`ls ${CLAUDE_SKILL_DIR}/../../../tokens`). If missing, instruct the user to run `npx ux-ui-agent-skills init`.
2. **Brief Inference:** Identify industry, audience, mood, and motion depth.
3. **Primitives:** Generate OKLCH color ramps (11 shades) and neutral ramps. Ensure 500 shade ≥ 4.5:1 contrast on white.
4. **Semantic Layer:** Map roles (action, text, surface, border, feedback) to primitives. Design dark mode overrides explicitly.
5. **Scales:** Define type scale (Major Third), spacing (4px), radius, and motion tokens.
6. **Emit:** Write DTCG JSON files and a single `theme.css` with `[data-theme="dark"]` overrides.
7. **Verification:** Run `validate_tokens.py`, `validate_contrast.py` (WCAG AA light/dark), and `validate_theme_refs.py`.

## Conflicts
- **Leonxlnx/taste-skill** focuses on visual image generation for presentation.
- **plugin87/ux-ui-agent-skills** focuses on code-based token generation for engineering.
- Use Part 1 for visual mockups and Part 2 for implementation-ready design systems.