Impeccable: дизайн-система для AI-ассистентов

Когда в прошлом месяце я в очередной раз получил Figma-макет от дизайнера с пометкой «нужно к вчера», а в файле — три альтернативных варианта кнопки с разными border-radius, стало ясно: нам нужен другой подход. Особенно когда половину этих компонентов всё равно придётся переделывать под капризы LLM-генерации.

Проблема: дизайн в эпоху AI-ассистентов

Традиционные дизайн-системы ломаются о три реалии 2024:

1. Динамические интерфейсы — ChatGPT-like чаты, где контент генерируется на лету
2. Контекстный UI — когда кнопки/карточки меняют стиль в зависимости от контента
3. Agentic workflows — те самые «сделай мне красивый dashboard» без ТЗ

Impeccable предлагает не просто набор компонентов, а правила их адаптации под эти сценарии. Вместо фиксированных цветов — система контрастов. Вместо жёстких отступов — относительные единицы, привязанные к типографике.

Как это работает на практике

Клонируем репозиторий и видим структуру:

/impeccable
  /tokens
    spacing.json  # 4px → 1rem, но с условиями
    colors.json   # Не HEX, а semantic-пары
  /generators
    figma-plugin  # Тот самый «мост»

Главный трюк — в tokens/spacing.json:

{
  "base": "1rem",
  "nested": {
    "multiplier": 1.5,
    "conditions": ["container-width >= 768px"]
  }
}

Это не статический токен, а реактивное правило. В CSS-генераторе он превратится в:

:root {
  --spacing-base: 1rem;
}

@media (min-width: 768px) {
  .nested-component {
    padding: calc(var(--spacing-base) * 1.5);
  }
}

Где это реально экономит время

1. AI-генерация интерфейсов
   Когда GPT-4o рисует вам «карточку товара», Impeccable гарантирует, что отступы будут соблюдать иерархию, даже если контент не влез в макет.

2. Динамические темы
   Переключение light/dark mode работает на уровне семантических цветов (primary, danger), а не конкретных HEX-значений.

3. Консистентность в команде
   Фича-бранчи перестают выглядеть как франкенштейн, потому что все компоненты используют одни и те же правила адаптации.

Ограничения и подводные камни

• Порог входа
  Придётся переучивать дизайнеров: вместо «сделай кнопку синей» — «задай primary-акцент в контексте hero-секции».

• Перформанс
  Генерация CSS на лету через JS может давать просадку на слабых устройствах. В нашем проекте пришлось закешировать стили на этапе сборки.

• Кастомизация
  Если нужно резко отклониться от системы (например, для маркетинговой страницы), придётся писать обходные пути.

Что попробовать сегодня

1. Подключите Figma-плагин из репозитория и попробуйте перевести один экран на токены Impeccable.
2. Замените в проекте 3-4 хардкодных цвета на семантические аналоги из /tokens/colors.json.
3. Поэкспериментируйте с генерацией UI через ChatGPT, передав ему правила из /docs/prompts.md.

Лично у меня после внедрения время на «приведение в порядок» AI-сгенерированных интерфейсов сократилось с 3 часов до 20 минут. Но главное — исчезли бесконечные споры про «правильный» отступ между секциями. Теперь это решает система, а не очередной митинг.

Источник: https://github.com/pbakaus/impeccable