Awesome Design.MD - Ünlü web sitelerinin tasarım sistemlerini kendi sitenize uygulayın

 (github.com/VoltAgent)
117 puan yazan xguru 24 일 전 | 5 yorum | WhatsApp'ta paylaş
  • DESIGN.md, Google Stitch'in ortaya koyduğu bir kavram olup yapay zeka ajanlarının okuyup tutarlı bir UI üretmesi için hazırlanan metin tabanlı bir tasarım belgesidir
  • Figma, JSON şeması veya ayrı bir araç zinciri olmadan, proje kök dizinine yalnızca tek bir Markdown dosyası kopyalamak AI kodlama ajanının UI stilini hemen tanıması için yeterli
  • Mevcut AGENTS.md ile eşleşir; DESIGN.md ise görsel görünüm ve hissi tanımlar
  • Her dosya; renk paleti, tipografi, bileşen stilleri, yerleşim, duyarlı davranış gibi 9 standart bölümden oluşur
  • Her site için DESIGN.md + preview.html + preview-dark.html şeklinde 3'lü set sunulur
  • Claude, Vercel, Stripe, Notion, Figma, Cursor gibi AI·geliştirici araçları·fintek·kurumsal 60'tan fazla hizmetin tasarım sistemi yer alır
    • İstediğiniz sitenin DESIGN.md dosyasını proje köküne kopyalayıp AI ajanına UI'ı bu dosyaya referans vererek oluşturmasını söyleyin
    • "Buna benzeyen bir sayfa oluştur" demeniz yeterli; orijinal siteyle eşleşen bir UI üretilebilir
  • MIT lisansı

Her DESIGN.md dosyasının yapısı

  • Stitch DESIGN.md formatını izler ve aşağıdaki 9 bölümle genişletilmiştir

    # Bölüm Kapsadığı içerik
    1 Visual Theme & Atmosphere Ruh hali, yoğunluk, tasarım felsefesi
    2 Color Palette & Roles Renk adı + HEX + işlevsel rol
    3 Typography Rules Yazı tipi ailesi, tam hiyerarşi tablosu
    4 Component Stylings Butonlar, kartlar, giriş alanları, gezinme ve durumlar
    5 Layout Principles Boşluk ölçeği, grid, kenar boşluğu felsefesi
    6 Depth & Elevation Gölge sistemi, yüzey katmanları
    7 Do's and Don'ts Tasarım yönergeleri ve anti-pattern'ler
    8 Responsive Behavior Breakpoint'ler, dokunma hedefleri, küçültme stratejisi
    9 Agent Prompt Guide Hızlı renk referansı, anında kullanılabilir prompt'lar

Dahil edilen koleksiyonlar

  • AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
  • Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
  • Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
  • Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
  • Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
  • Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

İlgili okumalar

5 yorum

 
hidarite 24 일 전

Fikir iyi ve kullanışlı gibi görünüyor ama...
Web tasarımının da telif hakkı vardır herhalde,
bunu bu şekilde olduğu gibi kopyalayıp uygulamanın telif hakkı açısından bir sorun yaratıp yaratmayacağını, ticari etik açısından bir sorun olup olmayacağını merak ediyorum.
 
tsboard 18 일 전

Benim de aklıma hemen bu geldi. Son zamanlarda sanki yapay zeka servislerinin ya da ajanlarının bir şekilde hukuk üstü yetkilere sahip olduğunu doğrudan varsayıyorlar. Böyle yarı yarıya gözler kapalı şekilde ilerlemek gerçekten olur mu, diye düşündürüyor...
 
kaydash 23 일 전

Güzelmiş. Frontend ve tasarımla uğraşanlar genelde buna benzer şeyleri önceden hazırlayıp öyle başlıyor.
 
m00nlygreat 24 일 전

Ama genelde tasarım sistemi frontend framework'ünün içinde kod parçaları halinde bulunur; bunu ortak olarak kullanmak gerekmez mi..?

DESIGN.md'yi takip etmek, sanki o renkleri ve yönergeleri her seferinde keyfi olarak yeniden üreteceğiz anlamına geliyor gibi ...
 
hmmhmmhm 24 일 전

Bunun basit bir kopyalama için değil, çeşitli tasarım sistemlerini temel alarak yeni bir tasarım sistemi oluşturmak amacıyla kullanılması iyi olur gibi görünüyor.