brand

Giọng điệu thương hiệu, nhận diện hình ảnh, khung truyền thông, quản lý tài sản thương hiệu, tính nhất quán thương hiệu. Kích hoạt cho nội dung có thương hiệu, giọng điệu, tài sản tiếp thị, tuân thủ thương hiệu, hướng dẫn phong cách.

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

Thêm skills từ nextlevelbuilder

ckm:design-system
nextlevelbuilder
Kiến trúc token, thông số kỹ thuật thành phần và tạo slide. Token ba lớp (nguyên thủy→ngữ nghĩa→thành phần), biến CSS, thang đo khoảng cách/kiểu chữ, thông số thành phần, tạo slide chiến lược. Sử dụng cho token thiết kế, thiết kế hệ thống, bài thuyết trình tuân thủ thương hiệu.
designdevelopmentcreative
ckm:design
nextlevelbuilder
Kỹ năng thiết kế toàn diện: nhận diện thương hiệu, design token, tạo kiểu giao diện, tạo logo (55 phong cách, Gemini AI), chương trình nhận diện doanh nghiệp (50 sản phẩm bàn giao, mô phỏng CIP), thuyết trình HTML (Chart.js), thiết kế banner (22 phong cách, mạng xã hội/quảng cáo/web/in ấn), thiết kế biểu tượng (15 phong cách, SVG, Gemini 3.1 Pro), ảnh mạng xã hội (HTML→ảnh chụp màn hình, đa nền tảng). Hành động: thiết kế logo, tạo CIP, tạo mô phỏng, xây dựng slide, thiết kế banner, tạo biểu tượng, tạo ảnh mạng xã hội
designcreativemedia
ckm:ui-styling
nextlevelbuilder
Tạo giao diện người dùng đẹp, dễ tiếp cận với các thành phần shadcn/ui (xây dựng trên Radix UI + Tailwind), kiểu dáng tiện ích ưu tiên của Tailwind CSS, và thiết kế trực quan dựa trên canvas. Sử dụng khi xây dựng giao diện người dùng, triển khai hệ thống thiết kế, tạo bố cục đáp ứng, thêm các thành phần dễ tiếp cận (hộp thoại, menu thả xuống, biểu mẫu, bảng), tùy chỉnh chủ đề và màu sắc, triển khai chế độ tối, tạo thiết kế trực quan và áp phích, hoặc thiết lập các mẫu kiểu dáng nhất quán trên các ứng dụng.
designdevelopmentcreative
ckm:brand
nextlevelbuilder
Giọng điệu thương hiệu, nhận diện hình ảnh, khung truyền thông, quản lý tài sản, tính nhất quán thương hiệu. Kích hoạt cho nội dung có thương hiệu, giọng điệu, tài sản tiếp thị, tuân thủ thương hiệu, hướng dẫn phong cách.
designmarketingcreative
ckm:slides
nextlevelbuilder
Tạo bài thuyết trình HTML chiến lược với Chart.js, token thiết kế, bố cục đáp ứng, công thức copywriting và chiến lược slide theo ngữ cảnh.
designcreative
ckm:banner-design
nextlevelbuilder
Thiết kế banner cho mạng xã hội, quảng cáo, hero trang web, tài sản sáng tạo và ấn phẩm in ấn. Nhiều tùy chọn định hướng nghệ thuật với hình ảnh do AI tạo. Hành động: thiết kế, tạo, sinh banner. Nền tảng: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero trang web, in ấn. Phong cách: tối giản, gradient, kiểu chữ đậm, dựa trên ảnh, minh họa, hình học, retro, glassmorphism, 3D, neon, duotone, biên tập, collage. Sử dụng các kỹ năng ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
designcreativemarketing
banner-design
nextlevelbuilder
Thiết kế banner cho mạng xã hội, quảng cáo, hero website, tài sản sáng tạo và ấn phẩm in ấn. Nhiều tùy chọn định hướng nghệ thuật với hình ảnh do AI tạo. Hành động: thiết kế, tạo, sinh banner. Nền tảng: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero website, in ấn. Phong cách: tối giản, gradient, kiểu chữ đậm, dựa trên ảnh, minh họa, hình học, retro, glassmorphism, 3D, neon, duotone, biên tập, collage. Sử dụng các kỹ năng ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal.
slides
nextlevelbuilder
Tạo bài thuyết trình HTML chiến lược với Chart.js, token thiết kế, bố cục đáp ứng, công thức viết quảng cáo và chiến lược slide theo ngữ cảnh.
designcreativedocument