Ми використовуємо Google Analytics для статистики трафіку. Аналітичні cookie встановлюються лише з вашої згоди. Без згоди статистика оцінюється за сигналами без cookie. Політика щодо cookie.
PDS · Дизайн-система
PDS — власна дизайн-мова Protocore, виділена з продуктів, які ми створюємо, і загартована в продакшені. Dark-first, на токенах і задокументована від початку до кінця — ті самі компоненти, що відображають наші продукти та клієнтські дашборди, упаковані так, щоб команда могла впровадити їх за півдня.
Функції
Від примітивів до повних композицій сторінок — 101 компонент, кожен винесений із продукту, який ми випускаємо, а не придуманий у вакуумі. Якщо компонент є в PDS, він уже попрацював по-справжньому: на ньому побудовано цей сайт, демо продуктів і клієнтські дашборди.
Колір, шрифт, відступи й рух визначаються з одного шару токенів. Змініть токен — і всі компоненти підлаштуються: без перевизначень у компонентах і розбіжностей між продуктами.
Темна й світла теми та п’ять акцентних кольорів — усе керується тими самими токенами. Варіація бренду — це заміна токенів, а не форк: усі продукти родини рендеряться з однієї системи.
Контраст, висоту та колір спершу вибудовано для темної теми; світла похідна від тих самих токенів. Результат — темний режим, який відчувається рідним, а не інвертованим.
Кнопки, поля введення, селекти, перемикачі, слайдери та каркас полів — з підписами, підказками й помилками. Стани вже продумано: фокус, вимкнений, невалідний і завантаження поводяться однаково в кожному продукті.
Стеки, сітки, роздільники та оболонки сторінок компонують екрани без ad-hoc CSS. Найбільші компоненти — повні композиції сторінок: патерни hero, секцій і футера, взяті зі сторінок, які ми випускаємо.
Хедери, вкладки, breadcrumbs і меню з вбудованою адаптивною та клавіатурною поведінкою. Навігація на цьому сайті — це сам компонент, а не його імітація.
Модальні вікна, sheets, drawers, popovers і підказки на одній моделі шарів — захоплення фокуса, закриття й накладання вирішено один раз, централізовано. Жоден продукт не тягне власну арифметику z-index.
Таблиці, списки, плитки статистики, бейджі й таймлайни для продуктів, що живуть на числах. Щільність операторських консолей у всій родині забезпечують ці компоненти.
Тости, банери, порожні стани, прогрес і скелетони — непоказні стани, продумані заздалегідь. Продукт на PDS має виважену відповідь для завантаження, порожнього й невдалого станів.
Редакційна шкала шрифтів із моноширинними мітками для технічного регістру — голос, який ви бачите на кожній поверхні Protocore. Шкала складається з токенів, тож продукти налаштовують її, не виходячи за межі системи.
Тривалості та easing поставляються як токени разом із компонентами, що їх уже використовують. Інтерфейси рухаються однаково в усіх продуктах, бо ніхто не підбирає таймінг анімації вручну.
Контраст, стани фокуса й клавіатурна поведінка вбудовані в компоненти, а не залишені як вправа. Беріть значення за замовчуванням — і доступність іде в комплекті.
Стилізація — це статичний CSS, що визначається на етапі збирання: без CSS-in-JS рантайму, без обчислень у браузері. Шар стилів не додає на сторінку жодного JavaScript.
Система також постачається як окремий CSS-пакет — токени й утилітарні класи без потреби в React. Серверні сторінки, листи та стеки без React беруть із того самого джерела істини.
Токени експортуються для вебу як CSS-змінні, як пресет Tailwind і в нативних форматах для мобільних платформ. Одне визначення бренду — скрізь, де працює продукт.
React-шар огортає застосунок у provider і відкриває токени через хуки — компоненти читають активну тему й акцент замість захардкоджених значень. Перемикання тем — це стан, а не перезбирання.
Той самий механізм, що дає PDS п’ять акцентів, дає whitelabel-продукту його бренд: замініть значення токенів, залиште компоненти. Кожен whitelabel-застосунок родини — доказ, що це працює.
Машинозчитувана мапа всієї системи — компонентів, токенів, патернів — опублікована як llms.txt. Спрямуйте на неї LLM, і згенерований код використовуватиме справжні компоненти PDS замість вигаданих правдоподібних.
MCP-сервер надає систему кодинг-агентам напряму: компоненти, props і токени, доступні для запитів, поки агент працює. Дизайн-система відповідає на запитання, а не вставляється в промпти.
Кожен компонент є на pds.protocore.io з живими прикладами, props і кодом для копіювання. Документація рендериться на самій PDS — що ви читаєте, те й випускаєте.
PDS постачається як версійні пакети із семантичними версіями та changelog. Оновлення свідомі: команда переходить, коли вирішить, а changelog точно каже, що змінилося.
Пакети встановлюються з приватного npm-реєстру Protocore за токеном команди в .npmrc — стандартний npm-процес, обмежений ліцензованими командами. Жодних zip-архівів, жодних встановлень копіюванням.
Підписаний ліцензійний ключ перевіряється локально — жодного phone-home, жодних мережевих перевірок у вашому білді. Проблеми з ліцензією проявляються як попередження на етапі розробки й ніколи не ламають продакшн-застосунок.
PDS є пропрієтарною та ліцензується на команду. Запросіть доступ, і ми все налаштуємо — пакети, документацію та джерела токенів, — щоб команда могла впровадити її за один день.
FAQ
На команду, а не на користувача чи проєкт. Одна ліцензія охоплює всіх, хто працює з PDS у межах команди: токени, компоненти та документацію. Вартість залежить лише від кількості команд, які його впроваджують, а whitelabel-продукти, що ми створюємо для вас, уже працюють на ньому.
З приватного реєстру npm.protocore.io. Облікові дані дозволяють вашій збірці завантажувати пакети @protocore, а далі токени й компоненти встановлюються як будь-яка залежність.
Токени доступні для web, .NET і native, тож один колір чи радіус означає те саме на кожній платформі. Компоненти постачаються для React, а незалежний від фреймворків CSS-шар містить ті самі токени й класи для команд, що не використовують React.
Dark-first і доступний за замовчуванням: дві теми, п'ять акцентів, усе керується токенами, а CSS без runtime не навантажує завантаження. Ті самі компоненти працюють у наших продуктах і клієнтських дашбордах.
Він створений для цього: карта llms.txt і MCP-сервер дають агентам змогу читати систему й правильно з нею працювати, а pds.protocore.io містить живі приклади, props і код для копіювання для кожного компонента й токена.
Вартість
PDS ліцензується на команду, а не на користувача чи проєкт: одна ліцензія охоплює всіх, хто працює з ним у межах команди — токени, компоненти та документацію.
Почніть з однієї команди й додавайте інші в міру впровадження. На вартість впливає лише кількість команд, які працюють на PDS.
Whitelabel-продукти, які ми створюємо для вас, уже працюють на PDS. Окрема ліцензія потрібна командам, що впроваджують його у власних продуктах.
Ліцензування залежить від кількості команд, а не від штату чи обсягу використання. Запросіть доступ — ми розрахуємо його для команд, які працюватимуть із PDS.
Оцінка
Вся система — на pds.protocore.io: живі приклади, props і код для копіювання для кожного компонента й токена.
Дизайн-токени для web, .NET і native, тож один колір чи радіус означає те саме на кожній платформі, яку ви випускаєте.
PDS ліцензується на команду: одна ліцензія охоплює всіх, хто з ним працює — токени, компоненти та документацію.
Облікові дані для приватного реєстру npm.protocore.io, щоб встановлювати пакети @protocore, потрібні вашій збірці.
PDS є пропрієтарною системою і ліцензується для команди. Запросіть доступ — ми все налаштуємо.
Усе вище працює в продакшен-демо, які ми можемо вам показати: окремо, whitelabel або як єдина платформа. Розкажіть, що ви будуєте, і ми покажемо найкоротший шлях.
