hue MCP — Use Cases, Install & Live Demo

Why use it

Key features

Inputs: brand URL, name, or screenshot
Outputs: tokens (color, type, spacing), component library, light/dark, hero recipes, icon kit
Generates a reusable per-brand Claude skill
17 example brands in the repo (atlas, velvet, …) for reference
Plain SKILL.md format; works with Claude Code and Codex

Live Demo

What it looks like in practice

hue-brand-skill.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "hue-brand-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "hue-brand-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/hue",
          "~/.claude/skills/hue"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add hue-brand-skill -- git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use hue

Derive a design system from a competitor's site

👤 Founders and designers fast-prototyping a product ⏱ ~20 min beginner

When to use: You love a site's aesthetic and want a starter system in the same direction.

Prerequisites

Skill installed — git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

Flow

Point at a URL

Make a design skill from cursor.com.✓ Copied

→ Output includes color palette, typography pair, spacing scale, components, and a generated SKILL.md
Preview

Render a sample hero with the new system.✓ Copied

→ HTML sample showcases tokens in context
Install as a skill

Save the generated brand skill to ~/.claude/skills/brand-<name>/.✓ Copied

→ SKILL.md registered; future prompts pick up the brand

Outcome: A reusable brand voice your agent applies to every subsequent UI task.

Pitfalls

Using someone else's brand verbatim — Treat it as a starting point and tune tokens before shipping

Combine with: claude-code-design-skills

Reverse-engineer a screenshot into a design system

👤 Designers with reference images but no system yet ⏱ ~15 min beginner

When to use: You have a Dribbble shot you love and want its look in your app.

Flow

Feed the image

Generate a hue skill from this screenshot.✓ Copied

→ Colors sampled; type family inferred; spacing scale proposed
Iterate

Darken the accent 15%, tighten spacing to 4/8/12/16.✓ Copied

→ Tokens regenerated

Outcome: A clean, ownable system from a single reference.

Pitfalls

Extracting a palette from a JPEG with aggressive compression — Prefer PNG or SVG sources for palette extraction

Generate per-brand skills for a multi-tenant product

👤 Teams shipping white-label UIs ⏱ ~60 min intermediate

When to use: You have 5 customers and need 5 on-brand themes without cloning work.

Flow

Batch generate

For each customer brand URL, generate a hue skill under ~/.claude/skills/brand-<slug>/.✓ Copied

→ N skills created with consistent structure
Apply per tenant

When building UI for tenant X, activate brand-X before writing code.✓ Copied

→ Agent applies correct tokens automatically

Outcome: White-label themes you can swap via skill activation.

Combine with: claude-code-design-skills

Combinations

Pair with other MCPs for X10 leverage

hue-brand-skill + claude-code-design-skills

Use hue's tokens when converting Figma frames to code

Apply brand-acme tokens when converting this Figma frame to Next.js.✓ Copied

hue-brand-skill + magic-ui-mcp

Pick Magic UI components, tune via hue tokens

Install Magic UI blur-fade, color it with brand-acme accent.✓ Copied

hue-brand-skill + claude-design-auditor-skill

Verify generated brand passes contrast + a11y rules

Audit brand-acme's light and dark palettes for WCAG AA.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
hue:generate (SKILL)	URL \| brand name \| screenshot + optional notes	Start of a new product or when onboarding a customer's brand	0

Cost & Limits

What this costs to run

API quota: None
Tokens per call: Moderate; generated artifacts add up
Monetary: Free
Tip: Generate once; reuse the resulting per-brand skill across sessions.

Security

Permissions, secrets, blast radius

Credential storage: No credentials

Data egress: If URL input is used, the skill fetches the URL. Screenshots stay local.

Brand extraction from a URL doesn't license anyone's IP — use as inspiration, not direct reproduction.
Screenshots of other products fall under their copyright. Generate your own brand, don't clone theirs.

Troubleshooting

Common errors and fixes

Generated palette looks muddy

Bias toward SVG/PNG reference; JPEGs lose saturation. Or provide hex anchors the skill should honor.

Verify: Inspect generated tokens.json for the flagged colors

Per-brand skill doesn't activate

SKILL.md description must describe when to trigger; ensure the frontmatter description includes the brand name.

Verify: head ~/.claude/skills/brand-<name>/SKILL.md

Contrast fails in dark mode

Ask hue to regenerate with a11y-first dark mode; override neutrals.

Verify: Run claude-design-auditor on the dark variants

Alternatives

hue vs others

Alternative	When to use it instead	Tradeoff
claude-code-design-skills	You have a frame to convert; you already have a brand	Doesn't generate brand — consumes one
magic-ui-mcp	You want components off the shelf, not a brand system	Library, not language
claude-design-auditor-skill	You want to evaluate an existing design, not produce one	Evaluates, doesn't generate

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills