İçeriğe atla
  • Reels kapağı: Claude'u tasarım dehasına çeviren 8 site. Altında 8 sitenin alan adı.

Araç · Web

Claude'u tasarımda güçlendiren 8 örnek site ve hazır istemleri

Claude'dan site istediğinde sonuç sıradan çıkıyorsa ona neye benzemesi gerektiğini göstermiyorsundur. Örneği göster, kendi markana uyarlasın.

Kısa cevap

Claude'a "bana güzel bir site yap" demek ortalama bir sonuç verir, çünkü neye benzemesi gerektiğini bilmez. motionsites.ai, navbar.gallery, footer.design, cta.gallery, 404s.design, unsection.com, bentogrids.com ve 60fps.design gerçek sitelerden toplanmış örnek galerileri: beğendiğin bölümün ekran görüntüsünü alıp Claude'a veriyorsun, o da düzeni senin markana göre yeniden yazıyor. Biri hariç hepsi ücretsiz gezilebiliyor; motionsites'ın istemlerinin çoğu ücretli. Birebir kopyalama değil, desen (düzen, boşluk, sıralama) örnek alınır. DijiKoçum'un PDF'i 8 sitenin her biri için hazır istemi ve 12 sektörde menü, bölüm sırası, buton metni ve 404 fikrini veriyor.

5 adım · 2 dk · · Turan Yasin Salcı

Adım adım · 5 adım

0/5 işaretli · yalnızca bu tarayıcıda saklanır

  1. Örneği bul.

    İşine yakın bir örnek seç; filtreleri kullan (sektör, stil, açık/koyu).

  2. Yalnız o bölümün ekran görüntüsünü al.

    Windows'ta Win + Shift + S, Mac'te Cmd + Shift + 4. Tam sayfa değil, tek bölüm.

  3. Claude'a markanı bir kez anlat.

    claude.ai'de yeni sohbet aç, görseli ekle ve önce bu mesajı gönder:

    Benim işim: [işletme adı], [sektör], [şehir].
Renklerim: [ana renk kodu], [ikinci renk kodu]. Yazı tipim: [font ya da 'sen öner'].
Sitem [WordPress / Wix / Framer / düz HTML] üzerinde.
Bundan sonra vereceğim ekran görüntüleri başka sitelerden örnek.
Birebir kopyalama: düzeni, boşlukları ve hiyerarşiyi örnek al;
metni, rengi ve görseli benim markama göre yaz.
Kod: tek dosya HTML + Tailwind (CDN), telefonda düzgün görünsün.
Metinler Türkçe, kısa ve doğal. Bilmediğin bilgiyi uydurma, [boşluk] bırak.

  4. O sitenin istemini yapıştır.

    Köşeli parantezleri kendi bilginle doldur. Menü (navbar.gallery) örneği:

    Ekteki görsel bir üst menü (navbar) örneği.
Aynı düzeni benim sitem için yaz: logo solda, menü ortada, sağda tek buton.
Menü öğelerim: [Ana sayfa, Hizmetler, Fiyatlar, Hakkımızda, İletişim].
Buton metni: [Randevu al].
Masaüstünde yatay dursun, telefonda hamburger menüye dönsün.
Sayfa aşağı kayınca menü üstte sabit kalsın.
Tek dosya HTML + Tailwind ver.

  5. Tek cümleyle düzelt, sonra yayına al.

    Beğenmediğin yeri tek cümleyle düzelttir ("Bölümler arası boşluğu iki katına çıkar"). Kodu sitene ekle, yayından önce telefondan açıp menüye ve butonlara bas.

Nasıl ölçersin?

Yeni bölümü yayına almadan önce ve sonra bir hafta, o bölümdeki butona tıklanma sayısını (GA4 ya da site oluşturucunun istatistiği) karşılaştır. Tek seferde tek bölüm değiştir ki farkın nereden geldiğini bil.

Ücretsiz · PDF

8 istemin tam hâli ve sektörüne göre site bölümleri (PDF) indir.

Bu sayfadaki adımların yazdırılabilir, işaretlenebilir sürümü. Giriş ya da üyelik istemez.

Kontrol listesini indir

Kaynaklar

  • D
    DijiKoçum Claude tasarım siteleri rehberi (8 site, 8 istem, 12 sektör)Kendi verimiz · kontrol: 10 Ekim 2026

[A] birincil kaynak · [B] sektör araştırması · [C] pratisyen · [D] kendi verimiz

Sık sorulan sorular

Bu siteler Claude'a bağlanıyor mu?

Hayır. Gerçek sitelerden toplanmış örnek galerileri. Sen ekran görüntüsünü alıp Claude'a veriyorsun; Claude görselleri okuyabiliyor.

Hepsi ücretsiz mi?

Biri hariç hepsi ücretsiz gezilebiliyor. motionsites.ai'de gezmek açık ama istemlerin çoğu ücretli üyelikte; 60fps.design'ın tüm filtreleri PRO üyelikte (10 Ekim 2026).

Başka sitenin tasarımını kopyalamak sorun olur mu?

Logoyu, fotoğrafı ve metni alma; yalnız deseni örnek al. Claude'a "birebir kopyalama" demenin sebebi bu.

Sonraki adım

Sitene birlikte bakalım.

Ücretsiz dijital kontrol: sitenin, reklamlarının ve yapay zekâ görünürlüğünün sağlık skoru ve önce yapılacak işler. 3 dakika.

Ücretsiz dijital kontrol Web hizmetimiz

Sıradaki rehberler