brand
nextlevelbuilder/ui-ux-pro-max-skill
Manage brand voice, visual identity, messaging, and asset consistency across projects.
What is brand?
The Brand skill provides frameworks for defining and maintaining brand identity, including voice guidelines, visual standards, messaging frameworks, and asset management. Use it to ensure consistent branded content, enforce style guides, validate assets, and synchronize brand definitions across design systems.
- Define and inject brand voice and tone guidance into content creation
- Manage visual identity standards including color palettes, typography, and logo usage rules
- Create and maintain messaging frameworks and brand messaging guidelines
- Validate assets against naming, size, and format standards
- Sync brand guidelines to design tokens (JSON and CSS variables)
- Extract and compare colors from assets against defined brand palettes
How to install brand
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:brand- Node.js environment to run provided scripts
- Brand guidelines documentation (starter template provided)
- Design tokens JSON file for synchronization
How to use brand
- 1.Edit or create `docs/brand-guidelines.md` with your brand voice, visual identity, and messaging frameworks
- 2.Run `node scripts/sync-brand-to-tokens.cjs` to synchronize guidelines to design tokens
- 3.Use `node scripts/inject-brand-context.cjs` to extract brand context for prompt injection into content creation
- 4.Run `node scripts/validate-asset.cjs <asset-path>` to validate assets against brand standards
- 5.Use `node scripts/extract-colors.cjs` to extract and compare colors from assets against your palette
- 6.Reference the provided templates and checklists (voice framework, visual identity, consistency checklist, approval checklist) when defining or reviewing brand standards
Use cases
- Ensuring consistent tone and messaging across marketing materials and content
- Maintaining visual identity compliance when creating branded designs and assets
- Onboarding new team members with centralized brand guidelines and standards
- Auditing existing assets for brand consistency and compliance violations
- Managing design tokens and CSS variables synchronized with brand definitions
- Brand managers and marketing teams
- UX/UI designers and design systems maintainers
- Content creators and copywriters
- Product teams enforcing brand consistency
- Design system administrators
brand FAQ
The `docs/brand-guidelines.md` file is the source of truth. Changes to this file are synced to design tokens via the sync script.
Run `node scripts/inject-brand-context.cjs` or `node scripts/inject-brand-context.cjs --json` to extract brand context that can be included in prompts.
The validate script processes one asset at a time via `node scripts/validate-asset.cjs <asset-path>`. You can loop over multiple assets in your workflow.
The skill syncs to both `design-tokens.json` (structured data) and `design-tokens.css` (CSS variables) for flexible integration.
Yes, `templates/brand-guidelines-starter.md` provides a complete starter template for new brands, and reference guides cover voice, visual identity, messaging, and consistency.
Full instructions (SKILL.md)
Source of truth, from nextlevelbuilder/ui-ux-pro-max-skill.
name: brand description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides. argument-hint: "[update|review|create] [args]" metadata: author: claudekit version: "1.0.0"
Brand
Brand identity, voice, messaging, asset management, and consistency frameworks.
When to Use
- Brand voice definition and content tone guidance
- Visual identity standards and style guide development
- Messaging framework creation
- Brand consistency review and audit
- Asset organization, naming, and approval
- Color palette management and typography specs
Quick Start
Inject brand context into prompts:
node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json
Validate an asset:
node scripts/validate-asset.cjs <asset-path>
Extract/compare colors:
node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>
Brand Sync Workflow
# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20
Files synced:
docs/brand-guidelines.md→ Source of truthassets/design-tokens.json→ Token definitionsassets/design-tokens.css→ CSS variables
Subcommands
| Subcommand | Description | Reference |
|---|---|---|
update | Update brand identity and sync to all design systems | references/update.md |
References
| Topic | File |
|---|---|
| Voice Framework | references/voice-framework.md |
| Visual Identity | references/visual-identity.md |
| Messaging | references/messaging-framework.md |
| Consistency | references/consistency-checklist.md |
| Guidelines Template | references/brand-guideline-template.md |
| Asset Organization | references/asset-organization.md |
| Color Management | references/color-palette-management.md |
| Typography | references/typography-specifications.md |
| Logo Usage | references/logo-usage-rules.md |
| Approval Checklist | references/approval-checklist.md |
Scripts
| Script | Purpose |
|---|---|
scripts/inject-brand-context.cjs | Extract brand context for prompt injection |
scripts/sync-brand-to-tokens.cjs | Sync brand-guidelines.md → design-tokens.json/css |
scripts/validate-asset.cjs | Validate asset naming, size, format |
scripts/extract-colors.cjs | Extract and compare colors against palette |
Templates
| Template | Purpose |
|---|---|
templates/brand-guidelines-starter.md | Complete starter template for new brands |
Routing
- Parse subcommand from
$ARGUMENTS(first word) - Load corresponding
references/{subcommand}.md - Execute with remaining arguments
Related skills
More from nextlevelbuilder/ui-ux-pro-max-skill and the wider catalog.
design
Unified design skill for brand identity, logos, design systems, presentations, banners, and social media graphics.
design-system
Design token architecture, component specs, and brand-compliant slide generation for systematic design systems.
slides
Create strategic HTML presentations with Chart.js, design tokens, and copywriting formulas.
ui-styling
Build accessible, beautiful UIs with shadcn/ui components, Tailwind CSS, and canvas-based visual design.
design
Unified design skill for brand identity, logos, UI systems, presentations, banners, and social media assets.
design-system
Three-layer token architecture, component specs, and brand-compliant slide generation for design systems.