Hiç kod yazmadan bir web sitesi tasarlamak, kodlamak ve yayınlamak için Claude Design’da görsel bir tasarım oluşturup bunu ZIP olarak indirebilir, Claude Code ile bu tasarımı gerçek bir koda dönüştürüp bilgisayarınızda test edebilir, ardından SSH bağlantısıyla doğrudan hosting sağlayıcınıza (örneğin Hostinger) yükleyip canlıya alabilirsiniz. Bu rehberde sıfırdan yayına kadar tüm süreci, tek satır kod yazmadan nasıl tamamlayacağınızı anlatıyoruz. Bu, “vibe coding” akımının belki de en somut örneği: fikri anlatmak, sonucu görmek ve konuşarak düzeltmek üzerine kurulu, tamamen doğal dille yönetilen bir üretim süreci.
Süreç Genel Bakış: 4 Aşama
Kod yazmadan bir siteyi tasarım fikrinden gerçek, canlı yayında çalışan bir web sitesine taşımak dört ana aşamadan oluşur: (1) Tasarım — Claude Design’da görsel taslağı oluşturmak, (2) Kodlama — tasarımı Claude Code ile gerçek koda dönüştürmek, (3) Yerel test — kodu bilgisayarınızda çalıştırıp tasarımla birebir aynı olduğunu doğrulamak, (4) Yayın — SSH bağlantısıyla hosting sunucunuza yükleyip bir alt alan adında canlıya almak. Bu rehberde her aşamayı sırasıyla ele alıyoruz. Tasarım aracının detaylarını “Claude Design Nedir?” rehberimizde, WordPress bağlantısını ise Claude Code WordPress bağlantı rehberimizde ayrı ayrı ele almıştık; bu yazıda tüm süreci uçtan uca, statik bir site örneğiyle birleştiriyoruz.
Aşama 1: Claude Design’da Tasarım Oluşturma
- Claude Design’a girip mevcut markanıza veya referans aldığınız bir siteye ait görselleri (logo, fotoğraflar) yükleyin.
- Detaylı bir prompt hazırlayın: renk paleti, sayfa yapısı (tek sayfa/çok sayfa), tema seçenekleri (açık/koyu mod), grid/yerleşim stili, odak noktası (iletişim, buton, form) ve istediğiniz animasyon/efekt seviyesini net biçimde belirtin.
- İlk taslağı değerlendirin; genellikle ilk sonuç ham bir başlangıç noktasıdır. Header, footer, ikon gibi eksik kalan detayları belirtip yeniden düzenletin.
- Tasarımı onayladığınızda bir sonraki aşamaya geçin.
Önemli: Bu aşamada ne kadar zaman harcarsanız harcayın sorun değildir; tasarımı ne kadar iyi cilalarsanız, kodlama aşamasında o kadar az düzeltme yapmanız gerekir. Tasarım aşamasında harcanan her ek dakika, sonraki aşamalarda saatlerce sürebilecek geri dönüşleri önleyebilir.
Aşama 2: Tasarımı Claude Code’a Aktarma ve Kodlama
- Onayladığınız tasarımı Claude Design’da ZIP olarak indirin (doğrudan gönderim seçeneğine göre daha tutarlı sonuç verir).
- Bilgisayarınızda yeni bir proje klasörü oluşturun ve ZIP dosyasının içeriğini bu klasöre çıkarın.
- Bu klasörü bir kod editöründe (örneğin VS Code) Claude Code ile açın.
- Claude Code’a tasarımı koda dönüştürmesini isteyen bir prompt verin; sohbet dilini (Türkçe/İngilizce) ve teknoloji tercihinizi (basit bir site için genellikle HTML/CSS/JavaScript yeterlidir) belirtin.
- Claude Code, ZIP içindeki tasarım dosyalarını, README notlarını ve görselleri okuyarak kodlamaya başlar; genellikle birkaç netleştirici soru sorar (görselleri nereden kullanacağı, üretilen dosyaları hangi klasöre kaydedeceği gibi) ve cevaplarınıza göre ilerler.
Aşama 3: Yerel Ortamda Test Etme
Kodlama tamamlandığında Claude Code’dan tarayıcıda bir canlı önizleme açmasını isteyin. Bu aşamada tasarım ile kodlanmış hâli yan yana karşılaştırın: header/footer doğru mu, menü linkleri çalışıyor mu, ikonlar ve görseller doğru yerde mi, mobil görünüm bozuk mu kontrol edin. Küçük farklılıklar (eksik ikon, hafif renk kayması, hizalama bozukluğu gibi) bu aşamada oldukça normaldir ve Claude Code’a net bir dille belirtilerek genellikle tek bir istekle kolayca düzeltilebilir.
Aşama 4: SSH ile Hostinger’e Yükleyip Canlıya Alma
- Sitenizi yayınlamak istediğiniz bir alt alan adı (subdomain) oluşturun (örneğin proje.siteniz.com).
- Hosting panelinizde SSH erişimini etkinleştirip Claude Code’un ürettiği SSH anahtarını SSH Anahtarları bölümüne ekleyin.
- IP adresi, bağlantı noktası ve kullanıcı adı bilgilerini Claude Code’a iletin.
- Hangi alt alan adına, hangi klasöre kurulum yapılacağını belirterek yükleme işlemini başlatın.
- Claude Code bağlantıyı kurup dosyaları sunucuya aktarır; işlem tamamlandığında size bir onay bildirimi verir.
- Alt alan adınızı tarayıcıda açıp tüm bölümleri (header, hakkımızda, hizmetler, iletişim) tek tek kontrol ederek doğrulayın.
Bu dört aşamanın tamamının canlı uygulamasını yukarıdaki videoda izleyebilirsiniz.
Sık Yapılan 4 Hata
- Prompta yetersiz detay vermek. “Basit bir site yap” gibi belirsiz bir istekle başlamak, kullanışsız bir ilk taslakla sonuçlanır; renk, ton, bölüm yapısı gibi detayları en baştan netleştirmek zaman kazandırır.
- Tasarımı onaylamadan kodlama aşamasına geçmek. Tasarım aşamasında gözden kaçan bir sorun (eksik ikon, bozuk karanlık mod gibi), kodlama aşamasında düzeltmesi daha zor bir soruna dönüşebilir.
- Yerel testi atlayıp doğrudan canlıya almak. Bu, ziyaretçilerin hatalı bir sürümle karşılaşma riskini artırır; her zaman önce yerelde test edin.
- İşlem bittikten sonra erişim bilgilerini silmemek. SSH anahtarı ve bağlantı bilgileri, projeniz tamamlandıktan sonra hem hosting panelinden hem de yerel ortamınızdan temizlenmelidir.
Bu Süreçte Nelere Dikkat Etmelisiniz?
| Nokta | Neden Önemli |
|---|---|
| Token/kullanım limitlerinizi takip edin | Tasarım ve kodlama aşamaları özellikle detaylı projelerde ciddi miktarda token/kullanım kotası tüketebilir |
| Hassas bilgileri işlem bitince silin | SSH anahtarları ve bağlantı bilgileri iş bitince hosting panelinden ve Claude Code ortamından kaldırılmalıdır |
| İlk tasarımı mükemmel beklemeyin | Yapay zeka araçları iyi bir başlangıç noktası sunar; markanıza tam oturan bir sonuç için birkaç düzeltme turu normaldir |
| Yerel testi atlamayın | Doğrudan canlıya almadan önce yerel ortamda test etmek, sunucuda hatalı bir sürümün yayınlanmasını önler |
Bu Yöntem Kimler İçin Uygun?
Bu süreç; hızlıca bir prototip veya tek sayfalık bir tanıtım sitesi oluşturmak isteyen, teknik bilgisi sınırlı ama araçları doğru yönlendirebilen kullanıcılar için değerlidir. Ancak çok sayfalı, e-ticaret entegrasyonlu veya karmaşık iş mantığı gerektiren (özel form akışları, ödeme sistemleri, çoklu dil gibi) projeler için bu tamamen otomatik akış tek başına yeterli olmayabilir; böyle durumlarda üretilen kod, deneyimli bir geliştirici tarafından gözden geçirilip düzenlenmeli, gerekirse baştan sağlam bir mimariyle yeniden kurgulanmalıdır. Bu yöntemi bir “fikri hızlıca görünür kılma” aracı olarak düşünmek, nihai üretim ortamı için tam otomatik bir çözüm olarak beklemekten daha sağlıklı bir yaklaşımdır.
Sık Sorulan Sorular
Bu yöntemle tamamen ücretsiz bir site yapılabilir mi?
Claude’un kendisi bir kullanım/token limitine tabidir ve hosting/domain genellikle ücretlidir; bu yüzden “tamamen ücretsiz” değildir, ama geleneksel bir geliştiriciye ödenecek ücrete kıyasla önemli ölçüde daha düşük maliyetli bir prototipleme yöntemidir.
Bu şekilde üretilen bir site WordPress’e mi dönüşür?
Hayır. Bu süreçte üretilen site genellikle statik HTML/CSS/JavaScript koduyla oluşturulur; WordPress’e dönüştürmek istiyorsanız bu ayrı bir teknik adımdır.
Kaç saatte bir site tamamlanabilir?
Basit, tek sayfalık bir site için tasarım ve kodlama aşamaları toplamda birkaç saat içinde tamamlanabilir; bunun büyük kısmı yapay zekanın işlemesini beklemekle geçer. Karmaşıklık arttıkça bu süre uzar.
Yayınladıktan sonra siteyi kendim güncelleyebilir miyim?
Evet, hem üretilen kodu bir geliştirici yardımıyla manuel düzenleyebilir hem de Claude Code’a tekrar bağlanıp yeni değişiklik istekleri vererek güncelleme yaptırabilirsiniz.
Bu yöntem profesyonel bir web tasarım hizmetinin yerini tutar mı?
Hızlı prototipleme ve basit siteler için güçlü bir başlangıç noktasıdır, ancak marka kimliğine tam oturan, SEO açısından optimize edilmiş ve teknik olarak sağlam bir kurumsal site için profesyonel bir web tasarım sürecinin yerini tam olarak tutmaz.
Alt alan adı yerine doğrudan ana domaine mi yayınlamalıyım?
Yeni bir tasarımı test ederken bir alt alan adı (subdomain) kullanmak daha güvenlidir; bu şekilde mevcut ana siteniz etkilenmeden yeni tasarımı canlı ortamda test edebilirsiniz. Tasarımdan memnun kaldığınızda ana domaine taşıma işlemini ayrı bir adım olarak planlayabilirsiniz.
Vibe Coding ile Üretilen Tasarımı Profesyonel Bir Siteye Dönüştürmek İster misiniz?
Claude Design ve Claude Code gibi araçlarla hızlı bir prototip oluşturduysanız ve bunu marka kimliğinize tam oturan, SEO uyumlu ve teknik olarak sağlam bir siteye dönüştürmek istiyorsanız Vibe Coding ve web yazılım hizmetlerimize göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz. Siz sadece anlatın, gerisini biz hallederiz.
