Татьяна ЛеоноваОдна дизайн-система для магазина, CRM и кода
Ольга делает серьги из стекла lampwork и натуральных камней. Магазин я сначала собрала прототипом на Lovable, перенесла на свой сервер и взялась за редизайн: быстро нашла стиль черновиками, проверила их в коде на живом сайте, а когда направление утвердили — за неделю собрала из него одну систему для магазина, CRM и кода.
Главная магазина (v5) — под каждым элементом стиль, переменная или компонент. Визуально почти та же, что и v3; изменилось всё внутри.
Сначала найти стиль, потом закрепить системой
Первые варианты я собирала быстро, без стилей и переменных: важнее было за несколько итераций найти образ и посмотреть его в коде на живом сайте. Когда Ольга выбрала направление — v3, 1 октября, — черновик стал исходником для системы.
Прототип магазина на Lovable
Свой репозиторий, затем свой сервер
Черновики редизайна v1–v3, проверка в коде на сайте
Ольга утвердила направление v3
Правила, токены, компоненты, перенос в код
Это не ошибки, а цена скорости на этапе поиска: черновики меняются целиком, и закреплять их раньше времени нет смысла. Подсчёт — скриптом по всем слоям фрейма «Landing — Redesign v3».
Один бренд — две задачи
Сайт — витрина с журнальной типографикой. CRM — ежедневный рабочий инструмент Ольги, где важнее плотность и понятные статусы.
Тёмный раздел без второго набора
Натуральные камни показываем на тёмном фоне — теми же компонентами, что и стекло.
Макет = код
Код пишет ИИ-агент. Он должен брать готовый компонент и токен по имени, а не рисовать элемент заново.
Состояния, которых не было
Резерв, «нашла хозяйку», пустая корзина, ошибка формы, пару купили, пока оформляли заказ.
Сначала ограничения, потом токены
Прежде чем заводить переменные, я записала правила. Они отсекают лишние значения ещё до того, как те попадут в систему, — и их легко проверить скриптом.
Одна чётная шкала шрифтов
Размеры — только из шкалы 12 · 14 · 16 · 20 · 24 · 28 · 32 · 40 · 48 · 64 · 80 · 160, без дробных. Интерлиньяж задан в пикселях и тоже кратен 4.
Всё кратно 4
Отступы, размеры и скругления идут с шагом 4 px. Коллекция Base · Spacing — 15 значений от 4 до 160; произвольные отступы в коде запрещены.
12 px — только капс
Мелкий текст читается только в верхнем регистре с разрядкой. Любой обычный текст начинается с 14 px.
Сетка 12 колонок и база 360
Десктоп 1440: 12 колонок по 88 px, поля 60, межколонник 24. Телефон 360: две колонки по 156 и поля 16 — ширина 375 на 4 ровно не делится.
Три слоя: фундамент, смысл, компонент
Палитра, отступы и скругления — общие для сайта и CRM. Поверх них у каждого продукта свой смысловой слой: сайту нужны фоны разделов и тёмный режим, CRM — цвета статусов заявок. Компоненты знают только смысловые имена.
Фундамент — общий
Сырые значения. Скрыты из выбора в макете: в слой нельзя «залить» brand/flame напрямую.
4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 64 · 80 · 96 · 120 · 160
4 · 8 · 12 · 16 · full
Смысл — у каждого свой
Имена по роли. Каждая роль ссылается на цвет палитры, и у сайта эта ссылка своя для светлой и тёмной темы.
+ ещё 7: bg/sage, accent/amber, text/on-accent, border/*, overlay/scrim
С палитрой бренда CRM делит ink и flame; остальные статусы — свои оттенки, у каждого 4 ступени: base, subtle, border, soft.
Компоненты
Компонент не знает цветов и чисел — только роли из трёх коллекций: цвет, отступы, скругления. Ниже — из чего собраны два компонента.
accent/mosstext/on-darkSite/Label/Mspace/32 · gap space/8radius/fullstatus/paid/subtlestatus/paid/baseCRM/Body 14 · Mediumspace/8 · space/4radius/smВсего: 45 компонентов сайта, 30 — CRM, 39 текстовых стилей.
Тёмный раздел — это режим, а не копия
Натуральные камни показаны на тёмном фоне. Вместо второго набора компонентов у коллекции Site есть режим Dark: секции достаточно переключить режим, и вложенные компоненты перекрашиваются сами. Подвал внутри тёмного раздела принудительно остаётся светлым.
В коде то же самое: переменные Site лежат в :root, режим Dark — блок [data-theme="dark"] с теми же именами. Разделу камней достаточно атрибута data-theme.
Журнальная шкала, которую можно проверить
Piazzolla — для заголовков, имён пар и цитат; Golos Text — для текста, цен и интерфейса. Обе с полной кириллицей. У телефона своя ступень крупных заголовков, остальное общее.
Курсивные пары (Hero Italic, H2 Italic…) — отдельные стили с тем же размером: в заголовке «Искусство в деталях» вторая строка курсивом и цветом accent/moss.
Состояние — это вариант компонента, а не отдельный макет
Каждый элемент интерфейса — компонент с вариантами и свойствами. Состояния, о которых в первом макете не думали, я добавила вариантами: их видит Ольга на согласовании и агент при вёрстке.
Пара в наличии, в резерве или уже у хозяйки
Проданная пара не исчезает: остаётся в мозаике с приглушённым фото (56%). Это доверие к мастеру и повод заказать похожую.
14 вариантов на десктопе, 10 — на телефоне
Пограничные случаи, собранные из тех же компонентов
Cart Item · Drawer Header · Input · Choice Chip · Info Note · Empty State · Sticky Bar
Корзина
Цена над главной кнопкой, как на десктопе; состав заказа и итог — в одном экране.
Без Telegram
Сначала выбор канала, потом обязательное поле под него: телефон, ссылка VK или почта.
Пустая корзина
Не тупик: блок «Недавно смотрели» возвращает к парам.
Пару купили, пока оформляли
Статус в строке корзины и похожие пары вместо ошибки.
Ошибка всегда объясняет, что не так
Три состояния: пусто — серым подсказка-пример, введено — значение, ошибка — значение и под ним красный текст: что не так и как исправить. В состоянии Error этот текст нельзя выключить.
Сетка, которая собирается из любого числа пар
Мозаика вместо сетки 3×3 — главная визуальная идея магазина и главный риск: сегодня у Ольги 9 пар стекла, завтра 17. Я разложила мозаику на компоненты с правилом сборки, чтобы каталог из базы данных собирал её сам.
Два шаблона блока и хвост
Блоки чередуются: Left, Right, Left, Right… Каждый берёт 3 пары и следующую надпись Ольги из списка. Остаток 0, 1 или 2 пары закрывает хвост с финальной фразой. Например, 16 пар = 5 блоков + хвост с 1 парой. Каталог из базы собирает мозаику по этому правилу сам.
Блок · Left 1-й, 3-й, 5-й…
Блок · Right 2-й, 4-й…
Хвост · остаток 1 пара 16
Одно имя в Figma, в CSS и в компоненте
Система перенесена в код: переменные стали CSS-переменными, текстовые стили — утилитами Tailwind, компоненты — React-компонентами с теми же вариантами. ИИ-агент верстает по именам и не изобретает цвета и отступы.
src/design/site.css /* Base · Palette — сырые значения */ --brand-moss: #2e4a35; --brand-amber: #e2a64b; /* Site · Light */ --accent-moss: var(--brand-moss); --bg-paper: var(--brand-paper); /* Site · Dark — раздел камней */ [data-theme="dark"] { --accent-moss: var(--brand-amber); --bg-paper: var(--brand-ink); }
CRM — рабочий инструмент со своими стилями
CRM — ежедневный инструмент Ольги, поэтому журнальный стиль сайта сюда не переносится: только Golos Text, нейтральные поверхности, плотные списки. Фирменные цвета работают как значения статусов заявок.
status/new · progress · sent · paid · closed · lead — по 4 оттенка на статус
Что даёт система и что дальше
Один набор на две темы
Карточки, кнопки и фильтры в тёмном разделе камней — те же компоненты, что в светлом. Их перекрашивает режим Dark, тёмных копий нет.
Любое число пар
Мозаика собирается сама из блоков и хвоста; проверено на 9, 15, 16 и 17 парах.
1 правка
В палитре Base меняет оттенок сразу на сайте и в CRM — смысловые токены ссылаются на неё.
По именам
Агент верстает из готовых компонентов и токенов — в коде 0 цветов, заданных вручную.
Порядок — тот же, но с одним исключением
- СразуЦвета и шрифты завела бы переменными и стилями с первого черновика. Это почти ничего не стоит и не замедляет поиск — зато аудит v3 был бы короче.
- После выбораКомпоненты, правила сетки и мозаику — по-прежнему после того, как направление утверждено: систематизировать то, что завтра будет не нужно, дороже, чем потом собрать.
- В продуктеВ команде с готовой дизайн-системой порядок обратный: новый экран начинается с системы, а не с черновика.
- ДальшеCode Connect: сейчас Figma и код связаны одинаковыми именами и страницей /kit, следующий шаг — чтобы агент получал код компонента прямо из макета.
Система окупилась в тот момент, когда вёрстку стал делать ИИ-агент: он перестал придумывать значения, потому что всё, что ему нужно, уже названо.