hue MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

입력: 브랜드 URL, 이름 또는 스크린샷
출력: 토큰(색상, 유형, 간격), 구성 요소 라이브러리, 밝음/어두움, 영웅 레시피, 아이콘 키트
재사용 가능한 브랜드별 Claude 스킬 생성
참고용으로 저장소에 있는 17개 예시 브랜드(아틀라스, 벨벳 등)
일반 SKILL.md 형식; Claude Code 및 Codex와 함께 작동

라이브 데모

실제 사용 모습

hue-brand-skill.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/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
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.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는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

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

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "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
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

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

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

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

context_servers에 추가. 저장 시 Zed가 핫 리로드.

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

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: hue

경쟁사 사이트에서 디자인 시스템 파생

👤 제품 프로토타입을 빠르게 제작하는 창립자와 디자이너 ⏱ ~20 min beginner

언제 쓸까: 당신은 사이트의 미학을 좋아하고 같은 방향의 시작 시스템을 원합니다.

사전 조건

스킬 장착 — 자식 클론 https://github.com/dominikmartn/hue ~/.claude/skills/hue

흐름

URL을 가리킨다

Cursor.com에서 디자인 기술을 배워보세요.✓ 복사됨

→ 출력에는 색상 팔레트, 타이포그래피 쌍, 간격 비율, 구성 요소 및 생성된 SKILL.md가 포함됩니다.
시사

새로운 시스템으로 샘플 영웅을 렌더링합니다.✓ 복사됨

→ HTML 샘플은 컨텍스트에 따라 토큰을 보여줍니다.
스킬로 설치

생성된 브랜드 스킬을 ~/.claude/skills/brand-<name>/에 저장합니다.✓ 복사됨

→ SKILL.md가 등록되었습니다. 미래의 메시지는 브랜드를 선택합니다

결과: 에이전트가 모든 후속 UI 작업에 적용하는 재사용 가능한 브랜드 음성입니다.

함정

다른 사람의 브랜드를 그대로 사용 — 이를 출발점으로 삼고 배송 전에 토큰을 조정하세요.

함께 쓰기: claude-code-design-skills

스크린샷을 디자인 시스템으로 리버스 엔지니어링

👤 참조 이미지는 있지만 아직 시스템이 없는 디자이너 ⏱ ~15 min beginner

언제 쓸까: 마음에 드는 드리블 샷이 있고 이를 앱에 표시하고 싶습니다.

흐름

이미지 피드

이 스크린샷에서 색조 스킬을 생성하세요.✓ 복사됨

→ 샘플링된 색상; 유형군이 추론됨; 제안된 간격 척도
반복

악센트를 15% 어둡게 하고 간격을 4/8/12/16으로 조입니다.✓ 복사됨

→ 재생성된 토큰

결과: 단일 참조를 통해 깨끗하고 소유 가능한 시스템입니다.

함정

공격적인 압축을 사용하여 JPEG에서 팔레트 추출 — 팔레트 추출을 위해 PNG 또는 SVG 소스를 선호합니다.

다중 테넌트 제품에 대한 브랜드별 기술 생성

👤 화이트 라벨 UI를 배송하는 팀 ⏱ ~60 min intermediate

언제 쓸까: 5명의 고객이 있고 복제 작업 없이 5개의 브랜드 테마가 필요합니다.

흐름

일괄 생성

각 고객 브랜드 URL에 대해 ~/.claude/skills/brand-<slug>/에서 색조 스킬을 생성합니다.✓ 복사됨

→ 일관된 구조로 탄생한 N스킬
임차인별 적용

테넌트 X용 UI를 구축할 때 코드를 작성하기 전에 브랜드-X를 활성화하세요.✓ 복사됨

→ 에이전트가 올바른 토큰을 자동으로 적용합니다.

결과: 스킬 활성화를 통해 교체할 수 있는 화이트 라벨 테마.

함께 쓰기: claude-code-design-skills

조합

다른 MCP와 조합해 10배 효율

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

Figma 프레임을 코드로 변환할 때 Hue의 토큰을 사용하세요.

이 Figma 프레임을 Next.js로 변환할 때 브랜드 acme 토큰을 적용하세요.✓ 복사됨

hue-brand-skill + magic-ui-mcp

Magic UI 구성요소 선택, 색조 토큰을 통해 조정

Magic UI Blur-Fade를 설치하고 브랜드 Acme 악센트로 색상을 지정하세요.✓ 복사됨

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

생성된 브랜드 패스 대비 + a11y 규칙 확인

WCAG AA에 대한 브랜드 acme의 밝은 색상과 어두운 색상 팔레트를 감사합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
hue:generate (SKILL)	URL \| brand name \| screenshot + optional notes	신제품 출시 또는 고객 브랜드 온보딩 시	0

비용 및 제한

운영 비용

API 쿼터: 없음
호출당 토큰: 보통의; 생성된 아티팩트 합산
금액: 무료
팁: 한 번 생성하십시오. 세션 전반에 걸쳐 결과적인 브랜드별 기술을 재사용합니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 자격 증명 없음

데이터 외부 송신: URL 입력을 사용하는 경우 스킬이 URL을 가져옵니다. 스크린샷은 로컬에 유지됩니다.

URL에서 브랜드를 추출하면 다른 사람의 IP에 라이선스가 부여되지 않습니다. 직접적인 재생산이 아닌 영감으로 사용하세요.

문제 해결

자주 발생하는 오류와 해결

생성된 팔레트가 탁해 보입니다.

SVG/PNG 참조에 대한 편견; JPEG는 채도를 잃습니다. 또는 기술이 존중해야 할 육각 앵커를 제공하십시오.

확인: Inspect generated tokens.json for the flagged colors

브랜드별 스킬이 활성화되지 않습니다.

SKILL.md 설명은 트리거할 시기를 설명해야 합니다. 머리말 설명에 브랜드 이름이 포함되어 있는지 확인하세요.

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

어두운 모드에서는 대비가 실패합니다.

a11y-first 다크 모드로 Hue를 재생성하도록 요청하세요. 중립을 무시하십시오.

확인: Run claude-design-auditor on the dark variants

대안

hue 다른 것과 비교

대안	언제 쓰나	단점/장점
claude-code-design-skills	변환할 프레임이 있습니다. 당신은 이미 브랜드를 가지고 있습니다	브랜드를 생성하지 않고 하나를 소비합니다.
magic-ui-mcp	브랜드 시스템이 아닌 기성품 구성 요소를 원합니다.	언어가 아닌 도서관
claude-design-auditor-skill	디자인을 생산하는 것이 아니라 기존 디자인을 평가하고 싶습니다.	평가하고 생성하지 않음

hue