Yapay Zeka Rehberi · Tasarım kaynakları
Yapay zekayla yapılan siteler çoğu zaman birbirine benziyor. Bu kaynaklarla siten tek tip görünmesin: hazır bileşenler, animasyon, 3D, font ve ikonlar. Karta tıkla, yapay zekaya nasıl vereceğini gör.
220 kaynak · bilgiler 8 Ekim 2026 tarihinde kaynağından okundu.
Yapay zekayla kurulan sitelerin omurgası: en çok kullanılan ve önerilen bileşen kütüphaneleri, CSS çerçeveleri ve küçük arayüz yardımcıları. Rafın sonunda kısıtlarıyla birlikte birkaç kopyala-yapıştır bileşen sitesi.
Bileşenleri paket olarak değil, kaynak kod olarak projene kopyalayan bir CLI ve bileşen seti. Temmuz 2026'dan beri yeni projelerde varsayılan temel Base UI; Radix ve React Aria da seçilebiliyor.
Kime: React + Tailwind ile site/uygulama yapan, kodun sahibi olmak isteyen herkes; yapay zeka araçlarının varsayılan yığını
shadcn/ui'nin Vue/Nuxt portu: aynı kopyala-sahiplen modeliyle bileşenleri CLI ile projene ekler (Reka UI temelli).
Kime: Vue 3 / Nuxt ile çalışan ve shadcn görünümünü isteyen
shadcn/ui'nin Svelte/SvelteKit portu; Bits UI temelli bileşenleri CLI ile projene kopyalar ve kendi kayıt defteri sistemini sunar.
Kime: Svelte / SvelteKit ile çalışan
Stilsiz, erişilebilir React yapı taşları (dialog, menü, popover…); görünümü sen verirsin. shadcn/ui'nin uzun süre temeliydi. WorkOS bakımında.
Kime: Kendi tasarım sistemini kuran React geliştiricisi; mevcut shadcn (Radix) projeleri
Radix, Floating UI ve MUI ekiplerinden stilsiz, erişilebilir React bileşenleri. Temmuz 2026'dan beri shadcn/ui'nin varsayılan temeli.
Kime: Yeni React projesi başlatan, shadcn'in güncel varsayılanını ya da kendi tasarım sistemini kuran
Adobe'nin stilsiz, erişilebilirlik ve uluslararasılaştırma (tarih, sayı, sağdan sola) konusunda en kapsamlı React bileşen ve hook kütüphanesi. shadcn/ui ve HeroUI v3 bunun üzerine kurulabiliyor.
Kime: Erişilebilirliği ve çok dilli/tarih-saat bileşenlerini ciddiye alan uygulama geliştiricisi
Tailwind ekibinin stilsiz, erişilebilir React ve Vue bileşenleri (menü, listbox, dialog, combobox…); Tailwind sınıflarıyla giydirilmek üzere tasarlandı.
Kime: Tailwind kullanan ve az sayıda etkileşimli bileşene ihtiyaç duyan React/Vue geliştiricisi
Chakra ekibinin stilsiz, erişilebilir bileşenleri; aynı API React, Vue, Solid ve Svelte'te çalışır (Zag.js durum makineleri).
Kime: Birden çok çerçevede aynı bileşen davranışını isteyen, kendi tasarım sistemini kuran
Hazır bileşen değil, yardımcı sınıflarla (utility-first) doğrudan HTML/JSX içinde stil yazmayı sağlayan CSS çerçevesi; derleme sırasında yalnız kullandığın sınıfları üretir. v4 CSS-first yapılandırma (@theme) kullanır.
Kime: Neredeyse herkes: yapay zeka araçları ve shadcn, daisyUI, Flowbite, Preline gibi kitler bunun üzerine kurulu
Tailwind eklentisi: `btn`, `card`, `modal` gibi anlamlı sınıf adlarıyla hazır bileşen stilleri ve 30+ hazır tema verir; JavaScript gerektirmez, her çerçevede çalışır.
Kime: Uzun Tailwind sınıf zincirleri yazmadan hızlı, temalı arayüz isteyen; framework'ten bağımsız HTML yazan
Tailwind üzerine kurulu, kopyalanabilir HTML bileşen örnekleri ve bunları çalıştıran küçük bir JS paketi; React, Vue, Svelte, Angular entegrasyonları var.
Kime: Tailwind ile çerçeveden bağımsız (düz HTML dahil) hazır bileşen isteyen
Flowbite'ın ücretli blok, uygulama arayüzü ve Figma seti; kopyalanıp projeye uyarlanır.
Kime: Flowbite ile çok sayıda hazır sayfa bloğuna ihtiyaç duyan ajans/freelancer
Tailwind üzerine 640+ hazır bileşen ve blok örneği, bunları çalıştıran JS eklentileri (datepicker, tablo, editör…); düz HTML ve tüm çerçevelerde kullanılır.
Kime: Tailwind ile hazır, kurumsal görünümlü bloklar isteyen; düz HTML ya da herhangi bir çerçeve
Preline'ın ücretli 780+ blok, 21 şablon, AI istemleri ve animasyonlu ikon seti; kopyalanıp projeye uyarlanır.
Kime: Preline ile çok sayıda hazır sayfa ve şablon isteyen freelancer/ekip
Hazır ızgara, bileşen sınıfları ve küçük bir JS paketiyle gelen klasik CSS çerçevesi; derleme aracı olmadan CDN'den bile çalışır.
Kime: Derleme aracı kullanmadan hızlı site yapan, WordPress/PHP tarafında çalışan, eski projeleri sürdüren
Radix Primitives üzerine hazır stilli, temalanabilir React bileşen seti; Tailwind gerektirmez.
Kime: Tailwind kullanmadan derli toplu, sade görünümlü React arayüzü isteyen
Çok sayıda bileşen ve hook'la gelen "tam paket" React kütüphanesi; form, tarih, bildirim, grafik gibi alanlar ayrı @mantine/* paketlerinde.
Kime: Admin paneli, SaaS ya da form ağırlıklı uygulama yapan ve her şeyi tek yerden isteyen React geliştiricisi
Google Material Design'ı uygulayan en yaygın React bileşen kütüphanelerinden biri; ücretsiz çekirdek (MIT), gelişmiş tablo/grafik/tarih bileşenleri ayrı ücretli MUI X'te.
Kime: Kurumsal/admin uygulama yapan, Material görünümü sorun olmayan React ekipleri
MUI'nin gelişmiş veri tablosu (Data Grid), tarih/saat seçici, grafik ve ağaç bileşenlerinin ücretli katmanları; temel sürümleri MIT, Pro/Premium özellikleri lisans anahtarı ister.
Kime: Büyük veri tablosu (sanallaştırma, gruplama, Excel dışa aktarma) gereken kurumsal React uygulamaları
Stil özellikleri (style props) ve tasarım token'larıyla çalışan, erişilebilir hazır React bileşen sistemi; v3 Ark UI temelli.
Kime: SaaS ve panel arayüzü yapan, Tailwind yerine bileşen içi stil özelliklerini seven React geliştiricisi
Chakra UI ile yazılmış 330+ ücretli blok ve şablon; kopyalanıp projeye uyarlanır.
Kime: Chakra UI kullanan ve hazır sayfa blokları isteyen
Tailwind v4 ve React Aria üzerine kurulu, varsayılan hâliyle şık görünen React bileşenleri; v3 ile React Native kütüphanesi de var.
Kime: Az özelleştirmeyle modern, animasyonlu görünüm isteyen React/Next.js geliştiricisi
HeroUI'nin ücretli Pro bileşenleri, şablonları, tasarım sistemleri ve Pro AI (skill + MCP) paketi; web, mobil ya da ikisi birlikte.
Kime: HeroUI ile ürün geliştiren ve hazır şablon/pro bileşen isteyen ekip
Reka UI ve Tailwind üzerine 125+ bileşenli Vue kütüphanesi; v4'te eski ücretli Nuxt UI Pro bileşenleri ve şablonlar ücretsiz pakete katıldı. Nuxt olmadan Vue'da da çalışır.
Kime: Vue / Nuxt ile site, panel ya da SaaS yapan
Kapsamlı Vue bileşen kütüphanesi (veri tablosu, ağaç, takvim, form…). v5 ile PrimeUI ticari lisansına geçti.
Kime: Kurumsal veri ağırlıklı Vue uygulaması yapan; topluluk lisansına uyan bireysel geliştirici ve küçük ekip
Kapsamlı React bileşen kütüphanesi (DataTable, ağaç, takvim, form…). v11 ile PrimeUI ticari lisansına geçti.
Kime: Kurumsal veri ağırlıklı React uygulaması yapan; topluluk lisansına uyan bireysel geliştirici ve küçük ekip
Ant Group'un kurumsal arayüz dili ve kapsamlı React bileşen kütüphanesi; özellikle form, tablo ve yönetim paneli için.
Kime: Yoğun form/tablo içeren yönetim paneli ve iç araç yapan React geliştiricisi
Material Design tabanlı, kapsamlı Vue bileşen çerçevesi; düzen, form, tablo, tema hepsi içinde.
Kime: Vue ile Material görünümlü uygulama ya da panel yapan
Tek satırla eklenen, animasyonlu bildirim (toast) bileşeni; shadcn/ui'nin toast'ı bunu kullanır.
Kime: React uygulamasına hızlı ve şık bildirim ekleyen herkes
Stilsiz komut menüsü / aranabilir liste (⌘K) React bileşeni; öğeleri kendiliğinden filtreler ve sıralar. shadcn/ui'nin Command bileşeni bunu kullanır.
Kime: Uygulamasına komut paleti ya da aranabilir seçim kutusu ekleyen React geliştiricisi
Bağımlılıksız, hafif kaydırıcı (carousel) motoru; React, Vue, Svelte, Solid sarmalayıcıları var. shadcn/ui'nin Carousel bileşeni bunu kullanır.
Kime: Görsel/ürün kaydırıcısı gereken ve ağır slider eklentisi istemeyen
Cal.com'un tasarım sistemi: Base UI + Tailwind üzerine kopyala-sahiplen bileşenler ve "particle" örnekleri; Origin UI'nin devamı (originui.com buraya yönleniyor). shadcn CLI ile kurulur.
Kime: shadcn tarzında ama farklı görünümlü, üretim uygulaması odaklı bileşen isteyen React geliştiricisi
Topluluğun paylaştığı 7.450 küçük arayüz öğesi (buton, yükleniyor animasyonu, kart, form…); HTML/CSS, Tailwind, React ya da Figma olarak kopyalanır.
Kime: Tek bir dikkat çekici buton/yükleyici/kart arayan; çerçeveden bağımsız düz CSS isteyen
shadcn uyumlu, animasyonlu landing page bileşenleri (marquee, globe, bento grid, parıltılı butonlar, metin animasyonları); shadcn CLI ile kopyalanır.
Kime: Tanıtım/landing sayfasına göz alıcı efekt eklemek isteyen React + Tailwind kullanıcısı
Magic UI'nin ücretli 50+ landing bölümü ve 9+ hazır şablonu (React, Next.js, Tailwind, Framer Motion).
Kime: Hızlı landing page çıkarmak isteyen girişimci/freelancer
Tailwind + Framer Motion ile yazılmış 112+ gösterişli animasyonlu bileşen (3D kart, parıltı, ışın efektleri…); shadcn CLI ile kopyalanır.
Kime: Landing sayfasına "vay" efekti isteyen React/Next.js kullanıcısı
Aceternity'nin ücretli 200+ blok, 12+ şablon ve tam landing sayfaları; kopyalanıp uyarlanır.
Kime: Çok sayıda gösterişli landing bloğu isteyen ajans/freelancer
Animasyonlu metin, arka plan, imleç ve 3D/shader efektlerinden oluşan açık kaynak React bileşen koleksiyonu; CSS ya da Tailwind, JS ya da TS varyantlarıyla kopyalanır.
Kime: Sitesine özgün hareketli efekt (metin, arka plan) eklemek isteyen React kullanıcısı
React Bits'in ücretli katmanı: 230 animasyonlu bileşen, 300 sayfa bloğu, 300 uygulama arayüzü bloğu, ajan kiti ve 15 landing şablonu (kademeye göre).
Kime: Animasyonlu landing ve uygulama arayüzünü hazır bloklardan kurmak isteyen
Topluluğun yayımladığı 12.000+ React/Tailwind bileşen, şablon ve tema pazarı; önizleyip TSX'i kopyalarsın ya da shadcn CLI / 21st MCP ile kurarsın.
Kime: shadcn tabanlı projesine hazır bileşen arayan ve bunu yapay zeka ajanından yapmak isteyen
shadcn/ui üzerine hazır sayfa blokları (hero, fiyat, SSS…) kataloğu; ücretsiz bloklar herkese açık shadcn kayıt defterinden kurulur. Radix, Base UI ya da React Aria temeli seçilebilir.
Kime: shadcn projesine hızlıca landing bölümü eklemek isteyen
shadcnblocks'un ücretli 2.151+ bileşen, 1.983+ blok, şablon, Figma ve admin kiti.
Kime: shadcn ile çok sayıda müşteri sitesi yapan ajans/freelancer
Motion ve Tailwind ile yapılmış hazır animasyonlu React bileşenleri: yazı efektleri, kaydırma, geçişler, akordeon, dock. Komutla ya da kopyalayarak projene eklersin, kod senin olur.
Kime: React + Tailwind sitesine hafif, düzgün hareket eklemek isteyen
Gerçek sitelerden çıkarılmış ücretsiz arayüz ve 3D blokları (menü, duyuru çubuğu, grafik, 404, ses küresi); her biri tek satırla kurulur ya da kodu kopyalanır.
Kime: Sitesine hazır, hareketli tek tek bloklar eklemek isteyen
Yapay zekayla yapılan siteler hep aynı mor gradyan, aynı yazı tipi, aynı kart düzeniyle çıkıyor. Renk, tema ve yazı tipi araçları; yapay zekaya referans vermeyi anlatan rehberler.
Claude Code ya da Codex'e kurulan tasarım skill'leri Repolar sayfasında.
shadcn/ui temasının renklerini, yazı tiplerini, köşe yuvarlaklığını ve gölgelerini tarayıcıda canlı önizlemeyle değiştiren görsel tema editörü. Sonucu CSS değişkenleri ya da shadcn registry komutu olarak verir.
Kime: shadcn/ui + Tailwind ile site yapan ve varsayılan siyah-beyaz/mor görünümden çıkmak isteyen
tweakcn'in ücretli katmanı: sınırsız YZ ile tema üretimi, görselden (ör. ekran görüntüsünden) YZ ile tema çıkarma ve sınırsız tema kaydı.
Kime: Bir ekran görüntüsünden ya da marka görselinden hızlıca shadcn teması çıkarmak isteyen
shadcn/ui'nin resmî görsel kurulum sayfası: renk, köşe yuvarlaklığı, yazı tipi ve ikon setini önizleyip tek bir ön ayar (preset) kodu üretir. Eski /themes adresi artık buraya yönleniyor.
Kime: shadcn/ui kullanan ve projeye varsayılan dışında bir görünümle başlamak isteyen
Her rengi 12 adımlı, açık ve koyu modlu, erişilebilir bir skala olarak veren renk sistemi. "Custom palette" sayfası kendi marka renginden aynı yapıda skala üretir.
Kime: Rastgele hex kodları yerine tutarlı, kontrastı düşünülmüş bir renk sistemi isteyen
Renkleri OKLCH biçiminde seçen ve HEX/RGB/HSL'i OKLCH'ye çeviren araç; P3 geniş renk alanını ve sRGB yedeğini gösterir. Tailwind v4 ve shadcn temaları OKLCH kullandığı için bu değerleri okuyup elle ayarlamaya yarar.
Kime: Tailwind v4 / shadcn temasındaki oklch(...) değerlerini anlamak ve değiştirmek isteyen
Renkleri hedef kontrast oranına göre üreten, açık ve koyu tema için erişilebilir renk sistemi kuran açık kaynak Adobe aracı. Veri görselleştirme skalaları ve renk değerlendirme araçları da var.
Kime: Marka rengini koruyup erişilebilir (WCAG 2 / APCA) tema renkleri türetmek isteyen
Boşluk tuşuyla uyumlu paletler üreten, görselden renk çıkaran, kontrast kontrolü yapan ve paletleri örnek tasarımlar üzerinde gösteren palet aracı.
Kime: Mor-mavi varsayılan yerine hızla farklı palet denemek isteyen herkes
Coolors'ın ücretli katmanı: reklamsız kullanım, 5'ten fazla renkli otomatik palet, sınırsız kayıt, Coolors AI renk sohbeti ve gelişmiş dışa aktarma.
Kime: Coolors'ı düzenli kullanıp paletleri proje proje saklayan
Tek bir marka renginden Tailwind CSS uyumlu 50-950 renk skalası üreten ve bunu kart, panel, shadcn/ui bileşeni gibi örnek tasarımlarda gösteren araç. Ayrıca shadcn/ui tema üreticisi ve Figma eklentisi var.
Kime: Tailwind kullanan ve marka rengini tam bir skalaya çevirmek isteyen
UI Colors'ın ücretli katmanı; özel font seçimi gibi kilitli özellikleri açar.
Kime: UI Colors'ı marka renk sistemi kurmak için sık kullanan
Ekran genişliğiyle akıcı büyüyen yazı ve boşluk ölçeği için CSS clamp() değerleri üreten hesaplayıcılar (tip, boşluk, ızgara, clamp). Figma eklentisi de var.
Kime: Başlık boyları ve boşluklar her ekranda aynı oranda kalsın isteyen
Seçtiğin orana göre (ör. 1.250 Major Third) başlıktan küçük metne kadar yazı boyu ölçeği kurup Google Fonts ile önizleyen ve CSS veren araç.
Kime: Başlık ve metin boylarını tek bir orana bağlamak isteyen
Yazı tipi indirmeden, işletim sisteminde zaten bulunan fontlarla kurulan, sınıflandırılmış (geçiş serif, eski stil, geometrik, humanist…) hazır font-family dizileri.
Kime: Inter/Roboto dışına çıkmak ama font yükleme maliyeti eklemek istemeyen
Google Fonts ve Fontshare fontlarından seçilmiş başlık + metin eşleştirmelerini örnek sayfalarda gösteren ve CSS veren site.
Kime: Inter yerine birbirine uyan iki ücretsiz font arayan
Fontpair'in ücretli katmanı: 500+ eşleşmenin tamamı, sınırsız favori/koleksiyon, Chrome eklentisi ve seçtiğin font + renk sistemini Cursor, Lovable, v0, Bolt, Replit, Windsurf ve Claude Code için hazır prompt olarak dışa aktarma.
Kime: Font ve renk kararını doğrudan vibe coding aracına aktarmak isteyen
Gerçek sitelerde hangi fontların kullanıldığını gösteren "Site of the Day" arşivi, font listeleri (ör. Helvetica alternatifleri, en iyi Google Fonts) ve tipografi rehberleri.
Kime: Font seçerken gerçek örneklerden ilham almak isteyen
Fitts Yasası, Hick Yasası, Jakob Yasası gibi arayüz tasarımında kullanılan psikoloji ilkelerini kısa açıklamalar ve görsellerle toplayan rehber.
Kime: Yapay zekaya "neden böyle tasarla" gerekçesi vermek isteyen geliştirici ve girişimci
Tailwind CSS'in yapımcıları Adam Wathan ve Steve Schoger'ın, tasarımcı olmayan geliştiriciler için yazdığı somut arayüz tasarımı taktikleri kitabı (218 sayfa PDF) ve video seti.
Kime: "Ben geliştiriciyim, tasarımcı değilim" diyen ve hiyerarşi, boşluk, renk kararlarını öğrenmek isteyen
Anthropic'in resmî rehberi: Claude'un "YZ işi" görünen genel tasarımlara kaymasını önlemek için tipografi, renk, hareket ve arka plan yönergeleri içeren, sistem promptuna ya da CLAUDE.md'ye eklenecek hazır bir prompt bloğu verir.
Kime: Claude (Claude Code, API) ile site yapan herkes
Anthropic'in model başına istem rehberlerindeki bölüm: modelin kalıcı bir "ev stili" olduğunu (Opus 4.8 için krem arka plan, serif başlık) ve bunu kırmanın iki güvenilir yolunu anlatır: somut bir alternatif tarif etmek ya da kodlamadan önce seçenek önermesini istemek.
Kime: Claude'un hep aynı görünen tasarım ürettiğini fark eden
OpenAI'ın resmî ön yüz istem rehberi ve blog yazısı: tasarım sistemini baştan tanımla, ekran görüntüsü ya da mood board ile görsel çerçeve ver, "varsayılan olarak kart kullanma" gibi sert kurallar koy.
Kime: GPT/Codex ile site yapan
v0'a kendi tasarım sistemini (GitHub reposu, Figma kareleri, ekran görüntüsü, Storybook bağlantısı) bir kez öğretip her sohbette aynı bileşen ve renklerle üretmesini sağlayan resmî rehber.
Kime: v0 kullanan ve her yeni sohbette aynı markayla devam etmek isteyen
Lovable'ın resmî belgesi: yapım öncesi üç farklı tasarım yönü önizlemesi, tipografi/renk/yerleşim soruları ve "minimal, cinematic, premium" gibi stil sözcükleriyle görünümü yönlendirme.
Kime: Lovable ile site yapan kod bilmeyen girişimci
Figma'nın resmî yardım makalesi: Figma Make'in tasarım sistemine uygun üretmesi için guidelines/ klasörüne (Guidelines.md, tokens.md, styles.md, bileşen dosyaları) kısa ve emir kipinde kural yazmayı anlatır.
Kime: Figma Make kullanan ya da yapay zekaya bir tasarım kuralları dosyası yazmak isteyen
Tanınmış sitelerin renk, yazı tipi, boşluk ve bileşen kurallarını çıkaran hazır DESIGN.md dosyaları. Birini proje köküne koyarsın, kodlama ajanı o görsel dile uygun arayüz kurar.
Kime: Claude Code, Codex, Cursor ile site yapıp hep aynı görünen tasarımdan kaçmak isteyen
getdesign.md'nin ücretli kısmı: aylık Catalog Pass (40 seçili DESIGN.md, her ay 5+ yeni), sitene özel hazırlanan DESIGN.md ve web/mobil başlangıç kitleri.
Kime: Kendi ya da müşteri sitesi için hazır tasarım dosyası ve iskelet kod isteyen
Açık olduğun sitenin renklerini, yazı tiplerini, ölçülerini ve görsellerini çıkaran Chrome uzantısı; bunları Tailwind, shadcn, CSS değişkenleri ya da DESIGN.md olarak dışa aktarır.
Kime: Beğendiği referans sitenin paletini ve yazı tipini hızlıca çıkarmak isteyen
Woblo'nun ücretli planları: daha çok dosya indirme, tasarım sistemi dışa aktarma ve sayfa kopyası.
Kime: Woblo'yu her gün referans çıkarmak için kullanan
Hareket ve 3D kütüphaneleri, ücretsiz 3D model kaynakları. Ölçülebildiği yerde sayfaya ne kadar yük getirdiği (JavaScript paketinin sıkıştırılmış boyutu) kartta yazar.
React, Vue ve düz JavaScript için arayüz animasyonu kütüphanesi: giriş-çıkış, kaydırmaya bağlı, sürükleme ve düzen (layout) animasyonları.
Kime: React/Next.js ile site ya da uygulama yapan, bileşen düzeyinde akıcı hareket isteyen herkes.
Motion'ın ücretli paketi: 460+ örnek, hazır premium bileşenler (carousel, sayı animasyonu, özel imleç, typewriter vb.), Motion UI bölümleri ve AI Kit'in ek parçaları.
Kime: Motion kullanan ve hazır premium bileşen/örnekle zaman kazanmak isteyen geliştirici ya da ekip.
Çerçeveden bağımsız JavaScript animasyon motoru: zaman çizelgeleri, kaydırmaya bağlı animasyon (ScrollTrigger), SVG, metin bölme (SplitText) ve sürükleme eklentileri.
Kime: Kaydırmayla ilerleyen anlatım, karmaşık zaman çizelgesi ya da çerçevesiz (vanilla/WordPress/Webflow) sitede animasyon isteyenler.
Hafif, modüler JavaScript animasyon motoru: CSS özellikleri, SVG, DOM öznitelikleri ve JS nesneleri için zaman çizelgesi, kaydırma ve sürükleme API'leri.
Kime: GSAP'ın tescilli lisansını istemeyen, MIT lisanslı çerçevesiz animasyon motoru arayanlar.
Tek satırla listeye eleman ekleme, çıkarma ve sıralama değişikliklerine otomatik geçiş animasyonu ekler.
Kime: Animasyon yazmadan liste/kart/akordeon gibi arayüzlere hareket katmak isteyen yeni başlayanlar.
Yay fiziğine dayalı React animasyon kütüphanesi; süre yerine fizik parametreleriyle doğal hareket üretir, React Three Fiber ile de çalışır.
Kime: React projesinde fizik tabanlı, kesintiye dayanıklı animasyon isteyenler; R3F sahnelerini canlandıranlar.
Yumuşak kaydırma (smooth scroll) kütüphanesi; kaydırmayı GSAP ScrollTrigger ya da WebGL sahneleriyle eşzamanlamak için kullanılır.
Kime: Kaydırmaya bağlı animasyonlu tanıtım/portföy sitesi yapanlar.
Lottie (.json) ve dotLottie (.lottie) animasyonlarını web'de oynatan resmî LottieFiles oynatıcısı; Rust + WASM çekirdek, Canvas2D/WebGL/WebGPU çizim. React sarmalayıcısı @lottiefiles/dotlottie-react.
Kime: After Effects/LottieFiles kaynaklı vektör animasyonu (ikon, yükleniyor, başarı animasyonu) sitesine koymak isteyenler.
Topluluğun paylaştığı ücretsiz Lottie animasyonları kütüphanesi (yükleniyor, onay, hata, ikon vb.); .json ya da .lottie olarak indirilir.
Kime: Kendi animasyonunu çizmeden hazır mikro animasyon arayanlar.
Durum makineli, etkileşimli vektör animasyonu aracı ve oynatıcısı; editörde çizilen .riv dosyası web'de WASM runtime ile çalışır.
Kime: Fareyle/dokunmayla tepki veren karakter, buton ya da ikon animasyonu isteyen tasarımcı-geliştirici ikilileri.
Rive editörünün ücretli planları: açılış ekransız dışa aktarma, sınırsız dosya; Voyager'da kütüphaneler, CDN ve gömme bağlantısı barındırma.
Kime: Rive animasyonunu markalı açılış ekranı olmadan yayına almak isteyenler.
Topluluğun paylaştığı Rive dosyaları; editörde açılıp remix edilebilir.
Kime: Sıfırdan çizmeden etkileşimli animasyon başlangıç dosyası arayanlar.
Tarayıcıda WebGL ve WebGPU ile 3D grafik çizen temel JavaScript kütüphanesi; sahne, kamera, ışık, malzeme ve glTF model yükleme.
Kime: 3D kahraman alanı, ürün görüntüleyici ya da etkileşimli sahne isteyen herkes; R3F, Threlte, TresJS bunun üstüne kurulu.
Three.js'i React bileşenleriyle yazmayı sağlayan React çizicisi (renderer).
Kime: React/Next.js projesine 3D sahne ekleyenler; YZ araçlarının React çıktısıyla uyumlu 3D.
React Three Fiber için hazır yardımcılar: kamera kontrolleri, ortam ışığı, metin, glTF yükleme, gölgeler, kaydırma kontrolleri vb.
Kime: R3F ile hızlı sahne kurmak isteyenler.
Three.js'i Vue bileşenleriyle yazmayı sağlayan çatı (Vue için R3F karşılığı).
Kime: Vue/Nuxt projesine 3D sahne ekleyenler.
Three.js'i Svelte bileşenleriyle yazmayı sağlayan açık kaynak 3D çatısı.
Kime: Svelte/SvelteKit projesine 3D sahne ekleyenler.
Microsoft destekli tam kapsamlı web 3D/oyun motoru: WebGL/WebGPU, fizik, ses, XR, düğüm tabanlı malzeme ve animasyon editörleri.
Kime: Oyun, konfigüratör ya da XR gibi motor özelliği gereken büyük 3D projeler.
Açık kaynak web 3D motoru (WebGL2/WebGPU); React ve Web Components sarmalayıcıları, tarayıcıda çalışan işbirlikli editör ve Gaussian splat desteği.
Kime: Oyun, ürün konfigüratörü ya da 3D tarama (splat) gösterimi yapanlar.
Tek HTML etiketiyle glTF/GLB 3D modeli sayfada döndürülebilir gösteren web bileşeni; AR (mobilde gerçek ortamda görme) desteği var.
Kime: 3D kod yazmadan ürün modelini göstermek isteyen e-ticaret ve tanıtım siteleri.
Tarayıcıda/masaüstünde kod yazmadan etkileşimli 3D sahne tasarlama aracı; yayımlanan sahne web'e runtime ya da React bileşeniyle gömülür.
Kime: 3D kod bilmeden kahraman alanına etkileşimli 3D koymak isteyen tasarımcılar ve vibe coder'lar.
Spline editörünün ücretli planları: filigransız web dışa aktarma, AI üretim kredileri, Pro'da kod dışa aktarma ve glTF/USDZ, Enterprise'da kendi sunucunda barındırma.
Kime: Spline sahnesini filigransız ya da kendi sunucusundan yayımlamak isteyenler.
Spline kullanıcılarının paylaştığı, kopyalayıp (remix) düzenlenebilen 3D sahne ve nesneler.
Kime: Hazır 3D sahneden başlamak isteyen Spline kullanıcıları.
Kodsuz WebGL efekt editörü: gradyan, parçacık, distorsiyon gibi 75+ hareketli efekti katmanlayıp siteye gömülebilir sahne olarak yayımlar.
Kime: Kahraman alanına hareketli WebGL arka plan koymak isteyen tasarımcılar ve Framer/Webflow kullanıcıları.
Unicorn Studio ücretli planı: ticari lisans, filigransız sınırsız yayın, JSON dışa aktarma, özel 3D model/font, barındırma ve CDN.
Kime: Unicorn Studio efektini müşteri ya da şirket sitesinde kullanacaklar.
Ücretsiz HDRI (ortam ışığı), doku ve 3D model kütüphanesi; hepsi insan yapımı ve CC0.
Kime: Three.js/R3F sahnesine gerçekçi ışık, zemin dokusu ya da model arayanlar.
CC0 lisanslı PBR malzeme/doku, HDRI ve model kütüphanesi.
Kime: 3D sahnede gerçekçi yüzey (ahşap, beton, kumaş) dokusu arayanlar.
Ücretsiz 2D/3D oyun varlıkları: düşük poligonlu model kitleri, ikonlar, arayüz paketleri, ses.
Kime: Basit 3D sahne, oyunlaştırma ya da oyun prototipi yapanlar.
Ücretsiz, düşük poligonlu ve çoğu animasyonlu 3D model paketleri (karakter, doğa, şehir); glTF, FBX, OBJ, Blend.
Kime: Animasyonlu karakter ya da düşük poligonlu sahne isteyen R3F/Three.js kullanıcıları.
Büyük 3D model paylaşım ve görüntüleme platformu; bir kısmı indirilebilir, her model kendi lisansını taşır.
Kime: Belirli bir nesnenin hazır 3D modelini arayanlar.
3D karakterlere otomatik iskelet (rig) ve hazır hareket animasyonları (yürüme, dans, el sallama) uygulayan ücretsiz Adobe servisi.
Kime: Three.js/R3F sahnesinde hareket eden insan karakteri isteyenler.
Web için 2B fizik motoru: düşen, çarpışan, yığılan, sürüklenen nesnelerle gerçekçi hareket kurar.
Kime: Sitesine ya da HTML tabanlı videosuna fizik tabanlı, oyunbaz hareket eklemek isteyen
Yapay zeka ya da sohbet arayüzünde 'çalışıyor, arıyor, dinliyor' gibi dokuz bekleme durumunu noktalı küre animasyonuyla gösteren React bileşeni; açık/koyu temaya kendisi uyar.
Kime: Sitesine ya da uygulamasına yapay zeka asistanı veya sohbet kutusu ekleyen
Rengini, hızını ve şeklini ayarladığın hareketli 3D gradyan arka planlar. Sonucu React bileşeni, Framer bileşeni ya da Figma eklentisiyle kullanırsın.
Kime: Sitesine ya da sunumuna hareketli, dikkat çekici arka plan isteyen
Tarayıcıda GIF ve video araçları. Videodan saniyede 1-30 kare JPG çıkarır ve hepsini zip olarak verir; kaydırınca oynayan ürün animasyonu için kare dizisi hazırlamaya yarar.
Kime: Kaydırmayla oynayan 'Apple tarzı' ürün animasyonu için kare dizisi hazırlayan
Ücretsiz font, ikon ve görsel kaynakları; ticari kullanımda neye dikkat edeceğin her kartta. Fontlarda Türkçe karakter desteği (ğ, ş, ı, İ) ayrıca yazar.
Ücretsiz ve açık lisanslı ~1.950 font ailesi; CDN üzerinden bağlanır ya da indirilip kendi sunucunda barındırılır.
Kime: Siteye ücretsiz, ticari kullanımı serbest font seçmek isteyen herkes; Türkiye'de en çok aranan font kaynağı.
Google Fonts ailelerini ve başka açık kaynak fontları npm paketi olarak verir; font projenle birlikte derlenir, kendi sunucundan yüklenir.
Kime: React/Vite/Next.js projesinde fontu Google CDN'e bağlamadan, sürümü sabit tutarak kullanmak isteyenler.
Google Fonts kataloğunun AB merkezli, kayıt tutmayan aynası; bağlantıdaki alan adını değiştirmek yeter.
Kime: Fontu CDN'den yüklemek isteyen ama ziyaretçi IP'sini Google'a göndermek istemeyen site sahipleri.
Indian Type Foundry'nin ücretsiz font servisi: 100 profesyonel aile, CDN ya da indirme.
Kime: Google Fonts'tan farklı, karakterli başlık fontu arayan tasarımcı ve geliştiriciler.
İtalyan bağımsız açık kaynak font kolektifi; 16 aile, hepsi OFL ile ücretsiz.
Kime: Yapay zekanın varsayılan fontlarından (Inter, Space Grotesk) uzaklaşmak isteyen, karakterli başlık fontu arayanlar.
Feather'dan türeyen, tutarlı çizgi stilinde 1.800+ ikonluk (repoda 1.869 SVG) açık kaynak set; React, Vue, Svelte ve düz JS paketleri var.
Kime: shadcn/ui ile çalışan ve yapay zekayla site kuran herkes; shadcn'in varsayılan ikon kütüphanesi.
Tailwind CSS ekibinin 324 ikonluk seti (24 px dış çizgi); dış çizgi, dolu, mini ve mikro boyutları var.
Kime: Tailwind CSS ile çalışan, küçük ve sade bir ikon seti yeten projeler.
6.200'ü aşkın (repoda 6.238 SVG) çizgi ve dolu ikonluk büyük, sık güncellenen açık kaynak set.
Kime: Lucide'de bulamadığı ikon için geniş bir set isteyen, panel/yönetim arayüzü yapanlar.
Her ikonu altı ağırlıkta (ince, açık, normal, kalın, dolu, iki tonlu) veren esnek ikon ailesi.
Kime: Tek setle farklı görsel ağırlıklar isteyen, Lucide'den farklı görünmek isteyen projeler.
239 açık kaynak ikon setini (380.955 ikon) tek API ve tek bileşenle kullandırır; Tailwind eklentisi de var.
Kime: Birden çok ikon setinden seçmek, set adı + ikon adıyla çalışmak isteyenler.
En yaygın ikon setinin ücretsiz katmanı: temel arayüz ikonları ve marka logoları; SVG, JS ve web fontu olarak.
Kime: Marka/sosyal medya logosu gereken, Bootstrap/WordPress geçmişli projeler.
Font Awesome'un tüm Pro ikonları ve stilleri (duotone, sharp vb.), ikon sihirbazı ve özel ikon yükleme.
Kime: Font Awesome'a bağlı, daha geniş stil ve ikon isteyen ekipler.
Google'ın 3.900 civarı ikonluk değişken font ikon seti; dolgu, kalınlık ve optik boyut eksenleri var.
Kime: Material Design / Android hissi isteyenler; Google Fonts'tan tek satırla ikon yüklemek isteyenler.
Çizgi ve dolu çiftleri olan 3.200+ (repoda 3.229 SVG) ikonluk nötr arayüz seti; web fontu, SVG ve React paketi.
Kime: Çizgi/dolu ikon çifti isteyen, shadcn'de Lucide yerine başka set seçenler.
15×15 ızgarada çizilmiş 332 keskin, küçük arayüz ikonu.
Kime: Radix UI / eski shadcn "new-york" stiliyle çalışan, yoğun arayüz yapanlar.
6.000+ ücretsiz "stroke rounded" ikon; React, Vue, Svelte, Angular, React Native ve Flutter paketleri.
Kime: shadcn'de Lucide yerine daha geniş ve farklı görünen bir set isteyenler.
60.000+ ikon, 10 stil; Figma kaynak dosyaları, özel ikon seti ve CDN web fontu.
Kime: Hugeicons'ı ürününde yaygın kullanan, tüm stillere ihtiyaç duyan ekipler.
1.300+ ikonluk (repoda 1.383 SVG), ince çizgili, bağımsız açık kaynak set; React, Vue, React Native, Flutter ve CSS.
Kime: Lucide'ye benzer ama farklı karakterde, hafif çizgi ikon isteyenler.
3.400+ (repoda 3.465 SVG) marka logosunun tek renkli SVG'si ve resmî marka rengi.
Kime: "Kullandığımız teknolojiler", entegrasyon ya da sosyal medya logosu gösteren siteler.
Font Awesome, Material, Heroicons, Lucide gibi 31 seti tek React paketinde toplar.
Kime: Farklı setlerden ikonu tek import biçimiyle kullanmak isteyen React geliştiricileri.
Bootstrap ekibinin 2.000+ (repoda 2.078) SVG ikonu ve web fontu; Bootstrap olmadan da çalışır.
Kime: Bootstrap ya da düz HTML/CSS ile site yapanlar.
9.700 ücretsiz animasyonlu ikon; Lottie tabanlı, web bileşeni ya da React ile oynatılır.
Kime: Butonlarda, boş durumlarda hareketli ikon isteyen siteler.
38.100 PRO animasyonlu ikon, atıfsız kullanım ve koleksiyonlar.
Kime: Animasyonlu ikonu atıf vermeden ürününde kullanmak isteyenler.
18 milyonu aşkın ikon ve çıkartma; ücretsiz üyelikte PNG indirme.
Kime: Türkiye'de "ücretsiz ikon indirme" arayan, sunum ve sosyal medya görseli hazırlayan herkes.
Flaticon'un tüm ikonlarını SVG/EPS/PSD olarak atıfsız kullanma, günde 2.000 indirme; Storyset illüstrasyonlarında da atıfı kaldırır.
Kime: Flaticon ikonlarını müşteri işinde atıfsız ve vektör olarak kullanmak isteyenler.
Fotoğrafçıların ücretsiz paylaştığı yüksek çözünürlüklü fotoğraf arşivi; resmî API ve JS istemcisi var.
Kime: Site kahramanı, blog kapağı ya da arka plan için ücretsiz fotoğraf arayan herkes.
Üyelere özel fotoğraflar, sınırsız indirme, kırpma/arka plan kaldırma ve hukuki güvence.
Kime: Telif güvencesi isteyen ajanslar ve markalar.
Ücretsiz fotoğraf ve video arşivi; ücretsiz API.
Kime: Site ve sosyal medya için ücretsiz fotoğraf ve özellikle video arayanlar.
Ücretsiz fotoğraf, vektör, illüstrasyon, video ve müzik arşivi; ücretsiz API.
Kime: Türkçe arayüzle "telifsiz görsel" arayanlar; vektör ve illüstrasyon da gerekenler.
Vektör, fotoğraf, PSD ve şablon arşivi; Freepik artık Magnific adını kullanıyor (sayfa başlığı "Magnific (formerly Freepik)"); freepik.com yönlendiriyor.
Kime: Türkiye'de çok kullanılan vektör/PSD kaynağı; sunum ve sosyal medya tasarımı yapanlar.
250 milyon+ Premium içerik, atıfsız kullanım ve YZ görsel/video üretim kredileri.
Kime: Stok görsel + YZ üretimini tek abonelikte isteyen tasarımcı ve ajanslar.
YZ ile üretilmiş 16.000+ ücretsiz stok görsel; renk, ışık ve yönle filtrelenir.
Kime: Klişe stok fotoğraf yerine özgün görünümlü kahraman görseli isteyenler.
Tüm kütüphane filigransız, ultra çözünürlük, yeniden çerçeveleme, arka plan kaldırma ve aylık 60 YZ kredisi.
Kime: Lummi görsellerini yüksek çözünürlükte ve düzenleyerek kullanmak isteyenler.
Rengi siteden seçilebilen düz (flat) SVG illüstrasyon arşivi.
Kime: Açılış sayfası, boş durum ve 404 ekranı için ücretsiz illüstrasyon isteyenler.
Freepik/Magnific şirketinin düzenlenebilir ve canlandırılabilir illüstrasyonları; renk ve katmanlar sitede değiştirilir.
Kime: Sunum, eğitim ve açılış sayfası için hareketli illüstrasyon isteyenler.
2D/3D illüstrasyon, ikon ve animasyon paketleri; bir kısmı ücretsiz.
Kime: Açılış sayfası ve uygulama ekranı için tutarlı illüstrasyon seti isteyenler.
DrawKit'in tüm Pro illüstrasyon, ikon ve animasyon paketlerine erişim.
Kime: Tek stilde çok sayıda illüstrasyon gereken ürün ekipleri.
Açık lisanslı kaynaklardan botla toplanmış yüz binlerce SVG ikon ve vektörün arama motoru ve düzenleyicisi.
Kime: Belirli bir ikonu/vektörü hızlıca SVG olarak bulmak isteyenler.
Izgara, akış, dairesel, gürültü, izometrik gibi sade, üretken SVG desenleri. Kaydırıcılarla deseni değiştirip SVG olarak indirirsin.
Kime: Afiş, sunum kapağı, site arka planı ya da sosyal medya görseli için özgün desen arayan
Başkalarının yaptığı siteleri ve ekranları gösteren galeriler. Kopyalamak için değil, yapay zekaya "şuna benzer bir düzen" diye referans vermek için. Galerideki görseller sitede gösterilmiyor.
Jüri puanlı web sitesi ödül galerisi; her gün 'Site of the Day' seçer, teknolojiye (GSAP, WebGL, Three.js, Framer…) ve kategoriye göre filtrelenir.
Kime: Animasyonlu, deneysel, üst düzey arayüz arayan tasarımcı ve geliştirici
Tasarımcıların kısa çalışma paylaşımları (shot) yaptığı vitrin; arayüz, marka, illüstrasyon ve animasyon örnekleri.
Kime: Fikir, renk ve bileşen görünümü arayan herkes
Adobe'nin yaratıcı portfolyo ağı; UI/UX, web, marka ve illüstrasyon projeleri vaka çalışması biçiminde, çoğu zaman süreçle birlikte.
Kime: Bir projenin baştan sona nasıl kurulduğunu görmek isteyen tasarımcı
Günlük güncellenen web sitesi galerisi; sayfa tipi, bölüm (hero, fiyat, footer…), stil, renk ve platforma (Framer, Webflow…) göre filtrelenir.
Kime: Açılış sayfası ve bölüm düzeni arayan
2015'ten beri her gün açılış sayfası örneği ekleyen galeri; kategori, renk, platform ve yıla göre filtrelenir, ücretsiz şablon ve kitap bölümü de var.
Kime: SaaS, ajans, portfolyo açılış sayfası arayan
Yayımlanmış mobil ve web uygulamalarından ekran, akış ve animasyon kütüphanesi (sayfada '621,500 shipped screens'); resmî MCP sunucusu var.
Kime: Uygulama ekranı (onboarding, paywall, ayarlar) tasarlayan; YZ ajanına gerçek ürün referansı vermek isteyen
Web ve iOS ürünlerinden ekran ve kullanıcı akışı referans kütüphanesi (144.000+ ekran, 400+ ürün); MCP sunucusu, Figma eklentisi ve açık kaynak bir ajan skill'i var.
Kime: Ürün ekranı tasarlayan; YZ ajanına tasarım araştırması yaptırmak isteyen
Web siteleri, OG görselleri, uygulama ekranları, ikonlar ve hareket işlerinden seçilmiş tasarım akışı; Godly galerisinin yerini aldı, tasarım ajan skill'leri dizini de var.
Kime: Güncel, seçici web ve marka ilhamı arayan
Daniel Howells'ın seçtiği web tasarımı vitrini; 8.000'i aşkın site stil, tür ve konuya göre kategorili, tasarlayan ajans profilleriyle.
Kime: Tipografik, minimal, ajans/portfolyo sitesi arayan
2008'den beri tek sayfalık site, bölüm (9.000+) ve şablon galerisi; teknoloji filtresi (Tailwind, GSAP, shadcn/ui…) ve ücretsiz MCP sunucusu var.
Kime: Tek sayfalık açılış/portfolyo ve bölüm örneği arayan; Claude Code'dan doğrudan arama yapmak isteyen
SaaS şirketlerinin açılış, fiyat, hakkında, SSS sayfalarından seçilmiş galeri (sayfada 840 örnek); teknoloji ve font filtresi var.
Kime: SaaS ürünü için açılış sayfası kuran
SaaS uygulamalarının iç ekranlarından (pano, tablo, ayarlar, ödeme, onboarding) UI/UX galerisi; SaaS Landing Page ekibinin ürünü.
Kime: SaaS panel ve uygulama ekranı tasarlayan
Sade, işlevsel web siteleri seçkisi; tür etiketleriyle (ajans, portfolyo, SaaS, e-ticaret…) ve haftalık bültenle.
Kime: Minimal, bol boşluklu tasarım arayan
Canlı web sitelerinden elle seçilmiş galeri; sektör ve stile göre filtrelenir, Pro'da açılış sayfası bölüm kütüphanesi var. Craftwork ekibi yürütüyor.
Kime: Açılış sayfası ve bölüm (hero, fiyat tablosu) arayan
Web, iOS ve Android ürünlerinden kayıtlı kullanıcı akışı videoları, ekranlar, UI öğeleri ve e-postalar.
Kime: Onboarding, ödeme, abonelik gibi çok adımlı akış tasarlayan
Açılış sayfası ve bölüm (bileşen) ilham galerisi; ayrıca ücretli Tailwind/Webflow/Figma bileşen ve şablon kütüphanesi ve MCP sunucusu.
Kime: Açılış sayfası bölümü arayan; ajanına bölüm referansı vermek isteyen
Yalnız gezinme çubuğu örnekleri: sabit, açılır, mega menü, kenar çubuğu, arama, duyuru çubuğu, tam ekran menü.
Kime: Menü/üst bar tasarlayan
Yalnız site altbilgisi (footer) örnekleri; tip ve stile göre (tipografik, ızgara, animasyonlu, koyu…) ayrılmış.
Kime: Footer tasarlayan
Yalnız koyu temalı web sitelerinden seçki; Cai Cardenas seçiyor.
Kime: Koyu tema arayan
Bölüm odaklı galeri: hero, referans, özellik, CTA, footer, fiyat bölümleri ayrı ayrı (sayfada 5.130 bölüm).
Kime: Sayfayı bölüm bölüm kuran
Yayımlanmış iOS uygulamalarından mikro etkileşim ve animasyon kayıtları (2.100 shot, 492 uygulama), hareket çözümlemeleriyle; ayrı ücretli MCP.
Kime: Uygulamaya animasyon/mikro etkileşim eklemek isteyen
SaaS web uygulamalarından ekran, bileşen ve akış kütüphanesi (sayfada 209.891 ekran); OAuth ile bağlanan MCP sunucusu.
Kime: SaaS uygulama ekranı tasarlayan
David Hellmann'ın 2008'den beri seçtiği site galerisi (sayfada 2.642 site); günün sitesi ve bağlantı seçkisi.
Kime: Ajans/portfolyo ve deneysel site arayan
Alışılmışın dışındaki web tasarımı ve etkileşim örnekleri; her kayıtta etkileşimin kısa açıklaması.
Kime: Deneysel hover/scroll etkileşimi arayan
Bağımsız tipografi arşivi: fontların gerçek işlerde (web, marka, kitap, ambalaj) nasıl kullanıldığını font adıyla etiketler.
Kime: Font eşleştirmesi ve tipografi örneği arayan
Görsel ilham toplama ve koleksiyon uygulaması; renge göre arama, benzer görsel bulma, YZ üretimi görselleri gösterme/bulanıklaştırma/gizleme seçeneği.
Kime: Moodboard kuran tasarımcı
Genel görsel arama ve pano platformu; 'web design', 'UI' gibi aramalarla tasarım panoları kurulur.
Kime: Moodboard kurmak isteyen herkes
Yaratıcı 404 (sayfa bulunamadı) tasarımlarını stil, etkileşim ve sektöre göre süzerek gösteren galeri.
Kime: Sitesinin hata sayfasını sıkıcı olmaktan çıkarmak isteyen
Sitelerdeki 'harekete geçirici' bölümlerin (buton, form, bülten, indirme, fiyat) seçilmiş örneklerini tür, sektör ve açık/koyu moda göre gösteren galeri.
Kime: Teklif, iletişim ve bülten bölümünü güçlendirmek isteyen
2007'den beri yayında olan yaratıcı içerik sitesi: grafik, illüstrasyon, fotoğraf, marka ve web tasarımı projelerini yazılarla tanıtır.
Kime: Tasarım akımlarını takip etmek, marka ve görsel dil için ilham arayan
2007'den beri yayında olan İngiliz grafik tasarım sitesi; marka, tipografi, yayın, dijital ve hareketli tasarım projelerini büyük görsellerle seçip gösterir.
Kime: Logo, kimlik, afiş ya da sayfa düzeni için ilham arayan
Hazır açılış sayfası, yönetim paneli ve başlangıç kitleri: yapay zekaya boş sayfa yerine sağlam bir iskelet ver. Ücretsiz ve açık lisanslılar ile ücretli pazarlar ayrı kartta.
Vercel'in şablon galerisi: Next.js, Astro, Nuxt, SvelteKit gibi çatılar için başlangıç kitleri, SaaS, e-ticaret, blog, portföy ve yönetim paneli şablonları. Her şablon tek tıkla kendi GitHub deponuza kopyalanıp yayına alınabiliyor.
Kime: Hazır, çalışan bir projeden başlamak isteyen; Vercel'de yayın yapacak olanlar
Next.js deposundaki yaklaşık 230 resmî örnek proje: kimlik doğrulama, CMS bağlantıları, blog, e-ticaret, veritabanı ve stil kurulumları. Her biri tek komutla yeni proje olarak açılıyor.
Kime: Next.js ile başlayan ve belirli bir entegrasyonun doğru kurulmuş hâlini görmek isteyenler
Next.js ekibinin SaaS başlangıç kiti: açılış ve fiyat sayfası, e-posta/şifre girişi, Stripe Checkout ile abonelik, Owner/Member rolleriyle ekip yönetimi, Postgres + Drizzle. Arayüz shadcn/ui ile yalın.
Kime: Ücretli abonelikli bir web uygulamasını sıfırdan değil, çalışan bir iskeletten başlatmak isteyenler
Vercel'in e-ticaret vitrin şablonu: ürün listesi, arama, sepet ve ödeme akışı; ürün verisini Shopify'dan çekiyor.
Kime: Shopify mağazasına hızlı, özel tasarımlı bir ön yüz kurmak isteyenler
Astro'nun tema dizini: blog, açılış sayfası, portföy, dokümantasyon ve e-ticaret temaları; ücretsiz ve ücretli temalar aynı listede, filtrelenebiliyor.
Kime: Hızlı yüklenen içerik siteleri (blog, kurumsal, portföy) kuracaklar
Astro + Tailwind v4 ile açılış sayfası ve kurumsal site şablonu: 30+ hazır bölüm (hero, özellikler, fiyat tablosu, SSS, referanslar), MDX blog, RSS, site haritası, karanlık mod ve RTL.
Kime: Hızlı bir tanıtım/kurumsal site isteyen KOBİ ve serbest çalışanlar
Astro ile sade, erişilebilir ve hızlı bir blog şablonu: Pagefind ile statik arama, taslak yazılar, RSS ve site haritası, karanlık mod, yazı başına otomatik OG görseli.
Kime: Kişisel ya da kurumsal blog açmak isteyenler
shadcn/ui'nin hazır sayfa blokları: yönetim paneli (dashboard-01), 16 kenar çubuğu, giriş ve kayıt ekranları ve grafik blokları (registry'de 97 blok). Kod doğrudan projenize kopyalanıyor.
Kime: React/Next.js projesine hazır panel ve giriş ekranı eklemek isteyenler
shadcn/ui + Vite + TanStack Router ile hazır yönetim paneli: 10+ sayfa, genel arama komutu, karanlık mod, RTL desteği; isteğe bağlı Clerk girişi.
Kime: Admin paneli/iç araç kuracak React kullanıcıları
Next.js + shadcn/ui yönetim paneli başlangıç kiti: uçtan uca çalışan veri tabloları (React Query), formlar (Zod), grafikler, Clerk girişi, Sentry ve örnek yapay zeka sohbet sayfası.
Kime: Next.js tabanlı SaaS paneli ya da iç araç kuracaklar
Wasp (React + Node.js + Prisma) üzerinde tam yığın SaaS başlangıç kiti: giriş, Stripe/Lemon Squeezy ödeme, yönetici paneli, e-posta, dosya yükleme, blog ve dokümantasyon sitesi.
Kime: Ödeme alan bir SaaS'ı tek depoda, ön yüz + arka uçla birlikte başlatmak isteyenler
Next.js + Tailwind + TypeScript başlangıç kiti: Clerk girişi, Drizzle ORM, test (Vitest, Playwright), Sentry, çok dillilik (i18n) ve kod kalitesi araçları kurulu gelir.
Kime: Test ve izleme altyapısı baştan kurulu bir proje isteyenler
Ücretsiz Next.js Boilerplate'in ücretli SaaS sürümü: çok kiracılık ve ekipler, roller/izinler, shadcn/ui, Stripe ödeme.
Kime: Ekip ve abonelik altyapısını hazır almak isteyen SaaS kurucuları
Next.js + Tailwind ile MDX tabanlı blog şablonu: etiket sayfaları, komut paleti araması, Giscus/Utterances yorumları, bülten bileşeni, RSS, 3 yazı yerleşimi ve çok yazar desteği.
Kime: Markdown/MDX ile yazan teknik blog sahipleri
Next.js + shadcn/ui + Magic UI ile tek sayfalık geliştirici portföyü; içerik tek bir veri dosyasından düzenleniyor.
Kime: Hızlıca kişisel portföy/özgeçmiş sitesi açmak isteyenler
Once UI ile Next.js portföy şablonu: proje sayfaları, blog, galeri ve hakkımda bölümü.
Kime: Kişisel, ticari olmayan portföy sitesi; ticari kullanım için Once UI Pro alacaklar
Bootstrap ekibinin hazır sayfa örnekleri: dashboard, blog, albüm, fiyat, ödeme, giriş, kapak gibi yerleşimler ve Vite/Webpack başlangıç kurulumları.
Kime: Saf HTML/CSS ile başlayan, 'hazır html css şablonu' arayanlar
Bootstrap 5 tabanlı açık kaynak yönetim paneli şablonu: 100+ bileşen, birden çok yerleşim, karanlık mod ve 6 hazır demo.
Kime: HTML/Bootstrap ile admin paneli kuracaklar
Tabler'ın ücretli paketi: derlenmiş HTML/CSS/JS paketi, e-posta desteği; All Package'ta ek olarak SVG illüstrasyonlar, ikonlar ve e-posta şablonları.
Kime: Derlenmiş paket ve destek isteyen ekipler
2013'ten beri süren, Bootstrap 5 tabanlı açık kaynak yönetim paneli şablonu: hazır panel sayfaları, formlar, tablolar, eklentiler.
Kime: Klasik HTML/Bootstrap admin paneli isteyenler; PHP/Laravel projeleri
AdminLTE sitesinde 'Premium Templates' olarak listelenen ücretli admin şablonları (Next.js, React, Vue, Angular, HTML, shadcn/ui sürümleri); satıcı DashboardPack.
Kime: Modern görünümlü hazır admin paneline ödeme yapacak ekipler
Bootstrap, React, Vue ve Angular için ücretsiz admin paneli şablonları ve bileşen kütüphanesi.
Kime: Kurumsal görünümlü admin paneli kuracak, çatı seçimi esnek ekipler
CoreUI'nin ücretli paketi: 250+ PRO bileşen, 25+ admin şablonu, veri tablosu (Data Grid), takvim (Scheduler) ve 4.300+ ikon; React, Angular, Vue, Bootstrap, Next.js.
Kime: Kurumsal admin paneli geliştiren ekipler
Tailwind CSS ile ücretsiz admin paneli şablonu; HTML, React, Next.js, Vue, Angular ve Laravel sürümleri ayrı depolarda.
Kime: Tailwind ile admin paneli kuracaklar
TailAdmin'in ücretli sürümü: tüm Pro bileşenler, Figma kaynağı (Business ve üstü), ömür boyu güncelleme; HTML, React, Next.js, Vue, Angular, Laravel.
Kime: Daha çok sayfa ve bileşenli admin paneli isteyen serbest çalışan ve ajanslar
Tailwind + Next.js ile ücretsiz açılış sayfası şablonları (Simple Light, Open React Template).
Kime: SaaS/uygulama tanıtım sayfası kuracaklar
Tailwind ile hazırlanmış ücretli açılış sayfası, SaaS pazarlama ve admin şablonları (Artifact, Relay, Cadence, Flux, Mosaic, Stellar…); tek tek ya da Classic/Modern paket olarak.
Kime: Özenli tasarımlı Tailwind açılış sayfası isteyen kurucular ve ajanslar
Bootstrap 5 ile işletme, portföy, restoran, kurumsal, açılış sayfası ve admin kategorilerinde hazır HTML şablonları.
Kime: Kendi sitesi için hızlı HTML şablonu arayanlar
BootstrapMade şablonlarının ücretli sürümü: atıf satırı kaldırılabilir, çalışan PHP/AJAX iletişim formu, SCSS dosyaları, destek; Premium Plan'da tüm pro şablonlar ve şablon oluşturucu.
Kime: Müşteriye site yapıp ücret alan serbest çalışan ve ajanslar
182+ Bootstrap/HTML şablonu: ajans, kurumsal, restoran, otel, inşaat, tarım gibi sektörlere hazır siteler.
Kime: Sektörel hazır HTML site arayanlar
Ücretsiz şablonlardan atıf satırını kaldırma lisansı (+ çalışan AJAX/PHP iletişim formu, destek) ve ücretli Pro şablonlar (Single/Unlimited lisans).
Kime: Müşteri sitesinde 'Designed by HTML Codex' satırını istemeyenler
2008'den beri 620+ ücretsiz HTML/CSS şablonu; 2026'da framework'süz, tek dosyalık 'yapay zekayla özelleştirilebilir' saf CSS şablonları ekledi.
Kime: Kayıt olmadan, atıf zorunluluğu olmadan HTML şablon indirmek isteyenler
Envato'nun tek tek satın alınan tema ve şablon pazarı; HTML site şablonları, admin panelleri, React/Next.js şablonları (WordPress temaları bu rafın dışında).
Kime: Çok sayıda hazır tasarım arasından seçip tek seferlik ödemek isteyenler
Envato'nun aboneliği: web şablonları dahil milyonlarca öğeye sınırsız indirme; her kullanım için öğeyi bir projeye 'kaydetmek' gerekiyor.
Kime: Çok sayıda şablon/görsel kullanan ajanslar ve içerik üreticileri
Webflow pazarındaki ücretsiz site şablonları. Yalnız Webflow'da çalışır; kod dışa aktarma ücretli Webflow planı ister.
Kime: Kod yazmadan Webflow'da site kuracaklar
Webflow pazarındaki ücretli site şablonları; Single-Use License ile satılıyor.
Kime: Webflow'da müşteri sitesi yapan tasarımcılar
Framer Marketplace'teki ücretsiz site şablonları; 'Remix' ile kendi Framer projenize kopyalanıyor. Yalnız Framer'da çalışır.
Kime: Framer'da portföy ve açılış sayfası kuracaklar
Framer Marketplace'teki ücretli site şablonları; tek proje lisansıyla satılıyor.
Kime: Framer'da müşteri sitesi yapan tasarımcılar
v0 kullanıcılarının yayımladığı şablonlar: açılış sayfası, dashboard, giriş ekranı, blog/portföy, e-ticaret, yapay zeka uygulamaları. 'Fork' ile kendi v0 sohbetinize kopyalanıyor.
Kime: v0'da çalışan, sıfırdan istem yazmak yerine hazır bir projeden başlamak isteyenler
Lovable topluluğunun yayımladığı yaklaşık 214 site ve uygulama şablonu: portföy, SaaS, blog, dashboard, e-ticaret, açılış sayfası.
Kime: Lovable'da çalışan, hazır bir uygulamadan başlamak isteyenler
Animasyonlu açılış sayfası ve bölüm (hero, menü, alt bilgi, CTA) örneklerini prompt'larıyla satar; prompt'u Lovable, Cursor ya da Claude'a verip benzerini kurdurursun. Hareketli arka plan videoları da var.
Kime: Müşteri sitesine hızlı, etkileyici bir açılış bölümü eklemek isteyen tasarımcı ve ajans
UI kitleri, bileşenler, Figma dosyaları, shader ve doku efektleri, site şablonları ve 'vibe coding' prompt'ları sunan abonelikli kütüphane; MCP ile kodlama ajanına bağlanır.
Kime: Yapay zekayla site yaparken hazır, özenli bir görsel yön isteyen tasarımcı ve geliştirici
vividsites'ın ücretli kısmı: 299 hareketli, 'sinematik' site şablonu ve prompt'u, motion videoları ve tek cümleden site kuran Create aracı.
Kime: Kaydırınca hareket eden, 3D öğeli bir açılış sayfası yapmak isteyen
Markana özgü bir görünüm, hızlı açılan sayfalar ve lisansı temiz kaynaklar. Rehber ücretsiz kalır.
Web tasarım hizmetiSiteyi geliştirmek ve reklam performansını ölçmek için çerez kullanıyoruz. Ölçüm ve reklam çerezleri yalnızca siz kabul ederseniz çalışır. Ayrıntılar Gizlilik Politikası ve KVKK Aydınlatma Metni içinde.