Yapay zekâ destekli geliştirme araçları sayesinde artık birkaç saat içerisinde oldukça profesyonel görünen web siteleri oluşturmak mümkün.

Ancak bu durum beraberinde yeni bir problem getirdi.

Birçok web sitesi artık aynı tasarım kalıplarını, metin yapılarını, component'leri, animasyonları ve hatta aynı teknik tercihleri kullanıyor.

Bir landing page'e baktığınızda birkaç saniye içerisinde sitenin Claude, ChatGPT, Cursor, Lovable, Bolt veya benzeri AI destekli geliştirme araçlarıyla üretildiğini tahmin edebiliyorsunuz.

Buradaki problem vibe coding değil.

Problem, yapay zekânın ürettiği ilk tasarımı tasarım, UX, içerik, erişilebilirlik, performans ve teknik açıdan ikinci kez değerlendirmeden doğrudan production'a göndermek.

İşte sitenizin biraz fazla vibe-coded göründüğünü gösterebilecek 30 işaret.

1. Sert gradient'ler

Maviden mora, turuncudan pembeye veya neon renkler arasında geçen büyük gradient'ler, günümüzde bir arayüzün AI tarafından oluşturulduğu hissini veren en yaygın tasarım öğelerinden biri.

Gradient kullanmak kötü değildir.

Problem, hero alanından butonlara ve kartlara kadar her yerde gradient kullanılmasıdır.

Güçlü bir görsel kimlikte gradient bir varsayılan değil, bilinçli bir tasarım kararıdır.

2. Her yerde Lucide icon kullanılması

Lucide oldukça başarılı bir icon library.

Ancak React, Next.js ve Tailwind tabanlı AI projelerinin büyük bölümünde varsayılan olarak kullanıldığı için her section'da Lucide ikonları görmek tasarımın template hissi vermesine neden olabilir.

Icon'ları gerçekten bilgi aktardıkları yerde kullanın.

Sadece boşluk doldurmak için her heading'in yanına icon eklemeyin.

3. Tamamen beyaz arka plan

Her yerde saf #FFFFFF kullanmak tasarımın biraz ham görünmesine neden olabilir.

Gerçek ürünlerde genellikle section'lar arasında çok hafif ton farklılıkları, surface renkleri, border'lar veya background katmanları bulunur.

Sayfanın arka planıyla kartların arka planını hafifçe ayırmak bile tasarımın çok daha bilinçli görünmesini sağlayabilir.

4. Rainbow coloring

Bir özellik mavi.

Diğeri mor.

Sonraki yeşil.

Diğeri turuncu.

Sonuncusu pembe.

AI tarafından oluşturulan landing page'lerde her özelliğe ayrı renk verme eğilimi oldukça yaygın.

Eğer renklerin gerçek bir anlamı yoksa, bu yaklaşım görsel hiyerarşi oluşturmak yerine görsel gürültü yaratır.

5. Her yerde drop shadow

Kartlar.

Butonlar.

Navbar.

Pricing alanları.

Screenshot'lar.

Modal'lar.

Badge'ler.

Her şey havada duruyorsa hiçbir şey gerçekten öne çıkmıyordur.

İyi interface design'da elevation kontrollü kullanılır.

Bazen basit bir border veya background değişimi başka bir box-shadow eklemekten daha etkilidir.

6. Yan yana üç feature card

Muhtemelen bu section'ı yüzlerce kez gördünüz:

Yan yana üç eşit kart.

Üstte bir icon.

Altında kısa bir başlık.

Sonra iki satırlık açıklama.

AI araçları bu yapıyı sürekli üretir çünkü responsive yapmak kolaydır ve güvenli bir UI pattern'dir.

Tek başına kötü değildir.

Ancak aynı yapının sayfa boyunca tekrar edilmesi sitenin generic görünmesine neden olur.

7. Tasarım öğesi olarak emoji

Emoji'ler topluluk odaklı veya daha samimi ürünlerde oldukça iyi çalışabilir.

Ancak gerçek icon, illustration, screenshot veya görsel sistem yerine rastgele 🚀 ✨ 🔥 💡 emoji kullanılması ürünü tamamlanmamış gösterebilir.

Özellikle marka kendisini kurumsal veya premium konumlandırmaya çalışıyorsa.

8. Her yerde liquid glass

Transparan paneller.

Blur efektleri.

backdrop-filter.

Parlak kartlar.

Şeffaf navbar'lar.

Glassmorphism screenshot'larda oldukça etkileyici görünebilir.

Ancak aşırı kullanıldığında okunabilirliği azaltabilir, performansı etkileyebilir ve kullanıcıyı yorabilir.

Glass efektlerini tasarım sisteminin tamamı yerine vurgu öğesi olarak kullanın.

9. Her cümlede em dash

Bu madde tasarımdan çok copywriting ile ilgili.

AI modelleri em dash — kullanmayı çok seviyor.

Bazen biraz fazla.

Metindeki neredeyse her paragraf bu yapıyı kullanıyorsa içerik hızlı şekilde AI-generated hissi vermeye başlıyor.

İyi metin farklı cümle yapıları kullanır.

10. Inter, Geist veya Space Grotesk

Bu fontların üçü de oldukça başarılı.

Zaten tam olarak bu nedenle her yerde kullanılıyorlar.

Inter, Geist veya Space Grotesk kullanmak tek başına sitenizin vibe-coded olduğu anlamına gelmez.

Ancak listedeki diğer tasarım kalıplarıyla birleştiğinde etki çok daha belirgin hale gelir.

Typography markanızın bir parçası olmalı, starter template'in varsayılan ayarı değil.

11. Solda renkli çizgi

Gri bir kart.

Sol tarafında mavi, mor, yeşil veya turuncu bir border.

AI tarafından üretilen arayüzlerde oldukça sık kullanılan başka bir component.

Uyarılar ve kategorize edilmiş bilgiler için oldukça kullanışlıdır.

Fakat normal içeriklerde sürekli tekrarlandığında anlamını kaybeder.

12. Sahte testimonial'lar

“Sarah M., Founder”

“Workflow'umuzu tamamen değiştirdi.”

“Daha önce kullandığımız her şeyden 10 kat daha iyi.”

Landing page boş görünmesin diye testimonial uydurmayın.

Sahte social proof, hiç social proof olmamasından daha kötüdür.

Henüz müşteriniz yoksa ürünü gösterin.

Benchmark yayınlayın.

Demo sunun.

Problemi iyi açıklayın.

Veya henüz erken aşamada olduğunuzu açıkça söyleyin.

13. Bento grid

Bento tasarımlar popüler hale geldi çünkü birçok özelliği tek section içerisinde etkileyici şekilde gösterebiliyor.

Sonra herkes kullanmaya başladı.

Bento grid hâlâ başarılı olabilir.

Ancak sadece modern göründüğü için değil, ürününüzün yapısını gerçekten iyi temsil ettiği için kullanılmalı.

14. Sahte terminal pencereleri

Developer tool landing page'lerinin klasiklerinden biri:

$ npm install amazing-product
✓ magic complete

Kullanıcılar ürününüzle gerçekten CLI, SDK, package manager veya API üzerinden etkileşim kuruyorsa terminal görüntüsü anlamlıdır.

Aksi halde çoğu zaman sadece dekorasyondur.

15. “X değil, Y”

“Analytics değil. Intelligence.”

“Bir araç değil. Growth engine.”

“Software değil. Revolution.”

Bu copywriting formülü AI araçları tarafından o kadar fazla kullanıldı ki artık doğrudan generated-content hissi verebiliyor.

Formül yerine ürünün gerçekten ne yaptığını söyleyin.

16. Checkmark bullet'lar

✓ Hızlı
✓ Güvenli
✓ Güçlü
✓ Kullanımı kolay

Checkmark'lar bir pakete dahil özellikleri anlatırken oldukça yararlı olabilir.

Ancak genel marketing ifadelerinde pek bilgi taşımaz.

Bunun yerine ölçülebilir özellikler kullanın.

Örneğin:

“Tarama başına 10.000 URL analiz eder”

ifadesi,

“✓ Güçlü”

ifadesinden çok daha değerlidir.

17. Tam olarak üç pricing plan

Starter.

Pro.

Enterprise.

Bu yapının popüler olmasının bir nedeni var: çoğu durumda çalışıyor.

Ancak pricing yapınız landing page template'ine göre değil, gerçek müşteri segmentlerinize ve ürün ekonominize göre belirlenmeli.

İki paket gerekiyorsa iki paket kullanın.

Dört gerekiyorsa dört.

18. Gerçek product demo olmaması

Listedeki en önemli sorunlardan biri bu.

Landing page mükemmel görünüyor.

Ama ürünün kendisini göremiyorsunuz.

Screenshot yok.

Interactive demo yok.

Video yok.

Dashboard preview yok.

Gerçek kullanım örneği yok.

Çoğu zaman ürününüzün gerçek UI'ı, birkaç paragraf marketing copy'den çok daha güçlü bir kanıttır.

Ürünü gösterin.

19. Her yerde soft corner radius

rounded-xl.

rounded-2xl.

rounded-3xl.

Modern frontend framework'leri rounded interface oluşturmayı çok kolaylaştırdı.

Ancak navbar, hero, kartlar, butonlar, screenshot'lar, pricing tabloları, badge'ler ve input'ların tamamı aynı yumuşak köşelere sahipse bütün arayüz birbirine karışmaya başlar.

Shape kullanımını bilinçli yapın.

20. Mor ve siyah

Dark background.

Purple glow.

White text.

Gradient CTA.

Tebrikler.

AI SaaS landing page'lerinin önemli bir bölümünü yeniden oluşturdunuz.

Mor ve siyah oldukça iyi görünebilir.

Sadece gerçek bir brand system'ın parçası olduğundan emin olun.

Varsayılan “AI startup” görünümü olduğu için seçmeyin.

21. Skeleton loader olmaması

AI-generated frontend demo'lar genellikle ideal senaryoya odaklanır.

Gerçek uygulamalarda ise loading state vardır.

Boş bir alanın aniden tamamen render edilmiş içeriğe dönüşmesi ürünün eksik hissettirmesine neden olur.

Skeleton loader, progressive rendering, optimistic update ve anlamlı loading indicator'lar da product design'ın bir parçasıdır.

22. Radial orb'lar

Hero'nun arkasında bulunan dev bulanık renkli daireler artık generated SaaS tasarımlarının klasiklerinden biri.

Genellikle şöyle bir şey:

filter: blur(120px);
opacity: 0.4;

Atmosferik efektleri kontrollü kullanın.

Her section'da glow varsa bir süre sonra derinlik değil, gürültü yaratmaya başlar.

23. Dot grid

Hero arkasındaki küçük noktalar.

Kenarlarına doğru kaybolan pattern.

Tek başına oldukça iyi bir tasarım öğesidir.

Ancak aşırı kullanıldığı için artık kolayca tanınan bir AI landing page kalıbına dönüştü.

Texture, markayı desteklemeli.

Markanın yerini almamalı.

24. Sparkle icon

Sparkle icon artık şu kelimelerin görsel karşılığı haline geldi:

AI.

Magic.

Automation.

Smart.

Bazı durumlarda oldukça yerinde olabilir.

Ancak AI kullanan her özelliğin yanına sparkle koymak özelliğin ne yaptığını açıklamaz.

25. Animated arrow

Zıplayan arrow.

Dönen arrow.

SVG curved arrow.

“Buraya bak” arrow.

Animation kullanıcıya interaction veya state anlatıyorsa değerlidir.

Sadece hareket olsun diye ekleniyorsa gerçekten gerekli olup olmadığını yeniden düşünün.

26. Terms of Service olmaması

Harika görünen bir SaaS ürününün Terms of Service sayfasının olmaması ürünü hemen daha az tamamlanmış gösterir.

Özellikle hesap, ödeme, API, kullanıcı içeriği veya şirket verisi işleyen ürünlerde.

Legal page'ler gerçek bir ürün yayınlamanın parçasıdır.

27. Privacy Policy olmaması

