Как я собрала дизайн-систему продукта за полчаса — и перестала каждый раз объяснять нейросети, какой у меня синий

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

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

Без него начинается то, что я называю «дизайн едет».

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

Картина знакомая. По отдельности всё вроде нормально: лендинг нормальный, презентация нормальная, посты тоже. А вместе складывается впечатление, будто продукт собран из трёх разных продуктов.

И почти никогда дело не в том, что кто-то выбрал некрасивый цвет. Просто цвет каждый раз выбирали заново.

Что именно едет на практике:

Оттенки размножаются. На лендинге синий #4338CA. В презентации «ну, синий», взяли из шаблона, вышло #4F46E5. В сторис третий, потому что на телефоне подбирали на глаз. По отдельности разницы не видно, а рядом она читается как неряшливость.

Отступы дышат случайно. Между заголовком и текстом где-то 16 пикселей, где-то 22, где-то 30, потому что о шаге никто не договорился. Пиксели глаз не считает, зато ритм ловит прекрасно, и как раз рваный ритм даёт то самое ощущение «сделано на коленке».

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

Цифры разъезжаются. Берёте колонку чисел, где 1 200 и 15 набраны шрифтом с разной шириной цифр, и аккуратная таблица превращается в рваный край.

Акцент перестаёт быть акцентом. Яркий цвет задуман, чтобы выделить одно главное. Выделили им пять вещей на экране — значит, не выделили ничего.

Ловушка вот в чём. Каждое решение принимал вменяемый человек, и каждое по отдельности можно защитить, а дёшево выглядит их сумма. Потому постфактум это так тяжело чинить: чинить приходится не кнопку, а отсутствие договорённости. Договорённость и есть дизайн-система.

И ещё одно, чисто практическое. Раньше разнобой стоил вам времени дизайнера. Сейчас визуал часто делает нейросеть, и без файла с правилами она каждый раз выдаёт свою версию «красивого». Двадцать картинок, двадцать разных продуктов. О вашем стиле нейронка не догадается: вкуса у неё нет, есть только ваши правила. Запишете их — получите повторяемость. Не запишете — получите двадцать вариантов.

Три слова, которые вечно путают. Разница при этом простая.

Брендбук — про смысл и айдентику: кто мы, как выглядит логотип, что нам нельзя. Часто это PDF на сто страниц.

UI-кит — набор готовых элементов вроде кнопок, полей, карточек. Такая библиотека деталей.

Дизайн-система — правила, по которым всё это собирается, плюс сами элементы. В файле написано «вот кнопка», и тут же рядом: когда она такая и почему у неё именно такой отступ.

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

Чего в моём файле нет, скажу отдельно. Там нет проработанной библиотеки компонентов на все состояния, нет версионирования и нет человека, который всё это поддерживает. Это правда нужно, когда над продуктом сидит команда дизайнеров и экранов десятки. Если же вы делаете продукт один или вдвоём, полноценная дизайн-система по всем канонам — работа на месяц, которая не окупится. А файл на пять экранов окупается на первом же лендинге.

Полезное упражнение: посмотреть, как правила пишут те, у кого на это уходят годы. Копировать незачем, смотреть стоит на логику, а она везде одна и та же — сначала принципы, потом конкретные значения, потом примеры «так — да, так — нет».

Apple Human Interface Guidelines — эталон жанра. Смотреть стоит на то, как там объясняют принципы, почему элемент ведёт себя именно так. Раздел про цвет полезен отдельно: там про доступность и про поведение в тёмной теме.

Material Design 3 от Google — самая подробная публичная система. Главное, что оттуда стоит унести, это идея токенов, то есть именованных значений. Вместо «синий» пишется «цвет основного действия», и тогда цвет меняется в одном месте.

Atlassian Design System и IBM Carbon — две системы, где хорошо видна словесная часть: как формулируют правила, чтобы их нельзя было понять двояко. У обеих загляните в раздел Foundations. Там основы, ровно то, из чего будет состоять ваш файл: цвет, типографика, отступы. Carbon к тому же живёт из открытого кода.

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

Теперь по шагам, как делаю я. Нужна только нейронка, никаких платных сервисов.

Главная ошибка — начинать с «хочу современно и дорого». Эти слова не значат ничего. Под «дорого» один представляет чёрный минимализм, другой золото на бордовом.

Поэтому сначала соберите 5–10 примеров того, что нравится: скриншоты сайтов, обложки, фотографии, упаковка, что угодно. И к каждому одну строку про то, что именно нравится. Слово «красиво» тут не работает, работает «нравится, что фон не белый, а тёплый» или «нравится, что цифры крупные и моноширинные».

Это единственный шаг, который нельзя делегировать, потому что только вы знаете, что вам нравится. Дальше нейросеть работает быстрее вас.

