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ディスプレイ、ウェブサイトヒーロー、印刷物。スタイル:ミニマリスト、グラデーション、大胆なタイポグラフィ、写真ベース、イラストレーション、幾何学、レトロ、グラスモーフィズム、3D、ネオン、デュオトーン、エディトリアル、コラージュ。ui-ux-pro-max、frontend-design、ai-artist、ai-multimodalスキルを使用。
designcreativemarketing
banner-design
nextlevelbuilder
ソーシャルメディア、広告、ウェブサイトヒーロー、クリエイティブアセット、印刷物向けのバナーをデザインします。AI生成ビジュアルによる複数のアートディレクションオプション。アクション:バナーのデザイン、作成、生成。プラットフォーム:Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Googleディスプレイ、ウェブサイトヒーロー、印刷物。スタイル:ミニマリスト、グラデーション、大胆なタイポグラフィ
slides
nextlevelbuilder
Chart.js、デザイントークン、レスポンシブレイアウト、コピーライティングの公式、コンテキストに応じたスライド戦略を用いて、戦略的なHTMLプレゼンテーションを作成します。
designcreativedocument