Uygulamanızın nasıl göründüğünü ayarlayın, ardından yayınlamadan önce sonucu önizleyin.

Design, canlı önizlemenizin yanında açılır ve projenizin nasıl göründüğünü kod yazmadan değiştirmenizi sağlar.

Bu kılavuz; Theme ile genel stilleri ayarlamayı, Görsel Düzenleyici ile tek tek öğeleri düzenlemeyi, Library üzerinden görselleri değiştirmeyi, değişiklikleri sade bir dille tarif etmeyi ve çalışmanızı yayına almadan önce cihazlar arasında kontrol etmeyi kapsar.

Design nasıl çalışır

Yapay zeka Agent'ları bir görevi tamamladığında, sayfanın üst kısmında Uygulama Görüntüleyici görünür. Ekranın sol tarafında tasarım panelini açmak için Design'ı seçin; canlı önizlemeniz de onun yanında yer alır. Üç sekmesi vardır:

• Theme, tüm uygulama için genel kuralları belirler — renkler, yazı tipleri ve efektler. En iyi, oluşturmaya başlamadan önce kullanılır.
• Görsel Düzenleyici, seçtiğiniz öğeleri ayarlar. Her projede, her zaman çalışır.
• Library, görselleri değiştirir veya yenilerini üretir.

Theme kuralları belirler, Görsel Düzenleyici ise ayrıntıları mükemmelleştirir. Paneli kapatmak için Exit'i seçin.

Design paneli solda açılır. Siz bir şey seçene kadar Görsel Düzenleyici sizden bir öğe seçmenizi ister.

Başlamadan önce

Design'ı açmadan önce şunlardan emin olun:

• Projenizde tamamlanmış bir build var. Design, yalnızca agent'lar bir görevi bitirdikten sonra görünen Uygulama Görüntüleyici içinden açılır.
• Değişikliklerin siz yayınlayana kadar canlı olmadığını biliyorsunuz. Güncellenmiş sürümü yayınlayana kadar herkese açık URL'niz etkilenmez.
• Bir theme'in yalnızca paylaşılan stillere ulaştığını biliyorsunuz. Sabit değerlerle oluşturulmuş öğeler, theme değişikliğinden sonra eski görünümlerini korur. Aşağıdaki Bir theme doğru görünmüyorsa bölümüne bakın.

Theme ile genel stilleri ayarlayın

Bir theme, projenizin tasarım sistemidir. Tek bir öğedeki ayarlar yerine, tüm uygulamanız genelinde geçerli olan genel değişkenleri — paletler, tipografi ve boşluklandırma — tanımlar.

Theme en iyi, oluşturmaya başlamadan önce hazırlık aşamasında kullanılır. Erken uygulanması, agent'ların ürettiği her şeyin en baştan buna uymasını sağlar.

Bir theme seçin

Theme sekmesi bir Search Themes alanıyla açılır ve theme'leri bölümlere ayırır:

• Current Theme — projenizin şu anda kullandığı şey. Herhangi bir şey uygulamadan önce burada No theme applied yet yazar ve yanındaki + düğmesi yeni bir theme oluşturur.
• Default Theme — tasarımcılar tarafından seçilmiş 14 hazır ayar. Her biri, onunla oluşturulmuş bir sayfanın önizlemesi, adı ve paletini gösteren bir renk örneği satırı ile gösterilir. Bunlar silinemez.
• My Theme — oluşturduğunuz veya özelleştirdiğiniz theme'ler. Bunlar yeniden adlandırılabilir ve silinebilir.

Her theme, onunla oluşturulmuş bir sayfanın önizlemesi, adı ve paletini gösteren bir renk örneği satırı ile görünür; böylece uygulamadan önce yönünü değerlendirebilirsiniz.

Theme sekmesi; üstte uygulanmış bir theme ve altında kaydedilmiş theme'leriniz ile.

Birini uygulamak için:

1. İstediğiniz theme'i seçin.
2. Atoms şunu sorar: "Do you want to apply theme name?"
3. Onaylamak için Apply'ı, geri dönmek için Cancel'ı seçin.
4. Önizlemeyi kontrol edin.