Бывает, что нравится что-то конкретное, а из чего оно складывается, непонятно. Тогда референс можно взять уже разобранным: есть каталоги вроде Refero Styles, где настоящие сайты расписаны по параметрам — палитра, шрифты, отступы, радиусы. Как переносить оттуда приём и не копировать чужой стиль целиком, я разбирала отдельно.

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

Тогда шаг с референсами можно пропустить. Референс — ваш собственный продукт.

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

Вот скриншоты моего продукта (лендинг и ключевые экраны). Собери по ним дизайн-систему — вытащи правила, по которым это сделано. Что нужно: 1. Палитра — назови каждый цвет с экрана, укажи HEX и роль (фон, текст, акцент, границы, состояния). 2. Типографика — какие шрифты, какие размеры и начертания, какая между ними иерархия. 3. Отступы и радиусы — определи базовый шаг сетки и набор радиусов. 4. Правила — как эти элементы применяются: где акцент, где подложка, как выглядит главная кнопка против второстепенной. Важно: не улучшай и не придумывай своё. Твоя задача — описать то, что УЖЕ есть, даже если видишь непоследовательность. Отдельным списком в конце: где продукт сам себе противоречит — разные оттенки одного цвета, разные отступы в одинаковых местах, разные радиусы. Это я решу, какой вариант оставить.

Ответ нейросети — это черновик. Системой он станет после двух шагов, и оба уже ваши.

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

Второй: дописать то, чего на скриншотах не видно. Тёмную тему, если её нет. Правило для цифр. Запреты — их модель со скриншота не считает, ведь запрет это как раз то, чего на экране нет.

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

Вот промт, которым я пользуюсь. Вставляете его в любую нейронку (Claude, ChatGPT, Gemini) и прикладываете референсы.

Основную работу в этом промте делают две вещи.

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

Вторая — раздел с запретами. Правила «делай так» нейросеть трактует как ей вздумается, а запрет «никогда не ставь два акцентных элемента на одном экране» нарушить сложно. У меня такой раздел называется «предохранители», и работает он лучше всех остальных.

Кириллица в промте тоже не просто так. У меня Fraunces (красивый шрифт заголовков на сайте) кириллицу не поддерживает, и в документах приходится ставить Georgia. Не проверила бы на старте — поймала бы это на первом же PDF.

Нейросеть выдаст файл, и выглядеть он будет убедительно. Не верьте на слово, проверьте три вещи:

Контраст. Попросите посчитать и посмотрите глазами. Светло-серый текст на белом в промте выглядит элегантно, а на телефоне на солнце не читается вообще.

Тёмную тему живьём. Пусть нейросеть соберёт одну простую страницу с переключателем тем. Смотреть надо на результат, таблица с кодами тут мало что скажет: гаснет ли акцент, видны ли границы карточек.

Придирку к хрупкости. Последний пункт промта, про то, что тут самое хрупкое, даёт самый полезный ответ. Оттуда и берутся будущие предохранители.

И ещё. Файл не высечен в камне, первую неделю его нормально править хоть каждый день. Ошибётесь в паре оттенков — поправите. Главное, чтобы правки шли в один файл и не расползались по десяти макетам.

Чтобы не звучало абстрактно, покажу свой. Система у меня называется «Песок и ночь», собрана ровно так, как описано выше, и живёт в одном markdown-файле.

Палитра расписана по ролям, у каждого цвета своя работа:

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

Типографика: заголовки — Fraunces, вне веба Georgia (кириллицы у Fraunces нет). Текст — Inter. И отдельное правило, которое я считаю самым полезным из всех: цифры и факты всегда моноширинным шрифтом, колонки чисел выравниваются по одной вертикали, с обязательным tabular-nums. Рваный край в цифрах запрещён везде, будь то слайды, карусели или PDF.

Предохранители, тот самый раздел запретов:

Четыре строки, а держат больше, чем всё остальное вместе. Мой личный риск — уехать в «бежевого коуча», и запреты написаны ровно против него. У вашего продукта риск будет другой, значит, и запреты другие.

Пара практических подтверждений, что это работает. Две карточки, собранные по этому файлу в разное время и под разные задачи, светлая на песочном фоне и тёмная на синем, выглядят как работа одного автора. Та же пара шрифтов, тот же единственный терракотовый акцент ровно на одном словосочетании, тот же знак в правом нижнем углу, те же моноширинные цифры. Я ничего из этого не держала в голове и заново не подбирала.

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

Файл, который надо не забыть приложить, рано или поздно забудут приложить. Значит, нейросеть должна брать его сама, без напоминаний.

Устроено это так. У современных AI-ассистентов, которые работают с папками на компьютере (Claude Code, Cursor, Codex и похожие), есть договорённость: они читают специальный файл с инструкциями в корне проекта. У Claude Code это CLAUDE.md, у многих других AGENTS.md. Всё, что там написано, попадает в контекст автоматически.

