VS Code’da Prompt Files ile Daha İyi AI Kullanımı

İpuçları Dosyaları Neden Önemlidir?

0:00'da Tim, "Bir AI ile bir ipucu dosyası kullanmak, deneyimi sadece iyi olmaktan harika hale getirebilir." diyor. Bir ipucu dosyası, öykücü modeline nasıl düşünmesi, nasıl ilerlemesi ve bir kullanıcı isteğine nasıl yanıt vermesi gerektiğini anlatır. Tim, Burke Holland'ın "Beast Mode" dosyasına atıfta bulunarak, büyük bir sistem ipucunun bir şablon gibi davrandığını anlatıyor. Bunu kullanarak, geliştiriciler tekrar eden talimatları azaltabilir, hataları azaltabilir ve VS Code içinde daha öngörülebilir üretilmiş kod elde edebilirler.

Tim, bunu bir tür ipucu mühendisliği olarak çerçeveler: daha sonra sohbet görünümünde veya etkinlik çubuğundaki AI Araç Takımı ikonuna kısa bir kullanıcı isteği yazdığınızda, AI'nin zaten kodlama stilinizi ve tercih ettiğiniz proje yapısını bildiği bir yeniden kullanılabilir talimat seti oluştuyorsunuz.

Tim'in Geliştirici Kaynakları

Aracı göstermeden önce Tim (0:27), sunduğu ücretsiz ve ücretli kaynakları - dokuz tam kurs, iamtimcorey.com üzerinde onUNC kurs, artı geliştirici sorularını yanıtlayan bir podcast - özetler. Bunların, geliştiricilerin becerilerini ince ayarlamaları ve daha iyi iş akışları oluşturmaları için tasarlandığını vurguluyor. Bu, bir VS Code AI ipucu dosyasının neden önemli olduğunu belirler: günlük kodlama görevlerini iyileştirmek için modern uygulamaların bir parçasıdır.

VS Code'da Beast Mode'u Ayarlama

1:22'de Tim VS Code'un araçlar bölümüne geçiyor. Beast Mode'un zaten yüklü ve "modları yapılandır" altında seçili olduğunu açıklıyor. AI Araç Takımı görüntüsünü açabileceğinizi, model katalogundan modelleri gözden geçirebileceğinizi ve yeni bir özel mod oluşturabileceğinizi açıklar. Örneğinde, Belge Ekle İpucu'na tıklayıp, "GitHub Sohbet Modları" gibi bir isim verir ve dosyanın içeriğini kopyalar (1:34). Bu, çalışma alanınızda daima hazır bir konumda özelleşmiş sistem ipucunu kaydeder.

Tim'in kurulumu, yerel modellerin veya bulut modellerinin, kendi ipucu oluşturucu talimatlarınızla nasıl birleştirilebileceğini gösterir. Her şey VS Code kök dizininizde veya başka bir depolama klasöründe düzenli bir şekilde yer alır, bu da daha sonra tekrar etmeyi kolaylaştırır.

Gerçek Bir Projede AI Kullanımı

2:03'ten itibaren Tim, gerçek website projesindeki AI'yı VS Code çalışma alanında gösteriyor. Python/React destekli site; "Öğrenme Yolları" bölümünün kodunu açarak uygulama navigasyon menüsünü gösteriyor. Ok simgesine üzerine gelindiğinde küçük bir animasyon eklemek istiyor (3:21).

Bu tipik bir geliştirici senaryosudur: biraz ön uç kodunuz var, bir AI ajanının sizin için CSS'yi oluşturmasını istersiniz ve her ayrıntıyı elle yazmak istemezsiniz. İpucu dosyası zaten yüklü olduğunda, kullanıcı isteğiniz kısa olabilir ve AI bağlamı dolduracaktır.

AI İpucunu Hazırlama

3:38'de Tim, oku gösteren ekran görüntüsünü (3:45) yakalamak için Windows Snipping Tool'u (Windows+Shift+S) kullanır. Bu görsel bağlam AI'yı destekler. 4:43'te doğal bir ipucu yazar:

"Benim navigasyon menümdeki öğrenme yolu bölümünde oka fare ile üzerine geldiğinizde oku 30°'den yatay hale getirin, ardından fareyi uzaklaştırınca tekrar geri getirin. İşte şu anda nasıl göründüğüne dair bir ekran görüntüsü."

Tim, CSS'yi tam olarak nereye yerleştireceğini daha sonra belirleyebileceğini kaydediyor, ancak Beast Mode'un işlevselliğini test etmek için bu takip ipucuyla başlıyor.

Beast Mode'un Planı

