# Claude Code, Cursor ve v0'da DESIGN.md Nasıl Kullanılır?

> DESIGN.md dosyanı Claude Code, Cursor, v0, GitHub Copilot ve AGENTS.md destekleyen araçlara nasıl bağlayacağını, örnek komutlar ve istem (prompt) kalıplarıyla adım adım anlatıyoruz.

Yazar: Murat Canbaz · Güncellendi: 2026-09-26 · Kaynak: https://www.makemymd.com/rehber/claude-cursor-v0-design-md-kullanimi/

## Kısa cevap

DESIGN.md dosyasını projenin kök klasörüne koy, sonra kullandığın aracın **her oturumda okuduğu talimat dosyasından** ona referans ver: Claude Code için `CLAUDE.md`, Cursor için `.cursor/rules/`, GitHub Copilot için `.github/copilot-instructions.md`, diğer ajanlar için `AGENTS.md`. Böylece araç, sen hatırlatmasan da her arayüz işinde markanın renklerini, yazı tiplerini ve bileşen kurallarını uygular.

Henüz bir DESIGN.md dosyan yoksa önce [DESIGN.md nedir?](/rehber/design-md-nedir/) rehberine göz at ya da [MakeMyMD sihirbazıyla](/olustur/) birkaç dakikada oluştur.

## Hazırlık: dosyayı doğru yere koy

1. DESIGN.md dosyasını indir ve projenin kök klasörüne, `README.md` ile aynı yere koy.
2. Dosya adını değiştirme: `DESIGN.md` (büyük harflerle) hem insanlar hem araçlar için tanınan addır.
3. Proje Tailwind kullanıyorsa aynı tasarım sisteminin Tailwind temasını, kullanmıyorsa CSS değişkenlerini de projeye ekle. Böylece araç token adlarını doğrudan koda yazabilir.

![Bir tasarım sisteminin DESIGN.md, CSS ve JSON sekmeleri](/assets/screens/sablon.jpg "Kütüphanedeki her sayfada “.MD İndir” ile DESIGN.md dosyasını, sağdaki sekmelerden CSS ve JSON karşılıklarını alabilirsin.")

## Claude Code

Claude Code, projenin kökündeki `CLAUDE.md` dosyasını her oturumun başında okur ve bu dosyadan başka dosyaları `@` ile içe aktarabilir. `CLAUDE.md` dosyana şunu eklemen yeterli:

```md
## Tasarım sistemi

Arayüz kodu yazarken aşağıdaki tasarım kurallarına uy; renkleri, yazı tiplerini ve
boşlukları uydurma, yalnızca bu dosyadaki token'ları kullan.

@DESIGN.md
```

Ardından doğrudan istekte bulunabilirsin: “Fiyatlandırma sayfası oluştur; DESIGN.md'deki birincil aksiyon rengini ve buton kurallarını kullan.”

## Cursor

Cursor'da proje kuralları `.cursor/rules/` klasöründeki `.mdc` dosyalarında tutulur. Her zaman uygulanacak bir tasarım kuralı oluştur:

```md
---
description: Marka tasarım sistemi
alwaysApply: true
---

Arayüz kodu yazarken projedeki DESIGN.md dosyasındaki renk, tipografi,
boşluk ve bileşen kurallarına uy. Tanımlı olmayan renk veya font kullanma.

@DESIGN.md
```

Dosyayı `.cursor/rules/design-system.mdc` adıyla kaydet. Cursor ayrıca kök klasördeki `AGENTS.md` dosyasını da okuyabilir; ekipte birden çok araç kullanılıyorsa talimatları orada toplamak daha pratik olabilir.

## v0

v0 bir sohbet ve proje arayüzü üzerinden çalıştığı için dosyayı ona doğrudan vermen gerekir:

1. DESIGN.md dosyasını sohbete ek olarak yükle ya da içeriğini yapıştır.
2. Projenin kalıcı talimat alanına “Bu projedeki tüm arayüzler ekteki DESIGN.md kurallarına uymalı” gibi kısa bir kural ekle.
3. İstekte bulunurken bileşeni ve durumu belirt: “DESIGN.md'deki kart ve buton kurallarıyla, koyu temada bir ayarlar sayfası.”

v0'ın menü adları zaman zaman değişiyor; kalıcı talimat alanı bulunmuyorsa DESIGN.md'yi her yeni sohbetin başında eklemek aynı sonucu verir.

## GitHub Copilot

Copilot, deponun `.github/copilot-instructions.md` dosyasındaki talimatları sohbetlerde ve kod önerilerinde dikkate alır. Dosyaya şu bölümü ekle:

```md
## Tasarım sistemi

Kullanıcı arayüzü kodu üretirken kök klasördeki DESIGN.md dosyasındaki
renk, tipografi ve bileşen kurallarını uygula. Yeni renk veya font uydurma.
```

## AGENTS.md destekleyen diğer araçlar

`AGENTS.md`, yapay zekâ kodlama ajanlarına yönelik yaygın bir talimat dosyası biçimi ve birçok araç tarafından okunuyor. Kök klasördeki `AGENTS.md` dosyana aynı talimatı ekleyerek tek yerden birden fazla aracı yönlendirebilirsin:

```md
## Tasarım

Tüm arayüz işlerinde ./DESIGN.md dosyasındaki tasarım sistemine uy.
```

## Etkili istem (prompt) kalıpları

DESIGN.md tanımlı olsa bile isteği net kurmak sonucu belirgin biçimde iyileştirir:

| Amaç | Örnek istem |
|---|---|
| Yeni sayfa | “DESIGN.md'deki tipografi ölçeğini kullanarak bir hakkımızda sayfası oluştur; başlık için display, gövde için body token'ını kullan.” |
| Bileşen | “DESIGN.md'deki birincil ve ikincil buton kurallarıyla bir buton grubu yap; hover ve disabled durumlarını da ekle.” |
| Denetim | “Bu bileşeni DESIGN.md'ye göre incele; tanımlı olmayan renkleri ve yanlış köşe yarıçaplarını listele.” |
| Dönüştürme | “Bu sayfadaki sabit hex değerlerini DESIGN.md'deki token'lara karşılık gelen CSS değişkenleriyle değiştir.” |
| Tema | “DESIGN.md'deki koyu tema renkleriyle bu ekranın dark mode sürümünü oluştur.” |

## Araç kurallara uymuyorsa

- **Dosyayı istekte açıkça an.** “DESIGN.md'ye göre” ifadesi, dosyanın bağlama alınmasını sağlar.
- **Dosyayı kısa tut.** Çok uzun bir DESIGN.md, önemli kuralların gözden kaçmasına yol açabilir; tekrar eden açıklamaları çıkar.
- **Yasakları yaz.** “Gradyan kullanma”, “yalnızca bir vurgu rengi” gibi net sınırlar, genel tariflerden daha iyi sonuç verir.
- **Dosyayı doğrula.** `npx @google/design.md lint DESIGN.md` komutu, kırık token referanslarını ve düşük kontrastlı renk çiftlerini gösterir.
- **Token'ları koda da ekle.** CSS değişkenleri ya da Tailwind teması projede tanımlıysa araç doğru değeri “tahmin etmek” yerine hazır adı kullanır. Ayrıntılar için [Design token nedir?](/rehber/design-token-nedir/) rehberine bak.

## Sık sorulan sorular

### DESIGN.md'yi her istekte tekrar eklemem gerekir mi?

Hayır. Claude Code, Cursor ve Copilot'ta talimat dosyasından bir kez referans vermen yeterli; araç her oturumda okur. Talimat dosyası olmayan sohbet araçlarında dosyayı yeni sohbetin başında eklemek gerekir.

### Aynı projede birden çok araç kullanıyorsam ne yapmalıyım?

DESIGN.md'yi tek kaynak olarak kök klasörde tut; `CLAUDE.md`, `.cursor/rules/` ve `AGENTS.md` gibi dosyalardan yalnızca ona referans ver. Böylece kurallar tek yerde güncellenir.

### DESIGN.md ile Tailwind teması birlikte kullanılabilir mi?

Evet ve önerilir. DESIGN.md kuralları ve gerekçeleri anlatır, Tailwind teması aynı değerleri koda bağlar. MakeMyMD aynı tasarım sistemini her iki biçimde de dışa aktarır.

### Hazır bir marka tasarım sistemiyle deneyebilir miyim?

Evet. [Tasarım sistemleri kütüphanesinden](/tasarim-sistemleri/) bir markanın DESIGN.md dosyasını indirip projene koyarak aracın o tarzda ne ürettiğini hemen görebilirsin.