Server data from the Official MCP Registry
Expose a company's design system to AI tools via MCP: colors, typography, logos, tokens.
Expose a company's design system to AI tools via MCP: colors, typography, logos, tokens.
BrandKit MCP is a well-structured design-system server with appropriate permissions for its purpose and generally sound code practices. File I/O, network access, and env var reading are all justified by its core functionality. However, several code-quality findings and a few moderate security concerns prevent a higher score: unsanitized user input in CLI commands, potential path traversal vulnerabilities, broad exception handling without validation, and missing input validation on tool parameters. Supply chain analysis found 7 known vulnerabilities in dependencies (0 critical, 2 high severity). Package verification found 1 issue.
5 files analyzed · 16 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
This plugin requests these system permissions. Most are normal for its category.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-ejwhite7-brandkit-mcp": {
"args": [
"-y",
"brandkit-mcp"
],
"command": "npx"
}
}
}From the project's GitHub README.
Give every AI tool access to your company's complete design system via the Model Context Protocol.
BrandKit MCP is an open-source MCP server that makes your design system natively accessible to Claude, Cursor, and any MCP-compatible AI tool. Drop your brand files in, connect once, and every AI session has access to your exact colors, typography, components, guidelines, and more.
brandkit:// URI scheme), and 4 reusable prompts (design-with-brand, audit-brand-compliance, generate-tailwind-theme, explain-brand-decision).# 1. Clone and install
git clone https://github.com/ejwhite7/brandkit-mcp
cd brandkit-mcp
npm install
npm run build
# 2. Initialize your brand directory
node dist/cli/index.js init --name "YourBrand"
# Or install globally with npm link
npm link
brandkit-mcp init --name "YourBrand"
# 3. Add your design files to the brand/ directory
# Drop CSS files, markdown docs, logos, fonts, PDFs...
# 4. Start the MCP server
node dist/cli/index.js serve
# 5. Or start the preview server to browse visually
node dist/cli/index.js preview --open
Note: Once the package is published to npm,
npx brandkit-mcp@latest initwill work directly without cloning.
Add BrandKit MCP to your Claude Desktop configuration file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"brandkit": {
"command": "node",
"args": ["/path/to/brandkit-mcp/dist/cli/index.js", "serve"],
"env": {}
}
}
}
{
"mcpServers": {
"brandkit": {
"transport": "sse",
"url": "http://localhost:3001/sse"
}
}
}
Start the SSE server first:
node dist/cli/index.js serve --transport sse --port 3001
| File Type | Extensions | What BrandKit MCP Extracts |
|---|---|---|
| CSS | .css | Color tokens, typography tokens, custom properties, media queries |
| Markdown | .md | Component docs, brand guidelines, voice & tone, color palettes |
.pdf | Brand guidelines, usage rules, text content | |
| SVG | .svg | Logo variants, icons, textures/patterns |
| Images | .png, .jpg, .webp | Logo variants with dimensions, textures/patterns |
| Fonts | .woff2, .woff, .ttf, .otf | Font family, weight, style metadata |
BrandKit MCP scans a brand/ directory with three context levels:
brand/
shared/ # Tokens and assets shared across all contexts
colors/
colors.css # CSS custom properties for color tokens
typography/
typography.css # Font families, sizes, weights, line heights
logos/
logo-primary.svg # Primary logo
logo-mark.svg # Logo mark / icon
logo-wordmark.svg # Text-only logo
usage-guidelines.md # Logo usage rules
voice/
brand-voice.md # Brand personality, tone, writing principles
guidelines/
accessibility.md # WCAG compliance, contrast ratios
spacing.md # Spacing system documentation
marketing/ # Marketing-site-specific overrides and assets
colors/
marketing-overrides.css # Warmer accent tones for landing pages
components/
hero-section.md # Hero section specs and examples
feature-card.md # Feature card component docs
guidelines/
marketing-writing.md # Headline and CTA guidelines
product/ # Product-app-specific overrides and assets
colors/
product-overrides.css # Subdued accent tones for the app UI
components/
data-table.md # Data table component specs
sidebar-nav.md # Navigation component docs
guidelines/
ui-patterns.md # Loading states, empty states, forms
Convention: Subdirectory names (colors/, typography/, logos/, components/, guidelines/, voice/, textures/) determine how files are parsed. Place files in the matching directory for automatic classification.
BrandKit MCP exposes 12 tools to AI assistants:
| # | Tool | Description | Key Parameters |
|---|---|---|---|
| 1 | get_brand_overview | High-level summary of the entire design system | (none) |
| 2 | get_colors | All color tokens with hex values, roles, and usage | context, role |
| 3 | get_typography | Font families, sizes, weights, and line heights | context |
| 4 | get_logos | Logo variants with metadata and usage guidelines | context, variant, include_base64 |
| 5 | get_components | Component documentation, specs, and code examples | context, category, name |
| 6 | get_guidelines | Brand voice, accessibility, and design guidelines | context, section |
| 7 | get_tokens | Design tokens in any of 5 output formats | context, format, category |
| 8 | get_textures | Background textures and patterns | context |
| 9 | get_css | Raw parsed CSS with all custom properties | context |
| 10 | search_brand | Full-text search across the entire design system | query, context, type, limit |
| 11 | get_context_diff | Differences between marketing and product contexts | aspect |
| 12 | validate_usage | Validate color/typography usage against the system | colors, fonts, context |
Get all colors for the marketing context:
{
"tool": "get_colors",
"arguments": {
"context": "marketing",
"role": "accent"
}
}
Response:
## Colors (marketing context, role: accent)
| Token | Name | Hex | Role | Usage |
|-------|------|-----|------|-------|
| --color-accent | Accent | #ff6b6b | accent | Primary accent for CTAs |
| --color-accent-light | Accent Light | #ff8787 | accent | Hover states |
| --color-accent-dark | Accent Dark | #e63946 | accent | Active/pressed states |
Search across the design system:
{
"tool": "search_brand",
"arguments": {
"query": "button hover state",
"context": "all",
"limit": 5
}
}
Export tokens as Tailwind config:
{
"tool": "get_tokens",
"arguments": {
"format": "tailwind",
"context": "product",
"category": "colors"
}
}
Compare marketing vs product design systems:
{
"tool": "get_context_diff",
"arguments": {
"aspect": "colors"
}
}
Validate that your code uses approved colors:
{
"tool": "validate_usage",
"arguments": {
"colors": ["#1a1a2e", "#ff0000", "#e94560"],
"context": "marketing"
}
}
BrandKit MCP supports three directory-level contexts that model how real design systems work:
| Context | Directory | Purpose |
|---|---|---|
| shared | brand/shared/ | Tokens and guidelines common to both contexts. Acts as the default layer. |
| marketing | brand/marketing/ | Overrides and additions for the public-facing marketing website. |
| product | brand/product/ | Overrides and additions for the SaaS product application. |
shared/ is available to both contexts.shared/colors/colors.css defines --color-accent: #e94560 and marketing/colors/overrides.css defines --color-accent: #ff6b6b, then marketing context returns #ff6b6b.product/components/ won't appear in marketing results.context: "all" returns every asset from all three directories.context: "marketing" when generating landing pages, marketing emails, blog posts, or ad copy.context: "product" when building app features, dashboards, settings pages, or in-app messaging.context: "all" when you need a complete inventory or are searching broadly.context (defaults to "all") for general exploration.The get_tokens tool supports 5 output formats:
:root {
--color-primary: #1a1a2e;
--color-secondary: #0f3460;
--color-accent: #e94560;
--font-family-primary: 'Inter', sans-serif;
--font-size-base: 1rem;
}
$color-primary: #1a1a2e;
$color-secondary: #0f3460;
$color-accent: #e94560;
$font-family-primary: 'Inter', sans-serif;
$font-size-base: 1rem;
module.exports = {
theme: {
extend: {
colors: {
primary: '#1a1a2e',
secondary: '#0f3460',
accent: '#e94560',
},
fontFamily: {
primary: ["'Inter'", 'sans-serif'],
},
fontSize: {
base: '1rem',
},
},
},
};
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"color": {
"primary": { "$type": "color", "$value": "#1a1a2e" },
"secondary": { "$type": "color", "$value": "#0f3460" },
"accent": { "$type": "color", "$value": "#e94560" }
}
}
{
"colors": {
"--color-primary": { "value": "#1a1a2e", "name": "Primary" },
"--color-secondary": { "value": "#0f3460", "name": "Secondary" },
"--color-accent": { "value": "#e94560", "name": "Accent" }
}
}
BrandKit MCP can auto-generate project documentation files that give AI tools persistent context about your design system. Run:
node dist/cli/index.js docs
This generates four files:
| File | Purpose |
|---|---|
| CLAUDE.md | Project overview with tool usage instructions for Claude |
| AGENTS.md | Multi-agent workflow context with design system summary |
| SKILLS.md | Reusable skill definitions for design token lookup |
| DESIGN.md | Complete design system reference document |
Each generated file uses a clearly marked section that BrandKit MCP owns:
(auto-generated content here)
Content outside these delimiters is preserved when you regenerate. This lets you add custom notes above or below the auto-generated section.
The preview server provides a visual browser for your design system at http://localhost:3000.
node dist/cli/index.js preview --port 3000 --watch --open
| Page | URL | Description |
|---|---|---|
| Dashboard | / | Overview with asset counts and quick links |
| Colors | /colors | Color palette with swatches, hex values, and roles |
| Typography | /typography | Font specimens with all sizes and weights |
| Logos | /logos | Logo variants grid with download metadata |
| Components | /components | Component documentation with code examples |
| Guidelines | /guidelines | Brand voice, accessibility, and design guidelines |
| Textures | /textures | Background textures and patterns gallery |
| Tokens | /tokens | Token export in all 5 formats with copy-to-clipboard |
| CSS | /css | Raw parsed CSS custom properties |
| Search | /search | Full-text search across the design system |
The --watch flag enables hot reload: edit a brand file and the preview updates automatically.
The simplest setup. The MCP server communicates over stdin/stdout:
node dist/cli/index.js serve
Configure Claude Desktop to launch the server automatically (see Claude Desktop Setup).
Starts an HTTP server with Server-Sent Events transport:
node dist/cli/index.js serve --transport sse --port 3001 --watch
Connect any MCP client to http://localhost:3001/sse.
Build and run with Docker:
docker build -t brandkit-mcp .
docker run -p 3001:3001 -v $(pwd)/brand:/app/brand:ro brandkit-mcp
Or use Docker Compose:
docker-compose up
This starts both the MCP server (port 3001) and the preview server (port 3000).
Deploy as a Vercel serverless function:
npm i -g vercelvercel --prodhttps://your-project.vercel.app/api/sseThe vercel.json configuration routes /api/sse and /api/messages to the adapter.
Deploy to Cloudflare Workers:
npm i -g wranglerwrangler.toml with your account detailswrangler deployRun a plain Node.js HTTP server without Express:
node dist/adapters/standalone.js
Or programmatically:
import { startStandaloneServer } from 'brandkit-mcp/adapters/standalone';
await startStandaloneServer(3001, './brandkit.config.yaml');
brandkit-mcp <command> [options]
Commands:
init [directory] Initialize a new brand directory with starter files
validate [config] Validate configuration and scan for issues
serve Start the MCP server
preview Start the local preview server
docs Generate project documentation files
Global Options:
--version Show version number
--help Show help
init [directory]Create a new brand directory with starter configuration and example files.
brandkit-mcp init .
brandkit-mcp init ./my-brand --name "Acme Corp"
brandkit-mcp init . --force # Overwrite existing files
| Option | Description |
|---|---|
--name <name> | Brand name for the config file |
--force | Overwrite existing files without prompting |
validate [config-path]Validate the design system configuration and report any issues.
brandkit-mcp validate
brandkit-mcp validate ./brandkit.config.yaml
Checks:
serveStart the MCP server for AI tool connections.
brandkit-mcp serve
brandkit-mcp serve --transport sse --port 3001
brandkit-mcp serve --config ./custom-config.yaml --watch
| Option | Description | Default |
|---|---|---|
--transport <type> | Transport: stdio or sse | stdio |
--port <number> | Port for SSE transport | 3001 |
--config <path> | Path to config file | auto-detect |
--watch | Enable hot reload | false |
previewLaunch the visual preview server.
brandkit-mcp preview
brandkit-mcp preview --port 8080 --watch --open
| Option | Description | Default |
|---|---|---|
--port <number> | Preview server port | 3000 |
--config <path> | Path to config file | auto-detect |
--watch | Enable hot reload | false |
--open | Open browser automatically | false |
docsGenerate project documentation files for AI tools.
brandkit-mcp docs
brandkit-mcp docs --output ./docs --config ./brandkit.config.yaml
| Option | Description | Default |
|---|---|---|
--config <path> | Path to config file | auto-detect |
--output <dir> | Output directory for generated files | . |
Generates: CLAUDE.md, AGENTS.md, SKILLS.md, DESIGN.md
The brandkit.config.yaml file controls all aspects of BrandKit MCP:
# Required: your brand name
name: "Acme Corp"
# Optional: description shown in MCP server metadata
description: "Design system for Acme Corporation"
# Semantic version of your design system
version: "2.0.0"
# Context configuration
contexts:
marketing:
enabled: true
label: "Marketing Website"
description: "Public-facing marketing site (acme.com)"
product:
enabled: true
label: "Product App"
description: "SaaS application (app.acme.com)"
# Directory path overrides (relative to config file)
paths:
brand: "./brand"
shared: "./brand/shared"
marketing: "./brand/marketing"
product: "./brand/product"
# Preview server settings
preview:
port: 3000
host: localhost
# MCP server settings
server:
transport: stdio # "stdio" or "sse"
port: 3001 # Used when transport is "sse"
host: localhost
The only required field is name. Everything else has sensible defaults.
Contributions are welcome! Here's how to get started:
git clone https://github.com/anthropics/brandkit-mcp.git
cd brandkit-mcp
npm install
npm run build
npm run dev # Watch mode
src/parsers/your-parser.tssrc/types/design-system.tsclassifyFileType() in src/scanner/directory-scanner.tsprocessFile() in src/indexer/index.tssrc/tests/parsers.test.tssrc/tools/your-tool.tsTOOL_NAME, TOOL_DESCRIPTION, INPUT_SCHEMA, and handler()src/types/mcp.tssrc/tools/index.ts.js extensionsany types -- use proper interfacesnpm test # Run all tests
npm run test:watch # Watch mode
npx vitest run src/tests/parsers.test.ts # Single file
A complete example design system is included at examples/acme-corp/. It demonstrates:
To try it:
cd examples/acme-corp
node dist/cli/index.js preview --open
A minimal starter template is available at templates/starter/. Use it as a starting point:
cp -r templates/starter/* .
node dist/cli/index.js validate
MIT -- see LICENSE for details.
Built with the Model Context Protocol by Anthropic.
Be the first to review this server!
by Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
by Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.