Voz da marca, identidade visual, estruturas de mensagens, gestão de ativos, consistência da marca. Ative para conteúdo de marca, tom de voz, ativos de marketing, conformidade da marca, guias 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

Mais skills de nextlevelbuilder

ckm:design-system
nextlevelbuilder
Arquitetura de tokens, especificações de componentes e geração de slides. Tokens de três camadas (primitivo → semântico → componente), variáveis CSS, escalas de espaçamento/tipografia, especificações de componentes, criação estratégica de slides. Use para tokens de design, design sistemático, apresentações alinhadas à marca.
designdevelopmentcreative
ckm:design
nextlevelbuilder
Habilidade de design abrangente: identidade de marca, design tokens, estilização de UI, geração de logotipos (55 estilos, Gemini AI), programa de identidade corporativa (50 entregáveis, mockups de CIP), apresentações em HTML (Chart.js), design de banners (22 estilos, social/ads/web/impressão), design de ícones (15 estilos, SVG, Gemini 3.1 Pro), fotos sociais (HTML→captura de tela, multiplataforma). Ações: criar logotipo, criar CIP, gerar mockups, construir slides, criar banner, gerar ícone, criar fotos sociais, imagens para redes sociais, marca...
designcreativemedia
ckm:ui-styling
nextlevelbuilder
Crie interfaces de usuário bonitas e acessíveis com componentes shadcn/ui (construídos sobre Radix UI + Tailwind), estilização utilitária do Tailwind CSS e designs visuais baseados em canvas. Use ao construir interfaces de usuário, implementar sistemas de design, criar layouts responsivos, adicionar componentes acessíveis (diálogos, menus suspensos, formulários, tabelas), personalizar temas e cores, implementar modo escuro, gerar designs visuais e pôsteres, ou estabelecer padrões de estilização consistentes entre aplicações.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
Voz da marca, identidade visual, estruturas de mensagens, gestão de ativos, consistência da marca. Ative para conteúdo de marca, tom de voz, ativos de marketing, conformidade da marca, guias de estilo.
designmarketingcreative
ckm:slides
nextlevelbuilder
Crie apresentações HTML estratégicas com Chart.js, tokens de design, layouts responsivos, fórmulas de copywriting e estratégias contextuais de slides.
designcreative
ckm:banner-design
nextlevelbuilder
Crie banners para redes sociais, anúncios, hero sections de sites, ativos criativos e materiais impressos. Múltiplas opções de direção de arte com visuais gerados por IA. Ações: projetar, criar, gerar banner. Plataformas: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero section de site, impresso. Estilos: minimalista, gradiente, tipografia ousada, baseado em foto, ilustrado, geométrico, retrô, glassmorphism, 3D, neon, duotone, editorial, colagem. Utiliza as habilidades ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
designcreativemarketing
banner-design
nextlevelbuilder
Crie banners para redes sociais, anúncios, heróis de site, ativos criativos e impressos. Múltiplas opções de direção de arte com visuais gerados por IA. Ações: criar, desenvolver, gerar banner. Plataformas: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, herói de site, impresso. Estilos: minimalista, gradiente, tipografia ousada, baseado em foto, ilustrado, geométrico, retrô, glassmorphism, 3D, neon, duotone, editorial, colagem. Utiliza as habilidades ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
slides
nextlevelbuilder
Crie apresentações HTML estratégicas com Chart.js, tokens de design, layouts responsivos, fórmulas de copywriting e estratégias contextuais de slides.
designcreativedocument