Yapay Zeka ile Beğendiğin Sitenin Tasarımını Çal: Tek Dosyalı Çözüm
Yapay zekanın kodladığı siteler neden birbirinin kopyası ve ruhsuz görünür? Çünkü yapay zekanın kendi tasarım zevki yoktur. Çözüm paragraflarca prompt yazmak değil; beğendiğin bir sitenin tüm tasarım dilini tek bir DESIGN.md dosyası olarak Claude veya Cursor'a aktarmaktır.
Refero Kütüphanesi & Claude / Cursor Uyumlu
1 Dosya
Tüm renkler, tipografi ve bileşen kuralları
4 Adım
Sıfır kodlama ile Claude veya Cursor'a aktarım
%100
Tahmin yok: Gerçek tasarım kurallarına sadık üretim
Yapay zekaya "Bana modern, lüks ve şık bir portfolyo / SaaS web sitesi yap" dediğinizde, yapay zekanın elinde tutunabileceği somut bir tasarım kılavuzu yoktur.
Bu yüzden font kombinasyonlarını, satır aralıklarını, buton kenar yuvarlaklıklarını ve renk paletlerini tahmin etmeye çalışır. Herkes benzer şekilde istediğinde ise interneti dolduran o sıradan, güvenli ve unutulabilir "AI şablonu" ortaya çıkar.
Çözüm Daha Akıllı Bir Prompt Değildir
Çözüm, yapay zekaya tasarım zevkini kelimelerle tarif etmeye çalışmak değil; profesyonel tasarımcıların oluşturduğu gerçek bir web sitesinin kurallarını tek bir dosyada AI'ın önüne koymaktır.
02 // ÇÖZÜM DOSYASI
Her Şeyi Değiştiren Dosya: DESIGN.md
Bahsettiğimiz dosya bir DESIGN.md dosyasıdır ve bunu Refero DESIGN.md Kütüphanesi'nden tek tıkla temin edebilirsiniz.
Refero, dünyaca ünlü tasarım ödüllü web sitelerinin gerçek tasarım sistemlerini tek bir markdown dosyasında toplayan devasa bir kütüphanedir. Bu tek dosya sitenin:
Renk Paletini: Arka plan, yüzey, vurgu, metin ve kenarlık HEX kodları.
Tipografi Hiyerarşisini: Font aileleri, ağırlıklar, başlık-gövde ölçekleri.
Boşluk & Izgara (Grid) Ritimlerini: Padding, margin, gap ve container sınırları.
Bileşen Kurallarını: Butonlar, kartlar, border-radius, gölge ve hover efektleri.
Bu dosya tamamen yapay zekanın (Claude, Cursor, Antigravity, Codex) okuması için optimize edilmiştir. Artık AI tahmin yürütmez; verilen kurallara harfiyen uyar.
03 // İŞ AKIŞI
4 Adımda Nasıl Uygulanır?
Bu yöntemi uygulamak için tek satır kod yazmanıza gerek yok. Akış 4 basit adımdan ibarettir:
01
Refero Kütüphanesine Git & Tarzını Seç
styles.refero.design adresine gir. Kendi projenin hissettirmek istediği ruha en yakın web sitesini seç (Minimalist, Dark SaaS, Bold Editoryal vb.).
02
Tek Tıkla DESIGN.md Dosyasını İndir
Beğendiğin sitenin detay sayfasına girip sağ üstteki "Download DESIGN.md" butonuna tıkla. Sitenin tüm tasarım dili tek dosyada elinde.
03
AI Asistanına Kuralları Tanıt
İndirdiğin dosyayı Claude Project / Skill olarak yükle veya Cursor / Antigravity kullanıyorsan proje kök dizinine koyup .cursorrules veya sistem promptunda referans göster.
04
Agent Modunda Sitene Kodlat
AI'a aşağıdaki hazır build promptunu ver ve siteni bu kurallara göre inşa etmesini söyle. Yapay zeka tahmin etmeyi bırakıp, ödüllü bir tasarımın kurallarını sitene uygulasın.
04 // HAZIR PROMPT
Yapay Zekaya Verilecek Özel Build Promptu
Tasarım dosyasını yükledikten sonra yapay zekaya vermen gereken prompt tam olarak budur. Köşeli parantez içindeki alanları kendi projene göre düzenleyip kullan:
AI BUILD PROMPT
Bana yüklediğim [Tasarım Sistemi Adı] tasarım dilini ve kurallarını kullanarak eksiksiz bir web sitesi / landing page geliştir.
Tasarım sistemi içerisindeki tipografi ölçeklerini, renk paletini, boşluk (spacing) ritmini, buton stillerini ve kart bileşenlerini birebir uygula.
İçereceği Bölümler:
1. Hero Bölümü (Vurucu başlık, açıklama ve birincil CTA butonu)
2. Hakkımda / Değer Teklifi Bölümü
3. Projeler / Özellikler Bölümü
4. İletişim / Form Bölümü
Kritik Kurallar:
- Yüklenen tasarım sistemi dışına asla çıkma; kafana göre yeni font, renk veya orantısız boşluklar türetme.
- Sayfayı tamamen responsive (mobil ve tablet uyumlu) kodla.
- Tüm etkileşimli buton ve kartlara tasarım sistemindeki hover ve geçiş efektlerini tanımla.
05 // DOSYA ANATOMİSİ
Bir DESIGN.md Dosyasının İçi Nasıl Görünür?
Refero'dan indirdiğiniz veya kendiniz hazırlayabileceğiniz bir tasarım sistemi dosyasının yapay zeka tarafından nasıl okunduğunu görmek için aşağıdaki örneği inceleyebilirsiniz:
Ödünç alacağınız tasarım, sitenizin kalite tavanını belirler. Editoryal ve sakin bir dergi sitesi ile enerjik ve koyu temalı bir SaaS yazılım sitesinin tasarım kuralları birbirine uymaz. Kodlamaya başlamadan önce projenizin ruhunu yansıtan bir tasarım sistemi seçin.
02
Bölüm Bölüm İlerleyin (Section by Section)
Tüm web sitesini tek bir komutla bitirmeye çalışmayın. Önce Hero bölümünü kodlatın, tasarım sistemine tam uyup uymadığını kontrol edin. Onayladıktan sonra sırasıyla Özellikler, Projeler ve İletişim bölümlerine geçin. Adım adım ilerlemek yapay zekanın tasarım dilinden sapmasını %100 engeller.