Beklenen sonuç: önizleme seçtiğiniz theme'e güncellenir ve artık Current Theme altında görünür.

Not: Görsel Düzenleyici içinde kaydedilmemiş değişiklikleriniz varsa, Atoms Unsaved Changes gösterir ve yeni bir theme uygulamadan önce bunları kaydetmenizi veya gözden çıkarmanızı ister.

Uygulanmış bir theme'i güncelleyin

Theme sekmesindeki bir nokta, uygulanmış theme'inizin daha yeni bir sürümünün mevcut olduğu anlamına gelir.

Bunu almak için mevcut theme'inizde Update'i seçin ve Do you want to re-apply theme name? onayını verin. Projeniz daha sonra daha yeni sürümü kullanır.

Güncellemek zorunda değilsiniz. Olduğu gibi bırakırsanız, projeniz uyguladığınız sürümü kullanmaya devam eder.

Not: Uygulamanız seçtiğiniz theme gibi görünmüyorsa, tek tek öğeler Görsel Düzenleyici içinde geçersiz kılınmış olabilir. Bu geçersiz kılmalar belirli içeriği hedefler ve theme değişikliğinden sonra da kalır.

Theme Manager içinde bir theme oluşturun veya düzenleyin

Sıfırdan bir tane oluşturmak için Current Theme yanındaki +'yı seçin veya değiştirmek için mevcut bir theme'i açın. Her ikisi de, canlı önizleme karşısında bir theme'i ince ayar yaptığınız Theme Manager'ı açar.

Ayarları üç sekmede yer alır:

• Color — uygulamanızın kullandığı renk rolleri; amaca göre gruplanır: Base Colors, Card, Popover, Primary, Secondary ve daha fazlası. Her rolün kendi değeri vardır; bu nedenle Primary'yi değiştirmek, onu kullanan her öğeye ulaşır.
• Fonts — Serif, Sans-serif ve Mono yazı tipleriniz.
• Effects — köşe Radius'u ve rengini, opaklığını, bulanıklığını, yayılımını ve ofsetini kontrol ettiğiniz bir Shadow.

Yanlarındaki önizleme gerçek bileşenlerden oluşturulmuştur — oturum açma formları, düğmeler, giriş alanları, gövde metni ve monospace metin — böylece tahmin etmek yerine bir değişikliği hemen değerlendirebilirsiniz. Her ikisini de kontrol etmek için altındaki açık/koyu geçişini kullanın; çünkü açık yüzeylerde çalışan bir palet, koyu yüzeylerde kontrast kaybedebilir.

Önizlemenin altında ayrıca değişiklikleriniz arasında ilerlemek için Undo ve Redo, theme'i başladığı yere döndürmek için de Reset bulunur.

Theme Manager. Siz bir değeri değiştirdikçe önizleme güncellenir ve altındaki kontroller geri al, yinele, dışa aktar, içe aktar ve sıfırlamayı kapsar.

Bir theme kaydedin

1. Save'i seçin.
2. Ona bir Theme Name verin veya önerileni koruyun.
3. Onaylamak için Save'i seçin.

Beklenen sonuç: theme'iniz, paleti renk örnekleri olarak gösterilerek Theme sekmesinde My Theme altında görünür. Onu diğer tüm theme'lerle aynı şekilde uygulayın.

Not: Düzenlemeler siz kaydedene kadar korunmaz. Kaydedilmemiş değişiklikler varken farklı bir theme uygulamaya çalışırsanız, Atoms sizi durdurur ve kaydetme veya gözden çıkarma seçeneği sunar.

Bir theme'i projeler arasında yeniden kullanın

Theme Manager, önizlemenin altında Export ve Import seçeneklerine sahiptir. Bir theme'i dosyaya dışa aktarın, ardından aynı tasarım yönünü yeniden kullanmak için başka bir projeye içe aktarın veya projeleri sizinkiyle eşleşsin diye bir takım arkadaşınıza verin.

Bir theme doğru görünmüyorsa

