Claude'u kullanarak bir saatten kısa sürede 9 web sitesi oluşturdum.

ChatGPT, Gemini ve Claude gibi sohbet robotları, hiçbir programlama deneyiminiz olmasa bile kodlamayı her zamankinden daha kolay hale getiriyor. "öneri üzerine kod yazma"Kullanıcılar şunları yapabilir: Web siteleri oluşturun Sadece birkaç dakika içinde, hatta basit bir komut vererek bile pratik uygulamalar geliştirebilirsiniz.

Claude ile Bir Saatten Kısa Sürede 9 Web Sitesi Oluşturdum: Nasıl Gerçekleştiğine Dair Kapsamlı Bir Rehber | Tom'un Rehberi

Ben de "ilham verici kodlama" konusunda deneyler yapıyorum ve yakın zamanda abonelikle tek oturumda beşe kadar web sitesi oluşturabileceğinizi keşfettim. Claude Ücretsiz. Sonrasında hizmeti yeniden kullanmak veya Cloud Pro'ya yükseltmek için beş saat beklemeniz gerekecek.

Bir test yaptım Claude Bir saatten kısa sürede dokuz benzersiz web sitesi oluşturdum. İşte sonuçlar.

1. Eski atari oyunları için açılış sayfası

Ekran görüntüsüİddia:"Neon tarzı, piksel yazı tipi, titreşimli animasyonlu arka plan ve sahte bir 'klasik arcade' hissi yaratan üç büyük, aydınlatılmış düğmeyle eski tarz bir arcade oyun tasarımı. Düğmelerin üzerine geldiğinizde ses efektleri eklendi."

Retro atari oyunlarından ilham alan bu neon temalı site, gerçek bir 80'ler atari salonu havası veriyor. Piksel sanatı gerçekten eğlenceli ve her düğmenin kendine özgü etkileşimli ses efekti var. Parlayan köşe vurguları ve incelikli glitch efektleriyle tasarım tam da umduğum gibiydi: duyarlı, klavye dostu ve gerçek oyunlarla eşleştirilmeye hazır. Genel olarak, bu site sanki klasik bir atari salonuna adım atmışsınız gibi hissettiriyor.

2. Basit Tarif Blogu

Ekran görüntüsü

İddia:"Bir tarif blogu için sade bir ana sayfa tasarımı. Saf beyaz bir arka plan, zarif serif yazı tipleri ve üç tarif kartından oluşan bir ızgara. Her kartta bir resim, tarif başlığı ve malzemeleri gösteren bir gezinme efekti bulunmalıdır. Mobil uyumlu olsun."

Bir tarif blogu için bu sade ana sayfa şık ve sade. Mobil uyumlu tasarımı, malzemeleri görüntülemek için dokunarak kolay dokunmatik etkileşimler sunarak mobil kullanım için ideal hale getiriyor. Tipografi ve aralıklar tüm ekran boyutlarında iyi çalışıyor.

Tasarım, sade işlevsellik ve sofistike tipografi arasında mükemmel bir denge kuruyor. Bileşenlerin üst üste binen animasyonları gibi benzersiz detaylar, tüm sayfayı bir araya getirerek ona birinci sınıf ve davetkar bir görünüm kazandırıyor.

3. Bilimkurgu Esintili Girişim Sayfası

Claude'un web sitesinin ekran görüntüsü

İddia: "Hayali bir uzay madenciliği şirketi için fütüristik, tek sayfalık bir web sitesi tasarlayın. Ekranı dolduran yıldızlardan oluşan hareketli bir arka plan, kalın metalik metinlerle yazılmış bir görev beyanı ve ekranda yavaşça uçan hareketli bir uzay gemisi ekleyin. 'Filoya Katılın' yazan bir harekete geçirici mesaj düğmesi ekleyin."

