Cursor ve Claude Code gibi AI kodlama araçları web sitesi çalışmalarını hızlandırır, ancak en yaygın hatalar çıktılarını bitmiş kod olarak görmekten kaynaklanır. Ekipler incelemeyi atlar, ajanın aynı anda çok fazla dosyaya dokunmasına izin verir, performans ve SEO yan etkilerini görmezden gelir ve sürüm kontrolü olmadan çalışır. Bunların her biri birkaç çalışma alışkanlığı ile önlenebilir.
Cursor, VS Code kod tabanı üzerine inşa edilmiş, sohbet, satır içi düzenlemeler ve birkaç dosyayı değiştirebilen bir ajan moduna sahip AI öncelikli bir kod editörüdür. Claude Code, terminalde çalışan, bir depoyu okuyan, komutları çalıştıran ve düzenlemeler öneren Anthropic’in ajan tabanlı kodlama aracıdır. Her ikisi de yeteneklidir. Her ikisi de doğru görünen ve sormadığınız bir şeyi sessizce bozan kodlar üretecektir.
AI tarafından oluşturulan web siteleri neden üretimde (production) bozulur?
Çoğu hata sözdizimi hatası değildir. Kod çalışır. Sorun, değişikliğin kenarlarda ne yaptığıdır: kanonik etiketini kaybetmiş bir şablon, boyutları olmadan yüklenen bir ana görsel, izleme olayını göndermeyi durduran bir form. Bir ajan, tanımladığınız görev için optimize eder, bu yüzden tanımlamadığınız her şey korumasızdır.
İkinci neden kapsamdır. “Başlığı temizle” gibi bir istek on iki dosyada düzenlemeye dönüşebilir. Diff bu kadar büyük olduğunda, kimse onu düzgün okumaz ve küçük regresyonlar gözden kaçar.
Hata 1: güvenlik ağı olmadan çalışmak
En pahalı hata, bir ajanın Git altında olmayan bir projeyi düzenlemesine izin vermek veya günün sonunda her şeyi tek bir devasa commit’te commit etmektir. Değişiklik ödeme sayfasını bozarsa, hangi düzenlemenin bunu yaptığını tam olarak bilmeniz gerekir.
- Her ajan oturumundan önce commit yapın, böylece her zaman geri dönebileceğiniz temiz bir noktanız olur.
- Her oturum veya her commit için bir değişiklik isteyin ve onu tanımlayan kısa bir mesaj yazın.
- Sitenin bir staging kopyasını tutun; bir ajanı asla canlı sunucuya yönlendirmeyin.
- Claude Code’da, projenin dışına yazan veya dağıtıma dokunan shell komutları için izin istemlerini açık tutun.
Hata 2: büyük diff’leri okumadan kabul etmek
Cursor önerilen düzenlemeleri satır içi gösterir ve Claude Code uygulamadan önce diff’leri gösterir. Özet doğru geldiği için kabul etme isteği doğar. Özetler niyeti tanımlar, gerçek değişikliği değil. Diff’i, özellikle silinenleri okuyun.
Kullandığımız pratik bir kural: bir diff beş dakikada okunamayacak kadar uzunsa, çok uzundur. Araçtan işi küçük adımlara bölmesini isteyin. Bunu yapacaktır ve inceleme gerçekçi hale gelecektir.
Hata 3: performans bütçelerini unutmak
Ajanlar kütüphaneleri kolayca ekler. Bir karusel isteyin ve yirmi satır CSS’in yeteceği yerde 90 KB’lık bir bağımlılık alabilirsiniz. Ayrıca görselleri genişlik ve yükseklik öznitelikleri olmadan yazma ve render engellemesini düşünmeden fontları yükleme eğilimindedirler.
Google’ın Core Web Vitals’ı net bir hedef verir: Largest Contentful Paint 2.5 saniyenin altında, Interaction to Next Paint 200 milisaniyenin altında ve Cumulative Layout Shift 0.1’in altında. Bu sayıları proje talimatları dosyanıza (Cursor kuralları veya Claude Code için CLAUDE.md dosyası) koyun ki araç her görevde onları görsün ve birleştirmeden önce Lighthouse veya PageSpeed Insights’ı çalıştırın.
Hata 4: fark etmeden SEO’yu bozmak
Arama sorunları nadiren görsel bir kontrolde ortaya çıkar. Sayfa aynı görünür; başlık bölümü ise değil. Bir AI düzenlemesinden sonra yaygın regresyonlar şunları içerir:
- Bir staging şablonundan üretime kopyalanan noindex meta etiketi.
- Bir yönlendirme değişikliğinden sonra yanlış yola işaret eden kanonik URL’ler.
- Başlıkların karıştırılması sonucu sayfada iki H1 öğesinin olması veya hiç olmaması.
- Bir bileşen yeniden yazıldığında yapılandırılmış verilerin silinmesi.
- Dahili bağlantıların gerçek çapalardan tarayıcıların takip edemediği JavaScript tıklama işleyicilerine değiştirilmesi.
Çözüm kısa bir otomatik kontroldür. Ana şablonları getiren ve başlık, kanonik, robots etiketi ve JSON-LD’nin mevcut olduğunu doğrulayan bir komut dosyası bunların çoğunu saniyeler içinde yakalar.
Hata 5: uydurma API’lere ve eski sözdizimine güvenmek
Dil modelleri bazen var olmayan fonksiyonları çağırır veya iki sürüm önce değişmiş bir framework API’sini kullanır. WordPress’te bu neredeyse doğru olan bir kanca adı gibi görünebilir; Shopify’da ise eski Liquid olabilir. Kod sessizce başarısız bile olabilir.
Araçtan güvendiği belgeleri alıntılamasını isteyin, linter’ı veya tema denetleyicisini çalıştırın ve gerçek bir tarayıcıda test edin. Bir cevap tanımadığınız bir fonksiyon içeriyorsa, kabul etmeden önce onu arayın.
Hata 6: sırları ve müşteri verilerini istemlere yapıştırmak
API anahtarları, veritabanı dökümleri ve müşteri dışa aktarımları bir sohbet penceresinde olmamalıdır. Sırları aracın okuduğu bağlamın dışında tutulan ortam dosyalarında saklayın, hata ayıklama için test verileri kullanın ve aracın veri ayarlarını inceleyin. Hem Cursor hem de Anthropic yazıldığı sırada gizlilik ve saklama seçeneklerini yayınlar; varsaymak yerine planınız için onları okuyun.
Alien Road, AI kodlama araçlarını müşteri web sitelerinde nasıl uygular
Tipik bir web yapımında, araçla hiç ilgisi olmayan bir keşifle başlarız: sayfa envanteri, Search Console’daki saha verilerinden güncel Core Web Vitals, hayatta kalması gereken izleme olayları ve şablon başına SEO öğeleri. Bu liste, ajanın her görevde okuduğu proje talimatları dosyası haline gelir.
Kurulum bir sonraki adımdır. Depo, staging ortamı, linter ve başlıklar, kanonikler, robots etiketleri ve şema için küçük bir kontrol betiği ile Git altına alınır. Ajan oturumları bir biletle sınırlandırılır. Bir geliştirici her diff’i inceler ve birleştirme yapılmadan önce kontrolleri çalıştırır.
Ölçüm, müşterilerin gördüğü kısımdır. Lighthouse puanlarını ve saha verilerini öncesi ve sonrası ile karşılaştırır, analitik olaylarının hata ayıklama görünümünde hala tetiklendiğini doğrular ve dizine eklenebilir sayfaları karşılaştırmak için Screaming Frog ile staging’i tararız. Raporlar nelerin değiştiğini, nelerin test edildiğini ve nelerin kasıtlı olarak bırakıldığını listeler. Araç kodu daha hızlı yazar; siteyi sabit tutan süreçtir.
Kısa bir birleştirme öncesi kontrol listesi
- Diff tamamen okundu, silinen satırlar dahil.
- Lighthouse, Core Web Vitals regresyonları olmadan değiştirilen şablonlarda çalıştırıldı.
- Başlık, meta açıklaması, kanonik, robots ve yapılandırılmış veriler mevcut.
- Formlar staging’de gönderildi ve izleme olayları analitik hata ayıklama modunda görünür.
- Belirtilen bir neden olmadan yeni bir bağımlılık eklenmedi.
- Erişilebilirlik temelleri kontrol edildi: alt metni, odak durumları, renk kontrastı.
Bu hafta nereden başlamalı
Blog şablonundaki düzen kaymasını düzeltmek gibi küçük, gerçek bir bilet seçin. Önce commit yapın, performans ve SEO kurallarınızla kısa bir talimat dosyası yazın ve görevi Cursor veya Claude Code’da diff incelemesi açıkken çalıştırın. İnceleme ve kontroller dahil tüm süreci zamanlayın. Bu tek ölçümlü çalışma, bu araçların ekibinize herhangi bir demodan daha fazla nasıl uyduğunu size söyler.
Okumaya devam edin: Web Tasarımı ve Geliştirme · Web Tasarımı