Aynı durum privacy için de geçerli.

Analytics kullanıyorsanız,

cookie kullanıyorsanız,

authentication verisi işliyorsanız,

email adresi topluyorsanız,

kullanıcı hesabı oluşturuyorsanız,

Privacy Policy sonradan düşünülecek bir detay olmamalı.

Güven de UX'in bir parçasıdır.

28. Her yerde hover animation

Kart yukarı çıkıyor.

Button büyüyor.

Image zoom oluyor.

Icon dönüyor.

Border parlıyor.

Hover state kullanıcıya bir öğenin interactive olduğunu anlatmak için oldukça kullanışlıdır.

Ancak imlecin dokunduğu her şey hareket ediyorsa interface kısa sürede yorucu hale gelir.

29. Neon renkler

Neon yeşil.

Electric purple.

Cyber blue.

Glowing pink.

Bazı markalarda bu renkler mükemmel çalışabilir.

Problem, sadece “tech görünmek” amacıyla kullanılmalarıdır.

Color palette sektör klişesini değil, markanın karakterini temsil etmeli.

30. Basic pastel renkler

Bir de tam tersi var.

Soft lavender.

Soft blue.

Soft green.

Soft peach.

Bunları rounded card, Lucide icon, Inter ve bento grid ile birleştirdiğinizde başka bir tanıdık AI aesthetic ortaya çıkıyor.

Pastel renkler kötü değil.

Tahmin edilebilir olmak problem.

Asıl problem vibe coding değil

Vibe coding düşman değil.

AI araçları prototyping, frontend development, copywriting, debugging ve experimentation süreçlerini ciddi şekilde hızlandırabiliyor.

Asıl problem AI tarafından oluşturulan ilk çıktıyı final ürün olarak kabul etmek.

Yapay zekâ zaten çalıştığı bilinen pattern'leri üretmekte oldukça başarılı.

Tam olarak bu nedenle binlerce geliştirici aynı pattern'leri değiştirmeden yayınladığında bütün siteler birbirine benzemeye başlıyor.

AI ile ilk %80'i oluşturun.

Sonra kalan %20'ye zaman ayırın:

markanıza,

ürününüze,

kullanıcılarınıza,

edge case'lere,

loading state'lere,

accessibility'ye,

içeriğe,

performance'a

ve teknik detaylara.

Bir web sitesinin generated template yerine gerçek bir ürün gibi hissettirmesini sağlayan bölüm genellikle bu son %20'dir.

Ve homepage dışında ne olduğunu unutmayın

Hızlı geliştirilmiş AI projelerinde mor gradient veya rounded card kadar kolay fark edilmeyen başka bir problem daha var:

bozuk URL'ler.

AI-assisted development hızlı ilerler.

Route'lar değişir.

Sayfaların isimleri değişir.

Landing page'ler silinir.

Product URL'leri değişir.

Eski blog içerikleri kaldırılır.

Marketing kampanyaları artık var olmayan URL'lere link vermeye devam eder.

Ve bir süre sonra kullanıcılar ile search engine bot'ları 404 Not Found sayfalarına ulaşmaya başlar.

Homepage'inizin ne kadar güzel olduğu, trafik bir dead end'e düşüyorsa pek anlam ifade etmez.

Bu yüzden production'a çıkmadan önce sadece tasarımı değil şunları da kontrol edin:

• internal link'ler

• silinmiş sayfalar

• eski URL'ler

• redirect chain'ler

• yanlış HTTP status code'ları

• soft 404 sayfaları

• artık bulunmayan sayfalara gelen backlink'ler

Design quality önemlidir.

Ama bir şey bozulduğunda ne olduğu da önemlidir.

NO404 üzerinde çözmeye çalıştığımız problem tam olarak bu:

Boşa giden trafiği tespit etmek, kullanıcının aslında hangi sayfaya ulaşmak istediğini anlamak ve normalde bir 404 sayfasında kaybolacak trafiğin geri kazanılmasına yardımcı olmak.

Bir sonraki vibe-coded sitenizi yayınlamadan önce tasarımı kontrol edin.

Sonra URL'leri de kontrol edin.