- agentation
- claude-code
- ai
- web-development
- developer-tools
- automation
Agentation ile Web Siteni Tıklayarak Düzenle: Claude Code Entegrasyonu
Agentation reposu sayesinde web sitendeki değişiklikleri uzun açıklamalar yazmadan, tıklayarak yapay zekâya iletebilirsin.
Instagram'da izle
Web sitende küçük bir şeyi değiştirmek istediğinde yapay zekâya durumu anlatmak bazen işin kendisinden daha uzun sürebiliyor. Hangi elementin, hangi sayfada, tam olarak nerede olduğunu tarif etmeye çalışırken zaman harcıyorsun. Agentation reposu bu sorunu farklı bir yaklaşımla çözüyor.
Agentation Nedir?
Agentation, web sitendeki belirli bir elementi doğrudan tıklayarak seçmeni ve o element hakkında not bırakmanı sağlayan bir yardımcı araç. Uzun yazılı açıklamalar yazmak yerine, değiştirmek istediğin yere tıklıyor ve kısa notunu ekliyorsun. Araç, bu bilgiyi Claude Code'un rahatlıkla anlayabileceği kompakt ve net bir prompt formatına dönüştürüyor.
Nasıl Çalışır?
Kurulum GitHub reposu üzerinden yapılıyor. Reponun linkini kopyalayıp Claude'a yapıştırarak kurulum sürecini başlatabilirsin. Kurulum tamamlandığında sağ tarafta bir buton beliriyor; bu butona bastığında web siteni gezip CSS elementlerini seçebilir hale geliyorsun.
Seçim yaptıktan sonra notunu yazıyorsun. Birden fazla değişiklik için aynı oturumda birden fazla element seçip not bırakabilirsin. Tüm notları tamamladıktan sonra altta yer alan Copy Feedback butonuna basıyorsun. Bu buton, bıraktığın tüm notları ve seçtiğin elementlerin konum bilgilerini tek bir prompt olarak kopyalıyor.
Son adımda bu promptu Claude'a yapıştırıyorsun. Claude Code, hangi elementin tam olarak nerede olduğunu bildiği için doğrudan müdahale ediyor ve değişiklikleri yapıyor.
Gerçek Bir Örnekle Sonuç
Kullanımı test etmek amacıyla bir sitede üç ayrı not bırakıldı:
- Menünün sol tarafa yaslanması
- Belirli bir alanın ülke bayraklarıyla güncellenmesi
- Header başlığının tüm satıra yayılması
Claude Code üç değişikliği de yaklaşık bir buçuk dakikada tamamladı. Sonuçlara bakıldığında menü sola yaslanmış, bayraklar yerleştirilmiş ve başlık tam genişliğe getirilmişti.
Neden İşe Yarıyor?
Normal şartlarda yapay zekâya bir elementi tarif etmek belirsiz sonuçlar doğurabilir. "Sağ üstteki buton" ya da "nav menüsündeki logo" gibi ifadeler yeterince spesifik olmayabiliyor. Agentation'ın ürettiği prompt ise elementin tam konumunu, CSS özelliklerini ve diğer bağlamsal bilgileri içerdiği için Claude'a çok daha net bir talimat iletmiş oluyorsun.
Bu yaklaşım özellikle sık sık küçük görsel düzenleme yapan, ancak her seferinde uzun açıklamalar yazmak zorunda kalan geliştiriciler ve içerik yöneticileri için pratik bir çözüm sunuyor.
Kurulumun adım adım nasıl yapıldığına dair uzun versiyon YouTube'da yayınlanıyor. Agentation, yapay zeka destekli geliştirme süreçlerinde iletişim maliyetini düşürmeye odaklanan küçük ama etkili bir araç olarak öne çıkıyor.