Używamy Google Analytics do statystyk ruchu. Analityczne pliki cookie zapisujemy tylko za Twoją zgodą. Bez zgody statystyki są szacowane na podstawie sygnałów niewymagających cookies. Polityka cookies.
PDS · Design System
PDS to własny język projektowy Protocore, wyodrębniony z produktów, które budujemy, i sprawdzony w produkcji. Dark-first, oparty na tokenach i w pełni udokumentowany — te same komponenty, które renderują nasze produkty i panele klientów, spakowane tak, by zespół wdrożył je w jedno popołudnie.
Funkcje
Od prymitywów po pełne kompozycje stron — 101 komponentów, z których każdy wyodrębniono z produktu, który dostarczamy, a nie zaprojektowano w oderwaniu. Jeśli komponent jest w PDS, to już wykonał prawdziwą pracę: renderują się na nim ta strona, dema produktów i dashboardy naszych klientów.
Kolor, typografia, odstępy i ruch wynikają z jednej warstwy tokenów. Zmieniasz token, a wszystkie komponenty podążają za nim — bez nadpisań w pojedynczych komponentach, bez rozjazdów między produktami.
Motyw ciemny i jasny oraz pięć kolorów akcentu, wszystko sterowane tymi samymi tokenami. Wariant marki to podmiana tokenów, a nie fork — każdy produkt rodziny renderuje się z tego samego systemu.
Kontrast, elewacja i kolor są dopracowywane najpierw w motywie ciemnym; jasny wywodzi się z tych samych tokenów. Efekt to tryb ciemny, który wygląda naturalnie, a nie jak odwrócony jasny.
Przyciski, pola, selecty, przełączniki, suwaki i szkielet pól — z etykietami, podpowiedziami i błędami. Stany są już zaprojektowane: focus, disabled, invalid i loading zachowują się tak samo w każdym produkcie.
Stosy, siatki, separatory i szkielety stron pozwalają składać ekrany bez doraźnego CSS. Największe komponenty to pełne kompozycje stron — wzorce hero, sekcji i stopki zaczerpnięte ze stron, które dostarczamy.
Nagłówki, zakładki, breadcrumbs i menu z wbudowaną obsługą responsywności i klawiatury. Nawigacja na tej stronie to sam komponent, a nie jego imitacja.
Modale, arkusze, szuflady, popovery i tooltipy w jednym modelu warstw — pułapkowanie focusu, zamykanie i kolejność warstw obsłużone raz, centralnie. Żaden produkt nie wymyśla własnej arytmetyki z-index.
Tabele, listy, kafelki statystyk, badge'e i osie czasu dla produktów żyjących liczbami. Gęstość konsol operatorskich w całej rodzinie produktów wynika z tych komponentów.
Toasty, banery, puste stany, postęp i szkielety ładowania — mało efektowne stany zaprojektowane od początku. Produkt zbudowany na PDS ma przemyślaną odpowiedź na ładowanie, brak danych i błąd.
Redakcyjna skala typograficzna z etykietami mono dla rejestru technicznego — głos widoczny na każdej powierzchni Protocore. Skala to tokeny, więc produkty dostrajają ją, nie opuszczając systemu.
Czasy trwania i krzywe easingu dostarczamy jako tokeny, z komponentami, które już ich używają. Interfejsy poruszają się spójnie w różnych produktach, bo nikt nie ustawia animacji ręcznie.
Kontrast, stany focusu i obsługa klawiatury są wbudowane w komponenty, a nie pozostawione jako zadanie dla zespołu. Wdrażasz ustawienia domyślne, a dostępność przychodzi razem z nimi.
Stylowanie to statyczny CSS rozwiązywany w czasie budowania — bez runtime'u CSS-in-JS, bez obliczeń w przeglądarce. Warstwa stylów nie dodaje do strony ani linijki JavaScriptu.
System jest też dostępny jako zwykły pakiet CSS — tokeny i klasy utility bez konieczności użycia Reacta. Strony renderowane po stronie serwera, e-maile i stosy bez Reacta korzystają z tego samego źródła prawdy.
Tokeny eksportujemy dla weba jako zmienne CSS, jako preset Tailwind oraz w natywnych formatach dla platform mobilnych. Jedna definicja marki, używana wszędzie tam, gdzie działa produkt.
Warstwa Reacta opakowuje aplikacje w provider i udostępnia tokeny przez hooki — komponenty odczytują aktywny motyw i akcent zamiast sztywnych wartości. Zmiana motywu to zmiana stanu, a nie przebudowa.
Ten sam mechanizm, który daje PDS pięć akcentów, nadaje markę produktowi whitelabel: podmieniasz wartości tokenów, komponenty zostają. Każda aplikacja whitelabel w rodzinie jest dowodem, że to działa.
Czytelna dla maszyn mapa całego systemu — komponentów, tokenów, wzorców — opublikowana jako llms.txt. Wskaż ją modelowi LLM, a wygenerowany kod użyje prawdziwych komponentów PDS zamiast zmyślać prawdopodobne.
Serwer MCP udostępnia system bezpośrednio agentom kodującym: komponenty, propsy i tokeny, które można odpytywać w trakcie pracy agenta. Design system odpowiada na pytania, zamiast być wklejany do promptów.
Każdy komponent ma swoją stronę na pds.protocore.io z działającymi przykładami, propsami i kodem do skopiowania. Dokumentacja renderuje się na samym PDS — to, co czytasz, jest tym, co wdrażasz.
PDS jest dostarczany jako wersjonowane pakiety z semantycznymi wersjami i changelogami. Aktualizacje są świadome: zespół przechodzi na nową wersję, kiedy zdecyduje, a changelog dokładnie wskazuje, co się zmieniło.
Pakiety instaluje się z prywatnego rejestru npm Protocore z tokenem zespołu w .npmrc — standardowy workflow npm, ograniczony do zespołów z licencją. Bez zipów w repozytorium, bez instalacji przez kopiuj-wklej.
Podpisany klucz licencyjny weryfikuje się lokalnie — bez phone-home, bez sprawdzania sieci w buildzie. Problemy z licencją pojawiają się jako ostrzeżenia na etapie developmentu i nigdy nie psują aplikacji produkcyjnej.
PDS jest oprogramowaniem własnościowym, licencjonowanym na zespół. Poproś o dostęp, a skonfigurujemy wszystko — pakiety, dokumentację i źródła tokenów — tak, by zespół mógł go wdrożyć w jedno popołudnie.
FAQ
Per zespół — nie per użytkownik ani per projekt. Jedna licencja obejmuje wszystkich, którzy pracują z PDS w danym zespole: tokeny, komponenty i dokumentację. Koszt rośnie tylko wraz z liczbą zespołów, które go wdrażają, a produkty whitelabel, które dla Ciebie budujemy, już na nim działają.
Z prywatnego rejestru npm.protocore.io. Dane dostępowe pozwalają Twojemu buildowi pobierać pakiety @protocore, a tokeny i komponenty instalujesz potem jak każdą zależność.
Tokeny są generowane dla web, .NET i aplikacji natywnych, więc jeden kolor czy promień zaokrąglenia znaczy to samo na każdej platformie. Komponenty są dostępne dla Reacta, a niezależna od frameworka warstwa CSS zawiera te same tokeny i klasy dla zespołów, które nie używają Reacta.
Dark-first i dostępny domyślnie — dwa motywy, pięć kolorów akcentu, wszystko oparte na tokenach, a CSS bez runtime'u sprawia, że stylowanie nic nie kosztuje przy ładowaniu. Te same komponenty napędzają nasze produkty i panele klientów.
Jest do tego stworzony: mapa llms.txt i serwer MCP pozwalają agentom czytać system i poprawnie z niego korzystać, a pds.protocore.io zawiera przykłady na żywo, propsy i kod do skopiowania dla każdego komponentu i tokena.
Cennik
PDS jest licencjonowany per zespół, nie per użytkownik ani per projekt — jedna licencja obejmuje wszystkich, którzy pracują z nim w danym zespole: tokeny, komponenty i dokumentację.
Zacznij od jednego zespołu i obejmuj kolejne wraz z adopcją. O koszcie decyduje wyłącznie liczba zespołów budujących na PDS.
Produkty whitelabel, które dla Ciebie budujemy, już działają na PDS — samodzielna licencja jest dla zespołów wdrażających go we własnych produktach.
Licencja zależy od liczby zespołów, nie od liczby osób ani zużycia. Poproś o dostęp, a dopasujemy ją do zespołów, które będą z niego korzystać.
Oceń
Cały system znajdziesz na pds.protocore.io — przykłady na żywo, propsy i kod do skopiowania dla każdego komponentu i tokena.
Design tokeny generowane dla web, .NET i aplikacji natywnych, więc jeden kolor czy promień zaokrąglenia znaczy to samo na każdej platformie, na której publikujesz.
PDS jest licencjonowany per zespół — jedna licencja obejmuje wszystkich, którzy z niego korzystają: tokeny, komponenty i dokumentację.
Dane dostępowe do prywatnego rejestru npm.protocore.io, z którego Twój build pobiera pakiety @protocore.
PDS jest własnością Protocore i jest licencjonowany per zespół. Poproś o dostęp, a wszystko skonfigurujemy.
Wszystko powyżej działa w demach produkcyjnych, które możemy Ci pokazać — samodzielnie, jako whitelabel lub jako jedna platforma. Powiedz, co budujesz, a pokażemy najkrótszą drogę.
