brand

작성자: nextlevelbuilder

브랜드 보이스, 시각적 아이덴티티, 메시징 프레임워크, 자산 관리, 브랜드 일관성. 브랜드 콘텐츠, 톤 앤 보이스, 마케팅 자산, 브랜드 컴플라이언스, 스타일 가이드에 활성화하세요.

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

nextlevelbuilder의 다른 스킬

ckm:design-system
nextlevelbuilder
토큰 아키텍처, 컴포넌트 명세, 슬라이드 생성. 3계층 토큰(원시→의미→컴포넌트), CSS 변수, 간격/타이포그래피 스케일, 컴포넌트 명세, 전략적 슬라이드 제작. 디자인 토큰, 체계적 디자인, 브랜드 준수 프레젠테이션에 사용합니다.
designdevelopmentcreative
ckm:design
nextlevelbuilder
포괄적인 디자인 스킬: 브랜드 아이덴티티, 디자인 토큰, UI 스타일링, 로고 생성 (55개 스타일, Gemini AI), 기업 아이덴티티 프로그램 (50개 산출물, CIP 목업), HTML 프레젠테이션 (Chart.js), 배너 디자인 (22개 스타일, 소셜/광고/웹/인쇄), 아이콘 디자인 (15개 스타일, SVG, Gemini 3.1 Pro), 소셜 사진 (HTML→스크린샷, 멀티 플랫폼). 액션: 로고 디자인, CIP 생성, 목업 생성, 슬라이드 제작, 배너 디자인, 아이콘 생성, 소셜 사진 생성, 소셜 미디어 이미지, 브랜드...
designcreativemedia
ckm:ui-styling
nextlevelbuilder
shadcn/ui 컴포넌트(Radix UI + Tailwind 기반), Tailwind CSS 유틸리티 우선 스타일링, 캔버스 기반 시각 디자인을 활용하여 아름답고 접근성 높은 사용자 인터페이스를 제작합니다. 사용자 인터페이스 구축, 디자인 시스템 구현, 반응형 레이아웃 생성, 접근성 높은 컴포넌트(대화상자, 드롭다운, 폼, 테이블) 추가, 테마 및 색상 커스터마이징, 다크 모드 구현, 시각 디자인 및 포스터 생성, 애플리케이션 전반에 일관된 스타일링 패턴을 확립할 때 사용하세요.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
브랜드 보이스, 시각적 아이덴티티, 메시징 프레임워크, 자산 관리, 브랜드 일관성. 브랜드 콘텐츠, 톤 앤 보이스, 마케팅 자산, 브랜드 컴플라이언스, 스타일 가이드에 활성화하세요.
designmarketingcreative
ckm:slides
nextlevelbuilder
Chart.js, 디자인 토큰, 반응형 레이아웃, 카피라이팅 공식, 맥락 기반 슬라이드 전략을 활용하여 전략적인 HTML 프레젠테이션을 제작합니다.
designcreative
ckm:banner-design
nextlevelbuilder
소셜 미디어, 광고, 웹사이트 히어로, 크리에이티브 에셋 및 인쇄물용 배너를 디자인합니다. AI 생성 비주얼을 활용한 다양한 아트 디렉션 옵션 제공. 작업: 배너 디자인, 제작, 생성. 플랫폼: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, 웹사이트 히어로, 인쇄물. 스타일: 미니멀리스트, 그라데이션, 굵은 타이포그래피, 사진 기반, 일러스트, 기하학적, 레트로, 글래스모피즘, 3D, 네온, 듀오톤, 에디토리얼, 콜라주. ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal 스킬을 사용합니다.
designcreativemarketing
banner-design
nextlevelbuilder
소셜 미디어, 광고, 웹사이트 히어로, 크리에이티브 에셋, 인쇄물용 배너를 디자인합니다. AI 생성 비주얼을 활용한 다양한 아트 디렉션 옵션을 제공합니다. 작업: 배너 디자인, 제작, 생성. 플랫폼: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, 웹사이트 히어로, 인쇄물. 스타일: 미니멀리스트, 그라데이션, 볼드 타이포그래피, 사진 기반, 일러스트, 기하학, 레트로, 글래스모피즘, 3D, 네온, 듀오톤, 에디토리얼, 콜라주. ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal 스킬을 사용합니다.
slides
nextlevelbuilder
Chart.js, 디자인 토큰, 반응형 레이아웃, 카피라이팅 공식, 상황별 슬라이드 전략을 활용하여 전략적인 HTML 프레젠테이션을 제작합니다.
designcreativedocument