hue MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Входные данные: URL бренда, название или скриншот.
Выходы: жетоны (цвет, тип, расстояние), библиотека компонентов, светлый/темный, рецепты героев, набор иконок.
Генерирует многоразовый навык Клода для каждого бренда.
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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "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 использует массив объектов серверов, а не map.

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

Когда использовать: Вам нравится эстетика сайта, и вам нужна стартовая система в том же направлении.

Предварительные требования

Навык установлен — git клон https://github.com/dominikmartn/hue ~/.claude/skills/hue

Поток

Наведите указатель на URL-адрес

Освойте дизайнерские навыки на сайте курсора.com.✓ Скопировано

→ Выходные данные включают цветовую палитру, типографскую пару, масштаб интервалов, компоненты и сгенерированный файл SKILL.md.
Предварительный просмотр

Отрисуйте образец героя с помощью новой системы.✓ Скопировано

→ Пример HTML демонстрирует токены в контексте
Установить как навык

Сохраните созданный навык бренда в ~/.claude/skills/brand-<name>/.✓ Скопировано

→ SKILL.md зарегистрирован; будущие подсказки подбери бренд

Итог: Многоразовый фирменный голос, который ваш агент применяет к каждой последующей задаче пользовательского интерфейса.

Подводные камни

Использование чужого бренда дословно — Рассматривайте его как отправную точку и настраивайте токены перед отправкой.

Сочетать с: claude-code-design-skills

Реверс-инжиниринг скриншота в дизайн-систему

👤 Дизайнеры имеют эталонные изображения, но еще не имеют системы ⏱ ~15 min beginner

Когда использовать: У вас есть снимок Dribbble, который вам нравится, и вы хотите, чтобы он выглядел в вашем приложении.

Поток

Подайте изображение

Создайте навык оттенка из этого скриншота.✓ Скопировано

→ Цвета выбраны; предполагаемое типовое семейство; предлагаемая шкала интервалов
Итерировать

Затемните акцент на 15%, уменьшите интервал до 4/8/12/16.✓ Скопировано

→ Токены восстановлены

Итог: Чистая, удобная система из одного источника.

Подводные камни

Извлечение палитры из JPEG с агрессивным сжатием — Предпочитайте источники PNG или SVG для извлечения палитры.

Формируйте навыки работы с брендом для мультитенантного продукта.

👤 Команды, выпускающие пользовательские интерфейсы с белой этикеткой ⏱ ~60 min intermediate

Когда использовать: У вас 5 клиентов, и вам нужно 5 фирменных тем без необходимости клонирования.

Поток

Пакетная генерация

Для каждого URL-адреса бренда клиента создайте навык оттенка в ~/.claude/skills/brand-<slug>/.✓ Скопировано

→ N навыков, созданных с последовательной структурой
Подать заявку на каждого арендатора

При создании пользовательского интерфейса для клиента X активируйте бренд-X перед написанием кода.✓ Скопировано

→ Агент автоматически применяет правильные токены

Итог: Темы White-label, которые можно поменять с помощью активации навыка.

Сочетать с: claude-code-design-skills

Комбинации

Сочетайте с другими MCP — эффект x10

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

Используйте токены оттенка при преобразовании кадров Figma в код

Примените токены бренда при преобразовании этого фрейма Figma в Next.js.✓ Скопировано

hue-brand-skill + magic-ui-mcp

Выбирайте компоненты Magic UI и настраивайте их с помощью токенов оттенка.

Установите Magic UI размытие-затухание и раскрасьте его яркими акцентами.✓ Скопировано

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

Проверка контрастности сгенерированных пропусков бренда + правил a11y

Аудит светлых и темных палитр бренда для WCAG AA.✓ Скопировано

Инструменты

Что предоставляет этот 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; переопределить нейтралы.

Проверить: Run claude-design-auditor on the dark variants

Альтернативы

hue в сравнении

Альтернатива	Когда использовать	Компромисс
claude-code-design-skills	У вас есть фрейм для преобразования; у вас уже есть бренд	Не генерирует бренд — потребляет его
magic-ui-mcp	Вам нужны готовые компоненты, а не система брендов.	Библиотека, а не язык
claude-design-auditor-skill	Вы хотите оценить существующий дизайн, а не создать его	Оценивает, не генерирует

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills