DAHA FAZLA OKUMA
Cursor İçin Ek Okumalar
Yayımlanmış kılavuzdan bir Cursor tasarım okuma listesi: Cursor ile tasarım için eğiticiler, belgeler ve adım adım anlatımlar.
Cursor 
OpenDesign Cursor ile
OpenDesign’da
tasarlayın.
OpenDesign'da Cursor ile arayüz tasarımı nasıl yapılır: gerçek kod üzerinde görsel düzenlemeler için Tasarım Modu, girdi olarak Figma, brief'ten incelenen dosyaya kadar bir fiyatlandırma sayfası görevi ve başlamadan önce bilinmesi gereken sınırlar.
Cursor için üç başlangıç noktası
Cursor Başlangıç Noktanızı Seçin
BU KILAVUZ · UI TASARIMI
Cursor'da Bir Ürün Arayüzü Oluşturun
Bu kılavuz bir brief, referanslar, tasarım kuralları ve incelenmiş bir HTML çıktısını kapsar.
Bu kılavuzu okuyun KURULUMCursor'u Sıfırdan Kurun
Temiz bir kurulumdan, arayüzü tasarım sisteminize göre oluşturan, önizleyen ve kontrol eden bir Cursor'a giden tam yol.
Kuruluma git KARŞILAŞTIRMACursor'u Diğer Ajanlarla Karşılaştırın
Cursor'ın tasarım işleri için Codex ve Claude Code ile nasıl karşılaştırıldığı ve ne zaman farklı bir iş akışı seçileceği.
Karşılaştırmayı görünTam Bir Cursor Tasarım Görevi
Bir Cursor Tasarım Görevi: Brief'ten Arayüze
Bu örnek, teslim ettiğiniz brief ve kısıtlamalardan başlayarak, Cursor'ın döndürdüğü çıktı üzerinden, bitmiş saymadan önce hâlâ çalıştırdığınız kontrollere kadar bir görevi izler. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir; kaydedilmiş bir Cursor çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefÜç planlı ve aylık / yıllık geçişli bir geliştirici aracı için fiyatlandırma sayfası tasarlayın. Orta planı önerilen yapın ve karşılaştırmayı kolay taranabilir tutun. Masaüstü ve telefon.
- Tasarım sistemiMevcut uygulama token'ları; Albert Sans; tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerFaturalama geçişi, plan CTA durumları, SSS bağlantıları ve geçişte klavye odağı
- ÇıktıSabit
data-od-idkancalarına sahip tek bir kendi kendine yeten HTML dosyası
2Kim Ne Yapar: Siz, Cursor ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Cursor
Yerleşimi planlar, HTML, CSS ve JavaScript'i yazar, ardından istek üzerine revize eder.
- OpenDesign
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak kaydeder.
- İnceleme
Teslimden önce görsel hiyerarşiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi kontrol edin.
3Cursor Çıktısı: 1440px ve 390px'te Fiyatlandırma Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
8px ızgarada üç eşit sütun; önerilen plan vurgusunu boyutundan değil kenarlığından alır.
Hiyerarşi
Görsel Hiyerarşi
Önce fiyat, sonra plan adı, sonra özellikler; vurgu bir rozet ve bir birincil düğmede görünür.
Duyarlı
Mobil Düzen
Mobilde planlar üst üste dizilir ve önerilen plan ilk sıradadır; geçiş üstte erişilebilir kalır.
Etkileşim
Etkileşim Kontrolleri
Faturalama anahtarını değiştirin, her CTA'da sekme tuşuyla gezin ve bir SSS bağlantısını açın.
Uygunluk
Cursor Nereye Uyar — ve Nereye Uymaz
Cursor Şu Durumlarda Uygundur
- Design Mode. Bir arayüz değişikliğini tıklayın, çizin veya sesle tanımlayın; Cursor kaynağı düzenler — gerçek koda dayalı görsel düzenleme. Cursor'ın değiştirilmesi mi yoksa bir tasarım çalışma alanıyla eşleştirilmesi mi gerektiğine karar veriyorsanız, OpenDesign vs Cursor karşılaştırmasını okuyun.
- Figma → kod. Figma MCP sunucuları Cursor'a gerçek yerleşim ve token'ları sağlar, böylece ekran görüntüsünden değil tasarımdan oluşturur. OpenDesign vs Figma karşılaştırması tuvalden depoya sahiplik sınırını açıklar.
- Çift yönlü Figma. Bazı MCP sunucuları Cursor'ın Figma tasarımlarını yalnızca tüketmesini değil, programatik olarak okumasını ve değiştirmesini de sağlar.
- Tasarımdan koda döngü. Olağan desen: görsel bir araçta taslak oluşturun, Cursor'a getirin, ardından ajanla iyileştirip genişletin.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Çıktı HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Vektör gerektiren bir varlık biçimi için ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlamanız yok. Bir tasarım sistemi veya örnekler olmadan çıktı genel bir görünüme kayar; başlamadan önce brief'i yazın.
- Bu ajanın ihtiyaç duyduğu kimlik bilgisine sahip değilsiniz. Gerekli: bir Cursor hesabı (kendi sağlayıcı anahtarlarınızı kullanır). OpenDesign kimlik bilgilerini ne sağlar ne de vekâlet eder.
- Ekibiniz Claude Code veya Antigravity'de çalışıyor. Bu ajanların kendi sayfaları var; çalışma alanı ortaktır, ancak kurulum farklıdır. ilgili ajanlar bölümüne bakın.
Uyumluluk
Başlamadan Önce Cursor Gereksinimleri
Bu sayfa, Cursor'ı OpenDesign masaüstü uygulamasına bağlı bir ajan olarak ele alır; her Cursor özelliğini kapsamaz. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıCursor, Cursor tarafından
Cursor, proje genelinde düzenleme yapan gömülü bir ajana sahip, VS Code tabanlı, önce yapay zekâ odaklı bir kod düzenleyicisidir. Burada konu, Cursor'ın kendi arayüzü değil, OpenDesign aracılığıyla o Cursor ajanıyla arayüz tasarımıdır. OpenDesign'in kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaCursor hesabı (kendi sağlayıcı anahtarlarınızı kullanır)
Kimlik bilgisi: Cursor hesabı (kendi sağlayıcı anahtarlarınızı kullanır). Bu anahtarlar doğrudan Cursor tarafından kullanılır — OpenDesign bunları vekâleten kullanmaz. Burada hiçbir kota veya fiyat taahhüt edilmez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü sürümleri indirme sayfasında görünür. Node.js ve pnpm gereksinimleri, masaüstü paketini kurmak için değil, OpenDesign'i kaynaktan çalıştırmak içindir. Bu sayfada minimum bir Cursor sürümü doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Kurulu sürümünüzün gösterdiği bağlantı adımlarını kullanın, ardından Cursor üzerinden küçük bir görev gönderin. Cursor'ın bunu işlediğini ve ortaya çıkan dosyanın açıldığını kontrol edin. Tek başına indirmek, çalışan bir bağlantıyı kanıtlamaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Cursor Kurulumu
Masaüstü uygulamasını kurun, sahip olduğunuz sürüm için Cursor bağlantı adımlarını tamamlayın, ardından küçük bir sonuçla doğrulayın. Bu yolu izlemek, OpenDesign'i kaynaktan derlemeyi gerektirmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Makinenizle eşleşen masaüstü paketini seçin, kurun ve OpenDesign'i başlatın.
OpenDesign'ı indirinKONTROL NOKTASIOpenDesign başlar. Zaten kuruluysa bir sonraki adıma geçin — tekrar indirmeyin. - 2
Prepare Your Cursor Connection
Kurulu sürümünüzün gösterdiği Cursor kurulumunu gerçekleştirin. Cursor sağlayıcı anahtarlarınızı doğrudan kullanır; OpenDesign bunları vekâleten kullanmaz.
# .cursor/rules/design.mdc --- description: Project design conventions alwaysApply: true --- - Reuse existing design-system tokens and components; never hardcode hex or spacing. - At most two typefaces and one accent color. - Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners. - Build responsive by default; verify desktop and mobile in the preview before finishing.Yayımlanmış kılavuzdaki Cursor kurulum notlarından alınmıştır; geçerli komut satıcı belgelerine karşı kontrol edilmelidir.
KONTROL NOKTASISeçili ajanın Cursor olduğundan ve hesabın amaçlanan hesap olduğundan emin olun. Cursor kullanılamıyorsa, daha büyük bir göreve kalkışmadan önce uyumluluğu gözden geçirin. - 3
Küçük Bir Cursor Görevi Çalıştırın
Tam döngü boyunca, tek bir revizyon dahil, değerlendirebileceğiniz kompakt bir ilk istek seçin.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Tasarım kurallarıma uyun. Masaüstü ve mobil genişliklerde kontrol edin.
KONTROL NOKTASIOluşturulan dosyayı açın, kaydetme durumunu deneyin ve belirli bir değişiklik isteyin. Üretilen bir çıktı incelemeyi başlatır; bitirmez.
Kaynak tabanlı bir OpenDesign kurulumu için bunun yerine teknik hızlı başlangıç kılavuzunu kullanın.
Cursor tasarım iş akışı
Cursor'ın Tasarım Döngüsü: Brief'ten İncelenmiş Dosyaya Beş Adım
Fiyatlandırma sayfasını kısa bir brief'ten başlayarak Cursor'ın Agent modu ve düzenleyici içi önizleme üzerinden incelenmiş bir dosyaya kadar takip edin. Her adım, sizin girdinizi, Cursor'ın rolünü, OpenDesign'in katkısını ve gerçekleştirdiğiniz kontrolü adlandırır.
- 1
Tasarım Brief'i
Sade ve kısa tutun — yaklaşık üç ila altı satır. Ekranın kime hizmet ettiğini, neyi başarması gerektiğini ve hangi platformları hedeflediğini söyleyin.
- SizBrief'i taslak haline getirin ve varsa bir referans ekran görüntüsü ekleyin.
- CursorBrief'i ve projenin talimat dosyasını okur; bir şey belirsiz olduğunda sorar.
- OpenDesignProjeyi, istem için sohbet yüzeyini ve çıktı türüyle eşleşen skill'i sağlar.
- KontrolBrief'in kabul kriterlerini taşıdığını kontrol edin. Bunları üretimden önce netleştirmek, sonradan düzeltmekten daha az maliyetlidir.
- 2
Tasarım Kısıtları
Bir tasarım sistemi ve birkaç kesin kısıt getirin. Çıktının genel bir görünüme kaymasını engelleyen şey bu bağlamdır.
- SizTasarım sistemini seçin, ardından kırılma noktalarını ve yeniden kullanılması gereken bileşenleri adlandırın.
- CursorHerhangi bir işaretleme yazmadan önce Cursor, DESIGN.md token'larını ve duruş kurallarını bağlama okur.
- OpenDesignOpenDesign tasarım sistemi kitaplığını taşır ve seçiminizi skill şablonuna bağlar.
- KontrolToken'ları markanıza göre doğrulayın: tek bir vurgu, doğru yazı tipleri, doğru yarıçap.
- 3
Arayüzü Oluştur
Cursor, yerleşim, stiller, etkileşimler ve sabit kancalar dahil olmak üzere tek bir kendi kendine yeten HTML dosyası üretir.
- SizBekleyin veya Cursor açıklayıcı bir soru sorarsa yanıtlayın. Burada yapılandırılacak bir şey yok.
- CursorCursor bölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanı düzeltir.
- OpenDesignOpenDesign çıktıyı proje klasöründe saklar ve önizlemenin açabilmesi için dizinler.
- KontrolHenüz değil. Dosya oluşturulana kadar bekleyin, ardından kaynağı değil sonucu değerlendirin.
- 4
Önizleme
OpenDesign dosyayı belirttiğiniz genişliklerde işler. Tasarım burada, önizlemede değerlendirilir.
- SizGörüntü alanı genişliklerini değiştirin, her etkileşimi deneyin ve doğrudan öğeler üzerine yorum yapın.
- CursorCursor önizlemede bıraktığınız yorumları okur ve bir sonraki revizyonu hazırlar.
- OpenDesignOpenDesign önizlemeyi işler ve yorumlar ile düzenlemeler için
data-od-idhedeflerini kullanıma sunar. - KontrolHiyerarşiyi, kontrastı, 390px'te taşmayı, odak durumlarını ve vurgunun ölçülü kalıp kalmadığını kontrol edin.
- 5
Revize Et ve Doğrula
Değişiklik istemek için önizlemedeki öğeleri işaret edin. Her revizyon yeni bir dosya olarak gelir—sessizce üzerine yazma olmaz.
- SizYorumlarınızı isteklere dönüştürün ve görevin ne zaman bittiğine karar verin.
- CursorCursor değişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignOpenDesign sürümleri yan yana tutar ve bitirdiğinizde bir görüntüyü ya da HTML'i dışa aktarır.
- KontrolÖnce yalnızca değişen alanı, ardından her kırılma noktasında tam sayfayı bir kez inceleyin.
Kaynaklar
Cursor Tasarım Kaynakları
Skill'ler Skill'lere göz atın Tasarım sistemleri Sistemlere göz atın Şablonlar Şablonlara göz atın
Tasarım Skill'leri
Cursor'ın OpenDesign içinde üretebileceği yapıt türleri; her türe bir beceri eşlenir.
Tasarım Sistemleri
Cursor üretmeye başlamadan önce bağlanacak marka belirteçleri ve bileşenleri.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için giriş noktaları.
Sınırlamalar
Cursor Sınırları, Manuel Kontroller ve Yedekler
- KapsamBu sayfa, Cursor'ı OpenDesign üzerinden bağlanan bir ajan olarak ele alır; her Cursor özelliğini kapsamaz.
- Kullanım SınırlarıMaliyet ve kullanım sınırları, devredeki kimlik bilgisine göre işler (Cursor hesabı (kendi sağlayıcı anahtarlarınızı kullanır)). Burada ücretsiz kota iddiasında bulunulmaz.
- AğProje dosyalarını yerelde tutmak, çıkarımı çevrimdışı yapmaz. Hassas girdiler göndermeden önce ajanın sağlayıcı ayarlarını ve veri politikalarını inceleyin.
- Çıktı HTML'dirCursor, düzenlenebilir vektör tasarım dosyaları yerine HTML yapıtları döndürür. Herhangi bir Figma gidiş-dönüşü, Cursor'ın kendi Figma entegrasyonu üzerinden yürür.
- Manuel İncelemeÖnizlemede erişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu için inceleyen sizsiniz. Bir ajanın kendi kendini kontrolü yalnızca ilk geçiş sayılır.
- Yedek ÇözümCursor kullanılamadığında veya bir görev başarısız olduğunda, yüklediğiniz sürümün bağlantı yönergelerine ve kimlik doğrulamasına başvurun. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan yapıtı saklayın.
SSS
Cursor ve OpenDesign Hakkında Sık Sorulan Sorular
Cursor Gerçek Tasarım İşi Teslim Edebilir mi?
Evet — bağlamda bir tasarım skill'i, bir design system ve gerçek referans görseller bulunduğunda Cursor, üretim kalitesinde, responsive bir UI üretir ve editör içi önizleme, bunu görsel olarak doğrulamanıza ve iyileştirmenize olanak tanır. Bu bağlam olmadan genellikle genel bir görünüme yönelir; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Bu Resmi Bir Cursor Ürünü mü?
Hayır. OpenDesign, Cursor'u bir ajan olarak entegre eden bağımsız, açık kaynaklı bir projedir. Cursor'u local-first, açık bir skill ve design-system kütüphanesiyle tamamlar.
Cursor İle Tasarım Yapmak İçin Cursor Aboneliğine İhtiyacım Var mı?
Bir Cursor hesabı / aboneliği kullanabilir veya kendi model anahtarlarınızı (BYOK) getirebilirsiniz. OpenDesign her iki durumda da kimlik bilgilerinizi asla proxy'lemez — bunlar doğrudan ajanınız tarafından kullanılır.
Frontend Tasarımı için Cursor vs. Claude Code?
İkisi de güçlüdür. Claude Code, spesifik ve codebase'e duyarlı tasarım kararlarıyla tanınır; Cursor'un avantajı ise editör içindeki canlı önizlemeyle sıkı bir oluştur-ve-gör döngüsüne sahip olmasıdır. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.
Cursor Figma'ya Nasıl Bağlanır?
Cursor'a resmi Figma MCP sunucusunu ekleyin, ardından sohbete bir Figma frame bağlantısı yapıştırın ve Cursor'dan bunu uygulamasını isteyin. Sunucu, gerçek bileşenleri, değişkenleri ve yerleşim verilerini sunar; böylece oluşturulan kod kaynak tasarımla eşleşir.
Cursor'ın Temeli: AI Öncelikli VS Code Çatalı
Cursor, Anysphere tarafından geliştirilen AI öncelikli bir kod düzenleyicisidir. VS Code'un bir fork'u olduğu için tanıdık düzenleyiciyi, eklentileri ve klavye kısayollarını korur; ancak iş akışını tüm projenizi okuyabilen, birden fazla dosyayı düzenleyebilen, komutlar çalıştırabilen ve sizinle döngü içinde yineleyebilen bir AI ajanı etrafında yeniden kurar.
Tasarım çalışmaları açısından önemli yüzeyler şunlardır: Agent modu (bir sonucu tarif edersiniz, Cursor planlar ve dosyalar arasında düzenlemeler yapar), hızlı ince ayarlar için satır içi düzenlemeler ve Tab tamamlamaları, pencereyi terk etmeden çalışan UI'ı görebilmeniz için düzenleyici içi önizleme / tarayıcı ve canlı bir Figma dosyası gibi harici bağlamı çekmesini sağlayan MCP desteği.
Proje kuralları: Cursor proje talimat dosyalarını okur — `.cursor/rules` altındaki sürümlenmiş `.mdc` kuralları ve düz bir `AGENTS.md` — böylece tasarım konvansiyonlarınızı ajanın her çalıştırmada okuduğu yere kodlayabilirsiniz.
Modeller: Cursor model açısından esnektir: aboneliğiniz üzerinden öncü modellerle birlikte gelir ve kendi model anahtarlarınızı getirmeyi de destekler, böylece aynı düzenleyici iş akışının arkasındaki motoru siz seçersiniz.
MCP: Model Context Protocol'ü konuşur, böylece harici sunucular — en ilgili olanı Figma MCP sunucusu — ajan için birinci sınıf bağlam haline gelir.
Kimlik bilgisi: Cursor hesabı / aboneliği (Hobby / Pro / Business) veya kendi model anahtarlarınız (BYOK)
Biçim: Düzenleyici içi ajan ve önizlemeye sahip AI öncelikli kod düzenleyici (VS Code fork'u)
Üretici: Anysphere
Tasarım çalışmaları açısından önemli yüzeyler şunlardır: Agent modu (bir sonucu tarif edersiniz, Cursor planlar ve dosyalar arasında düzenlemeler yapar), hızlı ince ayarlar için satır içi düzenlemeler ve Tab tamamlamaları, pencereyi terk etmeden çalışan UI'ı görebilmeniz için düzenleyici içi önizleme / tarayıcı ve canlı bir Figma dosyası gibi harici bağlamı çekmesini sağlayan MCP desteği.
Proje kuralları: Cursor proje talimat dosyalarını okur — `.cursor/rules` altındaki sürümlenmiş `.mdc` kuralları ve düz bir `AGENTS.md` — böylece tasarım konvansiyonlarınızı ajanın her çalıştırmada okuduğu yere kodlayabilirsiniz.
Modeller: Cursor model açısından esnektir: aboneliğiniz üzerinden öncü modellerle birlikte gelir ve kendi model anahtarlarınızı getirmeyi de destekler, böylece aynı düzenleyici iş akışının arkasındaki motoru siz seçersiniz.
MCP: Model Context Protocol'ü konuşur, böylece harici sunucular — en ilgili olanı Figma MCP sunucusu — ajan için birinci sınıf bağlam haline gelir.
Kimlik bilgisi: Cursor hesabı / aboneliği (Hobby / Pro / Business) veya kendi model anahtarlarınız (BYOK)
Biçim: Düzenleyici içi ajan ve önizlemeye sahip AI öncelikli kod düzenleyici (VS Code fork'u)
Üretici: Anysphere
Cursor'ın Tasarım Avantajı: Sıkı Oluştur-ve-Gör Döngüsü
Cursor'ın tasarım avantajı tek bir özellik değil — üret-ve-gör döngüsünün sıkılığıdır. Onu genel bir kod üreticisi değil de bir tasarım aracı gibi hissettiren üç şey vardır.
Sıkı bir yinele-ve-izle döngüsü: Siz istem verirsiniz, Cursor dosyalar arasında düzenleme yapar ve düzenleyici içi önizleme sonucu anında oluşturur — böylece ayrı bir terminal ve tarayıcı arasında gidip gelmek yerine boşlukları, hiyerarşiyi ve hareketi saniyeler içinde ayarlarsınız.
Doğrudan görsel düzenleme: Sohbetin ötesinde Cursor, önizlemede öğeleri seçip stillerde ince ayar yapmanıza olanak tanır; böylece küçük görsel düzeltmeler kod arkeolojisi gibi değil tasarım düzenlemeleri gibi hissettirir.
Proje kuralları ve MCP bağlamı: `.cursor/rules` (veya `AGENTS.md`) ve Figma MCP sunucusuyla ajan tahmin yürütmek yerine sizin token'larınıza, bileşenlerinize ve gerçek tasarım spesifikasyonlarınıza göre çalışır.
Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri (skill) ve gerçek referans görselleri.
Ders, her ajanın öğrettiği aynı derstir: Cursor varsayılan olarak zevke sahip değildir. Ona kısıtlar verdiğinizde — bir tasarım sistemi, estetik bir beceri ve somut referanslar — iyi tasarım üretir. OpenDesign tam olarak bu girdileri paketler; ikisinin birbirine uymasının nedeni de budur (aşağıda daha fazlası).
Sıkı bir yinele-ve-izle döngüsü: Siz istem verirsiniz, Cursor dosyalar arasında düzenleme yapar ve düzenleyici içi önizleme sonucu anında oluşturur — böylece ayrı bir terminal ve tarayıcı arasında gidip gelmek yerine boşlukları, hiyerarşiyi ve hareketi saniyeler içinde ayarlarsınız.
Doğrudan görsel düzenleme: Sohbetin ötesinde Cursor, önizlemede öğeleri seçip stillerde ince ayar yapmanıza olanak tanır; böylece küçük görsel düzeltmeler kod arkeolojisi gibi değil tasarım düzenlemeleri gibi hissettirir.
Proje kuralları ve MCP bağlamı: `.cursor/rules` (veya `AGENTS.md`) ve Figma MCP sunucusuyla ajan tahmin yürütmek yerine sizin token'larınıza, bileşenlerinize ve gerçek tasarım spesifikasyonlarınıza göre çalışır.
Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri (skill) ve gerçek referans görselleri.
Ders, her ajanın öğrettiği aynı derstir: Cursor varsayılan olarak zevke sahip değildir. Ona kısıtlar verdiğinizde — bir tasarım sistemi, estetik bir beceri ve somut referanslar — iyi tasarım üretir. OpenDesign tam olarak bu girdileri paketler; ikisinin birbirine uymasının nedeni de budur (aşağıda daha fazlası).
Cursor'ı Tasarım için Sıfırdan Kurma
Cursor'ı cursor.com adresinden yükleyin ve Cursor hesabınızla oturum açın ya da Ayarlar'da kendi model anahtarlarınızı (BYOK) yapılandırın.
Projenizi açın ve sohbet / Agent panelinde bir model seçin.
Proje kuralları ekleyin: yapılandırılmış, glob kapsamlı konvansiyonlar için `.cursor/rules/*.mdc` oluşturun veya basit, okunabilir talimatlar için düz bir `AGENTS.md` kullanın.
Ajanın canlı tasarım bağlamını okuyabilmesi için Figma MCP sunucusunu bağlayın (isteğe bağlı).
Geliştirme sunucunuzu çalıştırın ve yineleme yaparken UI'ı görmek ve doğrulamak için düzenleyici içi önizlemeyi kullanın.
Kurulum sırası: yükle → kimlik doğrula → proje kurallarını yapılandır → bir beceri ekle → önizleme doğrulamasını etkinleştir.
Minimal bir proje kuralları dosyası, ajanın genel bir görünüme varsayılan olarak dönmesi yerine bir markaya göre tasarım yapmasını sağlar. Onu Cursor'ın her çalıştırmada okuduğu yere koyun:
Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı `.cursor/rules` veya `AGENTS.md` içine koyun ve Cursor'ı bunlara yönlendirin; böylece çıktı genel bir görünüme dönmek yerine bir markayla eşleşir.
İstemleri küçük tutun: Cursor'ın sıkı döngüsü odaklı istekleri ödüllendirir — her seferinde bir bileşen veya durum üzerinde yineleyin ve geçişler arasında önizlemeyi izleyin.
Komutlar ve sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın; bunlar değişebilir.
Önceki kılavuzdan alınan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Projenizi açın ve sohbet / Agent panelinde bir model seçin.
Proje kuralları ekleyin: yapılandırılmış, glob kapsamlı konvansiyonlar için `.cursor/rules/*.mdc` oluşturun veya basit, okunabilir talimatlar için düz bir `AGENTS.md` kullanın.
Ajanın canlı tasarım bağlamını okuyabilmesi için Figma MCP sunucusunu bağlayın (isteğe bağlı).
Geliştirme sunucunuzu çalıştırın ve yineleme yaparken UI'ı görmek ve doğrulamak için düzenleyici içi önizlemeyi kullanın.
Kurulum sırası: yükle → kimlik doğrula → proje kurallarını yapılandır → bir beceri ekle → önizleme doğrulamasını etkinleştir.
Minimal bir proje kuralları dosyası, ajanın genel bir görünüme varsayılan olarak dönmesi yerine bir markaya göre tasarım yapmasını sağlar. Onu Cursor'ın her çalıştırmada okuduğu yere koyun:
Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı `.cursor/rules` veya `AGENTS.md` içine koyun ve Cursor'ı bunlara yönlendirin; böylece çıktı genel bir görünüme dönmek yerine bir markayla eşleşir.
İstemleri küçük tutun: Cursor'ın sıkı döngüsü odaklı istekleri ödüllendirir — her seferinde bir bileşen veya durum üzerinde yineleyin ve geçişler arasında önizlemeyi izleyin.
Komutlar ve sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın; bunlar değişebilir.
# .cursor/rules/design.mdc
---
description: Project design conventions
alwaysApply: true
---
- Reuse existing design-system tokens and components; never hardcode hex or spacing.
- At most two typefaces and one accent color.
- Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners.
- Build responsive by default; verify desktop and mobile in the preview before finishing.Önceki kılavuzdan alınan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Önizlemeden UI'a iş akışı
Cursor ile en yüksek kaldıraçlı tasarım döngüsü, bir referansı çalışan ve responsive bir UI'a dönüştürmek ve tahmin yürütmek yerine canlı önizlemeyi baştan sona izleyerek eşleşene kadar düzenleyicide yinelemektir.
Elonizdeki en net görsel referanslardan başlayın — ve tek bir vitrin görseliyle değil, birden fazla durumla (masaüstü ve mobil, hover, boş, yükleniyor) başlayın.
İstemde spesifik olun; belirsiz istemler genel UI üretir.
Bir tasarım sistemi hazırlayın ve Cursor'a token'ların ve kanonik primitiflerin nerede yaşadığını söyleyin.
Düzenleyici içi önizlemeyi açık ve geliştirme sunucunuzu çalışır durumda tutun; böylece her düzenleme önemsediğiniz kırılma noktalarında anında oluşur.
Oluşturulan UI'ı referanslarla karşılaştırarak yineleyin — ve küçük görsel düzeltmeler için önizlemede doğrudan öğe seçimini kullanın.
Sohbete bir görsel ekleyerek referansları besleyin, ardından somut kısıtlarla istem verin:
İyi yinelemeleri commit'leyin ve kötü olanları geri alın (geri aldığınızda Cursor'a söyleyin); böylece her geçiş temiz bir taban üzerine inşa edilir — bu, herhangi bir ajan döngüsünü savrulmaktan koruyan aynı disiplindir.
Önceki kılavuzdan alınan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Elonizdeki en net görsel referanslardan başlayın — ve tek bir vitrin görseliyle değil, birden fazla durumla (masaüstü ve mobil, hover, boş, yükleniyor) başlayın.
İstemde spesifik olun; belirsiz istemler genel UI üretir.
Bir tasarım sistemi hazırlayın ve Cursor'a token'ların ve kanonik primitiflerin nerede yaşadığını söyleyin.
Düzenleyici içi önizlemeyi açık ve geliştirme sunucunuzu çalışır durumda tutun; böylece her düzenleme önemsediğiniz kırılma noktalarında anında oluşur.
Oluşturulan UI'ı referanslarla karşılaştırarak yineleyin — ve küçük görsel düzeltmeler için önizlemede doğrudan öğe seçimini kullanın.
Sohbete bir görsel ekleyerek referansları besleyin, ardından somut kısıtlarla istem verin:
İyi yinelemeleri commit'leyin ve kötü olanları geri alın (geri aldığınızda Cursor'a söyleyin); böylece her geçiş temiz bir taban üzerine inşa edilir — bu, herhangi bir ajan döngüsünü savrulmaktan koruyan aynı disiplindir.
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Keep the preview open — verify desktop and mobile match the
references and iterate until they do.Önceki kılavuzdan alınan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Cursor + Figma: MCP üzerinden tasarım ↔ kod
Cursor, Figma'ya resmi Figma MCP sunucusu üzerinden bağlanır; bu sunucu ajana düz bir ekran görüntüsü yerine canlı bir Figma dosyasına yapılandırılmış erişim sağlar. Bu da devir teslimdeki tahmin payını ortadan kaldırır.
Tasarım → Kod: Figma'da bir frame'in bağlantısını kopyalayın, Cursor'a yapıştırın ve tasarımı uygulamasını isteyin. MCP sunucusu gerçek tasarım bağlamını — bileşenler, değişkenler, yerleşim verisi, token'lar — açığa çıkarır, böylece üretilen kod kaynağı yaklaşık olarak taklit etmek yerine ona uyar.
Hizada kalın: Tasarım token'ları, stilleri ve bileşenleri Figma'da tutarlı biçimde kullanıldığında (ve mevcut olduğunda Code Connect ile), Cursor'ın çıktısı primitifleri yeniden icat etmek yerine gerçek tasarım sisteminizle eşlenmiş kalır.
Uzak Figma MCP sunucusunu bir kez kurun, Cursor için birinci sınıf bağlam olarak kullanıma hazır olur. MCP açık bir standart olduğu için aynı sunucu Cursor, Claude Code, Codex ve VS Code genelinde yeniden kullanılabilir — OpenDesign'ın yönetmek üzere tasarlandığı taşınabilir, çok ajanlı yeteneğin tam da kendisi.
Tasarım → Kod: Figma'da bir frame'in bağlantısını kopyalayın, Cursor'a yapıştırın ve tasarımı uygulamasını isteyin. MCP sunucusu gerçek tasarım bağlamını — bileşenler, değişkenler, yerleşim verisi, token'lar — açığa çıkarır, böylece üretilen kod kaynağı yaklaşık olarak taklit etmek yerine ona uyar.
Hizada kalın: Tasarım token'ları, stilleri ve bileşenleri Figma'da tutarlı biçimde kullanıldığında (ve mevcut olduğunda Code Connect ile), Cursor'ın çıktısı primitifleri yeniden icat etmek yerine gerçek tasarım sisteminizle eşlenmiş kalır.
Uzak Figma MCP sunucusunu bir kez kurun, Cursor için birinci sınıf bağlam olarak kullanıma hazır olur. MCP açık bir standart olduğu için aynı sunucu Cursor, Claude Code, Codex ve VS Code genelinde yeniden kullanılabilir — OpenDesign'ın yönetmek üzere tasarlandığı taşınabilir, çok ajanlı yeteneğin tam da kendisi.
Tasarım için Cursor vs Codex vs Claude Code
Tasarım çalışmaları için tek bir kazanan yok — her ajanın farklı bir gücü var ve deneyimli ekipler bunları üst üste kullanır. Adil bir özet:
Cursor — Düzenleyici içi canlı önizleme ve doğrudan öğe düzenleme ile görsel üret-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Codex — Bir frontend becerisiyle güçlü görsel cila; görsel anlama ve sanal alanda çalıştırma — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanı farkındalıklı UX — Frontend muhakemesi ve geniş bağlamlı refaktörler
Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: üçü de beceriler, referanslar ve kısıtlar olmadan genel bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun budur — ve bu, model şeklinde değil tasarım aracı şeklinde bir sorundur.
Ajan — Tasarım gücü — En uygun olduğu alan
Cursor — Düzenleyici içi canlı önizleme ve doğrudan öğe düzenleme ile görsel üret-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Codex — Bir frontend becerisiyle güçlü görsel cila; görsel anlama ve sanal alanda çalıştırma — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanı farkındalıklı UX — Frontend muhakemesi ve geniş bağlamlı refaktörler
Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: üçü de beceriler, referanslar ve kısıtlar olmadan genel bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun budur — ve bu, model şeklinde değil tasarım aracı şeklinde bir sorundur.
Ajan — Tasarım gücü — En uygun olduğu alan
“AI Slop” Görünümünden Kaçınmak: Tuzaklar ve Çözümler
Cursor ile üretilen tasarım hakkında en sık dile getirilen şikâyet, genel görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir AI yaptı diye bağıran” bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında mobilde bozulan yerleşimler ve talimatların UI metnine sızması yer alıyor.
Bir tasarım becerisi ekleyin: İyi seçilmiş bir estetik beceri, Cursor'ı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Doğrulamak için önizlemeyi kullanın: Düzenleyici içi önizlemede kırılma noktaları boyunca oluşturun ve kendi kendinize kontrol edin; böylece yerleşimler mobilde sessizce bozulmaz.
Token'ları ve referansları sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
Kuralları `.cursor/rules` içine kodlayın: “vitrin kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Dikkat edin: her önlemin ortak noktası, ajana iyi seçilmiş bir tasarım bağlamı vermektir. Bu bağlamı her proje için elle sürdürmek ise OpenDesign'ın ortadan kaldırdığı angaryadır.
Bir tasarım becerisi ekleyin: İyi seçilmiş bir estetik beceri, Cursor'ı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Doğrulamak için önizlemeyi kullanın: Düzenleyici içi önizlemede kırılma noktaları boyunca oluşturun ve kendi kendinize kontrol edin; böylece yerleşimler mobilde sessizce bozulmaz.
Token'ları ve referansları sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
Kuralları `.cursor/rules` içine kodlayın: “vitrin kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Dikkat edin: her önlemin ortak noktası, ajana iyi seçilmiş bir tasarım bağlamı vermektir. Bu bağlamı her proje için elle sürdürmek ise OpenDesign'ın ortadan kaldırdığı angaryadır.
OpenDesign İçinde Cursor: Tasarım Katmanı
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. Cursor'ı birinci sınıf bir adaptör olarak ele alır ve onu iyi seçilmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render ardışık düzeni ve yerel bir masaüstü UI ile sarar — böylece Cursor'ı iyi yapan tasarım bağlamı her seferinde elle bir araya getirilmek yerine ilk çalıştırmadan itibaren yerinde olur.
Cursor hesabınızla veya kendi model anahtarlarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden geçirilmez.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
Her artefakt ve DESIGN.md dosyası, barındırılan bir bulutta değil kendi reponuzda yaşar.
Aynı Cursor ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Yerel önceliklidir ve Apache-2.0 lisanslıdır, dolayısıyla çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'ı yükleyin ve ajanınız olarak Cursor'ı seçin.
Cursor hesabınızla veya kendi model anahtarlarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden geçirilmez.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
Her artefakt ve DESIGN.md dosyası, barındırılan bir bulutta değil kendi reponuzda yaşar.
Aynı Cursor ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Yerel önceliklidir ve Apache-2.0 lisanslıdır, dolayısıyla çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'ı yükleyin ve ajanınız olarak Cursor'ı seçin.
OpenDesign, Cursor ile bağlantılı mı?
Hayır. Cursor, Anysphere'nin bir ürünüdür; OpenDesign ise onu birinci sınıf bir adaptör olarak entegre eden bağımsız bir açık kaynak projesidir.