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

Design.md nedir

Design MD, AI kodlama ajanlarının veya AI builders'ların tutarlı kullanıcı arayüzleri oluşturmak için kullandığı tüm görsel kuralları içeren bir markdown dosyasıdır; renkler, tipografi, spacing ve bileşen kalıpları buna dahildir.

Claude veya Cursor gibi bir ajana "modern ve temiz görünsün" gibi belirsiz komutlar vermek yerine, projenizin root dizinine bir design.md dosyası bırakırsınız. Ajanlar buna erişir ve tasarladığı her şeye tam stilinizi otomatik uygular.

Design.md içinde neler var

design.md yapısı için katı kurallar yoktur; ancak dosya genelde bir projenin görsel temelini tanımlayan net bölümlere ayrılır.

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

Tipografi: Başlıklar ve gövde metni için font aileleri, boyut skalaları, ağırlıklar ve satır yükseklikleri.

Aralık: Padding, margin ve boşluklar için kullanılan temel birim (genelde 4px veya 8px) ve ölçek değerleri.

Bileşenler: Butonlar, input'lar ve kartlar gibi yaygın öğeler için border radius ve border stilleri dahil net stil kuralları.

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

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

## Colors
- **Primary** (#1A73E8): Main brand color for buttons and links
- **Background** (#FFFFFF): Page background
- **Surface** (#F8F9FA): Cards and elevated surfaces
- **Text Primary** (#202124): Main text color
  
## Typography  
- **Heading 1**: Inter, 32px, 700 weight- **Body**: Inter, 16px, 400 weight
  
## Components
- **Buttons**: Primary filled (bg #1A73E8, white text, 8px radius)
- **Cards**: White bg, 1px solid #E8EAED border, 12px radius

Design.md örnekleri/şablonları

Sıfırdan bir DESIGN.md dosyası yazmanız gerekmez. Topluluk, kullanıma hazır geniş tasarım sistemi kütüphaneleri oluşturdu bile.

Awesome-design-md deposu

En popüler kaynak, VoltAgent tarafından yönetilen awesome-design-md GitHub deposudur. Popüler geliştirici odaklı web siteleri ve teknoloji markalarından ilham alan, özenle seçilmiş bir Design.md koleksiyonu içerir.

Şu şirketlerin birebir tasarım sistemlerini taklit eden 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: Aşırı minimal, hassas ve mor vurgulu

• Airbnb: Sıcak koral 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 platformudur. "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 ajanlarla bir DESIGN.md dosyasını iş akışınıza eklemek son derece kolaydır.

Manuel yöntem

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

2. Dosyayı, agents.md veya 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 referans vermesini açıkça söyleyin. Örneğin: “Bir pricing page 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, siz tasarım üretirken design.md dosyalarını otomatik oluşturur ve günceller.

Banani, proje oluştururken tasarım stillerinin ne olduğunu özellikle netleştirir; böylece bunu elle yapma ihtiyacı ortadan kalkar. AI ile oluşturduğunuz projenin görsel tercihleri değişirse, dosyayı 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 oluşturucu

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ının bir parçası olarak ekledi: Google Stitch. Stitch, oluşturduğu her ekranın veya bileşenin tutarlı bir görsel dile uymasını sağlamak için bu dosyayı kullanır.

Onlar yaratıcı olmasa da Google, neyin ve hangi sırayla eklenmesi gerektiğine dair ilk "standardizasyon" önerisini yaptı.

design.md kullanmalı mıyım

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

Vibe coding'in büyük bir sorununu çözer: tüm kodlama ajanlarının varsayılan olarak döndüğü genel ve dağınık tasarım stilleri.

awesome-design-md deposundan bir dosya indirmek ve projenize bırakmak sadece otuz saniye sürer. Sonuçta UI tutarlılığındaki iyileşme anında ve nettir.