80'lerin atari oyunlarından bilimkurgu filmlerine kadar, bu sitede parıldayan yıldızlar, uçan kuyruklu yıldızlar ve sürüklenen uzay parçacıklarıyla dolu, ekranı dolduran yıldızlı bir arka plan ve ekranda uçan sevimli bir uzay gemisi yer alıyor. Kalın metalik baskı, parlak metin ve titreşen düğmeler, keşif duygusu katıyor.

Fare izleri, klavye gezintisi ve paralaks kaydırma gibi etkileşimli öğeler kullanıcı deneyimini gerçekten canlandırıyor. Claude Detaylarıyla mükemmel bir çalışma.

4. Çocuk hikayeleri sitesi

Sitenin ekran görüntüsü

İddia: "Çocuk hikaye kitapları için eğlenceli ve renkli bir web sitesi tasarımı. Büyük, ilgi çekici yazı tipleri, hayvan çizimleri ve basit animasyonlarla üç kısa hikaye 'sayfasını' çeviren bir düğme kullanın. Her sayfada renk değiştiren bir arka plan ekleyin."

Claude, büyüleyici bir çekicilik saçan göz alıcı bir web sitesi tasarladı. Hikaye, Felix adlı bir tilki, Benny adlı bir ayı ve Bella adlı bir kelebeğin üç etkileşimli sayfada renkli bir maceraya atıldığı üç hayvanı konu alıyor.

Sitenin her sayfasında eğlenceli arka plan renk geçişleri, canlı hayvan emojileri ve akıcı çevirme animasyonları bulunuyor; bunların hepsi de siteyi gerçek ve etkileşimli bir kitap gibi hissettiriyor. Yazı tipleri net ve neşeli, eklenen animasyonlu detaylar ilgi çekici ve genel olarak bu site, özellikle ekran başında vakit geçirmeye alışkın genç okuyuculara hitap ediyor.

5. Etkileşimli veri panosu

Claude'un web sitesinin ekran görüntüsü

İddia:Sahte veriler kullanarak etkileşimli grafikler içeren modern, koyu temalı bir veri panosu oluşturun. Bir kenar çubuğu, üstte canlı bir saat ve üç grafik ekleyin: bir çubuk grafik, bir çizgi grafik ve bir pasta grafik. Bölümler arasında gezinme efektleri ve yumuşak geçişler ekleyin.

Bu web sitesini bir iş planı örneği olarak oluşturmaya karar verdim. Koyu temalı kontrol paneli, akıcı animasyonlara sahip şık bir kenar çubuğu da dahil olmak üzere, istemde talep ettiğim tüm özellikleri içeriyor. Duyarlı tasarım hem masaüstü hem de mobil cihazlarda çalışıyor ve akıcı geçişlere sahip dört ana bölüm içeriyor.

Başlıktaki gerçek zamanlı saati beğendim ve etkileşimli grafikler harika bir ekleme olmuş. Nasıl eklendiğini takdir ediyorum. Claude Görünümü gerçekten görselleştirebilmem için sahte veriler.

6. Zen Bahçesi Meditasyon Sitesi

Claude'un web sitesinin ekran görüntüsü

İddia: "Yumuşak degradeli bir arka plan, altta hareketli akan su ve ekrana yavaşça yapraklarını bırakan bir kiraz çiçeği içeren basit, tek sayfalık bir meditasyon web sitesi oluşturun. Rahatlatıcı bir ortam müziği çalan ve ilham verici bir söze geçiş yapan büyük bir "Meditasyona Başla" düğmesi ekleyin."

Bu sitenin ortaya çıkardığı sonuçtan çok memnun kaldım. Şeftali, pembe, mercan ve mor gibi yumuşak tonlardaki degradeli arka plan, sakinliği ve farkındalığı teşvik etmeye yardımcı oluyor. Site, meditasyon için mükemmel, gerçekten dingin bir atmosfer yaratıyor.

7. Cyberpunk Pazarı

Claude'un web sitesinin ekran görüntüsü