Bir theme uygulamak bir uyumluluk kontrolü değildir; bu yüzden normalde başarısız olmaz. Bir theme, uygulamanızın üzerine kurulu olduğu paylaşılan stil değerlerini değiştirir; bu da seçicideki herhangi bir theme'in genellikle herhangi bir projeye uygulanabileceği anlamına gelir.

Bunun yerine görebileceğiniz şey, başarıyla uygulanan ama her şeye ulaşmayan bir theme'dir. Bunun için bir hata mesajı yoktur — sadece yanlış görünür.

Uygulamanızın bir kısmı eski görünümünü korur. Bu en yaygın sorundur. Sabit bir değer verilen, yani uygulamanızın paylaşılan stillerinden biri yerine doğrudan kendisine belirli bir renk veya yazı tipi atanan bir öğeye, theme değişikliği ulaşamaz; bu yüzden önceki görünümünü korur ve etrafındaki her şeyle çakışabilir. Bunu Görsel Düzenleyici içinde düzeltin veya sohbette agent'lardan sabit değeri theme'inizin stilleriyle değiştirmelerini isteyin.

Metnin okunması zorlaşır. Açık yüzeyler için tasarlanmış bir düzene uygulanan koyu bir theme, metni çok düşük kontrastla bırakabilir. Etkilenen öğeleri Görsel Düzenleyici içinde ayarlayın veya mevcut tasarımınıza daha yakın bir theme seçin.

Atoms, theme'in uygulanamayacağını söyler. Bu nadirdir ve projenizin arayüzünün Atoms theme sistemi üzerine kurulmadığı anlamına gelir. Bunun yerine Görsel Düzenleyici'yi kullanın — her şey yine de öğe öğe yapılabilir.

Önemli: Mümkün olduğunda bir theme'i erken seçin. Agent'lar zaten uygulanmış bir theme ile build yaptığında, en baştan onun paylaşılan stillerini kullanırlar; böylece daha sonra yapılacak bir theme değişikliğinin ulaşamayacağı sabit değerlere sahip daha az öğe oluşur.

Görsel Düzenleyici ile tek tek öğeleri düzenleyin

Düzenlemek için önizlemede bir öğe seçin. Aynı anda birkaç öğe üzerinde çalışmak için Windows'ta Ctrl tuşunu basılı tutup tıklayın veya Mac'te Cmd tuşunu basılı tutup tıklayın.

Önemli: Aşağıda açıklanan özellik kontrolleri aynı anda tek bir öğe üzerinde çalışır. Birden fazla öğe seçtiğinizde, bunun yerine sohbette ne istediğinizi tarif ederek değiştirin — bkz. Tıklamak yerine değişiklikleri tarif edin.

Seçiminizin üzerindeki bir rozet, öğenin adını ve boyutunu gösterir — metin için yazı tipi boyutu veya bir kapsayıcı için ölçüler — böylece kapsayıcısı yerine amaçladığınız öğeyi seçtiğinizi doğrulayabilirsiniz.

Ardından Görsel Düzenleyici sekmesi, o öğe için kullanılabilir özellikleri bölümler halinde gösterir:

• Layout — margin ve padding.
• Appearance — arka plan rengi, opaklık ve köşe yarıçapı. Radius, None'dan başlayıp Small, Medium, Large, XL, 2XL, 3XL üzerinden Full'a kadar gider.
• Content — öğenin metni.
• Style — yazı tipi ailesi, kalınlık, boyut, metin hizalama ve süsleme.
• Class — öğeye uygulanmış stil sınıfları; varsayılan olarak daraltılmıştır.

Hangi bölümlerin görüneceği, ne seçtiğinize bağlıdır: bir metin öğesi Content ve Style sunarken, bir kapsayıcı yalnızca Layout, Appearance ve Class gösterebilir.

Seçiminizin üzerinde ayrıca en yaygın kontrolleri elinizin altında tutan kayan bir araç çubuğu görünür — metin için yazı tipi, kalınlık, hizalama ve renk — bunun yanında silme denetimi ve aşağıda açıklanan istem alanı da yer alır.

