Markenstimme, visuelle Identität, Messaging-Frameworks, Asset-Management, Markenkonsistenz. Aktivieren für Markeninhalte, Tonfall, Marketing-Assets, Marken-Compliance, Styleguides.

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

Mehr Skills von nextlevelbuilder

ckm:design-system
nextlevelbuilder
Token-Architektur, Komponentenspezifikationen und Folien-Generierung. Drei-Schichten-Tokens (primitiv→semantisch→Komponente), CSS-Variablen, Abstands-/Typografie-Skalen, Komponentenspezifikationen, strategische Folien-Erstellung. Verwenden für Design-Tokens, systematisches Design, markenkonforme Präsentationen.
designdevelopmentcreative
ckm:design
nextlevelbuilder
Umfassende Design-Fähigkeit: Markenidentität, Design-Tokens, UI-Styling, Logo-Generierung (55 Stile, Gemini AI), Corporate-Identity-Programm (50 Liefergegenstände, CIP-Mockups), HTML-Präsentationen (Chart.js), Banner-Design (22 Stile, Social/Ads/Web/Print), Icon-Design (15 Stile, SVG, Gemini 3.1 Pro), Social Photos (HTML→Screenshot, Multi-Plattform). Aktionen: Logo designen, CIP erstellen, Mockups generieren, Folien bauen, Banner designen, Icon generieren, Social Photos erstellen, Social-Media-Bilder, Marke...
designcreativemedia
ckm:ui-styling
nextlevelbuilder
Erstellen Sie schöne, barrierefreie Benutzeroberflächen mit shadcn/ui-Komponenten (basierend auf Radix UI + Tailwind), Tailwind CSS Utility-First-Styling und canvas-basierten visuellen Designs. Verwenden Sie dies beim Erstellen von Benutzeroberflächen, Implementieren von Designsystemen, Entwickeln responsiver Layouts, Hinzufügen barrierefreier Komponenten (Dialoge, Dropdowns, Formulare, Tabellen), Anpassen von Designs und Farben, Implementieren des Dunkelmodus, Erstellen visueller Designs und Poster oder Festlegen einheitlicher Styling-Muster über Anwendungen hinweg.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
Markenstimme, visuelle Identität, Messaging-Frameworks, Asset-Management, Markenkonsistenz. Aktivieren für Markeninhalte, Tonfall, Marketing-Assets, Markenkonformität, Styleguides.
designmarketingcreative
ckm:slides
nextlevelbuilder
Erstellen Sie strategische HTML-Präsentationen mit Chart.js, Design-Tokens, responsiven Layouts, Copywriting-Formeln und kontextuellen Folienstrategien.
designcreative
ckm:banner-design
nextlevelbuilder
Design-Banner für soziale Medien, Anzeigen, Website-Hero-Bereiche, kreative Assets und Druck. Mehrere Art-Direction-Optionen mit KI-generierten Bildern. Aktionen: Design, Erstellung, Banner-Generierung. Plattformen: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, Website-Hero, Print. Stile: minimalistisch, Verlauf, fette Typografie, fotobasiert, illustriert, geometrisch, Retro, Glassmorphismus, 3D, Neon, Duoton, Editorial, Collage. Nutzt ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal-Fähigkeiten.
designcreativemarketing
banner-design
nextlevelbuilder
Design-Banner für soziale Medien, Anzeigen, Website-Hero-Bereiche, kreative Assets und Druck. Mehrere Art-Direction-Optionen mit KI-generierten Bildern. Aktionen: Banner designen, erstellen, generieren. Plattformen: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, Website-Hero, Druck. Stile: minimalistisch, Farbverlauf, fette Typografie, fotobasiert, illustriert, geometrisch, Retro, Glassmorphism, 3D, Neon, Duotone, Editorial, Collage. Nutzt ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal-Fähigkeiten.
slides
nextlevelbuilder
Erstellen Sie strategische HTML-Präsentationen mit Chart.js, Design-Tokens, responsiven Layouts, Copywriting-Formeln und kontextuellen Folienstrategien.
designcreativedocument