mcpField
B
brand

brand

github.com/nicohodtMarketing & growth1043 installsUpdated 12w ago
Repository

About brand

brand is a skill for defining and maintaining brand identity across messaging and visual assets. Its scripts inject brand context into prompts, sync guidelines to design tokens, and validate assets.

Key features

  1. 01Define brand voice and messaging
  2. 02Inject brand context into prompts
  3. 03Sync guidelines to design tokens
  4. 04Validate asset names, sizes, and formats
  5. 05Extract and compare brand colors

Use cases

  1. 01Set tone guidance for branded content
  2. 02Sync brand guidelines into design tokens
  3. 03Check assets against naming and format rules
  4. 04Compare colors with a brand palette

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nicohodt/claude-code-ui-ux-skill --skill brand

After installing, type/brandin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
approval-checklist.md
asset-organization.md
brand-guideline-template.md
color-palette-management.md
consistency-checklist.md
logo-usage-rules.md
messaging-framework.md
typography-specifications.md
update.md
visual-identity.md
voice-framework.md
scripts/
extract-colors.cjs
inject-brand-context.cjs
sync-brand-to-tokens.cjs
validate-asset.cjs
scripts/tests/
test_sync_brand_to_tokens.py
templates/
brand-guidelines-starter.md

Details

From the project README

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

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

Comments

Markdown supported