Değişiklikler siz yaptıkça önizlemede görünür. Bunlardan vazgeçmek için önizlemenin altındaki Discard'ı kullanın.

Değişikliklerinizi kaydedin

Düzenlemeler siz kaydedene kadar korunmaz. Bir değişiklik yaptıktan sonra, önizlemenin altında Discard ve Save görünür.

• Save değişikliklerinizi korur.
• Discard bunları atar ve öğeyi önceki haline döndürür.

Beklenen sonuç: kaydettiğinizde düğmeler kaybolur ve değişikliğiniz artık projenin bir parçası olur.

Not: Kaydedilmemiş işler varken Design'dan çıkmaya, farklı bir theme uygulamaya veya Sohbet için Seç kullanmaya çalışırsanız, Atoms Unsaved Changes gösterir ve devam etmeden önce kaydetmenizi veya gözden çıkarmanızı ister.

Kaydetmek, değişikliği projenizde tutar. Bu onu canlı sitenize koymaz — bkz. Değişikliklerinizi yayınlayın.

Bir öğe seçildiğinde, Görsel Düzenleyici onun özelliklerini gösterir. Seçimin üzerindeki kayan araç çubuğu, bir değişikliği tarif etme ile doğrudan düzenleme arasında geçiş yapar.

İpuçları:

1. Görsel Düzenleyici'yi kozmetik değişiklikler için, sohbeti ise yeni sayfalar, yeni özellikler veya backend mantığı gibi yapısal değişiklikler için kullanın.
2. Aynı değişikliği bir kart veya düğme satırı boyunca yapmak için hepsini Ctrl-click veya Cmd-click ile seçin ve değişikliği sohbette bir kez tarif edin. Her birini özellik kontrolleri üzerinden düzenlemek, kendinizi tekrar etmeniz anlamına gelir.

Library ile görselleri değiştirin

Library, seçtiğiniz öğeye bir görsel uygular; bu yüzden önce görselin nereye gitmesi gerektiğini seçerek başlayın.

1. Öğeyi seçin; önizlemede değiştirmek istediğiniz öğeyi seçin. Bunu yapana kadar Library, Select an element to start visual editing gösterir.
2. Library sekmesini açın ve bir kaynak seçin — Image, Generate veya Upload.
3. Görselinizi uygulayın. Bunu nasıl yapacağınız, görselin nereden geldiğine bağlıdır. Yerleşik bir görsel için üzerine gelin ve Use asset'i seçin. Ürettiğiniz veya yüklediğiniz bir görsel için tamamlanmış küçük görselini seçin.
4. Önizlemeyi kontrol edin. Görsel, seçtiğiniz öğeye hemen uygulanır.
5. Önizlemenin altındaki Save'i seçin veya geri almak için Discard'ı seçin.

Beklenen sonuç: seçtiğiniz öğe yeni görseli taşır ve kaydettiğinizde Save ile Discard düğmeleri kaybolur.

Görsel kategorileri ve Popular Images ile Library sekmesi.

Görsellerin geldiği yer

Image, yerleşik koleksiyondur. Belirli bir şey için Search assets'i kullanın veya bir kategoriye göz atın — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings ve People; geri kalanı için More tags vardır. Bir kategori seçildiğinde açılır; geri dönmek için geri okunu kullanın. Aşağıdaki Popular Images genel bir seçki gösterir. Herhangi bir görselin üzerine gelin ve uygulamak için Use asset'i seçin.

Generate, bir açıklamadan yeni bir görsel oluşturur ve Pro veya Max plan gerektirir. Describe the image you want to generate altına istediğinizi yazın ve Generate'i seçin. Sonuçlar alanın altında görünür. Öğenize uygulamak için tamamlanmış bir küçük görsel seçin.

Upload, sürükle-bırak, yapıştırma veya tıklama ile kendi dosyanızı ekler. Görseller JPEG, PNG, GIF, BMP, TIFF veya WEBP formatlarında ve en fazla 4 MB olabilir. Yüklenen görseller bırakma alanının altında görünür — uygulamak için birini seçin.

