Modeller ve Araçlar

Frontend geliştirmesinde yapay zeka iki katmandan oluşur:

• Model: Kodu üreten yapay zekadır (örn: Claude, GPT, Gemini sürümleri).

• Araç: Dosyaları okuyan, projeyi anlayan ve komut çalıştıran arayüzdür (örn: Cursor, Claude Code).

Yazılan kodun kalitesini büyük ölçüde seçilen model belirler. Araç da fark yaratır: aynı model farklı araçlarda farklı sonuç verebilir, çünkü her araç modele farklı bağlam gönderir. Bunu Prompt ve Context Engineering rehberinde göreceksiniz.

Araç tarafındaki asıl ayrım sohbet ile ajan arasındadır. useCart hook'unu bir sohbet aracına yazdırırsanız kodu kendiniz kopyalayıp projeye eklersiniz. Bir ajan (Claude Code, Cursor'ın agent modu) aynı hook'u doğrudan dosyaya yazar, testi çalıştırır ve hata çıkarsa kendisi düzeltir¹.

Yapay zeka şirketleri ve model sıralaması

Aşağıdaki sıralama tabloları, Arena AI sitesinden 8 Ekim 2026 tarihindeki veriler alınarak hazırlanmıştır². Arena, kullanıcıların iki modelin yaptığı arayüzü karşılaştırıp oy verdiği bir frontend kodlama sıralamasıdır. Yeni testler ve oylamalarla sıralama günlük değişebilir; en güncel sonuçlar için siteyi kontrol edin.

Şirketler sıralaması

Arena AI verileri geliştirici şirket bazında incelendiğinde (8 Ekim 2026, 142 model genelinde 752.673 oy) tablo şu şekildedir:

Model sıralaması

Aynı değerlendirmenin model bazlı sıralaması (8 Ekim 2026, 126 model genelinde 565.389 oy) ise şu şekildedir:

Tabloyu okurken üç şeye dikkat edin:

• İlk üç modelin skorları birbirine yakın. Sıradaki küçük farkı kesin üstünlük saymayın.

• Skorlar modellerin en yüksek effort ayarıyla (max veya xhigh) ölçülmüş sonuçlardır. Günlük kullanımda daha düşük ayarla skor düşebilir².

• Aynı modelin Frontend veya React filtresindeki sırası farklı olabilir.

Frontend geliştirmede Claude modelleri sıralamanın üstünde duruyor. Bu ailede Claude Sonnet 5.5, fiyat ve performans dengesini kuruyor.

Anthropic'e göre Sonnet 5.5, Opus 5.5'in daha hızlı ve daha ucuz tamamlayıcısıdır. Opus 5.5 dikkatli karar gerektiren karmaşık işler için, Sonnet 5.5 ise iyi tanımlanmış günlük görevler ve hata düzeltme için daha uygundur³.

Model katmanları

Modeller güç, gecikme süresi ve maliyet ekseninde üç katmana ayrılır.

• En güçlü katman. Karmaşık akıl yürütme, sıfırdan sistem mimarisi tasarlama ve zorlu hata ayıklama içindir. Maliyetli ve görece yavaştır. Örnek: Claude Opus 5.5, GPT-6 Astra.

• Dengeli katman. Günlük bileşen ve hook yazımı, feature geliştirme ve kod inceleme için ana tercihtir. Hız, maliyet ve kalite dengesi en yüksek katmandır. Örnek: Claude Sonnet 5.5, GPT-6.1 Sol.

• Hızlı ve ucuz katman. Düşük gecikme süresi gerektiren mekanik işler, toplu import güncellemeleri, tip düzeltmeleri ve lint hatalarını gidermek içindir. Örnek: Claude Haiku 5.5, GPT-6 Luna ($0.10 / $0.50).

Düşünen (reasoning) modeller çok adımlı, karmaşık işlerde güçlüdür ama genelde daha yavaş ve pahalıdır. Küçük modeller daha hızlı ve ucuzdur⁴.

Model mi, effort mi?

Model, yeteneğin sınırını belirler. Effort ise modelin işe ne kadar emek harcayacağını belirler: kaç dosya okuyacağını, ne kadar doğrulama yapacağını⁶. Çoğu iş için varsayılan ayar yeterlidir.

Sonuç yanlış çıktıysa kendinize şunu sorun: model bilmiyor mu, yeterince uğraşmadı mı? Örneğin CartSummary toplamı yanlış hesaplıyor:

• Model ilgili dosyayı okumadan yüzeysel bir yama yapıp bıraktıysa sorun effort'tur. Effort'u artırın.

• Dosyaları okuyup testi çalıştırdığı hâlde hâlâ yanlış çözüyorsa sorun modeldir. Bir üst katmana geçin⁶.

Google'ın Gemini 3 rehberi de benzer bir şey söylüyor: model zaten kendi içinde düşünüyor. "Çok iyi düşün" demek performansı artırabilir ama fazladan düşünme token'ı harcatır⁷.

Araç türleri

Araçlar genelde çalıştıkları yere göre üçe ayrılır. Sınırlar bulanıklaşıyor: Claude Code terminalin yanında IDE eklentisi, masaüstü ve web olarak da çalışır⁸.

Gerçek hayat senaryosu: e-ticaret sepet akışı

Bu katman mantığını ve model tercihlerini, bir e-ticaret sitesinin sepet ve ödeme sistemini geliştirirken şöyle uygulayabilirsiniz.