Мы используем Google Analytics для статистики посещаемости. Аналитические cookie устанавливаются только с вашего согласия. Без согласия статистика оценивается по сигналам, не использующим cookie. Политика использования cookie.
PDS · Дизайн-система
PDS — собственный дизайн-язык Protocore, выделенный из наших продуктов и проверенный в продакшене. Dark-first, на токенах, с полной документацией: те же компоненты отрисовывают наши продукты и клиентские дашборды, а команда может подключить их за один вечер.
Возможности
От примитивов до готовых композиций страниц — 101 компонент, каждый выделен из продукта, который мы выпускаем, а не придуман в вакууме. Если компонент есть в PDS, он уже поработал в деле: на нём построены этот сайт, демо продуктов и клиентские дашборды.
Цвет, шрифты, отступы и анимация задаются из единого слоя токенов. Меняете токен — и все компоненты следуют за ним: никаких переопределений на уровне компонентов и расхождений между продуктами.
Тёмная и светлая темы, пять акцентных цветов — всё управляется одними и теми же токенами. Вариация бренда — это подмена токенов, а не форк: каждый продукт семейства строится на одной системе.
Контраст, глубина и цвет сначала прорабатываются для тёмной темы, а светлая выводится из тех же токенов. В результате тёмный режим выглядит родным, а не инвертированным.
Кнопки, поля ввода, селекты, переключатели, слайдеры и каркас полей — с подписями, подсказками и ошибками. Состояния уже продуманы: фокус, disabled, invalid и loading ведут себя одинаково во всех продуктах.
Стеки, сетки, разделители и каркасы страниц позволяют собирать экраны без ad-hoc CSS. Самые крупные компоненты — композиции целых страниц: паттерны hero, секций и футеров, взятые с реальных страниц.
Хедеры, табы, хлебные крошки и меню с адаптивным поведением и управлением с клавиатуры из коробки. Навигация на этом сайте — сам компонент, а не его имитация.
Модальные окна, шторки, дровер-панели, поповеры и тултипы работают на одной модели слоёв: захват фокуса, закрытие и порядок наложения решены один раз и централизованно. Ни один продукт не ведёт собственную арифметику z-index.
Таблицы, списки, карточки статистики, бейджи и таймлайны для продуктов, живущих цифрами. Плотность операторских консолей во всём семействе обеспечивают эти компоненты.
Тосты, баннеры, пустые состояния, прогресс и скелетоны — невзрачные состояния, продуманные заранее. У продукта на PDS есть взвешенный ответ на загрузку, пустоту и сбой.
Редакторская типографская шкала с моно-подписями для технического регистра — голос, который слышен на всех поверхностях Protocore. Шкала состоит из токенов, поэтому продукты настраивают её, не выходя за рамки системы.
Длительности и easing-кривые поставляются токенами, а компоненты уже их используют. Интерфейсы двигаются одинаково во всех продуктах, потому что никто не подбирает тайминги вручную.
Контраст, состояния фокуса и работа с клавиатуры встроены в компоненты, а не оставлены на самостоятельную доработку. Используйте настройки по умолчанию — и доступность появится сама.
Стили — это статический CSS, разрешаемый на этапе сборки: никакого CSS-in-JS рантайма и ничего не вычисляется в браузере. Слой стилей не добавляет на страницу ни строки JavaScript.
Система также поставляется как обычный CSS-пакет — токены и утилитарные классы без необходимости в React. Страницы с серверным рендерингом, письма и стеки без React используют один и тот же источник истины.
Токены экспортируются для веба как CSS-переменные и пресет Tailwind, а для мобильных платформ — в нативных форматах. Единое описание бренда, которое работает везде, где запущен продукт.
React-слой оборачивает приложения в провайдер и отдаёт токены через хуки — компоненты читают активную тему и акцент, а не зашивают значения. Переключение темы — это состояние, а не пересборка.
Тот же механизм, что даёт PDS пять акцентов, даёт whitelabel-продукту его бренд: меняете значения токенов, компоненты остаются. Каждое whitelabel-приложение в семействе — доказательство, что это работает.
Машиночитаемая карта всей системы — компоненты, токены, паттерны — публикуется в llms.txt. Направьте на неё LLM, и сгенерированный код будет использовать реальные компоненты PDS, а не выдумывать правдоподобные.
MCP-сервер открывает систему кодинг-агентам напрямую: компоненты, пропсы и токены доступны для запросов прямо во время работы агента. Дизайн-система сама отвечает на вопросы, а не вставляется в промпты.
Каждый компонент описан на pds.protocore.io с живыми примерами, пропсами и кодом для копирования. Документация построена на самой PDS — то, что вы читаете, и есть то, что вы выпускаете.
PDS поставляется версионированными пакетами с семантическими версиями и changelog. Обновления осознанные: команда переходит, когда решит сама, а changelog точно говорит, что изменилось.
Пакеты устанавливаются из приватного npm-реестра Protocore по токену команды в .npmrc — стандартный npm-процесс, доступный лицензированным командам. Никаких zip-архивов и установки копированием.
Подписанный лицензионный ключ проверяется локально — без обращений к серверу и сетевых проверок в сборке. Проблемы с лицензией проявляются предупреждениями на этапе разработки и никогда не ломают продакшен-приложение.
PDS — проприетарная система, лицензируется на команду. Запросите доступ, и мы всё настроим — пакеты, документацию и исходники токенов, — чтобы команда могла внедрить её за один вечер.
FAQ
На команду, а не на пользователя или проект. Одна лицензия покрывает всех, кто работает с PDS внутри команды: токены, компоненты и документацию. Стоимость зависит только от числа команд, которые её внедряют, а whitelabel-продукты, которые мы делаем для вас, уже работают на PDS.
Из приватного реестра npm.protocore.io. Учётные данные дают вашей сборке доступ к пакетам @protocore, а дальше токены и компоненты ставятся как обычные зависимости.
Токены выпускаются для web, .NET и нативных платформ, поэтому цвет или радиус означают одно и то же везде, где вы выпускаете продукт. Компоненты поставляются для React, а фреймворконезависимый CSS-слой несёт те же токены и классы для команд, которые не используют React.
Dark-first и доступность по умолчанию: две темы, пять акцентов, всё на токенах, а CSS без рантайма не тратит ресурсы при загрузке. Те же компоненты отрисовывают наши продукты и клиентские дашборды.
Она создана и для этого: карта llms.txt и MCP-сервер позволяют агентам читать систему и корректно строить на ней интерфейсы, а на pds.protocore.io есть живые примеры, props и код для копирования по каждому компоненту и токену.
Цены
PDS лицензируется на команду, а не на пользователя или проект: одна лицензия покрывает всех, кто работает с системой внутри команды — токены, компоненты и документацию.
Начните с одной команды и подключайте новые по мере внедрения. На стоимость влияет только число команд, работающих на PDS.
Whitelabel-продукты, которые мы делаем для вас, уже работают на PDS. Отдельная лицензия нужна командам, которые внедряют её в собственные продукты.
Лицензирование считается по командам, а не по численности или объёму использования. Запросите доступ, и мы рассчитаем его под команды, которые будут работать с системой.
Оценка
Вся система на pds.protocore.io: живые примеры, props и код для копирования по каждому компоненту и токену.
Дизайн-токены для web, .NET и нативных платформ: цвет или радиус означают одно и то же на любой платформе, где вы выпускаете продукт.
PDS лицензируется на команду: одна лицензия покрывает всех, кто с ней работает, — токены, компоненты и документацию.
Учётные данные для приватного реестра npm.protocore.io, чтобы устанавливать пакеты @protocore, которые нужны вашей сборке.
PDS — проприетарная система, лицензируется на команду. Запросите доступ, и мы всё настроим.
Всё перечисленное работает в продакшен-демо, которые мы можем вам показать: отдельно, как whitelabel или единой платформой. Расскажите, что вы строите, и мы покажем кратчайший путь.
