Перейти к основному содержимому

Эстетика дизайн-системы

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

Что такое эстетика дизайн-системы?​

Эстетика дизайн-системы — это структурированный навык, который охватывает:

  • Типографика: Семейства шрифтов, размеры, начертания и межстрочный интервал
  • Цвет: Основные, второстепенные, акцентные и нейтральные палитры
  • Отступы: Масштабы отступов (padding, margin, gap)
  • Границы: Токены радиуса и ширины
  • Тени: Токены возвышения и глубины
  • Анимация: Анимации и переходы

Эти решения сохраняются в файле theme.json вашей темы, создавая единую визуальную систему.

Зачем использовать эстетику дизайн-системы?​

Последовательность (Consistency)​

Дизайн-система гарантирует:

  • Что весь текст использует одну и ту же типографическую шкалу
  • Что цвета используются последовательно на всем сайте
  • Что отступы следуют предсказуемой схеме
  • Что анимации выглядят едиными

Эффективность (Efficiency)​

Вместо того чтобы принимать дизайнерские решения страница за страницей, вы:

  • Определяете токены один раз
  • Применяете их везде
  • Обновляете глобально, изменив одно значение

Гибкость (Flexibility)​

Вы можете:

  • Быстро скорректировать всю дизайн-систему
  • Экспериментировать с разными эстетиками
  • Поддерживать единообразие бренда, одновременно развиваясь

Активация навыка «Эстетика дизайн-системы»​

Ручная активация​

Вы можете запустить этот навык в любое время:

"Помоги мне улучшить дизайн-систему"

или

"Давай улучшим эстетику моего сайта"

или

"Проведи со мной процесс принятия решений для дизайн-системы"

Автоматические предложения​

Агенты могут предложить использовать этот навык, когда вы:

  • Запрашиваете изменения в дизайне
  • Просите о «современном» или «профессиональном» редизайне
  • Хотите улучшить визуальную согласованность
  • Готовитесь к запуску сайта

Процесс эстетики дизайн-системы​

Шаг 1: Типографика​

Агент спрашивает о ваших предпочтениях в шрифтах:

Какой ваш предпочтительный стиль типографики?
- С засечками (традиционный, элегантный)
- Без засечек (современный, чистый)
- Моноширинный (технический, для кода)

Для шрифта заголовков:
- Хотите ли вы отдельный шрифт для заголовков или использовать тот же, что и для основного текста?
- Предпочтение: жирный, элегантный, игривый, минималистичный?

Для шрифта основного текста:
- Читаемость — ключ к успеху. Что вы предпочитаете:
  - Крупный, более просторный текст
  - Компактный, эффективный текст
  - Стандартный размер

Затем агент определяет:

  • Шрифт заголовков: Основной шрифт для заголовков и заголовков разделов
  • Шрифт основного текста: Шрифт для абзацев и основного контента
  • Моноширинный шрифт: Шрифт для кода и технического контента
  • Шкала размеров: Предварительно заданные размеры (small, base, large, XL и т. д.)
  • Шкала начертаний: Начертания шрифтов (regular, medium, bold и т. д.)
  • Межстрочный интервал: Расстояние между строками для лучшей читаемости

Шаг 2: Цветовая палитра​

Давайте определим вашу цветовую палитру.

Основной цвет (цвет бренда):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или HEX-код]

Вторичный цвет (поддерживающий цвет):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или HEX-код]

Акцентный цвет (выделения и CTA):
- Текущий: [показывает существующий цвет]
- Изменить на: [выбор цвета или HEX-код]

Нейтральная палитра (серые тона для текста, границ, фонов):
- Светлый: [цвет]
- Средний: [цвет]
- Темный: [цвет]

Агент создает полную палитру, включая:

  • Основные, вторичные и акцентные цвета
  • Нейтральные серые тона (светлый, средний, темный)
  • Семантические цвета (успех, предупреждение, ошибка)
  • Состояния при наведении и активации

Шаг 3: Отступы​

Какой «воздух» вы хотите?

Предпочтение масштаба отступов:
- Компактный (плотные, эффективные макеты)
- Нормальный (сбалансированные отступы)
- Просторный (щедрое использование белого пространства)

Это влияет на:
- Отступы внутри кнопок и карточек
- Отступы между разделами
- Промежуток между элементами сетки

Агент определяет токены отступов:

  • Базовая единица (обычно 4px или 8px)
  • Масштаб: xs, sm, md, lg, xl, 2xl
  • Конкретные значения для padding, margin, gap

Шаг 4: Границы и тени​

Визуальная глубина и определение:

Предпочтение радиуса скругления:
- Резкий (без скруглений)
- Едва заметный (малый радиус)
- Закругленный (средний радиус)
- Очень закругленный (большой радиус)

Глубина тени:
- Плоский (без теней)
- Едва заметный (легкие тени)
- Выраженный (сильные тени)