İddia: "Fütüristik bir sokak pazarı içeren neon siberpunk esintili bir web sitesi oluşturun. Fareyle üzerine gelindiğinde glitch efektleri, yanıp sönen neon tabelalar ve hologram tarzı animasyonlu menüler kullanın. Her ürün kartı fareyle üzerine gelindiğinde yanmalı ve kısa bir synthwave ses efekti içermelidir. Heyecan yaratmak için tekrarlayan bir yağmur animasyonu ekleyin."

Bu sitenin öne çıkan özelliği atmosferik etkisidir. Tekrarlayan yağmur animasyonlarından yanıp sönen neon tabelalara ve hareketli ızgara arka planına kadar, site görsel olarak çekicidir.

Üç farklı synth sesi ve etkileşimli düğmeler, bu sitenin kullanımını kolay ve ilgi çekici hale getiriyor. Bu özellikleri kendi başıma programlayamazdım. Claude Tüm aksiyonla birlikte. Site, neon ışıklı bir siberpunk sokak pazarının sert atmosferini akıcı animasyonlar, gerçekçi synthwave sesleri ve sürükleyici görsel efektlerle mükemmel bir şekilde yansıtıyor.

8. Fantezi Görev Günlüğü

Claude'un web sitesinin ekran görüntüsü

İddia:"Eski bir el yazmasından esinlenerek bir fantastik macera web sitesi tasarlayın. Tüy kalem imlecinin parlamasını ve hareket ettirildiğinde ışıltılı bir iz bırakmasını, kenar çubuğunun ortaçağ büyü kitabı gibi görünmesini ve kullanıcıların, bulunduğunda hareket eden simgelere tıklayarak üç büyülü eşyayı 'toplayabilecekleri' bir sayfa tasarlayın."

Bu örnek şunu kanıtlıyor: Claude Büyülü bir fantezi tasarımını kolayca işleyebilir. Parıldayan tüy kalem imleci, siteyi keşfederken ışıltılı izler bırakırken, gezinme menüsü, animasyonlu gezinme efektleriyle deri kaplı bir ortaçağ büyü kitabı gibi açılır.

Ana içerik, antik yazıtlar ve süslü ortaçağ tipografisiyle tasarlanmış papirüs tomarlarına dayanıyor ve siteye otantik bir antik dünya cazibesi katıyor. Duyarlı tasarımı, etkileşimli parıltıları ve etkileşimli başarılarıyla her tıklama, kadim büyülü etkileşimlerle dolu.

9. Çizgi film karakteri bir evcil hayvan edinin

Claude tarafından oluşturulan bir web sitesinin ekran görüntüsü

İddia: Ziyaretçilerin çizgi film karakteri bir evcil hayvanı (kedi, köpek veya ejderha) "sahiplenebileceği" eğlenceli ve etkileşimli bir web sitesi oluşturun. Her evcil hayvanın hareketsiz bir animasyonu olmalı, tıklandığında tepki vermeli (mırıldanma, kuyruk sallama, ateş püskürtme) ve üzerine yiyecek simgeleri sürüklenerek "beslenebilmelidir". Sessize alma seçeneğiyle neşeli bir arka plan müziği ekleyin.

Hem eğlenceli hem de ilgi çekici, etkileşimli bir evcil hayvan sahiplenme web sitesi oluşturdum. Her evcil hayvanın eğlenceli bir kişiliğe sahip kendine özgü bir çizgi film karakteri var. Claude Yiyecekleri sürükleyip bırakarak onları besleyin, mutluluk göstergelerinin yükseldiğini izleyin ve mırıldanmadan ateş püskürten kükremelere kadar keyifli tepkilerin kilidini açın.

Ayrıca, ruh halinizi ayarlamanıza yardımcı olacak sürekli tekrar eden neşeli bir melodi de mevcut. Site tamamen duyarlı, dokunmatik ve eğlenceli, duygusal ve etkileşimli bir deneyim için açıkça tasarlanmış.

Yoruma kapalı.