Из одного слова целый бренд. Как развивался Колорит

Несколько дней назад я сделал маленький инструмент для себя. Надоело каждый раз начинать новый проект с колеса оттенков: крутишь Coolors, листаешь Pinterest, смотришь на чужие палитры, которые «почти подходят». А ведь у проекта уже есть образ, это слово. Рассвет. Шторм. Тёмный лес. У каждого слова есть свой цвет, который чувствуешь интуитивно. Просто никто не переводит его в HEX за тебя.

Так появился Колорит: вводишь слово, ИИ собирает палитру. Я написал про него на Хабре. А потом поймал себя на новой мысли. Палитра это ведь только начало. После цвета всё равно нужно имя, слоган, шрифты, ощущение движения. Почему всё это должно начинаться с нуля, если отправная точка одна и та же?

Так Колорит перестал быть просто генератором палитр и стал маленьким конструктором бренда.

Что теперь умеет Колорит

Вводишь слово, и дальше идёшь по шагам, как по конвейеру фирменного стиля.

Сначала палитра, те самые цвета, что чувствуются за словом, с честными названиями и проверкой контраста, чтобы текст потом было видно, а не «красиво, но нечитаемо». Потом нейминг, варианты имени бренда. Дальше слоган, шрифтовые пары с живым превью, система отступов и теней, анимации, мудборд, идеи для логотипа. И в финале собранный брендбук, который можно выгрузить в Figma, Adobe, CSS или просто картинкой.

Самое важное вот в чём: каждый следующий шаг помнит предыдущие. Выбрал палитру и имя, и слоган рождается уже с их настроением. Подобрал шрифты, и они ложатся на твои цвета, а не на абстрактные. Это не девять отдельных генераторов, а один разговор, который начинается с одного слова.

Немного магии без магии

Как ИИ «угадывает» цвета и шрифты. Никакой магии там нет, есть аккуратно собранный запрос. Вот, например, кусочек того, что уходит модели, когда она подбирает шрифты. Главная хитрость в одной заглавной фразе:

Подбери 6 шрифтовых пар для бренда.heading это шрифт для заголовков, body это шрифт для текста.Только Google Fonts, разные стили.Верни ТОЛЬКО JSON-массив, без пояснений.

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

Маленькие победы, которых никто не замечает

Самое интересное в развитии продукта это не большие фичи, а мелочи, от которых всё либо ощущается дорого, либо дёшево.

Например, ползунки. Двигаешь размер шрифта, и он плавно меняется прямо под пальцем. Звучит банально, но сначала каждое движение перерисовывало весь блок, и ползунок срывался. Пришлось переделать так, чтобы менялось только нужное, и появилось то самое ощущение, когда инструмент слушается.

Или кнопка «Сохранить» на телефоне. Она спряталась между панелью с экспортом и нижним меню: вроде есть, а нажать невозможно. Такие штуки на десктопе вообще не видно, их ловишь, только когда сам открываешь свой продукт с телефона.

И отдельная история, кнопка «Поделиться». Теперь любой бренд можно упаковать в ссылку и отправить коллеге: он открывает и видит ровно то, что собрал ты. Удобно. Ровно до того момента, пока не понимаешь, что через такую ссылку можно подсунуть человеку и кое-что неприятное. Пришлось сесть и закрыть это по-взрослому. Если интересны технические детали, я разобрал их в версии статьи на Хабре, а здесь скажу просто: теперь ссылке из чужих рук можно доверять.

«Деплой сделал, а ничего не изменилось»

Любимая фраза каждого, кто хоть раз выкатывал проект. У меня она прозвучала в полный голос: всё собрано, всё залито, сервер бодро рапортует, что обновился, а на сайте старая версия. Дважды подряд.

Один раз виноват оказался хитрый новый формат, в котором собиралось приложение: снаружи всё «обновилось», а внутри лежал старый код. Второй раз мелочь в адресах запросов, из-за которой часть приложения на боевом сайте стучалась не туда и получала в ответ кусок главной страницы вместо данных. На телефоне это выглядело как загадочное «строка не соответствует шаблону», на компьютере как «неожиданный символ». Оба раза лечилось одной строчкой, и оба раза искалось часами. Так обычно и бывает.

Зато теперь выкладка это одна команда, и она наконец делает то, что обещает.

Зачем это всё

Колорит решает ту самую задачу, с которой всё началось, только теперь целиком. Открываю, набираю слово, и через пару минут у меня есть не просто цвета, а отправная точка для всего бренда: имя, шрифты, ощущение. Дальше уже руками, но уже не с чистого листа.

Это бесплатно, работает на телефоне и на компьютере, на русском и английском, в светлой и тёмной теме. Без регистрации, ничего не нужно заводить, просто открываешь и пробуешь.

И это только второй шаг. Колорит часть задуманной экосистемы «Слово-система», набора инструментов, где точкой входа всегда остаётся обычное слово. Идея простая: чтобы ИИ помогал на самом раннем и самом сложном этапе, когда есть только ощущение и ни одного пикселя.

Попробуйте сами, это интереснее, чем читать: konstmax.ru/colorit