Voix de marque, identité visuelle, cadres de messagerie, gestion des actifs, cohérence de marque. Activer pour le contenu de marque, le ton de la voix, les actifs marketing, la conformité de marque, les guides de style.

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

Plus de skills de nextlevelbuilder

ckm:design-system
nextlevelbuilder
Architecture des tokens, spécifications des composants et génération de diapositives. Tokens à trois couches (primitif → sémantique → composant), variables CSS, échelles d'espacement/typographie, spécifications des composants, création stratégique de diapositives. À utiliser pour les tokens de design, le design systématique, les présentations conformes à la marque.
designdevelopmentcreative
ckm:design
nextlevelbuilder
Compétence de conception complète : identité de marque, tokens de design, stylisme UI, génération de logo (55 styles, Gemini AI), programme d'identité d'entreprise (50 livrables, maquettes CIP), présentations HTML (Chart.js), conception de bannière (22 styles, social/annonces/web/impression), conception d'icône (15 styles, SVG, Gemini 3.1 Pro), photos sociales (HTML→capture d'écran, multi-plateforme). Actions : concevoir un logo, créer un CIP, générer des maquettes, construire des diapositives, concevoir une bannière, générer une icône, créer des photos sociales, images pour réseaux sociaux, marque...
designcreativemedia
ckm:ui-styling
nextlevelbuilder
Créez de belles interfaces utilisateur accessibles avec les composants shadcn/ui (basés sur Radix UI + Tailwind), le style utilitaire-first de Tailwind CSS et des conceptions visuelles basées sur canvas. Utilisez lors de la création d'interfaces utilisateur, de la mise en œuvre de systèmes de design, de la création de mises en page responsives, de l'ajout de composants accessibles (boîtes de dialogue, menus déroulants, formulaires, tableaux), de la personnalisation des thèmes et des couleurs, de l'implémentation du mode sombre, de la génération de conceptions visuelles et d'affiches, ou de l'établissement de motifs de style cohérents dans les applications.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
Voix de marque, identité visuelle, cadres de messagerie, gestion des actifs, cohérence de marque. Activer pour le contenu de marque, le ton de la voix, les actifs marketing, la conformité de marque, les guides de style.
designmarketingcreative
ckm:slides
nextlevelbuilder
Créez des présentations HTML stratégiques avec Chart.js, des tokens de design, des mises en page responsives, des formules de copywriting et des stratégies de diapositives contextuelles.
designcreative
ckm:banner-design
nextlevelbuilder
Concevoir des bannières pour les réseaux sociaux, les publicités, les héros de sites web, les assets créatifs et l'impression. Plusieurs options de direction artistique avec des visuels générés par IA. Actions : concevoir, créer, générer une bannière. Plateformes : Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, héros de site web, impression. Styles : minimaliste, dégradé, typographie audacieuse, basé sur photo, illustré, géométrique, rétro, glassmorphisme, 3D, néon, duotone, éditorial, collage. Utilise les compétences ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
designcreativemarketing
banner-design
nextlevelbuilder
Concevoir des bannières pour les réseaux sociaux, les publicités, les héros de sites web, les contenus créatifs et l'impression. Options de direction artistique multiples avec visuels générés par IA. Actions : concevoir, créer, générer une bannière. Plateformes : Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, héros de site web, impression. Styles : minimaliste, dégradé, typographie audacieuse, basé sur photo, illustré, géométrique, rétro, glassmorphisme, 3D, néon, duotone, éditorial, collage. Utilise les compétences ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
slides
nextlevelbuilder
Créer des présentations HTML stratégiques avec Chart.js, des tokens de design, des mises en page responsives, des formules de copywriting et des stratégies contextuelles de slides.
designcreativedocument