/ Directory / Playground / hue
← All servers ↗ GitHub
● Community dominikmartn ⚡ Instant

hue

by dominikmartn · dominikmartn/hue

Feed hue a brand (URL, name, or screenshot) → get a full design language: tokens, typography, spacing, light/dark, hero recipes, icon kit, and a generated design-system skill.

dominikmartn/hue is an open-source Claude skill that turns any brand reference into a complete design system. Point it at cursor.com or Raycast, paste a screenshot, or name a mood — it analyzes and outputs color + typography + spacing tokens, a small component library, light/dark variants, hero recipes, and a matching icon kit. The design-language package includes YAML model files and sample HTML landing pages; it also generates a per-brand Claude skill you can reuse across sessions so your agent stays on-brand automatically.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

hue-brand-skill.replay ▶ ready
0/0

Install

Author repository · Claude Skills documentation

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.

Flow
  1. 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
  2. Preview
    Render a sample hero with the new system.✓ Copied
    → HTML sample showcases tokens in context

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
  1. Feed the image
    Generate a hue skill from this screenshot.✓ Copied
    → Colors sampled; type family inferred; spacing scale proposed
  2. 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
  1. 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

ToolInputsWhen to callCost
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.

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
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

AlternativeWhen to use it insteadTradeoff
claude-code-design-skillsYou have a frame to convert; you already have a brandDoesn't generate brand — consumes one
magic-ui-mcpYou want components off the shelf, not a brand systemLibrary, not language
claude-design-auditor-skillYou want to evaluate an existing design, not produce oneEvaluates, doesn't generate

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →