Web geliştirme, Cursor ile Figma ya da tarayıcı gibi harici araçlar arasında hızlı yinelemeler ve sıkı geri bildirim döngülerine dayanır. Cursor’da bu döngüyü daha da sıkılaştıran iş akışları bulduk. Görev kapsamını net tutmak, bileşenleri yeniden kullanmak ve tasarım sistemlerinden yararlanmak işleri hem hızlı hem de tutarlı kılar. Bu rehber, web geliştirmeyi desteklemek ve geri bildirim döngüsünü sıkılaştırmak için Cursor’ı nasıl kuracağını anlatır.

​
Cursor’da orkestrasyona başla

Chat, değişiklikleri ayağa kaldırmak için harika. Büyük parçalar yerine oturduğunda, Inline Edit ve Tab’e geçmek akışını korumana yardımcı olur. Cursor’ı kurduktan sonra, farklı araçlar arasında iş akışlarını orkestre edebileceksin. Aşağıda nelerin mümkün olduğuna dair bir demo var: Linear, Figma ve tarayıcı araçlarını birleştirerek oluşturulmuş bir yılan oyunu. Gerçek dünya projeleri genelde daha karmaşıktır ama bu örnek, bu entegre iş akışlarının neler yapabildiğini gösteriyor.

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

Cursor’ı mevcut proje yönetim yazılımına farklı araçlarla entegre edebilirsin. Bu rehberde, Linear’ı kendi MCP sunucularıyla entegre etmeye bakacağız.

​
Kurulum

Ya da Linear MCP sunucusunu mcp.json dosyasına manuel olarak ekle: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Sonrasında:
  1. MCP ayarlarından Linear’ı etkinleştirdiğinden emin ol
  2. Web tarayıcısı açılacak ve Linear ile oturum açman/izin vermen istenecek
    MCP’nin mevcut durumu nedeniyle kurulum birden fazla deneme gerektirebilir. Entegrasyon çalışmıyorsa, Cursor ayarlarından sunucuyu “Reload” ile yeniden yüklemeyi dene.

​
Cursor içinde Linear kullanma

Linear MCP sunucuları, Cursor’ın issue’ları okumak ve yönetmek için kullanabileceği farklı araçlar sağlar. Tüm araçların listesini görmek için MCP ayarlarına git ve Linear sunucusunu bul. Doğrulamak için, Sohbet’te şu prompt’u dene: 
list all issues related to this project
linear.png
Entegrasyon doğru şekilde kurulduysa, bir issue listesi döndürmelidir.

​
Figma tasarımlarını içe aktar

Tasarım ve mockup’lar web geliştirmenin temel parçalarıdır. Figma’nın resmi MCP sunucusunu kullanarak Cursor içinde tasarım dosyalarına doğrudan erişebilir ve onlarla çalışabilirsin. Başlamak için Figma Dev Mode MCP Server sayfasındaki kurulum adımlarını izle.

​
Kurulum

MCP sunucusunu yüklemek için aşağıdaki düğmeye tıklayabilirsin. Ya da mcp.json dosyana manuel olarak ekle: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Kullanım

Sunucu, istemlerinde kullanabileceğin birden fazla aracı sağlar. Örneğin, Figma’daki mevcut seçimin tasarımlarını isteyebilirsin. Daha fazlası için belgelere göz at.
figma.png

​
Kod iskeletini tutarlı tut

Muhtemelen yeniden kullanmak istediğin mevcut kodun, bir tasarım sistemin ya da yerleşik kuralların var. Modellerle çalışırken, kod tabanında zaten bulunan açılır menüler veya diğer yaygın bileşenler gibi örüntülere referans vermek faydalı olur. Biz de büyük, web tabanlı bir kod tabanında çalışırken, deklaratif kodun özellikle iyi işlediğini gördük; özellikle React ve JSX’te. Bir tasarım sistemin varsa, bunun için bir kural ekleyerek agent’ın bunu keşfetmesine yardımcı olabilirsin. İşte mümkün olduğunda bileşenlerin yeniden kullanılmasını teşvik etmeye çalıştığımız bir ui-components.mdc dosyası:
components.mdc
---
description: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs
Bileşen kitaplığın büyüdükçe buna uygun yeni kurallar ekle. Kurallar çok fazla olduğunda, bunları “yalnızca kullanıcı girdileriyle çalışırken uygula” gibi daha spesifik kategorilere ayırmayı düşün.
ui-components.png

​
Cursor’a tarayıcıya erişim ver

Cursor’ın yeteneklerini genişletmek için, konsol günlüklerine ve ağ isteklerine erişim sağlayan Browser Tools MCP sunucusunu kurabilirsin. Yapılandırdıktan sonra, konsol çıktısını ve ağ etkinliğini izleyerek değişikliklerini doğrulayabilirsin. Bu kurulum, uygulamanın niyetinle örtüştüğünden emin olmana yardımcı olur. MCP sunucusunu kurmak için şu talimatları izle: https://browsertools.agentdesk.ai/installation
browser.png
Bunu Cursor’a yerel olarak entegre etmeyi daha kolay hale getirmek için çalışıyoruz.

​
Çıkarımlar

  • Web geliştirmede sıkı geri bildirim döngüleri kritik. Hızlı ilerlemek ve akışta kalmak için Cursor’ı Figma, Linear ve tarayıcı gibi araçlarla birlikte kullan.
  • MCP sunucuları, harici sistemleri doğrudan Cursor’a entegre etmene olanak tanır, 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ı kodlar ve çıktılar üretmesine yardımcı olur.
  • Net, kapsamı belirlenmiş görevler daha iyi sonuç verir. Ne istediğini nasıl ve ne şekilde istediğin konusunda bilinçli ol.
  • İyi çıktılar alamıyorsan, şunları ayarlamayı dene:
    • Talimatlar: Kurallar, istemler kullan ve ör. MCP sunucularıyla daha fazla bağlama erişim ver.
    • Sistemler: Kalıplar, soyutlamalar ve açıklık, modelin anlamasını, yardımcı olmasını ve daha özerk çalışmasını kolaylaştırır.
  • Çalışma zamanı bilgisi olarak konsol logları, ağ istekleri ve UI öğesi verilerini ekleyerek modelin bağlamını genişletebilirsin.
  • Her şeyin otomatikleştirilmesi gerekmiyor. Sistem çok karmaşıklaştığında, Tab ve Inline Edit ile daha nokta atışı düzenlemelere geri dön.
  • Cursor, otomatik pilot değil, yardımcı pilot olduğunda en güçlüdür. Onu kendi karar vermeni değiştirmek için değil, geliştirmek için kullan.