ejwhite7/brandkit-mcp

šŸ“ Architecture & Design
0 Views
0 Installs

šŸ“‡ šŸ  šŸŽ 🪟 🐧 - Expose a company's complete design system (colors, typography, logos, components, guidelines, CSS tokens) to AI tools via MCP. Auto-parses CSS / Markdown / PDF / SVG / fonts; supports marketing vs product contexts with shared overrides; ships 12 tools, 16+ resources under brandkit://, and 4 prompts; stdio + SSE + Streamable HTTP transports. Install via NPM: npx -y brandkit-mcp serve.

Quick Install

One-Click IDE Configuration
claude_desktop_config.json
{
  "mcpServers": {
    "ejwhite7-brandkit-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "ejwhite7-brandkit-mcp"
      ]
    }
  }
}
Or

Using an AI coding agent (Claude Code, Cursor, etc.)? Copy a ready-made prompt that tells it to fetch the setup instructions and install this server for you.

Documentation Overview

BrandKit MCP

Give every AI tool access to your company's complete brand atomic system via the Model Context Protocol.

npm version License: MIT Node 20+ TypeScript ejwhite7/brandkit-mcp MCP server

BrandKit MCP v2 is an open-source MCP server that exposes a company's complete brand atomic system -- verbal identity (positioning, audience, messaging, differentiation, concepts, voice) and visual identity (colors, typography, components, tokens, motion, assets) -- to Claude and other AI tools via the Model Context Protocol (MCP). It ships 18 tools and 14 resources. When an LLM helps build a website, app, or marketing asset, it has instant structured access to the exact brand language and visual rules it needs -- including a human-authored taste primer that carries the brand's instincts, not just its specs.

Quick Start

# 1. Install
npm install -g brandkit-mcp

# 2. Scaffold a new brand atomic system from the starter template
brandkit-mcp init

# 3. Edit the scaffolded files with your brand content

# 4. Wire into Claude Desktop (or any MCP-compatible client)
#    Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
#    {
#      "mcpServers": {
#        "brandkit": {
#          "command": "brandkit-mcp",
#          "args": ["serve"]
#        }
#      }
#    }

Repository Structure

A brand atomic system lives under a single <brand-root>/ directory (default: ./brand_atomic_system):

<brand-root>/
ā”œā”€ā”€ readme.md
ā”œā”€ā”€ magic_trick.md               # human-authored taste primer
ā”œā”€ā”€ brandkit.config.yaml         # version: 2
ā”œā”€ā”€ human/                       # PDFs and human-only material (MCP ignores)
│   └── *.pdf
└── agent/
    ā”œā”€ā”€ verbal/
    │   ā”œā”€ā”€ positioning.md
    │   ā”œā”€ā”€ audience.yaml
    │   ā”œā”€ā”€ messaging.md
    │   ā”œā”€ā”€ differentiation.md
    │   ā”œā”€ā”€ concepts.md
    │   └── voice.md
    └── visual/
        ā”œā”€ā”€ colors_and_type.css
        ā”œā”€ā”€ fonts/
        ā”œā”€ā”€ assets/
        ā”œā”€ā”€ components/
        ā”œā”€ā”€ tokens/
        ā”œā”€ā”€ motion/
        │   ā”œā”€ā”€ motion.json
        │   └── motion.css
        └── artifacts/
            ā”œā”€ā”€ web/             # override layer
            └── product/         # override layer

The human/ directory is intentionally ignored by the MCP server -- put PDFs, print specs, or any other human-only material there. Everything under agent/ is indexed and served.

MCP Tools Reference

BrandKit MCP exposes 18 tools to AI assistants:

ToolDescription
get_brand_overviewHigh-level overview + taste primer
get_magic_trickVerbatim magic_trick.md
get_positioningPositioning document
get_audienceAudience YAML, parsed
get_messagingMessaging document
get_differentiationDifferentiation document
get_conceptsCreative concepts/directions
get_voiceVoice document
get_colors_and_typeColors + typography custom properties
get_assetsLogos + brand assets
get_fontsFont faces
get_componentsUI primitives
get_tokensToken specimens
get_motionMotion system (json + css)
get_csscolors_and_type.css + motion.css text
search_brandFull-text search
validate_usageValidate brand compliance
get_context_diffDiff base vs web vs product

Taste primer

Seven creative/verbal tools (get_brand_overview, get_positioning, get_audience, get_messaging, get_differentiation, get_concepts, get_voice) inject a _taste_primer field carrying magic_trick.md verbatim. get_magic_trick returns the primer directly without wrapping.

MCP Resources

BrandKit MCP exposes 14 brand:// URIs as MCP resources:

URIDescription
brand://overviewBrand overview
brand://magic_trickTaste primer
brand://verbal/positioningPositioning document
brand://verbal/audienceAudience YAML
brand://verbal/messagingMessaging document
brand://verbal/differentiationDifferentiation document
brand://verbal/conceptsCreative concepts
brand://verbal/voiceVoice document
brand://visual/colors_and_typeColors + typography CSS
brand://visual/assetsAsset index
brand://visual/fontsFont face index
brand://visual/componentsComponent index
brand://visual/tokensToken specimens
brand://visual/motionMotion system

