Tek Prompt, 4 Farklı Yapay Zekâ: Gerçekten Hangisi Daha İyi?

Gemini tarafından üretilmiştir.

Her gün yeni bir dil modelinin ortaya çıktığı ve mevcut modellerin sürekli gelişip değiştiği günümüz dünyasında, bunları takip etmek gerçekten zor. Peki, yazıyı kaleme aldığım 20 Mart 2026 tarihinde, piyasadaki gözde dil modellerinden hangisi en iyi tasarımı yapıyor?

Bu yazıda, 4 farklı dil modeline tek bir blog promptu verecek ve çıktılarını sizlerle paylaşacağım. Değerlendirmenin daha inandırıcı olması adına bu kıyası bir canlı yayında gerçekleştirdim ve YouTube’da yayınladım. 🤩

Bu yazıda, yayının bir özetini yapacağım. İşte konu başlıklarımız:

1. Neden blog?

2. Prompt ve açıklaması

3. Arenada kapışma: Lovable, Claude, Gemini ve Cursor

4. Belirlenen kriterlerle teknik değerlendirme ve sonuç

1. Neden Blog

Çünkü yazılımda yeni denenen her şey, önce blogda denenir! Yeni bir yazılım dili öğrenirken daima ilk olarak blog sitesi inşa edilir. Biz böyle gördük, böyle biliriz; böyle de yaparız.

Üniversite 3. sınıftan 4. sınıfa geçerken yaptığım o ilk stajı hatırlıyorum. Şirket ASP.NET MVC 5 kullanıyordu ve ben de dünyayı anlamaya bir blog yazarak başlamıştım. Aradan 11–12 sene geçti, hâlâ yeni bir şey öğrenirken (bu sefer yapay zekâ ile “Vibe Coding”) yine dönüp dolaşıp bir blog inşa ediyoruz.

Neden mi? Çünkü bir blog; veri tabanı mimarisinden SEO stratejisine, içerik yönetiminden (Markdown editörler, resim bucket’ları) en modern UI prensiplerine kadar her şeyi test edebileceğiniz en “saf” oyun alanıdır. devdiscipline.com projesinde de bu geleneği bozmadım. Eğer bir yapay zekâ bana düzgün bir blog yapabiliyorsa pek çok şeyi yapabilir demektir.

Sadece bir deney değil, bir “dijital kopya”… Blog yazılarından bilim kurgu kalemime kadar uzanan “fenasal” bir içerik üssü: devdiscipline.com

Bu projenin arkasındaki asıl motivasyon, farklı platformlarda dağınık hâlde duran 10 yıllık teknik birikimimi artık tek bir “fenasal” çatıda toplama isteğiydi. Yazılım, Scrum, ultra-trail koşu ve bilim kurgu… Tüm bu farklı disiplinleri hayalimdeki Blade Runner estetiğiyle harmanlayıp mülkiyeti tamamen bana ait olan bir içerik merkezine dönüştürmek istiyorum.

Sadece “cool” görünen bir site değil, her satırı Google AdSense için optimize edilmiş; SEO, GEO ve hatta AEO puanları tavanda gezen; en önemlisi okuyucuya o fütüristik atmosferi yaşatırken içerikten de koparmayan bir kullanıcı deneyimi hedefliyorum. Kendi reklam alanlarımı yönetebildiğim, kendi kurallarımı koyduğum bu yapı, yapay zekânın hızıyla benim mühendislik disiplinimin kesiştiği nokta olacak.

2. Prompt ve Açıklaması

Öncelikle dil modelleri hayatımıza girdiğinden beri en önemli mevzumuz prompt oldu. Ne kadar sınırları net, ayrıntılı, açık yazarsak dil modelinin üreteceği ürün o kadar istediğimize yakın olacak. Çocuk ya bunlar resmen. Çocuğa anlatır gibi anlatacağız ki elinden gelenin en iyisini yapsın.

PROJE: Kişisel Blog - "devdiscipline.com"

