Tasarımcı

Anlattığınız tasarımı HTML, CSS ve çalışan JavaScript olarak üretir; ardından siz istedikçe onu düzenler.

Panelde nerede

Sol menüde Tasarım → Yapay Zeka Stüdyosu (Design → AI Studio). Ekranın tamamı Tasarımcı'dır: solda istem (What should we design?, Ne tasarlayalım?), değişiklik geçmişi ve kod; sağda Live preview (Canlı önizleme). Yerleşimi üstteki düzen düğmesiyle (yan yana, yalnızca önizleme gibi) değiştirebilirsiniz. Ekran AI Studio modülüne bağlıdır; modül yoksa menüde görünmez.

Nasıl çalışır

İstediğiniz tasarımı gündelik dille anlatırsınız. Model dört şey döndürür: HTML, CSS, JavaScript ve JavaScript'in ne zaman çalışacağı. Sonuç sağdaki önizlemede gerçekten çalışır: geri sayım sayar, kopyala düğmesi kopyalar, sekmeler geçiş yapar. Kod editörü de açıktır; oradaki her değişiklik önizlemeye anında yansır.

Adımlar

1. Anlatın. Ne göstereceğini, nasıl davranacağını yazın. Fikriniz yoksa örnek isteklerden birine tıklayın. Elinizde kod varsa Kendi kodumla başlayayım ile yapıştırın.
2. Design it (Tasarla) düğmesine basın (veya ⌘/Ctrl + Enter). İstem en fazla 2.000 karakterdir.
3. Önizlemede kontrol edin. Mobil, tablet ve masaüstü genişlikleri ile açık ve koyu mağaza arka planı arasında geçiş yapabilirsiniz.
4. Düzenletin. Ekranda bir tasarım varken yazdığınız istek onu düzenler: tasarımın tamamı modele gönderilir ve model yalnızca değiştirdiği kısmı geri verir (düğme Apply change, Değişikliği uygula, olur). "Düğmeyi yeşil yap" dediğinizde HTML ve JavaScript olduğu gibi kalır, yalnızca CSS değişir. Sıfırdan başlamak isterseniz istem kutusunun üstündeki What should the AI do? (Yapay zekâ ne yapsın?) seçicisinden Create from scratch (Sıfırdan oluştur) seçeneğini seçin; Edit this design (Bu tasarımı düzenle) varsayılandır.
5. Kampanyaya aktarın. Create campaign with this design (Bu tasarımla kampanya oluştur), HTML, CSS, JavaScript ve zamanlaması doldurulmuş bir özel kampanya taslağı açar (ad: "AI Design"). Siz kaydetmeden hiçbir şey yayına girmez. Aktarım tarayıcının oturum deposu üzerinden yapılır; tarayıcı site verisini engelliyorsa "The design could not be handed to the campaign form" uyarısı çıkar ve tasarım ekranda kalır: site verisine izin verin ya da kodu editörden kopyalayıp özel kampanyaya yapıştırın.

Geri almak

Her istek Changes in this session (Bu oturumdaki değişiklikler) listesine yazılır: ne istediğiniz ve hangi kısmın değiştiği. Liste son 20 adımı tutar. Bir düzenleme beklediğiniz gibi olmadıysa Undo last change (Son değişikliği geri al) tasarımı o istekten önceki hâline döndürür. Start over (Baştan başla) editörü, istemi ve geçmişi temizler. Sayfayı kapatırsanız oturum geçmişi silinir; tasarımı saklamak için kampanyaya aktarın ya da kodu Kütüphane'ye kaydedin.

İyi istem yazmak

Zayıf istem	İyi istem
"Bir banner yap"	"Sayfanın üstünde ince, sabit bir şerit; gece yarısına kadar geri sayım ve koyu bir düğme"
"İndirim kodu göster"	"İndirim kodunu gösteren bir kart, yanında panoya kopyala düğmesi ve kopyalandı onayı"
"Daha güzel yap"	"Kenar boşluklarını artır, başlığı kalınlaştır ve düğmeyi tam genişlik yap"

Anlatmanız gereken üç şey: ne görünecek, nerede duracak ve ne yapacak. Davranış belirtmezseniz model statik bir kutu üretir. Düzenlerken neyin değişeceğini somut yazın; "iyileştir" gibi genel bir istekte model hiçbir şeyi değiştirmeyebilir ve bunu size söyler.

Markanız otomatik uygulanır

İstem kutusunun üstündeki satır, tasarımın seçili kanalın yayındaki markasıyla üretileceğini gösterir: renkler, köşeler, yazı tipleri, logo ve marka sesi. Bunu istemde ayrıca söylemeniz gerekmez.