Отсюда простая схема:

В CLAUDE.md кладётся короткая врезка, буквально несколько строк:

Держится всё на трёх деталях, без них врезка так и останется декорацией.

Ссылка, а не копия. В CLAUDE.md только путь. Скопируете палитру туда — получите две версии правды, и через месяц они разойдутся.

Указан момент, когда читать. Фраза «у нас есть бренд-система» ассистенту ничего не говорит, нужно «перед созданием любого визуала — читать файл». Без триггера он будет вспоминать о файле через раз.

Прямой запрет на самодеятельность. Строчка «своих цветов не придумывать, нужного правила нет — спросить» экономит кучу правок. Без неё нейросеть в непонятной ситуации додумает сама, вежливо и мимо.

Если вы работаете не в папке, а в браузере, принцип тот же, меняется только механика. У ChatGPT есть проекты с инструкциями, у Claude — проекты, куда файл кладётся один раз и виден во всех диалогах внутри. Не поленитесь. Каждый раз писать в новом диалоге «вот мой файл, учти» в сумме отнимает больше сил, чем один раз всё настроить.

Бытовое, но важное: файл — обычный текст (markdown). Не документ в облаке и не PDF. Текст читают все нейросети, он лежит рядом с проектом, и у него видна история правок. Картинки (логотип, шрифты) лежат рядом в папке, с понятными именами.

Дизайн-система жива, пока её правят. Весь вопрос в том, чтобы правки шли в файл, а не в макеты.

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

Правило первое: поправили руками дважды — значит, дыра в файле.

Это главное. Если я второй раз объясняю нейросети одно и то же («подписи сделай серым», «цифры моноширинным»), дело уже не в нейросети. Значит, этого правила нет в файле. Один раз — случайность. Два раза — пора дописать правило и больше к этому не возвращаться.

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

Правило второе: у файла есть шапка — когда читать и когда обновлять.

В начало файла я ставлю несколько строк служебной информации:

Выглядит как формальность, но работает в обе стороны: нейросеть понимает, когда файл релевантен, а у меня не возникает вопроса «это правило уже утверждено или мы просто обсуждали?».

Правило третье: новое решение дописывается сразу, пока помнится почему.

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

Что до версий, отдельную нумерацию я не веду. Файл лежит в папке проекта под контролем версий, история правок и так видна. Если вы не работаете с git, хватит строки «обновлено такого-то числа» и короткого списка изменений в конце файла.

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

Теория кончилась. Покажу, как файл экономит время на конкретных задачах, и обратите внимание на длину запросов: в ней весь выигрыш.

Без системы запрос выглядел бы так: «сделай карусель на 7 слайдов про [тему], фон тёплый бежевый #EBDCBE, заголовки шрифтом с засечками, акцент терракотовый #B44E2C, но только на одном слове, цифры моноширинным, размер 1080×1350, логотип справа внизу, и не делай градиентов…» — и так каждый раз, с риском что-нибудь забыть.

С системой:

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

Освободившееся внимание уходит в качество. Я думаю про смысл слайдов и не вспоминаю, какой там был оттенок.

У каждой площадки свои размеры, и держать их в голове бессмысленно. Поэтому в файле у меня таблица размеров с оговорками: для VC — 1200×675, для Дзена — 1920×1080, причём у Дзена в подборках режутся края, так что всё смысловое держится в центре.

Запрос:

Одну проверку я делаю всегда: смотрю обложку в размере примерно 170 пикселей. Именно такой её видно в мобильной ленте. Не читается там — значит, не работает вообще, какой бы красивой она ни была в полном размере.

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

Ещё файл переживает исполнителей. Пришёл новый подрядчик, новая нейросеть, новая площадка, а вы не пересобираете стиль заново, вы просто даёте файл.

Если из всей статьи делать одно действие, то такое: соберите 5–10 референсов с пометкой, что в них нравится, прогоните промт выше и сохраните результат как brand-system.md в папку проекта. Потом добавьте в CLAUDE.md (или в инструкции проекта в ChatGPT или Claude) три строки: перед любым визуалом читать этот файл, своих цветов не придумывать.

Полчаса работы. Дальше система начнёт возвращать это время на каждой задаче, и перестанет копиться то самое ощущение «вроде похоже, но детали выдают кривость».

Идеальным с первого раза файл не будет, и не надо. Важно, чтобы он был один.

---

Я маркетолог, веду маркетинг, аналитику и контент на AI-агентах. Такие рабочие штуки собираю себе постоянно, а код по моим ТЗ пишет Клод. Если хочется научиться так же, я собрала курс по AI-маркетингу: https://ai-marketing-course.com/vc — первые два модуля бесплатные.