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. Ekranın tamamı Tasarımcı'dır: solda istem, değişiklik geçmişi ve kod; sağda canlı önizleme.

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. Tasarla'ya basın (veya ⌘/Ctrl + Enter).
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üğ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ünde Sıfırdan oluştur'u seçin.
5. Kampanyaya aktarın. Bu tasarımla kampanya oluştur, HTML, CSS, JavaScript ve zamanlaması doldurulmuş bir özel kampanya taslağı açar. Siz kaydetmeden hiçbir şey yayına girmez.

Geri almak

Her istek Bu oturumdaki değişiklikler listesine yazılır: ne istediğiniz ve hangi kısmın değiştiği. Bir düzenleme beklediğiniz gibi olmadıysa Son değişikliği geri al tasarımı o istekten önceki hâline döndürür. Baştan başla editörü, istemi ve geçmişi temizler.

İ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ı.

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.

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.