Yapay zekanın yazdığı HTML kodunu paylaşılabilir bir linke çevir

Adım adım

1. 1

   Tek ve bağımsız bir dosya iste

   Yapay zekadan tüm CSS ve JavaScript kodunu içinde barındıran, önce mobil için tasarlanmış tek bir index.html dosyası iste.

2. 2

   Cevabın tamamını kopyala

   Kod bloğundaki kopyala düğmesini kullan ya da cevabın tamamını kopyala. İkisi de olur.

3. 3

   SiteUp’a yapıştır

   siteup.fyi adresini aç, Kod yapıştır’ı seç ve yapıştır. SiteUp cevabın içinden HTML’i ayıklar ve canlı önizleme gösterir.

4. 4

   Önizlemeye bak

   Tıkla ve kaydır. Eksik bir şey varsa yapay zekadan düzeltmesini iste ve yeni sürümü yapıştır.

5. 5

   Yayınla

   Linkini ve QR kodunu almak için Yayınla’ya bas. Daha sonra Dosyaları güncelle ile aynı linkte daha iyi bir sürüm yayınlayabilirsin.

Tek ve temiz bir dosya veren bir istem yaz

İsteme ekleyebileceğin en işe yarar cümle şu: “Tüm CSS ve JavaScript kodunu içinde barındıran, eksiksiz ve bağımsız tek bir index.html dosyası ver.” Bu cümle, yapay zekanın işi birçok dosyaya bölmesini ya da sende olmayan araçlar kullanmasını engeller.

İyi bir istem sayfanın kimin için olduğunu, neleri içermesi gerektiğini ve nasıl bir his vermesi gerektiğini de söyler. Örneğin:

Kız kardeşim Ela için 14 Kasım’da 30 yaşına girdiği gün açılacak bir doğum günü sürpriz sayfası yap. Tüm CSS ve JavaScript kodunu içinde barındıran tek bir index.html dosyası olsun. Önce mobil düşün; eğlenceli ama zarif olsun, bir geri sayım, kısa ve içten bir mesaj ve konfeti patlatan bir düğme içersin. Harici kütüphane kullanma. Sadece kodu yaz.

SiteUp’taki Yapay zekayla yap bölümünde buna benzer hazır istemler var. Kendi bilgilerini ekle, istemi ChatGPT, Claude ya da Gemini’de aç ve gelen cevabı geri yapıştır.

Yapay zeka birden fazla dosya verirse

Şunu yaz: “Her şeyi tek bir index.html dosyasında birleştir.” Genellikle en hızlı çözüm budur. Dosyaları ayrı tutmayı tercih edersen her birini yapay zekanın kullandığı adla kaydet, hepsini bir klasöre koy ve klasörü SiteUp’a bırak.

Sık görülen sorunları çöz

• Önizleme boş ya da yarım. Cevap muhtemelen çok uzun olduğu için yarıda kesildi. Yapay zekaya “tam kaldığın yerden devam et” de ve kodun tamamını yeniden yapıştır.
• Düğmeler çalışmıyor. Bir JavaScript hatası var. Neye tıkladığını ve ne beklediğini anlat, düzeltilmiş dosyanın tamamını iste.
• Görseller eksik. Yapay zeka çoğu zaman var olmayan görsel linkleri uydurur. Yerine emoji, CSS şekilleri ya da satır içi SVG kullanmasını iste veya kendi görsellerini bir klasörle yükle.
• Bilgisayarda harika ama telefonda kötü görünüyor. “320 piksel genişlikten itibaren çalışan, önce mobil düşünülmüş bir düzen” iste.

React ve diğer çerçeveler ne olacak?

SiteUp, tarayıcıların doğrudan açabildiği şeyleri barındırır. Yapay zeka React ya da Vue bileşenleri yazarsa “bunu tek dosyada sade HTML, CSS ve JavaScript olarak yeniden yaz” de. Vite gibi bir araçla proje yaptıysan derleme komutunu çalıştır ve oluşan dist klasörünü yükle.

Sık sorulanlar