Configuration

The brandkit.config.yaml file at your project root controls BrandKit MCP:

version: 2
brand:
  name: Acme Corp
  description: Plumbing for builders.
  root: ./brand_atomic_system
contexts: [base, web, product]
ignore:
  - human/

version: 2 is required. A config file missing this field or declaring version: 1 causes the server to throw BrandkitV1ConfigError at startup.

Context System

BrandKit v2 supports three contexts:

ContextPurpose
baseShared foundation -- fonts, core colors, global tokens
webOverrides for the public-facing website (agent/visual/artifacts/web/)
productOverrides for the SaaS application (agent/visual/artifacts/product/)

Verbal content (agent/verbal/) has no context overrides -- it applies globally. Visual content can be overridden per context via the artifacts/ layer.

Migrating from v1

2.0.0 is a breaking release. The directory layout, context vocabulary, and tool surface have all changed. No automated migration is included -- the path mapping is manual:

v1 pathv2 path
brand/shared/colors/*.cssagent/visual/colors_and_type.css
brand/shared/typography/*.cssagent/visual/colors_and_type.css
brand/shared/logos/*agent/visual/assets/
brand/shared/components/*.mdagent/visual/components/*.md
brand/shared/voice/brand-voice.mdagent/verbal/voice.md
brand/shared/guidelines/*.mdagent/verbal/{positioning,messaging,differentiation,concepts}.md
brand/marketing/*agent/visual/artifacts/web/*
brand/product/*agent/visual/artifacts/product/*

Your brandkit.config.yaml must also be updated to declare version: 2 and use the new brand.root field. v1 configs throw BrandkitV1ConfigError at startup -- the server will not start until the config is updated.

Conventions

magic_trick.md is human-authored. The MCP reads it but no tool writes to it. If write tools are added in a future version, they must denylist this path. The taste primer is the brand's instincts -- it must stay human.

Token output formats. The get_tokens tool supports CSS custom properties, SCSS variables, Tailwind config, W3C Design Tokens, and flat JSON.

Transports. The server supports stdio (recommended for Claude Desktop), SSE (legacy HTTP), and Streamable HTTP (current MCP spec).

CLI Reference

brandkit-mcp <command> [options]

Commands:
  init [directory]      Scaffold a brand atomic system from the starter template
  validate [config]     Validate configuration and scan for issues
  serve                 Start the MCP server
  preview               Start the local preview UI for browsing the brand atomic system
  docs                  Generate project documentation files

Global Options:
  --version             Show version number
  --help                Show help

Contributing

Contributions are welcome.

git clone https://github.com/ejwhite7/brandkit-mcp
cd brandkit-mcp
npm install
npm run build
npm test
  • TypeScript strict mode
  • ESM imports with .js extensions
  • No any types -- use proper interfaces
  • Tests use Vitest

License

MIT -- see LICENSE for details.


Built with the Model Context Protocol by Anthropic.

Related MCP Servers

aidc2026ai-melon/aidc-ai-mcp

šŸŽ–ļø šŸ“‡ ā˜ļø - Deterministic AI data-center design engine exposed as MCP tools (design, validate, layout): rack count, design PUE, total MVA, liquid/air cooling split, CDU planning, cost & timeline. NVIDIA Rubin-era, 22.9 kV intake, Korea. Remote Streamable HTTP at https://aidc-ai.io/api/mcp; no key for the anonymous tier.

šŸ“ Architecture & Design0 views
awdr74100/figwright

šŸ“‡ šŸ  šŸŽ 🪟 🐧 - Bidirectional Figma server over a local WebSocket relay: turn a selection into framework-aware code (reusing your components and tokens), or author frames, text, styles, variables, and whole screens back onto the canvas. 92 tools, any MCP client, no Dev Mode seat or paid tier.

šŸ“ Architecture & Design0 views
betterhyq/mermaid-grammer-inspector-mcp

šŸ“‡ šŸ  šŸŽ 🪟 🐧 - A Model Context Protocol (MCP) server for validating Mermaid diagram syntax and providing comprehensive grammar checking capabilities

šŸ“ Architecture & Design0 views
BV-Venky/excalidraw-architect-mcp

šŸ šŸ  šŸŽ 🪟 🐧 - Generate beautiful Excalidraw architecture diagrams with auto-layout, architecture-aware component styling, and stateful editing. 50+ technology mappings including databases, message queues, caches, and more. No API keys required.

šŸ“ Architecture & Design0 views

Engagement

Views
0
Installs
0
Upvotes
0

Views and upvotes are unique per visitor network (hashed IP). Installs count copy actions.

Status

Health: Not checked yet

We have not completed a health check for this listing yet.

Last checked: 7/29/2026, 1:09:42 AM

Unclaimed listing (imported or pending owner verification). Claim it →
ā˜… Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to get the verified badge and attach your website.

Claim this listing

Promote this listing

Optional paid placement. Free listings stay free forever.

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.