Cursor ve Claude Code gibi web siteleri için AI kodlama araçları, bir projenin dosyalarını okuyan, kod değişiklikleri öneren ve bir geliştiricinin talimatıyla komutları çalıştıran asistanlardır. Bir ajans ortamında, tekrarlayan yapım işlerini, yeniden düzenlemeyi (refactoring) ve hata ayıklamayı hızlandırırlar; ancak mimari, tasarım kararları, güvenlik incelemesi ve herhangi bir şey müşterinin canlı sitesine ulaşmadan önceki son onay süreçleri hala insanların sorumluluğundadır.
Cursor ve Claude Code nedir?
Cursor, Anysphere şirketi tarafından oluşturulan, Visual Studio Code’un açık kaynak tabanı üzerine inşa edilmiş bir kod editörüdür. Editöre doğrudan AI özellikleri ekler: satır içi tamamlamalar, açık projeyi görebilen bir sohbet paneli ve aynı anda birkaç dosyayı düzenleyen bir ajan modu. Geliştiriciler farklı sağlayıcıların modelleri arasında seçim yapabilirler.
Claude Code, Anthropic’in komut satırı aracıdır. Bir terminalde çalışır, depoyu okur ve geliştirici izin verdiğinde dosyaları düzenleyebilir, testleri çalıştırabilir ve git kullanabilir. Ayrıca editörlerin ve masaüstü uygulamalarının içinde de mevcuttur. Gücü, riskli eylemlerden önce izin isterken, bir tema ve iki eklenti genelinde bir hatayı izlemek gibi çok adımlı görevleri yerine getirmesidir.
Her iki araç da aldıkları bağlam kadar iyidir. Net bir yapıya, yazılı kurallara ve çalışan testlere sahip bir proje, kopyalanmış kod parçacıkları yığınından çok daha iyi sonuçlar verir.
Web sitesi yapımının hangi kısımlarını hızlandırıyorlar?
Kazanımlar, iyi tanımlanmış ancak sıkıcı olan işlerde yoğunlaşır. Ne yapılması gerektiğine hala bir insan karar verir; araç ise yazma ve arama işlerinin çoğunu üstlenir.
- İskelet (Scaffolding): mevcut bir deseni izleyen blok şablonları, özel yazı türleri veya bileşen dosyaları oluşturmak.
- Yeniden düzenleme (Refactoring): dosyalar genelinde fonksiyonları yeniden adlandırmak, büyük bir stil dosyasını bileşen dosyalarına bölmek, kullanılmayan kodları kaldırmak.
- Hata ayıklama (Debugging): hata günlüklerini okumak, bir değerin nerede yanlış gittiğini bulmak ve test için bir düzeltme önermek.
- Erişilebilirlik kontrolleri: eksik etiketleri, alt öznitelikleri ve odak stillerini eklemek, ardından kontrastı kontrol etmek.
- Veri betikleri: tek seferlik içe aktarmalar, URL yönlendirme haritaları ve geçişler için içerik temizlemeleri.
- Dokümantasyon: bir sonraki geliştiricinin anlaması için kararlar hakkında README notları yazmak.
İnsanlar kararları hala nerede veriyor?
Araç ne önerirse önersin, birkaç alan kesinlikle insanların kontrolünde kalır. Bilgi mimarisi, görsel tasarım sistemi ve marka seçimleri kod üretiminden değil, strateji ve araştırmadan gelir. Bir sitenin hangi verileri topladığı ve bunların nereye gittiğiyle ilgili her karar için de aynı durum geçerlidir.
Güvenlik en net örnektir. Bir asistan, çalışan ancak nonce kontrollerini, girdi temizlemeyi veya yetki kontrollerini gözden kaçıran bir form işleyicisi yazabilir. Kullanıcı girdisine, ödemelere veya kimlik doğrulamaya dokunan her değişiklik, ne kadar temiz görünürse görünsün, satır satır insan incelemesinden geçer.
Alien Road, müşteri projelerinde Cursor ve Claude Code’u nasıl kullanıyor
Keşif süreci ilk sırada gelir ve AI araçları olmadan gerçekleşir: müşteriyle hedefleri, sayfa türlerini, entegrasyonları ve içerik kaynaklarını kararlaştırırız. Çıktı, yazılı bir özet ve klasör yapısını, adlandırma kurallarını ve asla değiştirilmemesi gereken şeyleri tanımlayan bir proje kuralları dosyasıdır. Bu dosya daha sonra kodlama araçları için bağlam haline gelir.
Kurulum, genellikle Docker olmak üzere yerel bir geliştirme ortamında çalışır, asla doğrudan canlı bir sunucuda değil. Geliştiriciler Claude Code veya Cursor’ı, onaylanmış tasarımlardan bir dizi blok deseni oluşturmak veya eski blog yazılarını yeni bir yapıya taşıyan içe aktarma betiğini yazmak gibi görevler için kullanırlar. Örneğin, bir geçiş süreci, aracın betiği yazdığı ancak bir geliştiricinin onu önce kuru çalışma (dry-run) modunda çalıştırdığı ve bir örneği elle kontrol ettiği yüzlerce yazıyı içerebilir.
Her değişiklik git üzerinden geçer. Commit’ler küçüktür, mesajlar nedeni açıklar ve bir insan diff’i incelemeden hiçbir şey birleştirilmez. Ölçüm, sayfa şablonu başına yapım süresini, testlerde bulunan kusurları ve lansmandan sonra Core Web Vitals’ı kapsar. Müşteriler, nelerin otomatikleştirildiğini, nelerin incelendiğini ve nelerin test edildiğini listeleyen kısa bir rapor alırlar.
AI tarafından yazılan kodu nasıl güvenilir tutarsınız?
Ana risk, doğru görünen ve hızlı bir bakışta geçen ancak uç durumlarda başarısız olan koddur. Modeller ayrıca mevcut olanları yeniden kullanmak yerine yeni yardımcı fonksiyonlar ekleme eğilimindedir, bu da kod tabanını yavaş yavaş şişirir.
Kuralları yazın
Her iki araç da proje talimat dosyalarını okur. Claude Code bir CLAUDE.md dosyası kullanır; Cursor kural dosyalarını destekler. Öğrenmek için zaman harcadığınız kararları kaydedin, örneğin bir şablon dosyasının neden silinmemesi gerektiği veya hangi fonksiyonun yolları yönettiği gibi. Böylece araç eski hataları tekrarlamaktan kaçınır.
Önemli olanı test edin
Her düzenlemeden sonra linting ve sözdizimi kontrollerini çalıştırın, örneğin PHP dosyaları için php -l. Her değişiklikten sonra hataları kontrol etmek için yüklenecek kısa bir URL listesi tutun. Düzen çalışması için, bir görevi tamamlanmış saymadan önce 390, 768 ve 1440 piksel gibi genişlikleri kontrol edin.
İzinleri sınırlayın
Okuma erişimine ve dosya düzenlemelerine serbestçe izin verin, ancak verileri silen, kod gönderen veya veritabanlarına dokunan komutlar için onay isteyin. Üretim API anahtarlarını asla bir isteme veya aracın commit edebileceği bir dosyaya yapıştırmayın.
Bir müşteri, bu araçları kullanan bir ajansa ne sormalıdır?
- AI destekli her değişiklik, dağıtımdan önce ismi belirtilen bir geliştirici tarafından inceleniyor mu?
- Geliştirme nerede yapılıyor ve herhangi bir müşteri verisi bu ortamdan dışarı çıkıyor mu?
- Kodun hangi kısımları testler veya manuel kontrollerle kapsanıyor?
- Projenin sonunda kodun ve talimat dosyalarının sahibi kimdir?
- API anahtarları gibi sırlar, istemlerden ve depolardan nasıl uzak tutuluyor?
Bunlara verilen net cevaplar, ajansın araçları zanaatın bir yedeği olarak değil, bir enstrüman olarak gördüğünü gösterir. Belirsiz cevaplar bir uyarı işaretidir.
Ekipler bu araçları ilk kez benimsediklerinde hangi hataları yaparlar?
En yaygın hata, tek bir istekte çok fazla şey istemektir. “Başlığı yeniden oluştur” gibi bir istem, aracı dokunmaması gereken dosyaları yeniden yazmaya davet eder. 1080 pikselin üzerindeki genişliklerde arama düğmesini dil değiştiriciden sonra taşımak gibi daha küçük, özel görevler, bir incelemecinin dakikalar içinde kontrol edebileceği değişiklikler üretir.
İkinci hata yerel kopyayı atlamaktır. Bir ajanı bir hazırlık (staging) sunucusuna karşı çalıştırmak daha hızlı hissettirir, ancak yanlış bir komut yüklemeleri veya ayarları üzerine yazabilir. Yeni bir veritabanı dışa aktarımı olan atılabilir bir yerel ortam bu riski ortadan kaldırır ve geliştiricilerin birini seçmeden önce iki yaklaşımı yan yana denemelerine olanak tanır.
Bu hafta nereden başlamalı
Kendi sitenizi yönetiyorsanız, salt okunur bir görevle başlayın. Araçlardan birini projenin yerel bir kopyasına kurun ve ondan temanın stillerini nasıl yüklediğini veya belirli bir özelliğin nerede yaşadığını açıklamasını isteyin. Cevabını bildiklerinizle karşılaştırın. Ardından proje için bir sayfalık bir kurallar dosyası yazın. Bir asistanın bir satır bile düzenlemesine izin vermeseniz bile, bu dosya bir sonraki geliştiriciye saatler kazandıracaktır.
Okumaya devam edin: Web Tasarımı ve Geliştirme · Web Tasarımı