Voz de marca, identidad visual, marcos de mensajería, gestión de activos, consistencia de marca. Activar para contenido de marca, tono de voz, activos de marketing, cumplimiento de marca, guías de estilo.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

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

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

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 truth
  • assets/design-tokens.json → Token definitions
  • assets/design-tokens.css → CSS variables

Subcommands

SubcommandDescriptionReference
updateUpdate brand identity and sync to all design systemsreferences/update.md

References

TopicFile
Voice Frameworkreferences/voice-framework.md
Visual Identityreferences/visual-identity.md
Messagingreferences/messaging-framework.md
Consistencyreferences/consistency-checklist.md
Guidelines Templatereferences/brand-guideline-template.md
Asset Organizationreferences/asset-organization.md
Color Managementreferences/color-palette-management.md
Typographyreferences/typography-specifications.md
Logo Usagereferences/logo-usage-rules.md
Approval Checklistreferences/approval-checklist.md

Scripts

ScriptPurpose
scripts/inject-brand-context.cjsExtract brand context for prompt injection
scripts/sync-brand-to-tokens.cjsSync brand-guidelines.md → design-tokens.json/css
scripts/validate-asset.cjsValidate asset naming, size, format
scripts/extract-colors.cjsExtract and compare colors against palette

Templates

TemplatePurpose
templates/brand-guidelines-starter.mdComplete starter template for new brands

Routing

  1. Parse subcommand from $ARGUMENTS (first word)
  2. Load corresponding references/{subcommand}.md
  3. Execute with remaining arguments

Más skills de nextlevelbuilder

ckm:design-system
nextlevelbuilder
Arquitectura de tokens, especificaciones de componentes y generación de diapositivas. Tokens de tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, especificaciones de componentes, creación estratégica de diapositivas. Útil para tokens de diseño, diseño sistemático, presentaciones alineadas con la marca.
designdevelopmentcreative
ckm:design
nextlevelbuilder
Habilidad de diseño integral: identidad de marca, tokens de diseño, estilo de interfaz de usuario, generación de logotipos (55 estilos, Gemini AI), programa de identidad corporativa (50 entregables, maquetas CIP), presentaciones HTML (Chart.js), diseño de banners (22 estilos, redes/anuncios/web/impresión), diseño de iconos (15 estilos, SVG, Gemini 3.1 Pro), fotos sociales (HTML→captura de pantalla, multiplataforma). Acciones: diseñar logotipo, crear CIP, generar maquetas, crear diapositivas, diseñar banner, generar icono, crear fotos sociales, imágenes para redes sociales, marca...
designcreativemedia
ckm:ui-styling
nextlevelbuilder
Crea interfaces de usuario hermosas y accesibles con componentes shadcn/ui (basados en Radix UI + Tailwind), estilos utilitarios de Tailwind CSS y diseños visuales basados en canvas. Úsalo al construir interfaces de usuario, implementar sistemas de diseño, crear diseños responsivos, agregar componentes accesibles (diálogos, menús desplegables, formularios, tablas), personalizar temas y colores, implementar modo oscuro, generar diseños visuales y carteles, o establecer patrones de estilo consistentes en todas las aplicaciones.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
Voz de marca, identidad visual, marcos de mensajería, gestión de activos, consistencia de marca. Activar para contenido de marca, tono de voz, activos de marketing, cumplimiento de marca, guías de estilo.
designmarketingcreative
ckm:slides
nextlevelbuilder
Crea presentaciones HTML estratégicas con Chart.js, tokens de diseño, diseños responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.
designcreative
ckm:banner-design
nextlevelbuilder
Diseña banners para redes sociales, anuncios, hero de sitios web, activos creativos e impresión. Múltiples opciones de dirección de arte con imágenes generadas por IA. Acciones: diseñar, crear, generar banner. Plataformas: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero de sitio web, impresión. Estilos: minimalista, degradado, tipografía audaz, basado en fotos, ilustrado, geométrico, retro, glassmorphism, 3D, neón, duotono, editorial, collage. Utiliza las habilidades ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
designcreativemarketing
banner-design
nextlevelbuilder
Diseña banners para redes sociales, anuncios, héroes de sitios web, activos creativos e impresos. Múltiples opciones de dirección de arte con imágenes generadas por IA. Acciones: diseñar, crear, generar banner. Plataformas: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, héroe de sitio web, impresión. Estilos: minimalista, degradado, tipografía audaz, basado en fotos, ilustrado, geométrico, retro, glassmorphism, 3D, neón, duotono, editorial, collage. Utiliza las habilidades ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
slides
nextlevelbuilder
Crea presentaciones HTML estratégicas con Chart.js, tokens de diseño, diseños responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.
designcreativedocument