• Model renkleri var(--selwise-brand, #c93a63) gibi marka değişkenleriyle ve yanlarında markanızın değeriyle yazar; markanızı sonradan değiştirdiğinizde tasarım da onu izler.
• Marka bağlayıcıdır ama kilitli değildir: sezona ya da kampanyaya uygun tonlar ve vurgular eklenebilir. İstemde başka renk ya da stil yazarsanız isteminiz kazanır.
• Başka bir markanın renkleriyle bir tasarım gerekiyorsa satırdaki anahtarla markayı kapatın; seçiminiz bütün yapay zekâ pencerelerinde geçerlidir.

Kanalınızda henüz yayınlanmış bir marka yoksa satır bunu söyler ve model genel bir tasarım üretir. Markayı tanımlamak için: Marka Teması.

Görseller

Model görsel adresi uyduramaz. Tasarıma bir görsel koymak istiyorsanız istem kutusunun altındaki Images for the model (Modele verilecek görseller) alanından ekleyin: Add image (Görsel ekle) görsel kütüphanenizi açar, oradan seçebilir ya da yeni görsel yükleyebilirsiniz; bir adresi de yapıştırabilirsiniz. Her görsele "logo", "ürün fotoğrafı" gibi kısa bir etiket yazmak, modelin görseli nereye koyacağını anlamasına yardım eder.

Model yalnızca bu görselleri, kütüphanenizdeki görselleri ve tasarımda zaten bulunan görselleri kullanabilir. Tasarımın başka bir görsele ihtiyacı varsa model onun yerine boş, etiketli bir görsel alanı bırakır; önizlemede kesik çizgili bir kutu olarak görünür. Model kendisine verilmeyen bir adres yazarsa adres kaldırılır, yerine boş alan bırakılır ve bunu bir uyarıyla söyleriz.

Önizlemenin altındaki Images (Görseller) paneli tasarımdaki her görseli listeler. Boş alanları buradan yükleyerek, kütüphaneden seçerek ya da adres yapıştırarak doldurursunuz; alternatif metni düzenleyebilir, bir alanı isteğe bağlı yapabilir ya da kaldırabilirsiniz. Zorunlu bir görsel alanı boş olan kampanya yayına alınamaz. Ayrıntılar: Görseller.

JavaScript

Özel kampanyalar JavaScript çalıştırabilir; model de bunu bilerek üretir. Üretilen kod sayfada bir IIFE içinde çalışır ve kendisine bir kapsayıcı değişkeni verilmez; bu yüzden model, HTML'de tanımladığı benzersiz bir kök kimliği sorgulayarak kendi elemanlarını bulur.

Zamanlama üç değerden biridir ve model uygun olanı seçer:

Zamanlama	Ne zaman
immediate	Kod çevresindeki sayfaya bağlı değilse
domReady	Sayfanın ayrıştırılmış olması gerekiyorsa
customEvent	Kendi olayınızı tetiklediğinizde çalışsın istiyorsanız

Bir düzenleme JavaScript'e dokunmadıysa seçtiğiniz zamanlama da korunur.

Sayfa hedefli, bir kampanyaya bağlı olmayan script'ler için ayrı bir modül vardır; bkz. Özel Scriptler.

Kontrol edilecekler

Kontrol	Neden
CSS sınıf adları özgün mü	Genel adlar (.container, .title) sitenizin stillerini bozar
Seçiciler kapsamlı mı	h3 gibi kapsamsız kurallar tüm sayfayı etkiler
Sabit renk var mı	Tema ile uyumsuz kalır
Mobilde sığıyor mu	Önizlemede mobil genişliğe geçin
Koyu mağazada okunuyor mu	Önizlemedeki ay düğmesi arka planı koyulaştırır

"Genel bir tasarım kullanıldı" uyarısı

Sıfırdan oluştururken model kullanılabilir bir tasarım döndürmezse sistem standart bir promosyon tasarımı koyar ve bunu size söyler. Bu uyarıyı gördüğünüzde editördeki kod istediğiniz şey değildir: daha ayrıntılı bir istemle tekrar deneyin. Düzenlerken bu hiç olmaz; model kullanılabilir bir sonuç döndürmezse tasarımınız olduğu gibi bırakılır ve hata gösterilir.

Neden düğme gri

Gördüğünüz	Sebep
Design it pasif, istem kutusu pasif	AI Studio modülü hesapta yok ("AI Studio is not part of this account's subscription"), ya da aylık yapay zekâ kredisi bitti (kırmızı uyarı). Bkz. Yapay Zekâ Kredileri
"The current code is too long to edit with AI"	Tasarımın HTML, CSS ve JavaScript toplamı 12.000 karakteri aştı; yalnızca sıfırdan oluşturabilirsiniz
Hata şeridi "AI generation failed"	Sağlayıcı ya da sınır hatası; mesaj nedenini söyler
Üretim sırasında istem kutusu pasif	Cevap bekleniyor; genellikle 10 ile 40 saniye sürer

Her üretim 50 kredi harcar; ayrıntı ve hata mesajları için yukarıdaki sayfaya bakın.

Sınırlar

Model sitenizi görmez. Ürettiği kod sitenizin mevcut tasarımıyla uyumlu olmayabilir. Daha iyi sonuç için sitenizdeki bir kutunun HTML'ini Kendi kodumla başlayayım ile yapıştırıp "bu yapıya benzer" deyin.

Düzenleme için HTML, CSS ve JavaScript toplamı en fazla 12.000 karakter olabilir. Daha uzun bir kodu yalnızca sıfırdan oluşturabilirsiniz.

Ürün verisi gösteren bloklar için bu ekran değil, içerik blokları kullanılır; bkz. İçerik Blokları. Onların kod sekmesindeki yapay zekâ da mevcut bloğu düzenler.