Tasarım & UX Skill
Accessibility Compliance
Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
₺369
Design System Patterns
Doğru tasarım token'ları, tema altyapısı ve bileşen mimarisiyle ölçeklenebilir tasarım sistemleri kurmak için bir plandır.
Üç katmanlı token hiyerarşisi (primitive, semantic, component) kurar, açık/koyu ve çoklu marka temasını bağlar ve varyant sistemleriyle bileşen API'lerini standartlaştırır. Web ve mobilde tutarlı, bakımı kolay bir arayüz temeli sağlar.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Skill, tasarım sistemini katı üç katmanlı token kaskadı artı tema ve component mimarisi olarak kurar. Gerçek inşa sırası şu:
- Token hiyerarşisini üç katman CSS custom property olarak tanımlar: primitive token'lar ham değerleri tutar (renk skalaları, spacing, radius), semantic token'lar onlara anlam verir (text-primary, surface-elevated), component token'lar belirli kullanıma bağlar (button-bg, card-border).
- Tek yönlü kaskad akışını zorlar: component token yalnızca semantic token'a, semantic de primitive'e referans verebilir. Component'in doğrudan primitive'e uzanması mimari ihlaldir, çünkü tema geçişini sessizce kırar.
- Tema altyapısını bağlar: light, dark veya sistem tercihini prefers-color-scheme üzerinden çözen, seçimi kalıcılaştıran ve tema sınıfını ilk boyamadan önce uygulayan bir React ThemeProvider. Kullanıcı stilsiz parlamayı asla görmez.
- Varyant sistemlerini class-variance-authority ile kurar: temel stiller artı bildirilmiş variant ve size haritaları, defaultVariants ile. Hiçbir şey belirtilmemiş buton bile ad-hoc prop patlaması yerine doğru render olur.
- Style Dictionary hattını yapılandırır, tek token kaynağı her platforma derlenir: CSS değişkenleri, SCSS, iOS için Swift sınıfları ve Android için XML kaynakları, çıktı referansları korunarak.
- İsimlendirme ve yönetişim kurallarını uygular: token'lar görünüşe değil amaca göre adlandırılır, token değişiklikleri API değişikliği gibi sürümlenir ve her tema kombinasyonu yayın öncesi her component'e karşı test edilir.
Tek güç kaynağı. 6 hat dışarı.
design-system-patterns · çekirdek
çekirdek aktif · 6 hat
- ✓ renk, tipografi, boşluk
Renk, tipografi, boşluk ve gölgeler için tasarım token'ları oluşturmak
- ✓ css özel özellikleriyle
CSS özel özellikleriyle açık/koyu tema geçişi uygulamak
- ✓ çoklu marka tema sistemi
Çoklu marka tema sistemi kurmak
- ✓ tutarlı varyant api'leri…
Tutarlı varyant API'leriyle bir bileşen kütüphanesi tasarlamak
- ✓ style dictionary ile fig…
Style Dictionary ile Figma'dan koda token hattı kurmak
- ✓ semantik token hiyerarşi…
Semantik token hiyerarşileri ve adlandırma kuralları belirlemek
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Onlarca dosyayı düzenlemek yerine marka değişikliklerini tek kaynaktan yayın alın
lisans: kalıcı -
Web ve mobil platformlar arasındaki görsel tutarsızlığı ortadan kaldırın
lisans: kalıcı -
Öngörülebilir, iyi adlandırılmış token'larla geliştirici adaptasyonunu hızlandırın
lisans: kalıcı -
Kanıtlanmış mimariyle tema geçişi titremesini ve tasarım kaymasını önleyin
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
Üç katmanlı token hiyerarşisi: primitive, semantic ve component token'ları
6 parça · tek çalışan sistem · e-postayla anında teslim
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Birden çok platform ve marka genelinde tutarlı, ölçeklenebilir bir arayüz temeli kuran ön yüz mühendisleri ve tasarım sistemi sahipleri.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Bu React'e mi bağlı, yoksa token yapısını Vue ya da düz CSS ile de kullanabilir miyim?
Üç katmanlı token modeli ve tema altyapısı çerçeveden bağımsızdır, CSS özel değişkenleri üzerine kuruludur. Bileşen API kuralları nerede geliştirirseniz geçerlidir, kalıplar tek bir çerçeve varsaymaz.
-
Küçük bir ürün için üç token katmanı ağır geliyor. Bu hiyerarşi erken aşamada gerçekten gerekli mi?
İlkel, anlamsal ve bileşen ayrımı, sonradan her bileşene dokunmadan yeniden tema vermenizi ya da marka eklemenizi sağlar. Tek seferlik küçük bir işte fazladan yüktür ama tema vereceğiniz ya da büyüteceğiniz her işte karşılığını hızla verir.
-
Bileşenlerimi üretir mi, yoksa nasıl yapılandırılacaklarını mı tanımlar?
Mimariyi kurar; token katmanları, tema ve varyant API'leri, böylece bileşenleriniz tutarlı kalır. Asıl bileşenleri yazmak yine sizde, bu bir temeldir, bileşen fabrikası değil.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.