brand

品牌语调、视觉识别、信息传达框架、资产管理、品牌一致性。适用于品牌内容、语气语调、营销素材、品牌合规、风格指南。

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
Token架构、组件规范与幻灯片生成。三层Token(基础→语义→组件)、CSS变量、间距/排版比例、组件规范、战略性幻灯片创建。适用于设计Token、系统化设计、符合品牌规范的演示文稿。
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展示广告、网站主视觉、印刷品。风格:极简、渐变、粗体排版、照片风格、插画、几何、复古、玻璃拟态、3D、霓虹、双色调、编辑风、拼贴。使用ui-ux-pro-max、frontend-design、ai-artist、ai-multimodal技能。
designcreativemarketing
banner-design
nextlevelbuilder
We need to translate the given text from English to Simplified Chinese. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. The name "banner-design" is to be preserved only if it appears in the source text. It does not appear in the <text> block, so we don't include it. Also, do not include labels like "description" etc. Just translate the text inside <text>. The text describes designing banners for various platforms and styles, and mentions skills. We need to translate naturally while keeping terms like "Facebook", "Twitter/X", "LinkedIn", "YouTube", "Instagram", "Google Display", "ui-ux-pro-max", "frontend-design", "ai-artist", "ai-multimodal" as they are. Also numbers and style names like "minimalist", "gradient" etc. should be translated? The instruction says "preserve product names, protocol names, URLs, numbers, and technical terms." Style names like "minimalist" are not product names, they are descriptive
slides
nextlevelbuilder
使用Chart.js、设计令牌、响应式布局、文案撰写公式和上下文幻灯片策略,创建战略性HTML演示文稿。
designcreativedocument