GÖREV TANIMI
Blade Runner, Cyberpunk 2077 gibi post-apokaliptik estetiğe sahip,
Google AdSense entegrasyonuna hazır, SEO'su mükemmel, production-ready bir
kişisel blog inşa et.

TEKNOLOJİ YIĞINI (DEĞİŞTİRİLEMEZ)
Framework: Next.js 14+ App Router. SSR ve ISR zorunlu, SPA yasak.
Styling: Tailwind CSS ve Framer Motion.
Icons: Lucide React.
Deployment: Vercel.
Fonts: next/font ile "Orbitron" başlıklar için, "Share Tech Mono" body için.
Markdown: react-markdown, remark-gfm, rehype-highlight.
Editör: @uiw/react-md-editor, split view.

TASARIM SİSTEMİ

ARKA PLAN (KRİTİK)
Sade düz siyah kullanma. Arka plan olarak geceleri çekilmiş, neon ışıklı
fütüristik bir megacity silüeti görseli kullan. Görseli CSS background-image
ile uygula, background-attachment: fixed ile parallax etkisi ver,
mobilde background-attachment: scroll kullan. Görselin üstüne koyu yarı
saydam gradient overlay ekle, şehir atmosferi hissedilsin ama metin
okunabilir kalsın. Kartlar ve paneller için glass morphism uygula:
backdrop-filter blur, yarı saydam koyu arka plan, neon renkli ince border.
Kartların arkasından şehir görseli hafifçe görünsün.
Renk Paleti (globals.css, CSS variables):
--color-bg: #050505
--color-surface: rgba(10, 5, 20, 0.7)
--color-cyan: #00f3ff
--color-magenta: #ff0055
--color-purple: #9d4edd
--color-text: #c8c8c8
--color-text-dim: #666

Zorunlu UI Efektleri:

1. CRT Scanline Layer: position:fixed, pointer-events:none, repeating-linear
-gradient ile ince yatay çizgiler, yüzde 3 opacity flicker animasyonu.
2. 3D Tilt Card: Makale kartlarına react-parallax-tilt ile mouse tracking
perspective tilt.
3. Glitch Başlık: Hover'da CSS clip-path animasyonu ile RGB shift efekti.
4. Neon Glow: Cyan ve magenta elemenlerde box-shadow ve text-shadow ile neon
ışıma.
5. Skeleton Loaders: Async içerikler ve AdSense alanları için neon çerçeveli
pulse animasyonlu placeholder.
6. Reading Progress Bar: Scroll pozisyonuna göre sayfanın tepesinde neon cyan
renkte ilerleyen çizgi.
7. Rain Overlay: Canvas ile çok hafif yarı saydam yağmur damlası efekti,
requestAnimationFrame ile performanslı.

SAYFA MİMARİSİ
URL Yapısı:
/ → Locale detect → /tr veya /en'e redirect
/[lang]/ → Ana sayfa
/[lang]/posts/[slug] → Yazı detay
/[lang]/category/[name] → Kategori listesi
/[lang]/about → Hakkında
/admin → Korumalı admin paneli

Kategoriler: yazilim, scrum, kosu, kisisel-gelisim, bilim-kurgu
Middleware: Accept-Language header'ından locale detect, /admin koruması,
hreflang header.

VERİ MODELLERİ
categories: id, slug, name_tr, name_en, accent_color
posts: id, slug, category_id (FK), cover_image, author, published_at,
updated_at, featured, views, published
post_translations: id, post_id (FK), lang, title, description, content, tags,
reading_time

MİMARİ YAPI (ZORUNLU)
src/models/ → Her tablo için TypeScript interface. post.ts, category.ts,
common.ts.
src/services/ → Tüm Supabase sorguları burada. post.service.ts,
category.service.ts, storage.service.ts.
src/hooks/ → loading/error/data state yöneten custom hook'lar. usePosts.ts,
usePost.ts, useCategories.ts, useAdminPost.ts, useImageUpload.ts.
src/components/ → Sadece UI, hook'lardan gelen data'yı render eder.

