Design.md Nedir ve Nasıl Kullanılır? (Örneklerle)

Design.md nedir?

Design.md, AI kodlama ajanları veya AI oluşturucuların tutarlı kullanıcı arayüzleri üretmek için kullandığı renkler, tipografi, boşluklar ve bileşen kalıpları gibi tüm görsel kuralları içeren bir markdown dosyasıdır.

Claude ya da Cursor gibi bir ajana "modern ve temiz görün" gibi belirsiz talimatlar vermek yerine, projenizin kök dizinine bir design.md dosyası eklersiniz. Ajanlar buna erişir ve tasarladığı her şeye stilinizi otomatik uygular.

Design.md içinde neler var

design.md nasıl yapılandırılacağına dair kesin kurallar yoktur; ancak dosya genelde bir projenin görsel temel öğelerini tanımlayan net bölümlerden oluşur.

Renkler: Kesin hex kodları ve kullanım rehberiyle birincil paletler, nötr ölçekler ve anlamsal renkler (başarı, uyarı, hata).

Tipografi: Başlık ve gövde metni için font aileleri, boyut ölçekleri, kalınlıklar ve satır yüksekliği.

Boşluklar: Temel birim (genelde 4px veya 8px) ve padding, margin ile gap için kullanılan ölçek değerleri.

Bileşenler: Butonlar, inputlar ve kartlar gibi yaygın öğeler için border radius ve kenarlık stilleri dahil özel stil kuralları.

Derinlik: Katmanlı arayüzler için gölge değerleri ve derinlik ipuçları.

Dosyanın pratikte nasıl göründüğüne dair basit bir örnek:

## Renkler
- **Birincil** (#1A73E8): Butonlar ve linkler için ana marka rengi
- **Arka plan** (#FFFFFF): Sayfa arka planı
- **Yüzey** (#F8F9FA): Kartlar ve yükseltilmiş yüzeyler
- **Birincil metin** (#202124): Ana metin rengi
  
## Tipografi  
- **Başlık 1**: Inter, 32px, 700 ağırlık- **Gövde**: Inter, 16px, 400 ağırlık
  
## Bileşenler
- **Butonlar**: Birincil dolu (arka plan #1A73E8, beyaz metin, 8px radius)
- **Kartlar**: Beyaz arka plan, 1px solid #E8EAED kenarlık, 12px radius

Design.md örnekleri/şablonları

Sıfırdan bir DESIGN.md dosyası yazmanız gerekmez. Topluluk, hazır kullanılabilir tasarım sistemlerinden oluşan geniş kütüphaneler oluşturdu bile.

Awesome-design-md deposu

En popüler kaynak, VoltAgent tarafından sürdürülen awesome-design-md GitHub deposudur. Popüler geliştirici odaklı siteler ve teknoloji markalarından ilham alan, seçilmiş Design.md dosyaları koleksiyonu içerir.

Şu şirketlerin birebir tasarım sistemlerini yansıtan dosyalar bulabilirsiniz:

• Claude: Temiz editoryal düzenle sıcak terracotta vurgular

• Vercel: Geist fontuyla siyah-beyaz netlik

• Stripe: İmza mor gradyanlar ve zarif tipografi

• Linear: Ultra minimal, net ve mor vurgulu

• Airbnb: Sıcak mercan vurgular ve yuvarlatılmış UI öğeleri

DESIGNmd.ai

Bir diğer güçlü kaynak ise designmd.ai; 100’den fazla ücretsiz tasarım sistemi barındıran bir topluluk platformu. "dark", "saas", "minimal" veya "fintech" gibi etiketlere göre gezebilir ve ilgili markdown dosyasını doğrudan indirebilirsiniz.

Design.md nasıl kullanılır

AI ajanlarıyla iş akışınıza bir DESIGN.md dosyası eklemek son derece kolaydır.

Manuel yöntem

1. Yukarıdaki kaynaklardan birinden bir Design.md dosyası indirin ya da kendiniz yazın.

2. Dosyayı, agents.md ya da claude.md dosyalarınızın hemen yanına, projenizin kök dizinine bırakın.

3. AI kodlama ajanınıza (Claude Code, Cursor veya Lovable gibi) dosyaya bakmasını açıkça söyleyin. Örnek: “Bir fiyatlandırma sayfası oluştur ve tüm stil kararları için @DESIGN.md dosyasını kullan”.

Banani AI

Banani AI ve Google Stitch gibi modern AI UI tasarım editörleri, tasarımlar üretirken design.md dosyalarını otomatik olarak oluşturur ve günceller.

Banani, proje oluştururken tasarım stillerini özellikle netleştirir; böylece bunu elle yapmanız gerekmez. AI ile ürettiğiniz projenin görsel tercihleri değişirse, anında günceller; böylece her zaman güncel bir .md dosyanız olur. Kodlama ajanlarınızın en son sürüme erişmesi için MCP sunucusunu kullanabilirsiniz.

Design.md’nin oluşturucuları

agents.md gibi, vibe coding topluluğu da stil tercihlerini ayrı bir md talimat dosyasına taşımayı denemeye başladı.

Mart 2026’da Google, bunu yeni AI tasarım aracı Google Stitch’in bir parçası olarak ekledi. Stitch, oluşturduğu her ekranın ya da bileşenin tutarlı bir görsel dile uymasını sağlamak için bu dosyayı kullanır.

Her ne kadar oluşturanlar olmasalar da Google, nelerin ve hangi sırayla dahil edilmesi gerektiğine dair ilk bir "standartlaştırma" önerisi sundu.

design.md kullanmalı mıyım

Kullanıcı arayüzleri üretmek için AI ajanları kullanıyorsanız, workflow’unuza bir design.md dosyası eklemek yapabileceğiniz en yüksek etkili iyileştirmelerden biridir.

Bu, vibe coding'in büyük bir sorununu çözer: tüm kodlama ajanlarının varsayılan olarak takıldığı jenerik ve özensiz tasarım stilleri.

awesome-design-md deposundan bir dosya indirip projenize bırakmanız sadece otuz saniye sürer. Ortaya çıkan UI tutarlılığı iyileşmesi anında ve açıktır.