Claude Code ve Cursor ile bir web sitesine uyan UI oluştur

DESIGN.md neden ekran görüntüsünden iyidir#

Adımlar#

1. 1

   Arayüzü geliştirdiğin şeye benzeyen bir site seç

   Benzer yoğunluktaki ürün ekranları, büyük bir hero alanı olan açılış sayfasından daha iyi sonuç verir. Bir dashboard geliştiriyorsan dashboard'u olan bir ürün seç. Önce DESIGN.md galerisine bak: dosya zaten orada olabilir.

2. 2

   DESIGN.md dosyasını al

   Galeri sayfasından kopyala ya da URL'yi Design Extractor ana sayfasına yapıştırıp bir Pro çıkarma çalıştır. Pro sitenin önemli sayfalarını örnekler ve bir çalıştırma en az bir dakika sürer.

3. 3

   Reponun kök dizinine DESIGN.md olarak kaydet

   README.md ve AGENTS.md'nin yanına koy ve commit'le; böylece her branch ve her ekip arkadaşının ajanı aynı dosyayı okur.

4. 4

   Ajanını dosyaya yönlendir

   Claude Code için CLAUDE.md'ye kısa bir yönlendirme, Cursor için bir proje kuralı ekle. Bloklar aşağıda.

5. 5

   UI'ı dosyanın terimleriyle iste

   Prompt'unda token ve bileşenlerin adını geç (primary, body-md, bir buton tarifi) ve ajandan bulamadığı her değeri uydurmak yerine listelemesini iste.

6. 6

   Sonucu dosyaya göre incele

   Değişikliği kabul etmeden önce renkleri, fontları, köşe yarıçaplarını ve durumları DESIGN.md'ye göre kontrol et.

Uygulamalı örnek: Linear#

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Ajanını dosyaya yönlendir#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Token'ları kullanan prompt'lar#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Ajanın oluşturduğunu incele#

• Renkler. Diff'te hex değerlerini ara. Her biri DESIGN.md'de olmalı. Yeni bir değer genellikle ajanın tahmin ettiği anlamına gelir.
• Fontlar. Birçok marka, senin yayınlayamayacağın ticari fontlar kullanır. Dosyanın Typography bölümü genellikle açık kaynak bir alternatif önerir; ajanın rastgele bir yedek fontu değil, onu yüklediğinden emin ol.
• Köşe yarıçapları ve boşluklar. Butonlar ve kartlar her yerde 8px gibi bir varsayılan değil, dosyanın rounded token'larını kullanmalı.
• Durumlar. Hover ve focus stilleri her bileşen tarifinin parçasıdır. Sayfada Tab tuşuyla gezin ve focus halkasını kontrol et.
• İşaretlenmiş tarifler. Dosya bir tarifi flagged olarak işaretliyorsa geometrisi yaklaşıktır. O bileşeni gerçek siteyle karşılaştır.

DESIGN.md'yi elle düzenlersen, ajanın onu yeniden okumadan önce ücretsiz DESIGN.md doğrulayıcıyla kontrol et.

Bu rehberde kullanılan dosyalar#

Bu galeri sayfalarının her birinde, paleti ve yazı örneğiyle birlikte repona kopyalayabileceğin tam DESIGN.md bulunur.

• 
  Yazılım ve SaaS · Productivity & Notes

  Linear

  Linear'ın tasarım sistemi, mühendislik ekipleri için tasarlanmış, öncelikle koyu tema kullanan ve yüksek yoğunluklu bir ürün arayüzüdür. Yüzey paleti, kenar çubuğu, kart ve panel ayrımı için katmanlı koyu griler içeren neredeyse siyah tonlara (#08090a, #0f1011) dayanır. Tipografide yalnızca Inter Variable kullanılır; büyük başlık boyutlarında hassas negatif harf aralığı uygulanır, satır içi kod için ise Berkeley Mono tercih edilir. Köşe yuvarlaklığı bilinçli olarak küçük tutulmuştur (ağırlıklı olarak 2–6px); hap şeklindeki hatlar yalnızca rozet ve durum çipleri için ayrılmıştır. Yükseklik hissi, dramatik katmanlamadan çok 1px iç kenarlıklar ve düşük opaklıklı gölgelerle sağlanır. Birincil CTA rengi, Linear'ın imza niteliğindeki indigo tonu (#5e6ad2) olup Kayıt Ol düğmesinde ve önemli bağlantılarda kullanılır.

• 
  Finans ve Fintech

  Stripe

  Stripe'ın pazarlama ana sayfası, "sohne-var" değişken yazı tipinin hafif ağırlıklarında (300–400) ve #533afd (Stripe Indigo) ile belirlenen, koyu lacivertten indigoya uzanan bir marka paleti üzerine kurulu, sıkı biçimde kontrol edilen bir tasarım sistemi (HDS — Stripe Design System) kullanıyor. Tam genişlikte, imza niteliğindeki spektral gradyan kahraman alanı öne çıkıyor. Bileşenler 4–6px köşe yarıçapına sahip, düz ya da minimal gölgeli ve 8px temel boşluk ızgarası etrafında düzenlenmiş. Genel ton, güven veren ama samimi: finansal altyapı, özgüvenli tipografi ve ölçülü renk kullanımıyla aktarılıyor.

• 
  Geliştirici ve Altyapı · Developer Tools & IDEs

  Supabase

  Supabase, koyu öncelikli bir tasarım sistemi kullanır; temel olarak neredeyse siyaha yakın derin bir arka plan (oklch ~0.19) ve canlı bir yeşil marka vurgusu (#3ecf8e / #3fcf8e) üzerine kuruludur. Düzen, duyarlı bir özellik kartı ızgarası etrafında yapılandırılmıştır; başlıklarda Manrope, gövde ve arayüz metinlerinde Inter kullanılır. Source Code Pro ise tüm sabit genişlikli yazı ve kod alanlarını karşılar. Renk sistemi, anlamsal adlandırılmış oklch özel özelliklerine dayanır. Kartlarda 12px köşe yuvarlaklığı ve ince kenarlık kullanılırken, düğmelerde 6–8px yuvarlaklık tercih edilir; genel yoğunluk orta düzeydedir ve 8px temel boşluk ızgarası esas alınır.

Tüm DESIGN.md örneklerine göz at