Skip to content
← Tüm Yazılar

Tasarım & UI/UX

DESIGN.md Akımı: Vibe Coding Yaparken Stripe ve Linear Estetiğini Yakalamak

Yapay zekâya 'modern bir dashboard yap' dediğimde çıkan mor gradient'li, aşırı yuvarlatılmış şablonlardan bıkmıştım. Projelerimin köküne tek bir DESIGN.md dosyası atarak ajanların nasıl dünya standartlarında UI ürettiğini bizzat deneyimledim. 116 bin yıldızlı reponun detayları.

Tarih 20 Eylül 20269 dk okuma
DESIGN.md Akımı: Vibe Coding Yaparken Stripe ve Linear Estetiğini Yakalamak

Vibe coding (yapay zeka ile sadece sohbet ederek ürün geliştirme) akımı benim geliştirme hızımı en az üçe katladı. Ancak dürüst olmak gerekirse ilk zamanlar ortaya çıkan arayüzlerden utanıyordum: anlamsız mor-mavi gradyanlar, okunaksız soluk gri metinler, aşırı parlatılmış cam (glassmorphism) efektleri ve her yerde aynı duran generic butonlar.

VoltAgent topluluğunun 116 bin yıldıza ulaşan awesome-design-md reposunu projelerimde denediğimde bu dertten tamamen kurtuldum. Mantık o kadar sade ki şaşırıyorsunuz: Apple, Stripe, Linear, Vercel, Supabase ve Raycast gibi dünyanın en iyi tasarım kültürüne sahip 70'ten fazla markasının tasarım dili tersine mühendislikle çözülmüş ve tek bir Markdown belgesine özetlenmiş.

DESIGN.md Dosyasının Sağladığı 4 Somut Standart

Prompt'a 'güzel yap' demek modeli kararsız bırakırken, bir DESIGN.md ajana net matematiksel sınırlar çiziyor:

  • Kalibre Edilmiş Nötr Renkler: Sıradan gri (#888) yerine sıcak slate veya soğuk çinko tonlarının, katmanlı arka planların (layer-0, layer-1, layer-2) net hex kodları.
  • Katı Tipografi Hiyerarşisi: Başlık ve gövde metinleri arasındaki oranlar (örneğin 12px mikro etiketlerde geniş harf aralığı - tracking-wider).
  • Radius ve Border Disiplini: Buton ve kartların kaç piksel yuvarlanacağı (Linear sadeliğinde 6-8px, Apple tarzında 12-16px) sabitleniyor.
  • Anti-Pattern Yasakları: 'Asla parlak mor gradient basma', 'Gereksiz drop-shadow kullanma', 'Tablolarda sıkışık satır bırakma' gibi katı kurallar ajanın elini kolunu bağlıyor.

Kendi Projeme Nasıl Dahil Ediyorum?

add-design-md.sh
# İstediğiniz markanın stilini doğrudan projenizin köküne çekin
# Örnek: Linear tasarım stilini projenin köküne DESIGN.md olarak indirme
curl -o DESIGN.md https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/brands/linear.md

# Claude Code'da test ederken tek cümle yeterli:
# "Kök dizindeki DESIGN.md dosyasını incele ve tüm bileşenleri bu estetiğe göre kodla."

Kendi sitemde ve geliştirdiğim SaaS panellerinde bu yönteme geçtikten sonra aldığım geri bildirimler tamamen değişti. Artık insanlar 'Bunu yapay zeka mı yaptı?' demiyor; 'Tasarımcınız kim?' diye soruyor. Vibe coding yapan herkesin cephanesinde mutlaka bulunması gereken bir hazine.