hue
dominikmartn/hueOpen-source скилл для Claude Code и Codex: анализирует бренд по URL, названию или скриншоту и генерирует полную дизайн-систему — токены цветов, типографику, компоненты, светлую и тёмную тему. Установи один раз — весь UI от ассистента будет соответствовать бренду.
Установка
git clone https://github.com/dominikmartn/hue.gitREADME
hue
Open-source скилл, который изучает любой бренд по URL, названию или скриншоту и превращает его в полноценную дизайн-систему. Работает с Claude Code и Codex. Установи один раз — и каждый компонент, который создаёт твой AI-ассистент, будет соответствовать твоему бренду.
Смотри в действии: hueapp.io
Что вы получаете
Полный дизайн-язык в виде AI-скилла для программирования — цветовые токены, типографика, отступы, компоненты, светлая и тёмная тема, рецепты hero-секций, подбор иконочного набора. Достаточно опinionated, чтобы два разных сеанса с использованием сгенерированного скилла давали визуально согласованный результат.
Установка
Claude Code
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue
Codex
git clone https://github.com/dominikmartn/hue ~/.agents/skills/hue
Альтернативный путь для Codex (совместим с CLI-установщиком):
git clone https://github.com/dominikmartn/hue "${CODEX_HOME:-$HOME/.codex}/skills/hue"
Затем в любом сеансе скажите что-то вроде:
- «make a design skill from cursor.com»
- «create a design language inspired by raycast»
- «generate a hue skill from this screenshot»
Ассистент распознаёт триггер и проведёт через анализ.
Примеры
Семнадцать брендов находятся в examples/ — они демонстрируют диапазон результатов, которые производит hue. Шестнадцать — вымышленные одиночные примеры, один реальный (meadow → дизайн-скилл mymind).
| Бренд | Характер |
|---|---|
| atlas | Ivory-инженерия, классические морские карты |
| auris | Премиальное аудио, монохромный тёмный |
| drift | Ярко-розовая fashion-коммерция |
| fizz | Y2K поп-фотошеринг, candy chrome |
| halcyon | Холодный бирюзовый скульптурный стеклянный |
| kiln | Тёмная обожжённая земля, расплавленная терракота |
| ledger | Газетная редакция, финансовый broadsheet |
| meadow | Тёплая кремовая редакция (реальный, из mymind-design) |
| orivion | Светящееся красно-фиолетовое свечение |
| oxide | Брутальный монохромный вычислительный протокол |
| prism | Киберпанк голографический шейдерный движок |
| relay | Швейцарский транзит, точность табло отправлений |
| ridge | Сланцево-изумрудная dev-платформа |
| solvent | Тёплый янтарный генеративный шейдер |
| stint | Приглушённый фиолетовый продуктивность |
| thrive | Шалфейно-зелёный велнес, светлая тема |
| velvet | Нуар-редакция парфюмерного дома |
Каждый содержит design-model.yaml + landing-page.html. ridge и stint также включают app-screen.html. halcyon поставляется с полной component-library.html. Откройте их в браузере, чтобы увидеть систему в рендере.
Лицензия
MIT. Форкайте, ремиксируйте, создавайте своё.