Design.md Nedir?
Design MD, yapay zeka kodlama ajanlarının veya yapay zeka mimarlarının renkler, tipografi, boşluklar ve bileşen şablonları dahil olmak üzere tutarlı kullanıcı arayüzleri oluşturmak için kullandığı tüm görsel kuralları içeren bir markdown dosyasıdır.
Claude veya Cursor gibi bir ajana "modern ve temiz görünsün" gibi belirsiz komutlar vermek yerine, proje kök dizininize bir design.md dosyası eklersiniz. Ajanlar buna erişir ve tasarladığı her şeye tam stillerinizi otomatik olarak uygular.
En İyi Yapay Zeka Uygulama Geliştiricileri (2026) >
Design.md'yi Kim Yarattı?
agents.md dosyasına benzer şekilde, "vibe kodlama" topluluğu stil tercihlerini ayrı bir md talimat dosyasına taşımayı denemeye başladı.
Mart 2026'da Google, bunu yeni yapay zeka tasarım aracı Google Stitch'in bir parçası olarak ekledi. Stitch, üretilen her ekranın veya bileşenin tutarlı bir görsel dile uymasını sağlamak için bu dosyayı kullanır.
Yaratıcısı olmasalar da Google, nelerin ve hangi sırayla dahil edilmesi gerektiğine dair ilk "standartlaştırma" önerisini sunmuş oldu.
Google Stitch 2026'da Gerçekten Bedava mı? >
Design.md Yapısı: Örnek
Design.md'yi nasıl yapılandıracağınıza dair katı kurallar yoktur, ancak dosya genellikle bir projenin temel görsel öğelerini tanımlayan net bölümlere ayrılır.
Renkler: Tam hex kodları ve kullanım kılavuzlarıyla birincil paletler, nötr ölçekler ve semantik renkler (başarı, uyarı, hata).
Tipografi: Başlıklar ve gövde metinleri için yazı tipi aileleri, boyut ölçekleri, kalınlıklar ve satır yükseklikleri.
Boşluklar: Dolgu, marj ve boşluklar için kullanılan temel birim (genellikle 4px veya 8px) ve ölçek değerleri.
Bileşenler: Kenarlık yarıçapı ve kenarlık stilleri dahil olmak üzere butonlar, girdiler ve kartlar gibi yaygın öğeler için özel stil kuralları.
Yükseklik (Elevation): Katmanlı arayüzler için gölge değerleri ve derinlik ipuçları.
İşte dosyanın pratikte nasıl göründüğüne dair basit bir örnek:
Design.md Dosyası Nasıl Oluşturulur?
Sıfırdan bir DESIGN.md dosyası yazmanıza gerek yok. Topluluk, kullanıma hazır tasarım sistemlerinden oluşan geniş kütüphaneleri çoktan oluşturdu.
Awesome-design-md (GitHub Deposu)
En popüler kaynak, VoltAgent tarafından yönetilen awesome-design-md GitHub deposudur. Popüler geliştirici odaklı web sitelerinden ve teknoloji markalarından ilham alan özenle seçilmiş bir Design.md dosyası koleksiyonu içerir.
Şu gibi şirketlerin tasarım sistemlerini birebir kopyalayan dosyalar bulabilirsiniz:
Claude: Net bir editoryal düzen ile sıcak terakota vurguları
Vercel: Geist yazı tipi ile siyah ve beyazın hassas uyumu
Stripe: Markayla özdeşleşen mor gradyanlar ve şık tipografi
Linear: Mor tonlarıyla ultra minimalist ve pürüzsüz hatlar
Airbnb: Sıcak mercan tonları ve yuvarlatılmış UI öğeleri
DESIGNmd.ai
Diğer bir harika kaynak ise 100'den fazla ücretsiz tasarım sistemine ev sahipliği yapan bir topluluk platformu olan designmd.ai'dır. "Koyu", "saas", "minimalist" veya "fintech" gibi etiketlere göre arama yapabilir ve ilgili markdown dosyasını doğrudan indirebilirsiniz.
DESIGN.md Jeneratörü (Figma Eklentisi)
Zaten Figma kullanıyorsanız, DESIGN.md Generator eklentisi dosyanızı tarayabilir ve renkleri, tipografiyi, boşlukları ve bileşenleri kullanıma hazır bir markdown dosyasına otomatik olarak aktarabilir. Anında tasarım sistemi aktarımı için bunu Claude Code, Cursor veya herhangi bir yapay zeka uygulamasına yapıştırın.
Tasarım Sistemi Jeneratörünü Ücretsiz Deneyin >
Design.md Nasıl Kullanılır?
Yapay zeka ajanlarıyla çalışırken DESIGN.md dosyasını iş akışınıza dahil etmek son derece basittir.
Manuel yöntem
Yukarıdaki kaynaklardan birinden bir Design.md dosyası indirin veya kendi dosyanızı yazın.
Dosyayı projenizin kök dizinine, agents.md veya claude.md dosyalarınızın hemen yanına bırakın.
Yapay zeka kodlama ajanınıza (Claude Code, Cursor veya Lovable gibi) komut verirken bu dosyayı referans almasını açıkça söyleyin. Örneğin: "Bir fiyatlandırma sayfası oluştur ve tüm stil kararları için @DESIGN.md dosyasını kullan".
Yapay Zeka UI Aracı yöntemi
Banani AI gibi modern yapay zeka kullanıcı arayüzü tasarım araçları, siz tasarımları oluştururken design.md dosyalarını otomatik olarak üretir ve günceller.
Banani, siz bir proje oluştururken tasarım stillerinin ne olduğunu netleştirerek bunu manuel olarak yapma ihtiyacını ortadan kaldırır. Yapay zeka ile oluşturduğunuz projenin görsel tercihleri değişirse, dosyayı anında günceller; böylece her zaman güncel bir .md dosyasına sahip olursunuz.
Kodlama ajanlarınızın en son sürüme erişebilmesi için MCP sunucusunu da kullanabilirsiniz.
Banani AI ile UI Tasarlayın, Ücretsiz >
Design.md Kullanmalı mıyım?
Kullanıcı arayüzleri oluşturmak için yapay zeka ajanları kullanıyorsanız, iş akışınıza bir design.md dosyası eklemek yapabileceğiniz en etkili geliştirmelerden biridir. Aslında, bununla hem vibe coding hem de vibe designing süreçlerinin en büyük sorununu tek seferde çözebilirsiniz: yapay zeka ajanlarının varsayılan olarak sunduğu o sıradan ve baştan savma tasarım stilleri.
Awesome-design-md deposundan veya bir Figma eklentisinden dosya indirip projenize eklemek bir dakikadan az sürer. Arayüz tutarlılığındaki artış ise anında ve net bir şekilde kendini gösterir.
Alternatif olarak, hemen tasarlamaya başlamak ve daha sonra kullanmak üzere anında bir design.md dosyası oluşturmak istiyorsanız, Banani AI UI Jeneratörü ile başlayın. Banani, tuval üzerinde (Design MD dosyasını taklit eden) bir tasarım sistemi oluşturur. Bu sistem, en son tasarım versiyonunuza göre gerçek zamanlı olarak güncellenir, düzenlenebilirdir ve tüm uygulama tasarım projeniz boyunca referans alınabilir.
Design.md Dosyası Hakkında SSS
Design.md nasıl yazılır?
Marka genel bakışıyla başlayın, ardından renklerinizi (hex kodları ve kullanım kılavuzu), tipografinizi (yazı tipleri, boyutlar, kalınlıklar), boşluk kurallarınızı (temel birim ve ölçek) ve bileşen stillerinizi belgeleyin. Net markdown başlıkları kullanın ve somut örnekler ekleyin, örneğin: "Birincil buton: #1A73E8 arka plan, beyaz metin, 8px köşe yarıçapı."
Bu, yapay zeka ajanlarına belirsiz talimatlar yerine izleyecekleri kesin kurallar verir.
Design.md dosyası gibi bir tasarım sistemi oluşturmak için Banani AI UI Tasarımcısını kullanabilirsiniz.
Design.md dosyasındaki MD ne anlama gelir?
MD, Markdown anlamına gelir. Okunması ve yazılması kolay, basit bir düz metin dosyası formatıdır (.md uzantısı). Markdown, içeriği yapılandırmak için temel sözdizimini (başlıklar için #, listeler için - gibi) kullanır ve bu da onu yapay zeka ajanlarının kolayca analiz edip anlayabileceği belgelendirmeler için mükemmel kılar.
Design.md, Google Stitch'te nasıl kullanılır?
Zaten bir design.md dosyanız varsa, Google Stitch'te yeni bir proje tasarlamaya başlarken bunu girdi olarak yüklemeniz en iyisidir. Design.md dosyasını referans olarak kullanmak için bir komut yazmanız gerekir. Örneğin: "Tüm stil kararlarında @design.md dosyasını kullanarak bir çalışan İK uygulaması kayıt arayüzü oluştur."
Stitch dosyayı okur ve renk, tipografi ve bileşen kurallarınızı otomatik olarak uygulayarak üretilen her ekranda tutarlılık sağlar.
