Web geliştirme, Cursor ile Figma veya tarayıcı gibi harici araçlar arasında hızlı iterasyonlar ve sıkı geri bildirim döngüleri içerir. Cursor’da, bu döngüyü sıkılaştıran iş akışları bulduk. Net görev kapsamı belirleme, bileşenleri yeniden kullanma ve tasarım sistemlerinden yararlanma, işleri hızlı ve tutarlı tutmaya yardımcı olur. Bu kılavuz, Cursor’ı web geliştirmeyi destekleyecek şekilde nasıl kuracağınızı ve geri bildirim döngüsünü nasıl sıkılaştıracağınızı kapsar.

​
Cursor’da orkestrasyon yapmaya başlayın

Chat, değişiklikleri başlatmak için harikadır. Ana parçalar yerlerine oturduktan sonra, Inline Edit ve Tab’a geçmek akış durumunuzu korumanıza yardımcı olur. Cursor’ı kurduktan sonra, farklı araçlar arasında iş akışlarını orkestre edebileceksiniz. Aşağıda mümkün olanların bir gösterimi bulunmaktadır: Linear, Figma ve tarayıcı araçlarını birleştirerek oluşturulan bir yılan oyunu. Gerçek dünya projeleri genellikle daha karmaşık olsa da, bu örnek bu entegre iş akışlarının potansiyelini sergiliyor.

​
Proje yönetim araçlarınıza bağlanın

Cursor’ı mevcut proje yönetim yazılımınıza farklı araçlar kullanarak entegre edebilirsiniz. Bu kılavuzda, Linear’ı MCP sunucuları ile entegre etmeye bakacağız.

​
Kurulum

Veya Linear MCP sunucusunu mcp.json dosyasına manuel olarak ekleyin: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Ardından:
  1. MCP ayarlarından Linear’ı etkinleştirdiğinizden emin olun
  2. Web tarayıcısı açılacak ve Linear ile yetkilendirme yapmanız istenecek
    MCP’nin mevcut durumu nedeniyle, kurulum birden fazla deneme gerektirebilir. Entegrasyon çalışmıyorsa, Cursor ayarlarından sunucuyu “Reload” etmeyi deneyin.

​
Cursor’da Linear kullanımı

Linear MCP sunucuları, Cursor’ın sorunları okumak ve yönetmek için kullanabileceği farklı araçları sunar. MCP ayarlarına gidin ve tüm araçların listesini görmek için Linear sunucusunu bulun. Doğrulamak için Chat’te şu komutu deneyin: 
list all issues related to this project
linear.png
Entegrasyon düzgün kurulmuşsa, sorunların bir listesini döndürmelidir.

​
Figma tasarımlarınızı getirin

Tasarımlar ve maketler web geliştirmenin temelini oluşturur. Figma için resmi MCP sunucusunu kullanarak, Cursor’da tasarım dosyalarına doğrudan erişebilir ve bunlarla çalışabilirsiniz. Başlamak için Figma Dev Mode MCP Server adresindeki kurulum talimatlarını takip edin.

​
Kurulum

MCP sunucusunu kurmak için aşağıdaki düğmeye tıklayabilirsiniz. Veya mcp.json dosyanıza manuel olarak ekleyin: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Kullanım

Sunucu, komut istemlerinizde kullanabileceğiniz birden fazla araç sunar. Örneğin, Figma’daki mevcut seçimin tasarımlarını istemeyi deneyin. Daha fazla bilgi için dokümantasyonu okuyun.
figma.png

​
Kod iskeletinizi tutarlı tutun

Muhtemelen mevcut kodunuz, bir tasarım sisteminiz veya yeniden kullanmak istediğiniz yerleşik konvansiyonlarınız vardır. Modeller ile çalışırken, açılır menüler veya diğer yaygın bileşenler gibi kod tabanınızda zaten bulunan kalıplara referans vermek faydalıdır. Kendimiz büyük bir web tabanlı kod tabanında çalışırken, özellikle React ve JSX için bildirimsel kodun özellikle iyi çalıştığını bulduk. Bir tasarım sisteminiz varsa, bunun için bir kural sağlayarak ajanın bunu keşfetmesine yardımcı olabilirsiniz. İşte mümkün olduğunda bileşenlerin yeniden kullanımını zorlamaya çalıştığımız bir ui-components.mdc dosyası:
components.mdc
---
description: Tasarımları uygulama ve UI oluşturma
---
- `/src/components/ui` dizinindeki mevcut UI bileşenlerini yeniden kullan. bunlar inşa edebileceğimiz temel yapı taşlarıdır
- problemi çözen mevcut bir bileşen bulamıyorsan ui bileşenlerini düzenleyerek yeni bileşenler oluştur
- eksik bileşenler ve tasarımlar olduğunda insana nasıl devam etmek istediğini sor
Bileşen kütüphaneniz büyüdükçe, buna göre yeni kurallar ekleyin. Kurallar çok fazla olduğunda, bunları “yalnızca kullanıcı girdileri ile çalışırken uygula” gibi daha spesifik kategorilere bölmeyi düşünün.
ui-components.png

​
Cursor’a tarayıcı erişimi verme

Cursor’ın yeteneklerini genişletmek için, konsol günlüklerine ve ağ isteklerine erişim sağlayan tarayıcı araçları MCP sunucusunu kurabilirsiniz. Yapılandırıldıktan sonra, konsol çıktısını ve ağ etkinliğini izleyerek değişikliklerinizi doğrulayabilirsiniz. Bu kurulum, uygulamanızın niyetinizle eşleşmesini sağlamaya yardımcı olur. MCP sunucusunu kurmak için buradaki talimatları izleyin: https://browsertools.agentdesk.ai/installation
browser.png
Bunu Cursor’da yerel olarak entegre etmeyi kolaylaştırmak için çalışıyoruz.

​
Çıkarımlar

  • Sıkı geri bildirim döngüleri web geliştirmede esastır. Hızlı hareket etmek ve akışta kalmak için Cursor’u Figma, Linear ve tarayıcı gibi araçlarla birlikte kullanın.
  • MCP sunucuları, harici sistemleri doğrudan Cursor’a entegre etmenizi sağlayarak bağlam değiştirmeyi azaltır ve görev yürütmeyi iyileştirir.
  • Bileşenleri ve tasarım sistemlerini yeniden kullanmak, modelin daha temiz ve tutarlı kod ve çıktılar üretmesine yardımcı olur.
  • Net, kapsamı belirlenmiş görevler daha iyi sonuçlara yol açar. Nasıl yönlendirdiğiniz ve ne istediğiniz konusunda bilinçli olun.
  • İyi çıktılar alamıyorsanız, şunları ayarlamayı deneyin:
    • Talimatlar: Kurallar, yönlendirmeler kullanın ve örneğin MCP sunucuları ile daha fazla bağlama erişim sağlayın.
    • Sistemler: Desenler, soyutlamalar ve netlik, modelin anlamasını, yardım etmesini ve daha özerk çalışmasını kolaylaştırır
  • Konsol günlükleri, ağ istekleri ve UI öğesi verileri gibi çalışma zamanı bilgilerini dahil ederek modelin bağlamını genişletebilirsiniz.
  • Her şeyin otomatikleştirilmesi gerekmez. Sisteminiz çok karmaşık hale gelirse, Tab ve Inline Edit ile daha cerrahi düzenlemelere geri dönün.
  • Cursor, otopilot değil, yardımcı pilot olduğunda en güçlüdür. Kendi karar verme sürecinizi değiştirmek için değil, geliştirmek için kullanın.