Несколько дней назад я сделал маленький инструмент для себя. Надоело каждый раз начинать новый проект с колеса оттенков: крутишь Coolors, листаешь Pinterest, смотришь на чужие палитры, которые «почти подходят». А ведь у проекта уже есть образ, это слово. Рассвет. Шторм. Тёмный лес. У каждого слова есть свой цвет, который чувствуешь интуитивно. Просто никто не переводит его в HEX за тебя.
Так появился Колорит: вводишь слово, ИИ собирает палитру. Я написал про него на Хабре. А потом поймал себя на новой мысли. Палитра это ведь только начало. После цвета всё равно нужно имя, слоган, шрифты, ощущение движения. Почему всё это должно начинаться с нуля, если отправная точка одна и та же?
Так Колорит перестал быть просто генератором палитр и стал маленьким конструктором бренда.
Что теперь умеет Колорит
Вводишь слово, и дальше идёшь по шагам, как по конвейеру фирменного стиля.
Сначала палитра, те самые цвета, что чувствуются за словом, с честными названиями и проверкой контраста, чтобы текст потом было видно, а не «красиво, но нечитаемо». Потом нейминг, варианты имени бренда. Дальше слоган, шрифтовые пары с живым превью, система отступов и теней, анимации, мудборд, идеи для логотипа. И в финале собранный брендбук, который можно выгрузить в Figma, Adobe, CSS или просто картинкой.
Самое важное вот в чём: каждый следующий шаг помнит предыдущие. Выбрал палитру и имя, и слоган рождается уже с их настроением. Подобрал шрифты, и они ложатся на твои цвета, а не на абстрактные. Это не девять отдельных генераторов, а один разговор, который начинается с одного слова.
Немного магии без магии
Как ИИ «угадывает» цвета и шрифты. Никакой магии там нет, есть аккуратно собранный запрос. Вот, например, кусочек того, что уходит модели, когда она подбирает шрифты. Главная хитрость в одной заглавной фразе:
Подбери 6 шрифтовых пар для бренда. heading это шрифт для заголовков, body это шрифт для текста. Только Google Fonts, разные стили. Верни ТОЛЬКО JSON-массив, без пояснений.
Звучит странно, но капслок и слово «только» реально заставляют модель не философствовать, а отдавать чистые данные, которые приложение тут же превращает в живые карточки со шрифтами. Маленькая деталь, на которой держится весь инструмент.
Маленькие победы, которых никто не замечает
Самое интересное в развитии продукта это не большие фичи, а мелочи, от которых всё либо ощущается дорого, либо дёшево.
Например, ползунки. Двигаешь размер шрифта, и он плавно меняется прямо под пальцем. Звучит банально, но сначала каждое движение перерисовывало весь блок, и ползунок срывался. Пришлось переделать так, чтобы менялось только нужное, и появилось то самое ощущение, когда инструмент слушается.
Или кнопка «Сохранить» на телефоне. Она спряталась между панелью с экспортом и нижним меню: вроде есть, а нажать невозможно. Такие штуки на десктопе вообще не видно, их ловишь, только когда сам открываешь свой продукт с телефона.
И отдельная история, кнопка «Поделиться». Теперь любой бренд можно упаковать в ссылку и отправить коллеге: он открывает и видит ровно то, что собрал ты. Удобно. Ровно до того момента, пока не понимаешь, что через такую ссылку можно подсунуть человеку и кое-что неприятное. Пришлось сесть и закрыть это по-взрослому. Если интересны технические детали, я разобрал их в версии статьи на Хабре, а здесь скажу просто: теперь ссылке из чужих рук можно доверять.
«Деплой сделал, а ничего не изменилось»
Любимая фраза каждого, кто хоть раз выкатывал проект. У меня она прозвучала в полный голос: всё собрано, всё залито, сервер бодро рапортует, что обновился, а на сайте старая версия. Дважды подряд.
Один раз виноват оказался хитрый новый формат, в котором собиралось приложение: снаружи всё «обновилось», а внутри лежал старый код. Второй раз мелочь в адресах запросов, из-за которой часть приложения на боевом сайте стучалась не туда и получала в ответ кусок главной страницы вместо данных. На телефоне это выглядело как загадочное «строка не соответствует шаблону», на компьютере как «неожиданный символ». Оба раза лечилось одной строчкой, и оба раза искалось часами. Так обычно и бывает.
Зато теперь выкладка это одна команда, и она наконец делает то, что обещает.
Зачем это всё
Колорит решает ту самую задачу, с которой всё началось, только теперь целиком. Открываю, набираю слово, и через пару минут у меня есть не просто цвета, а отправная точка для всего бренда: имя, шрифты, ощущение. Дальше уже руками, но уже не с чистого листа.
Это бесплатно, работает на телефоне и на компьютере, на русском и английском, в светлой и тёмной теме. Без регистрации, ничего не нужно заводить, просто открываешь и пробуешь.
И это только второй шаг. Колорит часть задуманной экосистемы «Слово-система», набора инструментов, где точкой входа всегда остаётся обычное слово. Идея простая: чтобы ИИ помогал на самом раннем и самом сложном этапе, когда есть только ощущение и ни одного пикселя.
Попробуйте сами, это интереснее, чем читать: konstmax.ru/colorit