Logotype

Дизайн-система на pbstyles и pbcomponents

Библиотеки стилей и React-компонентов, на которых собран этот сайт. Для каждой есть файл в Figma с теми же цветами, шрифтами и компонентами, что и в коде.

Попробуйте сами

Поставьте оба пакета, подключите тему pbstyles в globals.css — и компоненты готовы к работе. Макеты с теми же токенами открыты в Figma.

npm i @prosazhin/pbcomponents @prosazhin/pbstyles
Документация pbcomponentsДокументация pbstyles

Путь одного цвета

Токен primary-300 сохраняет имя на каждом этапе — от стиля в Figma до компонента. При смене темы он меняется везде.

  1. 01Стиль в Figma
    primary/300
  2. 02Токен в JSON
    color.primary.300
  3. 03CSS-переменная
    --color-primary-300
  4. 04Класс Tailwind
    bg-primary-300
  5. 05Компонент

Зачем дизайн-система небольшой команде

Чем меньше команда, тем дороже обходится каждый компонент, сделанный заново.

  • Кнопка проектируется, верстается и тестируется один раз

    В небольшой команде каждый новый проект начинается с кнопок, полей и модальных окон, которые нужно заново сделать и проверить в браузерах. Дизайн-система решает эту задачу один раз — дальше остаётся собирать экраны.

  • А если всё сделает нейросеть?

    Нейросеть соберёт кнопку за минуту, но её всё равно придётся проверить: состояния, фокус, тёмную тему, отображение в браузерах — и так для каждого компонента. К тому же генерация стоит денег. Здесь всё это уже сделано, проверено и бесплатно, поэтому нейросети можно сразу поручить страницы и продукт.

  • Меньше тестирования

    Фокус, клавиатурная навигация, состояния disabled и loading проверены в библиотеке. В проекте остаётся проверить логику экрана.

  • Единый вид интерфейса

    Отступы, цвета и радиусы берутся из токенов, поэтому со временем интерфейс не расходится в деталях.

  • Макет совпадает с кодом

    Цвет в Figma и класс в коде называются по одной схеме: primary/300 и bg-primary-300. Сверять значения вручную не нужно.

  • Тёмная тема уже готова

    Обе темы заданы в токенах и переключаются атрибутом data-theme. Отдельная работа над тёмной версией компонентов не требуется.

  • Быстрый старт

    Два пакета и одна строка в CSS — и в проекте уже есть типографика, палитра и компоненты.

  • Проще подключать новых людей

    Новому участнику достаточно документации: в ней описаны все компоненты, их свойства и внешний вид.

Четыре библиотеки

Все четыре я разрабатываю сам — от макетов в Figma до публикации в npm. Основные — pbstyles и pbcomponents, ещё две — генераторы стилей из токенов, которые подойдут и для другой дизайн-системы.

  • Основа

    pbstyles

    Токены и готовые стили: палитра, типографика, радиусы, тени, брейкпоинты и анимации. Светлая и тёмная тема уже настроены.

    • Тема для Tailwind CSS 4
    • CSS-переменные, LESS и SCSS
    • Токены в формате DTCG
    • Файл со стилями в Figma Community
  • Компоненты

    pbcomponents

    React-компоненты на pbstyles: кнопки, поля, селекты, табы, диалоги, уведомления, поповеры и хуки к ним.

    • React 19 и TypeScript
    • Компоненты, провайдеры и хуки
    • Тесты на Vitest и Testing Library
    • Те же компоненты в Figma Community
  • Инструмент

    tailwind-dictionary

    Собирает тему Tailwind CSS 3 или 4 из JSON-токенов, чтобы не писать её вручную: утилиты, светлая и тёмная тема.

    • Понимает выгрузку переменных из Figma, DTCG и Style Dictionary
    • Любое количество тем
    • CLI, программный API и плейграунд в браузере
  • Инструмент

    mixin-dictionary

    То же для проектов без Tailwind: собирает из токенов CSS-переменные, переменные и миксины LESS и SCSS.

    • Понимает выгрузку переменных из Figma, DTCG и Style Dictionary
    • Миксины для типографики, брейкпоинтов и анимаций
    • CLI, программный API и плейграунд в браузере

Как это устроено

Цвета, размеры и шрифты хранятся в одном месте — в JSON-токенах. Всё остальное генерируется из них.

  1. 01

    Figma

    В Figma Community опубликованы два файла: стили pbstyles и компоненты pbcomponents со всеми состояниями. Новые экраны проектируются из них.

  2. 02

    Токены

    Те же значения хранятся в JSON. Светлая и тёмная тема — два файла, которые ссылаются на общую палитру.

    tokens/themes/dark.json
    {
  "color": {
    "$type": "color",
    "primary": {
      "50":  { "$value": "{color.blue.950}" },
      "300": { "$value": "{color.blue.400}" },
      "400": { "$value": "{color.blue.300}" }
    }
  }
}
  3. 03

    Генерация

    tailwind-dictionary собирает из токенов тему Tailwind 4, mixin-dictionary — CSS-переменные, LESS и SCSS. Стили не пишутся вручную, поэтому код не расходится с макетом.

    config-tailwind-dictionary.json
    {
  "version": 4,
  "source": ["tokens/*.json"],
  "themes": {
    "light": ["tokens/themes/light.json"],
    "dark": ["tokens/themes/dark.json"]
  },
  "output": "./styles"
}
  4. 04

    pbstyles в npm

    Сгенерированные стили публикуются пакетом. После подключения в проекте доступны классы bg-primary-300, text-h48, rounded-16 и другие.

    globals.css
    @import 'tailwindcss';
@import '@prosazhin/pbstyles/styles/tailwind/theme.css';
  5. 05

    pbcomponents

    Компоненты построены на тех же классах: они выглядят так же, как в Figma, и меняют тему вместе со страницей.

    page.tsx
    import { Button } from '@prosazhin/pbcomponents';

<Button size='m' color='primary' theme='filled'>
  Save
</Button>
  6. 06

    Проект

    Остаётся собрать интерфейс. Так сделаны этот сайт и документация к библиотекам — тему можно переключить в шапке.

Кому подойдёт

Подойдёт, если

  • продукт делает один человек или небольшая команда
  • нужно быстро собрать прототип, MVP или пет-проект
  • в команде нет отдельного дизайнера или верстальщика
  • нужны светлая и тёмная тема

Не подойдёт, если

  • у компании большая команда и собственный бренд — в этом случае лучше своя система
  • нужна гибкость headless-библиотек, например Radix или shadcn/ui
  • проект не на React — хотя pbstyles подойдёт и без него

Было интересно?

Если нужна помощь с дизайн-системой, интерфейсом или фронтендом либо есть вопросы по библиотекам — напишите.