Suara merek, identitas visual, kerangka pesan, manajemen aset, konsistensi merek. Aktifkan untuk konten bermerek, nada suara, aset pemasaran, kepatuhan merek, panduan gaya.

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

Lebih banyak skill dari nextlevelbuilder

ckm:design-system
nextlevelbuilder
Arsitektur token, spesifikasi komponen, dan pembuatan slide. Token tiga lapis (primitif→semantik→komponen), variabel CSS, skala spasi/tipografi, spesifikasi komponen, pembuatan slide strategis. Gunakan untuk token desain, desain sistematis, presentasi yang sesuai merek.
designdevelopmentcreative
ckm:design
nextlevelbuilder
Keahlian desain komprehensif: identitas merek, token desain, gaya UI, pembuatan logo (55 gaya, Gemini AI), program identitas perusahaan (50 hasil, mockup CIP), presentasi HTML (Chart.js), desain spanduk (22 gaya, sosial/iklan/web/cetak), desain ikon (15 gaya, SVG, Gemini 3.1 Pro), foto sosial (HTML→tangkapan layar, multi-platform). Tindakan: desain logo, buat CIP, hasilkan mockup, buat slide, desain spanduk, hasilkan ikon, buat foto sosial, gambar media sosial, merek...
designcreativemedia
ckm:ui-styling
nextlevelbuilder
Buat antarmuka pengguna yang indah dan mudah diakses dengan komponen shadcn/ui (dibangun di atas Radix UI + Tailwind), gaya utilitas-first Tailwind CSS, dan desain visual berbasis kanvas. Gunakan saat membangun antarmuka pengguna, menerapkan sistem desain, membuat tata letak responsif, menambahkan komponen yang dapat diakses (dialog, dropdown, formulir, tabel), menyesuaikan tema dan warna, menerapkan mode gelap, menghasilkan desain visual dan poster, atau menetapkan pola gaya yang konsisten di seluruh aplikasi.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
Suara merek, identitas visual, kerangka pesan, manajemen aset, konsistensi merek. Aktifkan untuk konten bermerek, nada suara, aset pemasaran, kepatuhan merek, panduan gaya.
designmarketingcreative
ckm:slides
nextlevelbuilder
Buat presentasi HTML strategis dengan Chart.js, token desain, tata letak responsif, formula copywriting, dan strategi slide kontekstual.
designcreative
ckm:banner-design
nextlevelbuilder
Rancang banner untuk media sosial, iklan, hero website, aset kreatif, dan cetak. Berbagai opsi arahan seni dengan visual yang dihasilkan AI. Tindakan: mendesain, membuat, menghasilkan banner. Platform: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero website, cetak. Gaya: minimalis, gradien, tipografi tebal, berbasis foto, ilustrasi, geometris, retro, glassmorphism, 3D, neon, duotone, editorial, kolase. Menggunakan keterampilan ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
designcreativemarketing
banner-design
nextlevelbuilder
Desain banner untuk media sosial, iklan, hero website, aset kreatif, dan cetak. Berbagai opsi arahan seni dengan visual yang dihasilkan AI. Tindakan: mendesain, membuat, menghasilkan banner. Platform: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero website, cetak. Gaya: minimalis, gradien, tipografi tebal, berbasis foto, ilustrasi, geometris, retro, glassmorphism, 3D, neon, duotone, editorial, kolase. Menggunakan keterampilan ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
slides
nextlevelbuilder
Buat presentasi HTML strategis dengan Chart.js, token desain, tata letak responsif, formula copywriting, dan strategi slide kontekstual.
designcreativedocument