6:00'da Tim, Beast Mode'un bir iş akışı belirlediğini açıklar: doğru seçiciyi belirleyin, bir CSS sınıfı ekleyin, bir hover efekti ekleyin, ardından test edin ve doğrulayın. CSS'yi kökün üzerindeki doğru site.css dosyasına bile ekler (6:42). Bu, ipucu dosyanızdaki önceden tanımlanmış bir şema—stillerin nereye gittiği hakkındaki "kurallarınız"—AI'nin yanıtını yönlendirir.

Tim, bir ipucu dosyası kullanmanın "büyük meselesi" olduğunu çağırıyor: bağlam ekler, böylece AI projenizin yapısını bildiği gibi hareket etmeye başlayabilir ve her seferinde tam açıklamayı tekrar etmenize gerek kalmaz.

Yineleme ve İyileştirme

6:54'te Tim siteyi kontrol ettiğinde, oluşturulan kod sadece bir oku etkiler ve yanlış yöne hareket eder. Ardından 7:29'da ipucunu, hover efektini tersine çevirmek ve tüm oklar için uygulamak üzere ayarlar.

8:49'da şimdi tüm okların aynı anda döndüğünü fark eder. Saat 9:06'da yalnızca üzerine gelinen öğeye etki uygulamalarını AI'ye söyleyen başka bir kullanıcı komutu gönderiyor. Tim, 9:38'de, 'Bir AI'i ayarlamak zorundasınız.' Her zaman doğru şeyi yapmaz.

Bu, sohbet görünümünde istem mühendisliğine harika bir örnek. Düzenler, tekrar edersiniz ve AI yapısal çıktıyı oluşturana kadar istemlerinizi kaydedersiniz. Çünkü istem dosyası zaten sistem istemini sağlar, her yeni talimat sadece küçük bir iyileştirmedir.

Nihai Sonuç

Saat 9:52'de Tim, animasyonun artık oku göster: üzerine gelindiğinde döndür, fare çıkıldığında sıfırla olarak çalıştığını doğrular. Işığı açıp açabileceğinizi, koyu temaya geçebileceğinizi, renkleri değiştirebileceğinizi, geçişi yavaşlatabileceğinizi not eder—ne isterseniz (10:02). Anahtar şu ki, AI SVG dönüşümünü çözdü ve CSS'i onun için yazdı (10:11).

Tim, 'Beast Modu'nu genişletebileceğinizi veya dosyaları nasıl düzenlediğinizi, kod biçimlendirmesinin nasıl ele alınmasını istediğinizi veya bir Python işlevini nasıl çağırdığınız gibi bir istem oluşturucu dosyanızı nasıl oluşturmaya dair 10:30–11:20 açıklamalarını yapar. Sonra günlük istemleriniz çok daha kısa olabilir ve yine de tutarlı yanıtlar alabilirsiniz.

AI Çıktısını İnceleme

Tim, saat 11:50'de AI'in yaptığı değişiklikleri her zaman gözden geçirmeniz gerektiğini uyarır. Korunan bir istem dosyası ve iyi uygulamalarla bile, AI'in yanlış bir yere bir sınıf eklemesi veya gerekli bağımlılıkları bozması mümkündür. Kendi örneğinde AI yalnızca küçük, mantıklı değişiklikler yapmıştır—burada bir CSS sınıfı eklemiştir, orada bir kod satırı eklemiştir—ancak geliştiriciler yine de değişiklik günlüğünü kontrol etmeli ve gerektiğinde iyileştirmelidir.

Tim, beğendiğiniz bir sonuç olduğunda, onu kaydedebileceğinizi ve tekrar kullanabileceğinizi belirterek kapanış yapar. Bu, VS Code içindeki AI modellerini ve istem dosyalarını kullanmanın özüdür: geçici istemleri güvenilir bir SDK benzeri deneyime dönüştüren tekrarlanabilir, tutarlı bir iş akışı.

Tim Corey'nin Demo'sundan Çıkarımlar

Tim Corey'nin videoda izlenen yürüyüşü sırasında, iyi tasarlanmış bir istem dosyasının Visual Studio Code içinde nasıl :

• İstemlerinizin daha kısa olabilmesi için AI modellerine tutarlı bir bağlam sağlar.

• Üretilen kodu, yapısal çıktıyı ve biçimlendirmeyi otomatik olarak yönetir.

• İstemlerinizi kolayca açmak, test etmek ve rafine etmek için çalışma alanınıza, etkinlik çubuğunuza ve AI Araç Kitinize entegre olur.

• Modelleri gezmenize, yerel modellere veya bulut arasında geçiş yapmanıza ve istem mühendisliği kurallarınızı sorunsuz bir şekilde uygulamanıza olanak tanır.

Kurallarınızı bir istem dosyasında saklayarak, AI'ye güvenilir bir ajan scripti verirsiniz; bu sayede aynı talimatları tekrar etmek yerine daha üst düzey geliştirme görevlerine odaklanabilirsiniz.