/ Каталог / Песочница / hue
← Все серверы ↗ GitHub
● Сообщество dominikmartn ⚡ Сразу

hue

автор dominikmartn · dominikmartn/hue

Укажите оттенок бренда (URL-адрес, имя или снимок экрана) → получите полный язык дизайна: токены, типографику, интервалы, светлый/темный, рецепты героев, набор значков и сгенерированный навык системы дизайна.

dominikmartn/hue — это навык Клода с открытым исходным кодом, который превращает любую ссылку на бренд в полноценную систему дизайна. Наведите его на курсор.com или Raycast, вставьте снимок экрана или назовите настроение — он анализирует и выводит токены цвета + типографики + интервала, небольшую библиотеку компонентов, светлые/темные варианты, рецепты героев и соответствующий набор значков. Пакет языка дизайна включает файлы моделей YAML и примеры целевых страниц HTML; он также генерирует навык Клода для каждого бренда, который вы можете повторно использовать в разных сеансах, чтобы ваш агент автоматически оставался приверженцем бренда.

▶ Смотреть демо 📦 Установить 💡 Сценарии

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

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

Живое демо

Как выглядит на практике

hue-brand-skill.replay ▶ готово
0/0

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: hue

Взять дизайн-систему с сайта конкурента

👤 Основатели и дизайнеры быстро создают прототип продукта ⏱ ~20 min beginner

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

Поток
  1. Наведите указатель на URL-адрес
    Освойте дизайнерские навыки на сайте курсора.com.✓ Скопировано
    → Выходные данные включают цветовую палитру, типографскую пару, масштаб интервалов, компоненты и сгенерированный файл SKILL.md.
  2. Предварительный просмотр
    Отрисуйте образец героя с помощью новой системы.✓ Скопировано
    → Пример HTML демонстрирует токены в контексте

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

Подводные камни
  • Использование чужого бренда дословно — Рассматривайте его как отправную точку и настраивайте токены перед отправкой.
Сочетать с: claude-code-design-skills

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

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

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

Поток
  1. Подайте изображение
    Создайте навык оттенка из этого скриншота.✓ Скопировано
    → Цвета выбраны; предполагаемое типовое семейство; предлагаемая шкала интервалов
  2. Итерировать
    Затемните акцент на 15%, уменьшите интервал до 4/8/12/16.✓ Скопировано
    → Токены восстановлены

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

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

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

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

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

Поток
  1. Подать заявку на каждого арендатора
    При создании пользовательского интерфейса для клиента 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-адрес. Скриншоты остаются локальными.

Устранение неполадок

Частые ошибки и исправления

Сгенерированная палитра выглядит мутной

Смещение в сторону ссылки на SVG/PNG; JPEG теряют насыщенность. Или предоставьте шестигранные якоря, которые навык должен соблюдать.

Проверить: Inspect generated tokens.json for the flagged colors
Контраст не работает в темном режиме

Попросите оттенок восстановиться с помощью темного режима 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