Not: Use asset yalnızca yerleşik görsellerde görünür. Ürettiğiniz veya yüklediğiniz görseller bunun yerine küçük görselleri seçilerek uygulanır.

Tıklamak yerine değişiklikleri tarif edin

Bir değişikliği tıklayarak yapmak yerine tarif etmek daha kolaysa, bunun yerine agent'lardan isteyebilirsiniz. Bunu yapabileceğiniz iki yer vardır ve ikisi de o anda seçili olan her neyse onun üzerinde çalışır.

• Seçiminizin üzerindeki kayan araç çubuğu. Seçtiğiniz öğenin üzerinde küçük bir araç çubuğu görünür. İki simgesi, bir değişikliği tarif etme ile özellikleri doğrudan düzenleme arasında geçiş yapar. Ask the Atoms to change… alanına yazın ve gönderin.
• Design panelinin altındaki sohbet girişi. Bir öğe seçildiğinde, giriş alanı bir Design etiketi ve Ask the Atoms team to modify the selected element… istemini gösterir; böylece agent'lar talimatınızı tüm proje yerine o öğeye uygular.

Kayan araç çubuğu seçiminizin üzerinde durur. Soldaki chip, talimatın hangi öğeye uygulanacağını gösterir.

Mekanizmayı değil, sonucu tarif edin:

- "Bunu daha sakin yap — daha fazla boşluk, daha küçük başlık."

- "Bu düğmenin stilini fiyatlandırma sayfasıyla eşleştir."

"daha iyi görünmesini sağla" gibi belirsiz talimatlar öngörülemeyen sonuçlar verir.

Not: Görsel Düzenleyici içinde bir özelliğe tıklamak onu hemen değiştirir. Bir istem göndermek, işi agent'ların yapmasını ister; bu da daha uzun sürer. Basit bir renk veya boşluk değişikliği için özelliği doğrudan düzenleyin.

Değişikliklerinizi önizleyin

Önizlemenin üzerindeki araç çubuğunu kullanın:

• Device view — duyarlı tasarımı test etmek için ekran boyutları arasında geçiş yapın. Masaüstünde doğru görünen theme ve tipografi değişiklikleri çoğu zaman mobilde bozulur; bu yüzden yayınlamadan önce her zaman mobili kontrol edin.
• Page selector — uygulamanızın sayfaları arasında geçiş yapın.
• Refresh — güncel görünmüyorsa önizlemeyi yeniden yükleyin.
• Open in a new tab — uygulamayı ayrı bir tarayıcı sekmesinde tam genişlikte görüntüleyin.
• Console — bir şey yanlış görünüyorsa günlük panelini açın.

Beklenen sonuç: değişiklikleriniz, desteklemeyi amaçladığınız her sayfada ve her cihaz genişliğinde görünür olur.

Bir önizleme sorunundan kurtulun

Önizleme güncel görünmüyorsa, yüklenmeye devam ediyorsa veya kırmızı hatalar gösteriyorsa, sorun Design'dan ziyade önizlemededir. Sorun giderme adımları için — Refresh, Console paneli, Resolve ve devam eden bir hatanın nasıl bildirileceği — Build and preview troubleshooting bölümüne bakın.

Design'a özgü bir şey: düzenlemeleriniz kaybolmuş gibi görünüyorsa, onları kaydedip kaydetmediğinizi kontrol edin. Kaydedilmemiş değişiklikler Design'dan çıktığınızda gözden çıkarılır — bkz. Değişikliklerinizi kaydedin.

Değişikliklerinizi yayınlayın

Design değişiklikleri, siz yayınlayana kadar çalışma projenizde kalır. Sağ üst köşedeki Publish'i seçin veya proje zaten canlıysa Update'i seçin.

Not: Projeniz Always Latest yerine Specify Sürüm kullanıyorsa, canlı site seçtiğiniz sürüme kilitli kalır ve yeni bir sürüm yayınlayana kadar tasarım değişiklikleriniz herkese açık olarak görünmez.

Agent'ların build sırasında bildirdiği hatalar için Sorun Bildir bölümüne bakın.