hue — скилл
Мета-скилл разбирает бренд по ссылке, названию или скриншоту и создает из него полноценную дизайн-систему как новый скилл
- 906 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Создает файлы дизайн-системы и запускает локальный валидатор на Node
- Обращается к внешним сайтам и скриншотам для анализа бренда
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/hueОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Создает файлы дизайн-системы и запускает локальный валидатор на Node
- Обращается к внешним сайтам и скриншотам для анализа бренда
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл делает систему, которая задает интерфейсы. Агент анализирует бренд из ссылки, названия или скриншота и собирает дизайн-язык: цветовые токены, типографику, отступы, компоненты, светлую и темную тему, рецепты героя и подбор набора иконок. Результат сохраняется как отдельный скилл, чтобы дальше любой интерфейс агент строил в одном стиле. Каждый сгенерированный скилл проходит проверку через scripts/validate.mjs: синтаксис yaml, неопределенные токены, контраст по WCAG и другие правила.
Для кого. Для дизайнеров, фронтендеров и основателей, которым нужен единый стиль для всего, что генерирует агент.
Подходит, если
- Нужно закрепить фирменный стиль, чтобы агент держал его во всех интерфейсах
- Нужно быстро собрать дизайн-систему по референсу или сайту
- Нужен свой скилл дизайна вместо разовых указаний по стилю
Не подходит, если
- Нужен готовый макет конкретного экрана, а не система стилей
- Не нужна повторяемость стиля между сессиями
Пример запроса к агенту
Собери дизайн-скилл по сайту cursor.com и дальше делай интерфейсы в этом стилеОграничения
Скилл создает файлы дизайн-системы и обращается к внешним источникам, чтобы разобрать бренд, поэтому содержимое сайтов и скриншотов он трактует только как данные о стиле, а не как инструкции. Проверка контраста и токенов идет через локальный скрипт на Node. Качество зависит от полноты исходного референса.
Как отключить. Удалите каталог hue из папки скиллов агента, сгенерированные дизайн-скиллы удаляются отдельно.
Частые вопросы
Что на выходе?
Отдельный скилл дизайна с токенами цвета, типографикой, отступами, компонентами и темами, который агент дальше применяет при сборке интерфейсов.
Как проверяется результат?
Скрипт scripts/validate.mjs проверяет yaml, неопределенные токены var, контраст по WCAG и заготовки-заглушки, при ошибке выходит с кодом 1.
Чем hue отличается от готового дизайн-скилла?
hue это мета-скилл: он делает систему, которая задает интерфейсы. Агент анализирует бренд по ссылке, названию или скриншоту и собирает дизайн-язык: цветовые токены, типографику, отступы, компоненты, светлую и темную темы. На выходе новый скилл.
Что такое hue и как его поставить?
Это скилл, который создает дизайн-систему бренда как отдельный скилл. Установка: git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue. Работает в Claude Code и Codex.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Скилл с базой стилей, палитр, шрифтовых пар и UX-правил, который генерирует дизайн-систему под тип продукта
Скилл для создания, редизайна и ревью интерфейсов: один дизайн-тезис и система вместо шаблонного SaaS-вида.
Коротко о README
README описывает hue как открытый скилл, который выучивает бренд и превращает его в дизайн-систему для Claude Code и Codex. Установка сводится к клонированию в папку скиллов, после чего работают фразы вроде создать дизайн-язык по сайту. В комплекте валидатор на Node и семнадцать примеров брендов с файлами design-model.yaml и лендингами. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: hue description: "Meta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design language', 'new design system skill', 'design skill inspired by X', 'design skill from this screenshot', '/hue', or 'use hue'. Also triggers for 'remix my design skill' or 'make my skill more X'." version: 1.2.0 --- # Design Skill Generator You are a senior product designer who creates design language specifications for AI coding assistants (Claude Code, Codex, and compatible tools). You don't design interfaces — you design the *system* that designs interfaces. Every skill you generate must be opinionated enough that two different sessions using it would produce visually indistinguishable output. Your reference material lives in `references/`. Use it.