Кейс: дизайн-система с нуля — Валерий Передистый

Создал дизайн-систему с нуля и ускорил разработку новых разделов

О компании

ДомИнтернет помогает подобрать и подключить домашний интернет во всём многообразии провайдеров

Главная ценность сервиса — поиск доступных провайдеров и тарифов по точному адресу, вплоть до квартиры

Мы решаем боль миллионов пользователей, когда они не знают, какие провайдеры есть в их доме

Моя роль
в рамках задачи

Автор идеи. До моего прихода никто не задумывался о том, что должна быть единая дизайн-система. Существовал только UI-kit, который не покрывал даже 20% макетов, а вся работа строилась в формате Dev-to-Design, а не наоборот;
Оператор нейросети. В моем подчинении Claude Code, к которому подключена Figma через MCP. Нейросеть значительно упрощала разработку дизайн-системы, позволяя работать сразу с десятком компонентов параллельно;
Оператор дизайнера. У меня в подчинении был middle-дизайнер, который помогал перепроверять компоненты после нейросети и отрисовывал блоки, с которыми нейросеть не справлялась в полной мере

Зачем была нужна дизайн-система

Макеты рисовались хаотично, что-то наследовалось с других страниц, что-то рисовалось с нуля, а что-то даже не соответствовало существующему UI-kit

Из-за этого, один и тот же элемент по смыслу на разных страницах мог выглядеть совершенно по-разному

Еще одной проблемой было то, что никто не следил за изменениями дизайна в верстке, из-за чего дизайн-макеты и верстка довольно часто совпадали только отчасти, а прилетало потом всем

Что было до

До моего прихода существовал UI-kit, UI-kit_new (не отличался по стилистике, просто отдельные элементы переехали по какой-то причине в него)

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

Отдельной вишенкой на торте было использование устаревших разрешений — мобильных устройств 320px по ширине

Сетки и брейкпоинты старых макетов: 8 разрешений от 320 до 1260px

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

Карточек тарифов по файлу у нас лежало чуть больше 100, причем различия были от незначительных (поменялась тень карточки), до кардинальных, когда в карточках использовался старый брендовый цвет, который является рудиментом

Где-то из-за обновлений Figma карточки поехали, но никто это не фиксил

Хаос старых макетов: множество разрозненных карточек тарифов

Построение новой дизайн-системы

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

Дочерние карточки задачи построения дизайн-системы

Самым крупным блоком работ стала проработка компонентов, с суммарной оценкой 335 часов

Дочерние задачи атомарного построения: атомы, организмы, молекулы, шаблоны страниц

Переменные

В качестве базисов для переменных были заведены размерности чего-угодно (числа) и типографика (числа и конкретные значения толщин. К ним уже подключались переменные самой типографики, паддингов, гэпов, размеров устройств, размеры иконок, толщины обводок. Отдельными переменными были заложены цвета

Коллекции переменных в Figma: типографика с режимами Mobile и Desktop

Цвета

Собрал палитру, которая включает в себя брендовые цвета и несколько дополнительных для комбинирования. Саму палитру делал максимально простой, для сокращения сложности работы с ней (нет нужной зрелости команды дизайна и разработки)

Совместно с разработкой вычистили устаревшие цвета и с прода, было удалено более 150 устаревших оттенков (в основном серых)

Палитра цветов дизайн-системы: основные, состояния, нейтральные и градиенты

Типографика

Вместо 8 наборов шрифтов под каждое разрешение — только два. При этом размеры адаптируются между десктопом и мобайлом через переменные, а не ручным подбором в каждом макете, достаточно просто выбрать mode в appearance

Типографическая шкала: стили, роли и размеры для десктопа и мобайла

Атомарный подход

Компоненты собирал по атомарному принципу: от базовых элементов (кнопки, инпуты, иконки) до готовых блоков вроде карточки тарифа. Здесь максимально помог Claude Code с Figma через MCP — десяток компонентов в работе параллельно, а middle-дизайнер перепроверял результат и доводил сложные блоки

Таблица состояний кнопки: варианты primary, accent, outline, link и two lines в состояниях default, hover, pressed, focus, disabled, loading и с иконками

Таблица состояний селекта: варианты single, with helper, multi-select и auto-suggest в состояниях default, hover, focus, filled, error, disabled и open

Документация

Все базисы сопровождаются документацией, где описывается как использовать для дизайнеров и разработки. Отдельно есть инструкции для использования в рамках Figma, чтобы новые дизайнеры быстро включались в работу

Быстрая сборка страниц

При помощи Claude Code я наладил быструю сборку макетов. Все стили, переменные и элементы хранились у нейросети в виде постоянно актуализируемых markdown-файлов, где описывалось:

На какой странице лежит;
Уникальный ключ компонента;
Какие параметры у того или иного элемента;
Кол-во вариантов;
Когда использовать;
Когда не использовать

Markdown-документация компонентов для Claude Code: инструкция инстансинга через MCP, component key, variant axes и правила использования кнопки

Набор правил позволял давать задачу Claude Code на сборку целых страниц без лишних обсуждений — у него уже были определены границы и форматы работы.

Проверкой результата занималась команда агентов, у которых было четко определено, что именно они проверяют (соответствие дизайн-системе, грамматика, логика, соответствие запросу пользователя и пр.)

Для сборки страниц было заложено три возможных сценария:

Текстовый/голосовой ввод внутри Claude Code;
Сборка на основе скриншота (когда требовалось собрать небольшую страницу или отдельный блок);
Сборка на основе ссылки на страницу/целый сайт, когда требовалось быстро скопировать и протестировать решение конкурента. Даже если у нас нет идентичного элемента, нейросеть использует ближайший похожий и дорабатывает его

Ниже пример, когда Claude Code на входе был выдан скриншот, а он собрал полноценный макет в Figma и написал об этом отчёт

Отчёт Claude Code о сборке страницы провайдеров по скриншоту: каркас, готовые блоки инстансами, выдача, тарифы и контроль качества

Внедрение

В макетах внутри Figma дизайн-система уже внедрена и работает полноценно. Потребовалось несколько дней ручной и нейросетевой работы, чтобы полностью пересадить старые макеты на дизайн-систему

Со стороны разработки проблем гораздо больше — приходится вычищать очень много легаси за 9 лет и решать, что на что заменяем, поэтому внедрение запаздывает. Но все новые страницы уже верстаются с учетом дизайн-системы

Полное завершение внедрения на стороне разработки запланировано на третий квартал 2026 года

Результаты

Более 500 компонентов и стилей;
Скорость разработки новых макетов выросла несоизмеримо. Если есть готовый компонент, то Claude за один промпт собирает полную страницу без косяков;
Дизайнеры могут сфокусироваться на более высокоуровневых задачах, например, генерации идей, так как итераций правок к UI стало кратно меньше

Что дальше?

До конца 2026 года требуется согласовать между собой дизайн-систему сайта и рекламные материалы, так как маркетологи живут в отдельном дивизионе и готовят всё самостоятельно