Кто и в какой ситуации
Пользователи Dolphin{Anty} проводят в браузере весь рабочий день. Они держат сотни профилей, фильтруют их, массово запускают, раскладывают по папкам и тегам. Для них интерфейс — рабочий инструмент, а не витрина.
Задачи от продукта не было. Её поставил CEO одной фразой: интерфейс застрял в прошлом. Конкуренты выглядели заметно современнее, и пользователи уходили. Дизайн был не единственной причиной оттока, но сильно влиял на первое впечатление и на ощущение надёжности продукта.
Что было не так: аудит старого интерфейса
Перед тем как рисовать, я разобрала старый интерфейс и собрала проблемы в пять групп.
- 1Слишком крупный масштабОгромные кнопки, крупный шрифт и большие отступы. Интерфейс выглядел как софт прошлого десятилетия, и на экран помещалось мало строк. Для тех, кто работает с сотнями профилей, это лишний скролл весь день
- 2Визуальный шумКомпоненты Vuetify с годами обросли точечными правками. Кнопки капсом, синий акцент вместо фирменного фиолетового, разные радиусы и отступы на соседних экранах
- 3Нет иерархии действийДве одинаково громкие кнопки рядом, поэтому главное действие не читалось
- 4ПрицеливаниеПри общем крупном масштабе часть важных действий пряталась в мелкие иконки без подписей. Чтобы поменять теги, нужно было попасть в маленькую иконку внутри ячейки
- 5Нет системы в кодеВ компонентах было 302 цвета, заданных числом, и 1130 размеров шрифта в пикселях. Любая визуальная правка превращалась в поиск по сотням файлов
Цели и критерии успеха
| Цель | Как поймём, что получилось |
|---|---|
| Современный масштаб и спокойный интерфейс с фирменным фиолетовым | Продукт выглядит на уровне конкурентов, команда и CEO принимают визуальный язык |
| Упростить частые действия | Частые операции делаются без прицеливания, кликом по крупной зоне |
| Не сломать привычки | Пользователь узнаёт продукт и выполняет обычные сценарии без переобучения |
| Основа для роста | Все цвета и размеры в токенах, светлая и тёмная тема, поддержка нескольких языков |
Ограничения
- Не трогать логику. Редизайн касается только внешнего вида: CSS и разметки компонентов. Поведение и данные остаются прежними
- Не ломать сценарии. Пользователи годами работают по привычке, их ежедневные действия завязаны на привычные места кнопок
- Маленькая команда. Два дизайнера, арт-директор, ограниченное время фронтенда
- Отдельная ветка. Весь редизайн живёт в тестовой ветке и не попадает к пользователям, пока не пройдёт проверку
Две недели вместо очереди в разработку
- 1Брейншторм и выбор основыВчетвером с арт-директором, junior-дизайнером и CEO обсудили направление. За основу взяли shadcn/ui: современный, спокойный, хорошо масштабируется и знаком разработчикам. Фирменный фиолетовый сохранили как главный акцент
- 2Атомы и токены в FigmaЯ собрала кнопки, поля, бейджи, цвета и состояния и полностью разметила светлую и тёмную темы переменными. Каждый цвет в макете получил смысловое имя, а не просто HEX
- 3Claude вместо очереди в разработкуПодключили Claude к фронтенду на тестовой ветке и передали ему токены и атомы из Figma. Claude менял только стили, логику не трогал
- 4Молекулы и экраныДальше пошли крупные блоки: шапка, панель папок, таблица профилей, модальные окна. Каждый экран я сверяла с макетом и возвращала на доработку, пока он не совпадал
- 5Редкие окнаЗа следующие 1–2 месяца в редких окнах довела до системы второстепенные экраны и диалоги
Что поменяли и почему
Раньше, чтобы изменить теги, нужно было попасть в маленькую кнопку внутри ячейки. Теперь кликабельна вся ячейка, а ховер подсказывает, что её можно нажать
Профили, Прокси, Расширения, Закладки и Сценарии вынесены в верхнее меню с подписями. Новичку не нужно запоминать, что означает каждая иконка
Слева панель с папками, счётчиками, закреплением и поиском, под ней теги с отдельным поиском. При сотнях профилей это главный способ навигации, поэтому панель стала постоянной
Вместо двух одинаково громких кнопок капсом одно главное фиолетовое действие «Создать профиль» и второстепенный «Быстрый профиль» рядом
Таблица профилей — сердце продукта, в ней проводят весь день. Мягкие плашки статусов вместо ярких, компактные Start/Stop, плавающая пагинация, заметки к профилю и настройка колонок. Плотность сохранили, а шум убрали
Я сознательно уменьшила масштаб до уровня современных рабочих инструментов: базовый кегль 16 → 14 пикселей, компактные кнопки и поля, обычный регистр вместо капса. На экран помещается больше профилей, а интерфейс перестал выглядеть старомодно
Скругления выросли с 4 до 8 пикселей. Это сразу считывается как современный интерфейс и отделяет новый дизайн от старого
Все цвета вынесены в токены, поэтому светлая и тёмная темы переключаются без ручной правки экранов. Серая палитра в коде совпадает со значениями переменных Figma
Ключевые кнопки и разделы остались там, где пользователи их ищут. Новый интерфейс выглядит иначе, но работает так же
ИИ во фронтенде, дизайнер у руля
Claude не придумывал дизайн. Решения принимала я, а Claude переносил их в код быстрее, чем это сделала бы очередь задач в разработку.
- 1Источник правды — FigmaClaude подключён к макетам через Figma MCP и берёт значения из переменных, а не угадывает цвета по скриншоту
- 2Правила проекта в CLAUDE.mdКакие токены использовать, что нельзя трогать, как называть классы. Каждая найденная ошибка превращается в новое правило, и она больше не повторяется
- 3Только стилиClaude работал в отдельной ветке и правил только CSS и разметку. Логику, данные и поведение не трогал, поэтому риск сломать продукт был минимальным
- 4Сверка с макетомКаждую правку я проверяла против макета и возвращала, если не совпадало. В редизайне было 215 таких правок, и в среднем каждая сходилась с макетом за 2 итерации
- 5Журнал расхожденийВсе расхождения с макетом записывались. Только около 9% из них касались токенов, и лишь 1% — ошибок в самом файле Figma. Значит, система токенов оказалась надёжной основой
Почему это важно. Обычно редизайн такого масштаба занимает у фронтенда месяцы и конкурирует с продуктовыми задачами. Здесь дизайнеры вносили визуальные правки сами, а разработка продолжала делать фичи.
Новый интерфейс за две недели и новый процесс дизайна
Основной интерфейс Dolphin{Anty} пересобран за две недели. На октябрь 2026 он готовился к релизу. Привычные сценарии сохранены, частые действия стали проще, появились светлая и тёмная темы и поддержка нескольких языков.
Изменился и сам процесс. Дизайнеры вносят визуальные правки во фронтенд через Claude, и разработка больше не блокирует дизайн. Доля компонентов, где все цвета на токенах, выросла с 79% до 89%. Теперь смена палитры или темы — это правка значений токенов, а не поиск по сотням файлов.
Что дальше
- Релиз и первые метрики: обращения в поддержку, время на частые действия, отток. Добавлю их на страницу после выкатки
- Перевести на токены скругления. Пока это последний крупный параметр, который правится вручную
- Документация компонентов в Storybook, чтобы у дизайна и разработки была одна живая витрина
Подробнее о том, как устроены токены, — в кейсе «Дизайн-система, которую понимает ИИ».