Агент создает:

  • Токены радиуса скругления (для кнопок, карточек, полей ввода)
  • Токены теней для уровней возвышения
  • Токены ширины границ

Шаг 5: Анимация и движение​

Какое ощущение должен производить ваш сайт при взаимодействии?

Предпочтение анимации:
- Минимальный (без анимаций)
- Едва заметный (мягкие переходы)
- Игривый (заметные анимации)

Конкретные анимации:
- Переходы страниц: затухание, сдвиг или нет?
- Наведение на кнопку: масштабирование, смена цвета или оба?
- Состояния загрузки: спиннер, скелетон или прогресс-бар?

Агент определяет:

  • Продолжительность переходов (быстрый, нормальный, медленный)
  • Функции сглаживания (ease-in, ease-out, ease-in-out)
  • Ключевые кадры анимации для общих взаимодействий

Применение эстетики дизайн-системы​

Автоматическое применение​

После завершения навыка агент:

  1. Обновляет theme.json вашей темы всеми токенами
  2. Применяет дизайн-систему к активной теме
  3. Перегенерирует стили блоков в соответствии с новой системой
  4. Активирует обновленную тему

Ручное применение​

Вы также можете отредактировать theme.json напрямую:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

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

Спросите агента​

"Покажи мне мою дизайн-систему"

или

"Какие у меня текущие токены дизайна?"

Агент отобразит вашу типографику, цвета, отступы и другие токены.

Просмотр theme.json​

Откройте /wp-content/themes/[theme-name]/theme.json в текстовом редакторе, чтобы увидеть сырые определения токенов.

Обновление дизайн-системы​

Быстрые обновления​

Попросите агента внести конкретные изменения:

"Сделай основной цвет темнее"

или

"Увеличь масштаб отступов на 20%"

или

"Измени шрифт заголовков на с засечками"

Полный редизайн​

Повторно запустите навык «Эстетика дизайн-системы»:

"Давай переработаем всю мою дизайн-систему"

Это снова проведет вас через все решения, начиная с ваших текущих значений.

Частичные обновления​

Обновите определенные аспекты:

"Обнови только цветовую палитру, остальное оставь как есть"

Лучшие практики дизайн-системы​

Последовательность​

  • Используйте одни и те же токены везде
  • Не создавайте разовые цвета или размеры
  • Ссылайтесь на токены, а не жестко задавайте значения

Именование​

Используйте понятные, семантические имена:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Масштабируемость​

Проектируйте систему с учетом масштабирования:

  • Используйте относительные единицы (rem, em) вместо пикселей
  • Создавайте шкалы (xs, sm, md, lg, xl) вместо произвольных значений
  • Планируйте будущие дополнения

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

Документируйте свою дизайн-систему:

  • Почему вы выбрали определенные цвета
  • Когда использовать каждый токен
  • Исключения и крайние случаи

Общие паттерны дизайн-систем​

Современный минимализм​

  • Типографика без засечек (Inter, Helvetica)
  • Ограниченная цветовая палитра (2–3 цвета)
  • Просторные отступы
  • Едва заметные тени
  • Плавная, быстрая анимация

Теплый и дружелюбный​

  • Смесь шрифтов с засечками и без
  • Теплая цветовая палитра (оранжевый, теплые серые)
  • Закругленные углы
  • Мягкие тени
  • Игривая анимация

Профессиональный корпоративный​

  • Чистый шрифт без засечек (Roboto, Open Sans)
  • Нейтральная палитра с акцентным цветом
  • Структурированные отступы
  • Минимальные тени
  • Едва заметные переходы

Креативный и смелый​

  • Выразительная типографика
  • Яркая цветовая палитра
  • Разнообразные отступы
  • Сильные тени
  • Заметная анимация

Устранение неполадок​

Изменения в дизайн-системе не отображаются

  • Очистите кэш браузера
  • Пересоберите сайт, если вы используете статический генератор
  • Убедитесь, что theme.json является валидным JSON
  • Проверьте, что тема активна

Цвета выглядят по-разному на разных страницах

  • Проверьте наличие конфликтующих CSS в плагинах
  • Убедитесь, что все страницы используют одну и ту же тему
  • Очистите любые плагины кэширования

Я хочу вернуться к предыдущей дизайн-системе

  • Спросите агента: "Покажи мне историю моей дизайн-системы"
  • Вручную отредактируйте theme.json, чтобы вернуть предыдущие значения
  • Повторно запустите навык с другими выборами

Следующие шаги​

После определения дизайн-системы:

  1. Просмотрите сайт: Посетите свой сайт, чтобы увидеть новый дизайн
  2. Дальнейшая доработка: Внесите корректировки, снова используя навык
  3. Создайте шаблоны: Создайте пользовательские шаблоны блоков, используя токены вашей дизайн-системы
  4. Документируйте: Поделитесь своей дизайн-системой с членами команды