Käytämme Google Analyticsia liikennetilastoihin. Analytiikkaevästeet asetetaan vain, jos hyväksyt ne. Ilman suostumusta tilastot arvioidaan ilman evästeitä kerättyjen signaalien perusteella. Evästekäytäntö.
PDS · Design System
PDS on Protocoren oma suunnittelukieli, joka on eristetty rakentamistamme tuotteista ja karaistu tuotannossa. Dark-first, token-pohjainen ja dokumentoitu päästä päähän — samat komponentit, jotka renderöivät tuotteemme ja asiakkaidemme dashboardit, paketoituna niin, että tiimi voi ottaa ne käyttöön iltapäivässä.
Ominaisuudet
Perusosista kokonaisiin sivukokoonpanoihin — 101 komponenttia, jotka kaikki on eristetty toimittamistamme tuotteista eikä suunniteltu tyhjiössä. Jos komponentti on PDS:ssä, se on jo tehnyt oikeaa työtä: tämä sivusto, tuote-demot ja asiakkaidemme dashboardit rakentuvat sen varaan.
Väri, typografia, tila ja liike määräytyvät yhdestä token-kerroksesta. Muuta tokenia, ja kaikki komponentit seuraavat — ei komponenttikohtaisia ylikirjoituksia, ei tuotteiden välistä ajautumista.
Tumma ja vaalea teema sekä viisi korostusväriä, kaikki samojen tokenien ohjaamia. Brändivariaatio on tokenien vaihto, ei haarautuma — jokainen tuoteperheen tuote rakentuu samasta järjestelmästä.
Kontrasti, korkeus ja väri viimeistellään ensin tummassa teemassa, ja vaalea teema johdetaan samoista tokeneista. Tuloksena on tumma tila, joka tuntuu alkuperäiseltä eikä käännetyltä.
Painikkeet, syötekentät, valinnat, kytkimet, liukusäätimet ja kenttien rakenne — otsikot, vihjeet ja virheilmoitukset mukaan lukien. Tilat on jo suunniteltu: focus, disabled, invalid ja loading toimivat samoin jokaisessa tuotteessa.
Stackit, ruudukot, erottimet ja sivupohjat kokoavat näkymät ilman erillistä CSS:ää. Suurimmat komponentit ovat kokonaisia sivukokoonpanoja — hero-, osio- ja alatunnistemallit toimitetuilta sivuilta poimittuina.
Yläpalkit, välilehdet, leipäpolut ja valikot, joiden responsiivisuus ja näppäimistökäyttö on sisäänrakennettu. Tämän sivuston navigaatio on itse komponentti, ei sen jäljitelmä.
Modaalit, sheetit, drawerit, popoverit ja tooltipit yhdellä kerrostusmallilla — fokuksen vangitseminen, sulkeminen ja pinoaminen hoidetaan kerran, keskitetysti. Yksikään tuote ei kirjoita omaa z-index-laskentaansa.
Taulukot, listat, tilastolaatat, badget ja aikajanat tuotteille, jotka elävät luvuista. Tuoteperheen operaattorikonsolit saavat tiheytensä näistä komponenteista.
Toastit, bannerit, tyhjät tilat, edistymisilmaisimet ja skeletonit — vaatimattomat tilat suunniteltu etukäteen. PDS:n päälle rakennetulla tuotteella on harkittu vastaus lataukselle, tyhjälle tilalle ja epäonnistumiselle.
Editoriaalinen typografia-asteikko ja mono-tasoiset tunnisteet tekniseen rekisteriin — ääni, jonka näet jokaisella Protocore-pinnalla. Asteikko koostuu tokeneista, joten tuotteet voivat säätää sitä poistumatta järjestelmästä.
Kestot ja easingit toimitetaan tokeneina, ja komponentit käyttävät niitä jo valmiiksi. Käyttöliittymät liikkuvat johdonmukaisesti tuotteesta toiseen, koska kukaan ei ajoita animaatiota käsin uudelleen.
Kontrasti, focus-tilat ja näppäimistökäyttäytyminen on rakennettu komponentteihin, ei jätetty harjoitustehtäväksi. Ota oletukset käyttöön, niin saavutettavuus tulee mukana.
Tyylit ovat staattista CSS:ää, joka ratkeaa build-vaiheessa — ei CSS-in-JS-runtimea, ei mitään selaimessa laskettavaa. Tyylikerros ei lisää sivulle lainkaan JavaScriptiä.
Järjestelmä toimitetaan myös pelkkänä CSS-pakettina — tokenit ja apuluokat ilman Reactia. Palvelinrenderöidyt sivut, sähköpostit ja muut kuin React-pinot käyttävät samaa totuuden lähdettä.
Tokenit viedään verkkoon CSS-muuttujina, Tailwind-presettinä ja mobiilialustoille natiiveissa formaateissa. Yksi brändin määritys, jota käytetään kaikkialla, missä tuote toimii.
React-kerros kietoo sovellukset providerin sisään ja tarjoaa tokenit hookien kautta — komponentit lukevat aktiivisen teeman ja korostusvärin kovakoodattujen arvojen sijaan. Teeman vaihto on tilamuutos, ei uudelleenrakennus.
Sama mekanismi, joka antaa PDS:lle viisi korostusväriä, antaa whitelabel-tuotteelle sen brändin: vaihda token-arvot, säilytä komponentit. Jokainen tuoteperheen whitelabel-sovellus on todiste siitä, että se toimii.
Koneluettava kartta koko järjestelmästä — komponentit, tokenit, mallit — julkaistuna tiedostona llms.txt. Osoita LLM sen luo, ja generoitu koodi käyttää oikeita PDS-komponentteja uskottavien keksittyjen sijaan.
MCP-palvelin avaa järjestelmän suoraan koodausagenteille: komponentit, propsit ja tokenit ovat kyseltävissä, kun agentti rakentaa. Design system vastaa kysymyksiin sen sijaan, että se liimattaisiin promptteihin.
Jokainen komponentti löytyy osoitteesta pds.protocore.io live-esimerkkien, propsien ja kopioitavan koodin kera. Dokumentaatio renderöidään itse PDS:llä — mitä luet, sitä myös toimitat.
PDS toimitetaan versioituina paketteina semanttisine versioineen ja muutoslokeineen. Päivitykset ovat harkittuja: tiimi siirtyy silloin, kun päättää, ja muutosloki kertoo tarkasti, mikä muuttui.
Paketit asennetaan Protocoren yksityisestä npm-rekisteristä tiimikohtaisella tokenilla tiedostossa .npmrc — tavallinen npm-työnkulku, rajattu lisensoiduille tiimeille. Ei zip-tiedostoja, ei kopioi-liitä-asennuksia.
Allekirjoitettu lisenssiavain tarkistetaan paikallisesti — ei yhteydenottoa palvelimelle, ei verkkotarkistusta buildissa. Lisensointiongelmat näkyvät kehitysvaiheen varoituksina eivätkä koskaan kaada tuotantosovellusta.
PDS on suljettua lähdekoodia ja lisensoidaan tiimikohtaisesti. Pyydä käyttöoikeutta, niin otamme teidät käyttöön — paketit, dokumentaatio ja token-lähteet — jotta tiimi voi ottaa sen käyttöön yhdessä iltapäivässä.
FAQ
Tiimeittäin – ei käyttäjäpaikkojen tai projektien mukaan. Yksi lisenssi kattaa kaikki tiimissä PDS:llä rakentavat: tokenit, komponentit ja dokumentaation. Kustannus skaalautuu vain käyttöönottavien tiimien määrän mukaan, ja sinulle rakentamamme whitelabel-tuotteet toimivat jo sen päällä.
Yksityisestä rekisteristä osoitteessa npm.protocore.io. Käyttöoikeustunnuksilla buildisi hakee @protocore-paketit, ja tokenit ja komponentit asentuvat siitä kuten mikä tahansa riippuvuus.
Tokenit tuotetaan web-, .NET- ja natiivialustoille, joten yksi väri tai kulmasäde tarkoittaa samaa jokaisella julkaisemallasi alustalla. Komponentit toimitetaan Reactille, ja frameworkista riippumaton CSS-kerros tarjoaa samat tokenit ja luokat tiimeille, jotka eivät käytä Reactia.
Dark-first ja oletuksena saavutettava – kaksi teemaa, viisi korostusväriä, kaikki tokenien ohjaamina, ja zero-runtime CSS:n ansiosta tyylit eivät hidasta latausta. Samat komponentit renderöivät tuotteemme ja asiakkaidemme hallintanäkymät.
Se on tehty siihen: llms.txt-kartan ja MCP-palvelimen avulla agentit lukevat järjestelmän ja rakentavat sillä oikein, ja pds.protocore.io tarjoaa live-esimerkit, propsit ja kopioitavan koodin jokaiselle komponentille ja tokenille.
Hinnoittelu
PDS lisensoidaan tiimeittäin, ei käyttäjäpaikkojen tai projektien mukaan – yksi lisenssi kattaa kaikki tiimissä PDS:llä rakentavat: tokenit, komponentit ja dokumentaation.
Aloita yhdellä tiimillä ja laajenna, kun käyttö kasvaa. Kustannuksiin vaikuttaa vain se, kuinka monta tiimiä rakentaa PDS:n päälle.
Sinulle rakentamamme whitelabel-tuotteet käyttävät jo PDS:ää – erillinen lisenssi on tarkoitettu tiimeille, jotka ottavat sen käyttöön omissa tuotteissaan.
Lisensointi seuraa tiimejä, ei henkilömäärää eikä käyttöä. Pyydä käyttöoikeutta, niin rajaamme sen tiimeihin, jotka rakentavat sillä.
Arvioi
Selaa koko järjestelmää osoitteessa pds.protocore.io – live-esimerkit, propsit ja kopioitava koodi jokaiselle komponentille ja tokenille.
Design tokenit web-, .NET- ja natiivialustoille, jolloin yksi väri tai kulmasäde tarkoittaa samaa jokaisella julkaisemallasi alustalla.
PDS lisensoidaan tiimeittäin – yksi lisenssi kattaa kaikki sillä rakentavat, niin tokenit, komponentit kuin dokumentaationkin.
Tunnukset yksityiseen rekisteriin osoitteessa npm.protocore.io, jotta buildisi voi ladata tarvitsemasi @protocore-paketit.
PDS on suljettu ja lisensoidaan tiimikohtaisesti. Pyydä käyttöoikeutta, niin hoidamme käyttöönoton.
Kaikki yllä oleva toimii tuotantodemoissa, jotka voimme käydä kanssasi läpi – erillisenä, whitelabelina tai yhtenä alustana. Kerro, mitä rakennat, niin näytämme lyhimmän reitin.
