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
Tailwind Design System
Tailwind CSS, tasarım token'ları ve tipli bir bileşen kütüphanesiyle üretime hazır bir tasarım sistemi kurun.
Üç katmanlı bir token hiyerarşisini zorunlu kılar: markadan anlamsala, oradan bileşene, böylece bir marka rengi değişikliği, 200 dosyalık bul-değiştir yerine yüzlerce bileşeni güncelleyen tek bir satır olur. CSS değişkenleri temayı ve karanlık modu yönetir, class-variance-authority ise üssel bileşen sayısı olmadan tip-güvenli varyantlar verir.
₺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 bir tasarım sistemi kurarken tam olarak bu döngüyü işletir. Kara kutu yok, yaptığı iş budur:
- Önce üç katmanlı token hiyerarşisini tanımlar: marka değerleri :root içinde CSS değişkeni olur, semantik token'lar (primary, destructive, muted) onlara referans verir, komponentler yalnızca semantik katmana dokunur. Marka rengi değişimi 200 dosya değil, tek satırdır
- Tailwind config'i her rengin hsl(var(--token)) üzerinden çözüleceği şekilde yazar; aynı değişkenleri ezen bir .dark bloğu ekler, böylece karanlık mod komponent başına sıfır değişiklikle gelir
- Her komponenti CVA tanımı olarak kurar: önce taban sınıflar, sonra defaultVariants ile variant ve boyut haritaları. primary/lg ve ghost/sm tek tanımdan türetilir, ayrı komponentlere patlamaz
- Bileşik komponentleri (Card, CardHeader, CardTitle) forwardRef ve cn() birleştirme aracıyla kurar; kullanan taraf sistemi bozmadan sınıf ezebilir
- Çalışma zamanı temalandırmasını bağlar: ThemeProvider localStorage'ı okur, sistem tercihini çözer, html üzerindeki .dark sınıfını değiştirir ve tüm bg-background komponentleri anında uyum sağlar
- Kısıt setini baştan sona uygular: 8pt spacing ızgarası, ham hex yerine semantik isim, her etkileşimli varyantta focus-visible halkası ve disabled durumu, rastgele piksel değeri yasak
Tek güç kaynağı. 6 hat dışarı.
tailwind-design-system · çekirdek
çekirdek aktif · 6 hat
- ✓ tailwind ve tipli varyan…
Tailwind ve tipli varyantlarla bir bileşen kütüphanesi oluşturmak
- ✓ tasarım token'ları, anla…
Tasarım token'ları, anlamsal renkler ve karanlık mod uygulamak
- ✓ doğru odak durumlarıyla
Doğru odak durumlarıyla duyarlı, erişilebilir bileşenler kurmak
- ✓ bir kod tabanında ui des…
Bir kod tabanında UI desenlerini standartlaştırmak
- ✓ cva tabanlı buton, kart
CVA tabanlı buton, kart, giriş ve ızgara temel bileşenleri kurmak
- ✓ localstorage kalıcılığı ve
localStorage kalıcılığı ve sistem tercihi olan bir tema sağlayıcı eklemek
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
-
Bir marka rengini tek satırda değiştirin ve her bileşenin güncellendiğini görün
lisans: kalıcı -
CSS değişkenleri sayesinde bileşen başına sıfır düzenlemeyle karanlık moda uyum sağlayın
lisans: kalıcı -
Tek bir tipli tanımdan her varyant kombinasyonunu üretin
lisans: kalıcı -
Keyfi değerler yerine anlamsal token'larla CSS paketini yalın tutun
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
Açık/karanlık CSS-değişken token setleriyle hazır bir tailwind.config ve globals.css
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.
Token-tabanlı tema ve tip-güvenli varyantlar isteyen, Tailwind bileşen kütüphanesi kuran veya standartlaştıran ön uç ekipleri.
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
-
Büyük ve yaşayan bir Tailwind kod tabanımız var. Bu sadece sıfırdan projeler için mi anlamlı?
Hayır, mevcut kod tabanında UI desenlerini standartlaştırmak listelenen kullanım alanlarından biri. Token sistemi kademeli benimsenir: önce CSS-değişken token setli tailwind.config ve globals.css eklenir, sonra bileşenler elinize geldikçe anlamsal token'lara ve CVA varyantlarına taşınır. Topyekun yeniden yazım gerekmez.
-
Doğrudan Tailwind sınıfları yazmak varken token hiyerarşisiyle neden uğraşayım?
Çünkü keyfi değerler ölçeklenmez: bir marka rengi değişikliği 200 dosyalık bul-değiştire dönüşür. Üç katmanlı hiyerarşi, markadan anlamsala oradan bileşene, aynı değişikliği tek satıra indirir. CSS değişkenleri bileşen başına sıfır düzenlemeyle karanlık mod sağlar, class-variance-authority ise tek tipli tanımdan tüm varyant kombinasyonlarını üretir.
-
MUI veya Ant Design gibi eksiksiz bir bileşen paketi mi bu?
Hayır. Temel yapı taşları verir: CVA buton, bileşik Card, erişilebilir formlar, duyarlı Grid ve Radix tabanlı dialog deseni, artı gerisini kendiniz kurmanız için token ve tema altyapısı. Hazır alıp kullandığınız bitmiş bir UI kiti değil, sahiplenip genişlettiğiniz bir sistemdir.
-
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.