Trafik istatistikleri için Google Analytics kullanıyoruz. Analitik çerezleri yalnızca kabul ederseniz yerleştirilir. Onay verilmezse istatistikler çerezsiz sinyallerden tahmin edilir. Çerez Politikası.
PDS · Tasarım Sistemi
PDS, Protocore tasarım dilimizdir; geliştirdiğimiz ürünlerden çıkarıldı ve üretimde sağlamlaştırıldı. Önce karanlık tema, token tabanlı ve baştan sona belgelenmiş — ürünlerimizi ve müşteri panolarımızı oluşturan aynı bileşenler, bir ekip bir öğleden sonrada benimseyebilsin diye paketlendi.
Özellikler
Temel öğelerden tam sayfa kompozisyonlarına — 101 bileşenin her biri, izole tasarlanmak yerine yayında olan bir üründen çıkarıldı. Bir bileşen PDS'teyse gerçek iş görmüş demektir: bu site, ürün demoları ve müşteri dashboard'larımız hep onun üzerinde çalışır.
Renk, tipografi, boşluk ve hareket tek bir token katmanından gelir. Bir token'ı değiştirin, tüm bileşenler uyum sağlasın — bileşen bazında geçersiz kılma yok, ürünler arasında sapma yok.
Koyu ve açık tema, beş vurgu rengi; hepsi aynı token'larla yönetilir. Marka varyasyonu fork değil, token değişimidir — ailedeki her ürün aynı sistemden render edilir.
Kontrast, yükseltme ve renk önce koyu temada kurgulanır; açık tema aynı token'lardan türetilir. Sonuç, tersine çevrilmiş değil, doğal hissettiren bir karanlık mod.
Butonlar, input'lar, select'ler, switch'ler, slider'lar ve alan iskeleti — etiketler, ipuçları ve hatalar dahil. Durumlar zaten tasarlandı: odak, devre dışı, geçersiz ve yükleniyor her üründe aynı davranır.
Stack'ler, grid'ler, ayraçlar ve sayfa iskeletleri, özel CSS yazmadan ekranları oluşturur. En büyük bileşenler tam sayfa kompozisyonlarıdır — yayındaki sayfalarımızdan alınan hero, section ve footer kalıpları.
Header'lar, sekmeler, breadcrumb'lar ve menüler; responsive ve klavye davranışı hazır gelir. Bu sitedeki navigasyon bileşenin kendisidir, taklidi değil.
Modal'lar, sheet'ler, drawer'lar, popover'lar ve tooltip'ler tek bir katman modelinde — odak hapsi, kapatma ve istifleme bir kez, merkezi olarak çözülür. Hiçbir ürün kendi z-index hesabını yapmaz.
Sayısal verilerle yaşayan ürünler için tablolar, listeler, istatistik kutucukları, rozetler ve zaman çizelgeleri. Ailedeki operatör konsollarının yoğunluğu bu bileşenlerden gelir.
Toast'lar, banner'lar, boş durumlar, ilerleme göstergeleri ve skeleton'lar — gösterişsiz ama baştan tasarlanmış durumlar. PDS üzerine kurulan ürünün yükleniyor, boş ve başarısız durumları için düşünülmüş bir cevabı vardır.
Teknik dil için mono etiketlerle editoryal bir tipografi ölçeği — her Protocore yüzeyinde gördüğünüz ses. Ölçek token'lardan oluşur; ürünler sistemden çıkmadan ayarlayabilir.
Süreler ve easing'ler, onları zaten kullanan bileşenlerle birlikte token olarak gelir. Arayüzler ürünler arasında tutarlı hareket eder, çünkü kimse bir animasyonun zamanlamasını elle yeniden ayarlamaz.
Kontrast, odak durumları ve klavye davranışı bileşenlere gömülüdür, geliştiriciye bırakılmaz. Varsayılanları yayına alın, erişilebilirlik de onlarla gelir.
Stil, derleme zamanında çözülen statik CSS'tir — CSS-in-JS runtime'ı yok, tarayıcıda hesaplanan bir şey yok. Stil katmanı sayfaya sıfır JavaScript ekler.
Sistem düz bir CSS paketi olarak da sunulur — React gerektirmeyen token'lar ve utility class'lar. Sunucuda render edilen sayfalar, e-postalar ve React dışı yığınlar aynı tek doğru kaynaktan beslenir.
Token'lar web için CSS değişkenleri ve Tailwind preset'i olarak, mobil platformlar için ise yerel formatlarda dışa aktarılır. Markanın tek bir tanımı, ürünün çalıştığı her yerde kullanılır.
React katmanı uygulamaları bir provider ile sarar ve token'ları hook'lar aracılığıyla sunar — bileşenler değerleri sabitlemek yerine aktif temayı ve vurgu rengini okur. Tema değiştirmek bir state işlemidir, yeniden derleme değil.
PDS'e beş vurgu rengi kazandıran mekanizma, bir whitelabel ürüne markasını kazandırır: token değerlerini değiştirin, bileşenleri koruyun. Ailedeki her whitelabel uygulama bunun çalıştığının kanıtıdır.
Tüm sistemin — bileşenler, token'lar, kalıplar — makine tarafından okunabilir haritası llms.txt olarak yayınlanır. Bir LLM'i buraya yönlendirin; üretilen kod inandırıcı görünen bileşenler uydurmak yerine gerçek PDS bileşenlerini kullanır.
Bir MCP sunucusu sistemi kodlama ajanlarına doğrudan açar: bileşenler, prop'lar ve token'lar, ajan geliştirirken sorgulanabilir. Tasarım sistemi prompt'lara yapıştırılmak yerine soruları yanıtlar.
Her bileşen pds.protocore.io adresinde canlı örnekler, prop'lar ve kopyala-yapıştır kodla yer alır. Dokümanlar PDS'in kendisiyle render edilir — okuduğunuz, yayına aldığınızdır.
PDS, semantik sürümler ve changelog'larla sürümlü paketler olarak yayınlanır. Yükseltmeler bilinçlidir: ekip ne zaman isterse geçer, changelog neyin değiştiğini tam olarak söyler.
Paketler, .npmrc içindeki ekip başına tokenla Protocore'un özel npm registry'sinden kurulur — lisanslı ekiplere özel standart npm iş akışı. Zip dosyası yok, kopyala-yapıştır kurulum yok.
İmzalı bir lisans anahtarı yerelde doğrulanır — dışarıya bağlanma yok, build'inizde ağ kontrolü yok. Lisans sorunları geliştirme sırasında uyarı olarak görünür ve üretimdeki bir uygulamayı asla bozmaz.
PDS tescilli bir üründür ve ekip başına lisanslanır. Erişim talep edin, kurulumu biz yapalım — paketler, dokümanlar ve token kaynakları — ekibiniz bir öğleden sonrada benimsesin.
FAQ
Ekip başına; kullanıcı ya da proje başına değil. Tek bir lisans, bir ekipte PDS ile çalışan herkesi kapsar: token'lar, bileşenler ve dokümantasyon. Maliyet yalnızca PDS'i benimseyen ekip sayısına göre artar. Sizin için geliştirdiğimiz whitelabel ürünler ise zaten PDS üzerinde çalışır.
npm.protocore.io adresindeki özel registry üzerinden. Erişim bilgileri, projenizin @protocore paketlerini çekmesini sağlar; token'lar ve bileşenler bundan sonra diğer bağımlılıklar gibi kurulur.
Token'lar web, .NET ve native için üretilir; bu yüzden bir renk ya da köşe yarıçapı, yayın yaptığınız her platformda aynı anlamı taşır. Bileşenler React için sunulur; React kullanmayan ekipler için ise aynı token ve sınıfları içeren, framework'ten bağımsız bir CSS katmanı bulunur.
Varsayılan olarak dark-first ve erişilebilir: iki tema, beş vurgu rengi, hepsi token'larla yönetilir. Zero-runtime CSS sayesinde stillerin yüklenme maliyeti yoktur. Aynı bileşenler hem ürünlerimizi hem de müşteri panolarımızı oluşturur.
Bunun için tasarlandı: llms.txt haritası ve bir MCP sunucusu, agent'ların sistemi okuyup doğru şekilde kullanmasını sağlar. pds.protocore.io ise her bileşen ve token için canlı örnekler, prop'lar ve kopyalanabilir kod sunar.
Fiyatlandırma
PDS, kullanıcı ya da proje başına değil, ekip başına lisanslanır. Tek bir lisans, ilgili ekipte PDS ile çalışan herkesi kapsar: token'lar, bileşenler ve dokümantasyon dahil.
Bir ekiple başlayın, benimsenme arttıkça daha fazla ekibe yayın. Maliyeti belirleyen tek şey, PDS üzerinde geliştirme yapan ekip sayısıdır.
Sizin için geliştirdiğimiz whitelabel ürünler zaten PDS üzerinde çalışır. Bağımsız lisans, PDS'i kendi ürünlerinde kullanmak isteyen ekipler içindir.
Lisanslama; çalışan sayısına ya da kullanıma değil, ekiplere göre belirlenir. Erişim talep edin, PDS ile çalışacak ekiplere göre kapsamı birlikte netleştirelim.
Değerlendirin
Sistemin tamamına pds.protocore.io adresinden göz atın: her bileşen ve token için canlı örnekler, prop'lar ve kopyalayıp kullanabileceğiniz kod.
Web, .NET ve native için üretilen tasarım token'ları sayesinde bir renk ya da köşe yarıçapı, yayın yaptığınız her platformda aynı anlamı taşır.
PDS ekip başına lisanslanır. Tek bir lisans, PDS ile çalışan herkesi kapsar: token'lar, bileşenler ve dokümantasyon dahil.
Projenizin ihtiyaç duyduğu @protocore paketlerini kurabilmeniz için npm.protocore.io adresindeki özel registry'ye giriş bilgileri.
PDS tescilli bir üründür ve ekip başına lisanslanır. Erişim talep edin, kurulumu birlikte yapalım.
Yukarıdaki her şey, size adım adım gösterebileceğimiz canlı demolarda çalışıyor: bağımsız, whitelabel ya da tek platform olarak. Ne geliştirdiğinizi anlatın, size en kısa yolu gösterelim.
