Дизайн-система не обязана быть тяжёлой. На небольших и средних проектах полноценный Storybook с MDX-документацией, версионированием и отдельной CI часто становится бутылочным горлышком: его нужно поддерживать, синхронизировать с продом и обучать новых разработчиков. Мы используем более лёгкий подход и в этом посте объясняем, почему.

Контекст

Schedars работает с продуктами, где команда дизайнеров и разработчиков — это два-пять человек, а не двадцать. В таком масштабе полная дизайн-система с публикацией в npm и Chromatic-визуальными тестами требует больше времени на инфраструктуру, чем экономит на компонентах. Поэтому мы строим лёгкую систему, которая решает реальные задачи: единые токены, переиспользуемые компоненты, предсказуемые отступы.

Подход

Основа — Tailwind CSS с кастомизированными design tokens в tailwind.config: цвета, типографика, отступы, радиусы, тени, breakpoints. Поверх токенов — набор Astro-компонентов в src/components/ui, которые собираются из тех же утилит. Никакого отдельного пакета, никакой публикации, никакой документации в Storybook. Документация живёт рядом с компонентами в виде readable-кода и нескольких usage-примеров.

Что мы делаем

  • Дизайн-токены в tailwind.config как единый источник правды
  • Astro-компоненты с понятными props и слотами вместо магических классов
  • Variant-логика через clsx или class-variance-authority, без CSS-in-JS
  • Минимальный visual regression: скриншоты ключевых страниц через Playwright
  • Линтер на запрещённые arbitrary values в Tailwind, чтобы все ходили через токены
  • Один файл с примерами использования каждого компонента — вместо отдельного Storybook

Чему научились

Лёгкая система масштабируется до определённого предела — обычно до команды в 8-10 человек или до момента, когда компоненты начинают использоваться в трёх и более продуктах. До этого предела дополнительные слои инфраструктуры тормозят больше, чем помогают. Второй урок — токены важнее, чем компоненты. Если у вас единые цвета, отступы и типографика, разработчик соберёт нужный компонент за пятнадцать минут; если токенов нет, никакая библиотека не спасёт от визуального хаоса.

Что дальше

Думаете о дизайн-системе для своего продукта? Напишите через /contacts — поможем оценить, нужен ли вам Storybook или достаточно лёгкого подхода на токенах.