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 Display、網站主視覺、印刷品。風格:極簡、漸層、粗體字型、照片式、插畫風、幾何、復古、玻璃擬態、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 Traditional Chinese. The text describes a banner design skill. We must preserve the name "banner-design" but it's not in the text, so we don't include it. We preserve product names, protocol names, URLs, numbers, technical terms. The text includes platform names like Facebook, Twitter/X, LinkedIn, etc., and style names like minimalist, gradient, etc. Also skill names like ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal. These should remain as is. Translate the rest into Traditional Chinese. Let's translate: "Design banners for social media, ads, website heroes, creative assets, and print." -> "為社交媒體、廣告、網站主視覺、創意素材和印刷品設計橫幅。" "Multiple art direction options with AI-generated visuals." -> "多種藝術方向選項,搭配AI生成的視覺效果。" "Actions: design, create, generate banner." -> "動作:設計、建立、生成橫幅。" "Platforms:
slides
nextlevelbuilder
使用Chart.js、設計標記、響應式佈局、文案撰寫公式及情境式投影片策略,建立具策略性的HTML簡報。
designcreativedocument