Katman kuralı: components → hooks → services → Supabase. Katmanlar arası
atlama yasak.

ADSENSE
Script: layout.tsx içinde strategy="afterInteractive". AdUnit komponenti
reusable, slot ve format prop alacak. Neon çerçeveli wrapper, yüklenene
kadar "// SPONSORED_CONTENT.exe LOADING..." skeleton. CLS = 0 zorunlu, tüm
AdUnit'ler sabit boyutlu container içinde.

Reklam pozisyonları:
1. Post içi, ilk H2'den sonra: min-height 280px
2. Sidebar sticky, desktop only: min-height 600px
3. Liste sayfası, her 5 yazıdan sonra: min-height 90px
4. Post sonu: min-height 250px

SEO
Her sayfa için Metadata API: title, description, openGraph, alternates
(canonical + hreflang), robots.
/sitemap.xml dinamik, ISR ile saatlik güncelleme.
/robots.txt /admin ve /api/* engelli.
JSON-LD: Article, BreadcrumbList, WebSite schema.

TESLİMAT PROTOKOLÜ
1. Dosya yapısını (folder tree) göster.
2. .env.example çıkar.
3. Onay bekle, sonra kodlamaya başla.
4. TypeScript strict mode, "any" yasak.

TASARIM DEĞERLENDİRME KRİTERLERİ (KRİTİK)
Aşağıdaki kriterlere göre tasarım üret:
1. OKUNABİLİRLİK (en önemli)
- Metinler her durumda rahat okunmalı
- Kontrast WCAG seviyesine yakın olmalı
- Neon efektler readability'i bozmamalı
2. HİYERARŞİ
- Kullanıcı ilk 3 saniyede:
  - Site ne hakkında?
  - En önemli içerik ne?
  - Nereye tıklamalı?
  anlayabilmeli
3. ESTETİK TUTARLILIK
- Tüm komponentler aynı design language kullanmalı
- Rastgele efekt kullanımı yasak
- Her efektin amacı olmalı
4. PERFORMANS ODAKLI TASARIM
- Aşırı blur, shadow, animation kullanımı sınırlandırılmalı
- FPS düşüren efektlerden kaçınılmalı
5. MODERN UI PATTERNLERİ
- Hover, focus, active state'ler eksiksiz olmalı
- Mobile-first düşünülmeli
6. GERÇEK KULLANICI DENEYİMİ
- Blog okumak keyifli olmalı
- Dikkat dağıtan efektler minimize edilmeli

TASARIM YORUMU (ZORUNLU)
Kullandığın tasarım yaklaşımını açıkla:
- Cyberpunk temasını nasıl yorumladın?
- Neden bu renkleri ve efektleri seçtin?
- Hangi UX problemlerini çözmeye çalıştın?
- Hangi efektleri bilinçli olarak KULLANMADIN ve neden?
Amacın sadece "cool görünmek" değil, kullanılabilir bir arayüz üretmek olmalı.

KISITLAMA
Aynı anda şu iki hedefi sağla:
- Maksimum görsel etki (cyberpunk, post apokaliptik estetik)
- Minimum dikkat dağıtma (okuma deneyimi)
Bu iki hedef arasında denge kur ve bunu nasıl başardığını açıkla.

KENDİNİ KISACA DEĞERLENDİR
Tasarımını puanla (10 üzerinden):
- Estetik
- Okunabilirlik
- Performans
- Özgünlük
Ve şu soruya cevap ver:
Bu tasarım gerçek bir kullanıcı tarafından her gün kullanılabilir mi?

2.1. “Prompt” Değil, Bir “Yazılım Görev Tanımı” Oluşturmak

Yapay zekâyla çalışırken yapılan en büyük hata, ona bir “asistan” gibi rica minnet yaklaşmaktır. 9,5 yıllık sektör tecrübem bana şunu öğretti: Netlik, otoriteden gelir. Bu yayında kullandığım komut setini (prompt) hazırlamam tam 4 saatimi aldı. Çünkü yapay zekâya “Bana bir blog yap,” derseniz size stajyerin stajyeri kıvamında bir şey fırlatır, bir de kendini başarılı sanır. Ama ona “Framework: Next.js 14 App Router, SSR ve ISR zorunlu, SPA kesinlikle yasak!” dediğinizde karşınızda işini bilen bir kıdemli mühendis bulursunuz.

Buradaki kritik anahtar kelime: “Değiştirilemez.” Yapay zekâya “Şunu kullansan iyi olur,” derseniz kendi kafasına göre esneme payı bırakır. Ama “Teknoloji yığını değiştirilemez” emrini verdiğinizde o sınırların içinde taklalar atarak en optimum kodu üretmeye yönlenir.

Bu projenin omurgasını şu “kırmızı çizgilerle” çizdim:

• Framework: Next.js 14 (App Router zorunlu, SPA yasak!). Çünkü SEO ve Google AdSense entegrasyonu bizim için kırmızı çizgi.

• Stil: Tailwind CSS. Hem hızlı hem de yapay zekâlar bu dili çok iyi konuşuyor.

• Estetik: Blade Runner / Cyberpunk 2077 temalı, post-apokaliptik bir mega şehir silüeti. Arka planda o karanlık şehir atmosferini hissetmeliydik ama metinler de okunabilir kalmalıydı.

2.2. Mimari Milliyetçilik: “Model Class” Sevdamız ve JS Dünyası

Yıllarca Android ve Kotlin ile haşır neşir olmuş, “Type Safety” (Tip Güvenliği) kavramını kutsal saymış bir yazılım takım lideri olarak, JavaScript ekosisteminin o fazla “esnek” kaçan yapısına pabuç bırakamam.

İki senelik JS geçmişim var diye, bir yerden bir yere veriyi “Ne gelirse al işte canım,” diyerek Allah’a emanet gönderemem. Biliyorum JS’te Builder tasarım kalıbıyla uğraşmadan 30 tane değişkeni bir objeye hapsedip “İçinde ne var?” diye bakmadan fırlatabiliyoruz ama o belirsizlik benim OOP kökenli disiplinime ters arkadaş. O Model Class’lar orada duracak ve farklı fonksiyonlar arasında modeller gidip gelecek!

Bu yüzden promptun içine özellikle MVVM (Model-View-ViewModel) yapısını çaktım. TypeScript kullansak da kullanmasak da o Model Class’ları orada olacak! Servis katmanı, Hook katmanı ve Component katmanı arasındaki o “katman atlama yasağını” yapay zekâya sert bir dille belirttim. Component gidip direkt veritabanına (Supabase) dokunmayacak kardeşim! Arada bir “Service” olacak, bir “Hook” olacak. Mimari disiplin, kodun sürdürülebilirliğidir. Bunu şu yazılarda çok daha güzel ve detaylı açıkladım:

DevDiscipline

10 Yıllık Yazılımcının Vibe Coding ile İmtihanı

Java’dan Kotlin’e geçerken bile “Fazla kolaylaştı” diyen kıdemli bir yazılımcının Vibe Coding ile ilk karşılaşması

2.3. Geleceğin SEO Vizyonu: GEO ve AEO (Yapay Zekâya Kendini Sevdirmek)

Artık sadece Google amcanın botlarını tavlamak yetmiyor. Yazdığınız blogun, yarın bir gün birisi ChatGPT’ye veya Perplexity’ye bir şey sorduğunda referans olarak da gösterilmesi lazım. İşte buna GEO (Generative Engine Optimization) ve AEO (Answer Engine Optimization) diyoruz. “Geleceğin Web Standartları” başlıklı yazımda bu konuyu daha sonra çok ayrıntılı ele alacağım. Bu yazıyı uzatmak istemiyorum, bambaşka bir konu o.

URL yapısını /tr/post/slug şeklinde kurgulamamın sebebi de bu: Hem Google’ın hiyerarşik yapısını beslemek hem de dil modellerinin içeriği daha iyi kategorize etmesini sağlamak. Sadece “çalışan kod” değil, “bulunabilir ve referans gösterilebilir içerik” peşindeyim.

3. Arenada Kapışma: Lovable, Claude, Gemini ve Cursor

Yayında dört dev ismi birbirine kırdırdım. Her birinin yaklaşımı, beni bazen şaşırttı, bazen de “Yok artık!” dedirtti.

• Lovable: Tasarımda gerçekten “tatlı” işler çıkardı. O pırpır eden neonlar, yağmur efektleri… Sanki gerçekten bir Cyberpunk evrenindeymişiz hissini çok iyi verdi. Tek bakışta “Vay be!” dedirtti. İlk çıktıyı en hızlı o üretti. Hepsini aynı anda başlatıp kronometre tutsam bile Lovable yarışı açık ara kazanırdı. Günlük ücretsiz kredisi sadece 5 ve yayın bitmeden tükendi, bu da ayrı bir veri noktası.

Yazar tarafından Lovable’dan alınmış ekran görüntüsü

• Claude: Şahsen benim favorim oldu. “Karanlık bir şehirde parlak bir terminal ekranına bakıyor gibi” hissettirme vizyonu tam olarak aradığım şeydi. Kod yapısı ve katmanlaması (layering) en derli toplu olan oydu. Çıktı gelirken “tasarım yorumu” yazdı ; neden bu renkleri seçtiğini, hangi efektleri bilinçli olarak kullanmadığını açıkladı. Bir araçtan bunu beklemiyordum. Bunların yanında en çok düşünen de Claude oldu. Bir de Claude ile terminal üzerinden yazışıyorsunuz.

Yazar tarafından Claude’den alınmış ekran görüntüsü

• Gemini: Beni hayal kırıklığına uğrattı. Düz siyah arka plan, üstüne yeşil Matrix efekti… Cyberpunk istemek ile Matrix istemek aynı şey değil. Promptu okumuş ama anlamamış.

Yazar tarafından Gemini’den alınmış ekran görüntüsü

• Cursor: Kod yazma yeteneğine lafım yok. Katman yapısı, model sınıfları, hook organizasyonu gayet derli toplu ama tasarım vizyonu beklediğim o “fenasal” seviyenin çok çok altında kaldı. Yarım saat bekletip bir sürü izin istedikten sonra tasarım ekrana geldiğinde yayında göreceğiniz üzere “Bu mu?” dedim.

Yazar tarafından Cursor’dan alınmış ekran görüntüsü

4. Belirlenen Kriterlerle Teknik Değerlendirme ve Sonuç

Bu yayın benim için sadece bir “benchmark” değil, yapay zekânın “asistanlıktan” çıkıp “pair programming” partnerine dönüştüğünün bir kanıtıydı. Amatör hatalarımla, ses gecikmelerimle, kimsenin gelmediği (ama sonradan binlerce kişiye ulaşacak olan) o 1 saat 50 dakika, benim “ilk commit”imdi.

4.1. Puan Tablosu

• Mimari Sadakat: Burada Cursor, Claude ve Gemini 3 üçlüsü 100 tam puanla zirveyi paylaştı. Belirlediğim src/hooks, services, models yapısına harfiyen sadık kaldılar. Lovable ise 90 puanda kaldı, tasarımı uçursa da dosya yapısında o katı disiplini biraz esnetti.

• UI/UX Estetiği: İşte burada ayrışma başladı. Claude ve Lovable 90 puanla “Cyberpunk/Blade Runner” ruhunu ekrana yansıtırken Cursor 20, Gemini 3 ise sadece 9 puan alabildi. 9 puan! “Karanlık tema yapınca Cyberpunk olur” sığlığına en büyük tokat burada atıldı.

• Developer Experience (DX): “Kodu çalıştırmak ne kadar sürdü, kaç kez ‘fix’ dedik?” sorusunun cevabı. Lovable 100 puanla şov yaptı, tek tıkla projeyi canlıda gördük. Gemini 3 80 ile takip ederken Claude 60 puanda kaldı. En çok düşünen ve onay bekleyen Claude bizi biraz terletti.

• Vibe & Estetik: İlk bakış etkisi… Claude burada 100 tam puanla “fütüristik” vizyonun lideri olduğunu kanıtladı. Lovable 90 ile hemen ensesinde. Cursor (10) ve Gemini 3 (40) ise maalesef o “ruh” kısmında sınıfta kaldılar.

• FX & Animasyon: Glitch ve neon efektlerinin kalitesinde Cursor, Claude ve Lovable üçlüsü 90–70–90 bandında iyi iş çıkardılar. Gemini 3 ise 20 puanla “Ben bu işlere girmeyeyim,” dedi.

• Mobil & Performans: Yayında canlı canlı test ettiğimiz gibi Lovable mobilde 100 tam puanla “kusursuz” bir performans sergiledi. Claude 80 ile makul bir seviyedeyken Gemini 3 40 puanla mobil kullanıcıyı kapıda bıraktı.

Tablonun en altındaki o TOPLAM PUAN her şeyi özetliyor:

1. Lovable: 93 (hız ve görselin efendisi)

2. Claude: 83 (mimari ve vizyonun lideri)

3. Cursor: 58 (kodda iyi, ruhta eksik)

4. Gemini3: 48 (maalesef listenin sonunda)

4.2. Sonuç

Peki hangisiyle devam edeceğim? Cevap: hibrit bir model. Claude’un kurduğu o kaya gibi sağlam mimariyi alıp üzerine Lovable’ın estetik vizyonunu giydireceğim. Yani Lovable’da hoşuma giden özellikleri Claude’a aktaracağım. Çünkü gerçek dünyada da bir ekip yönetirken bunu yapıyoruz: At binenin, kılıç kuşananın.

Yayında gördük ki hepsi “it gibi” kod yazıyor! Mimari, servisler, hooklar kusursuz. “Asıl bizim meslek elden gitmiş,” dedim kendi kendime. Ama iş “ruh” ve “estetik” kısmına gelince hepsi çuvalladı. Tasarımcılar rahat uyusun, o yaratıcı vizyon hâlâ insanda. Dil modeli tasarım falan yapamaaaz. Ama biz yazılımcılar için artık “kod yazmak” azaldı, “mimari yönetmek” ve “AI partnerliği” başladı. Bitti demeyeceğim çünkü kodda da bazen çuvallayabiliyorlar. Dil modeli işte…

Bonus: İlk Commit Tamam, Şimdi Gerçek İş Başlıyor

IDE sever birisi olarak Google Antigravity ile projeyi açıp IDE içindeki Claude Code eklentisiyle projeye devam edesim var. Hele Git’e gönderdikten sonraki geliştirmelerde değişen dosyaları görebilmek için IDE çok güzel oluyor. Bu terminalden de görülebilir (bilgisayar mühendisliği okuduk herhalde, biliyoruz ) ama IDE’de böyle kıyaslamalı görünce daha keyifli oluyor, alışkanlık işte.

Bundan sonraki planım şu: Claude’un kurduğu mimari üzerine Lovable’dan beğendiğim tasarım kararlarını tek tek taşıyacağım, Supabase entegrasyonunu bağlayacağım ve AdSense alanlarını yerleştireceğim.

Bu blogun yazım sürecini canlı yayında takip etmek ister misiniz? Yorumlarda buluşalım. İlk yayınım buydu. Plansız, hatasız değil ama dürüsttü. Bir sonrakinde daha hazırlıklı olacağım.

Kod yazma yarışı bitti. Artık kazanan, yapay zekâyı yöneten olacak.