Tasarla ve önizle

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ı, Visual Editor ile tek tek öğeleri düzenlemeyi, Library üzerinden görselleri değiştirmeyi, değişiklikleri sade bir dille tarif etmeyi ve yayına almadan önce çalışmanızı cihazlar arasında kontrol etmeyi kapsar.

Design nasıl çalışır

AI Agents 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çeneğini 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 oluşturur.

Theme kuralları belirler, Visual Editor ise ayrıntıları mükemmelleştirir. Paneli kapatmak için Exit seçeneğini seçin.

Design paneli solda açılır. Siz bir şey seçene kadar, Visual Editor 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 App Viewer 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 uygulanırsa, agent'ların ürettiği her şey baştan itibaren buna uyar.

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ığı theme. 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 hazırlanmış 14 hazır ayar. Her biri, onunla oluşturulmuş bir sayfanın önizlemesi, adı ve paletini gösteren bir renk örneği satırıyla 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ıyla görünür; böylece uygulamadan önce yönünü değerlendirebilirsiniz.

Theme sekmesi; üstte uygulanmış bir theme ve altında kayıtlı 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: Visual Editor 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 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, bazı öğeler Visual Editor içinde ayrı ayrı 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 + seçeneğini seçin ya da değiştirmek için mevcut bir theme'i açın. Her iki işlem de, canlı önizleme üzerinde 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 gruplandırılmıştır: Base Colors, Card, Popover, Primary, Secondary ve daha fazlası. Her rolün kendi değeri vardır; bu nedenle Primary değerini değiştirmek, onu kullanan her öğeye yansır.
• Fonts — Serif, Sans-serif ve Mono yazı tipleriniz.
• Effects — köşe Radius ve renk, opaklık, blur, spread ve offset ile 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 değişikliği anında değerlendirebilirsiniz. Her ikisini de kontrol etmek için altındaki açık/koyu geçişini kullanın; çünkü açık yüzeylerde iyi çalışan bir palet, koyu yüzeylerde kontrastını kaybedebilir.

Önizlemenin altında ayrıca değişiklikleriniz arasında ilerlemek için Undo ve Redo, theme'i başladığı hâline 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 seçin.
2. Bir Theme Name verin veya önerileni koruyun.
3. Onaylamak için Save seçin.

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

Not: Düzenlemeler siz kaydetmeden 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 projesi 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 kurulduğ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 ancak her şeye ulaşmayan bir theme'dir. Bunun için 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 bir öğe — uygulamanızın paylaşılan stillerinden biri yerine doğrudan ona atanmış belirli bir renk veya yazı tipi — theme değişikliğiyle etkilenemez; bu yüzden önceki görünümünü korur ve çevresindeki her şeyle çakışabilir. Bunu Visual Editor 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, metnin kontrastını fazla düşürebilir. Etkilenen öğeleri Visual Editor içinde ayarlayın veya mevcut tasarımınıza daha yakın bir theme seçin.

Atoms, theme'in uygulanamadığını söyler. Bu nadirdir ve projenizin arayüzünün Atoms theme sistemi üzerine kurulmadığı anlamına gelir. Bunun yerine Visual Editor 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 oluşturduğunda, baştan itibaren 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 olur.

Visual Editor 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 yalnızca bir öğe üzerinde çalışır. Birden fazla öğe seçtiğinizde, bunun yerine istediğinizi sohbette 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, kapsayıcı için boyutlar — böylece kapsayıcısı yerine gerçekten hedeflediğiniz öğeyi seçtiğinizi doğrulayabilirsiniz.

Ardından Görsel Düzenleyici sekmesi, o öğe için kullanılabilir özellikleri bölümler hâlinde 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 ve Full'a kadar gider.
• Content — öğenin metni.
• Style — yazı tipi ailesi, kalınlık, boyut, metin hizalaması ve dekorasyon.
• 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.

Ayrıca seçiminizin üzerinde, 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 bulunur.

Siz değişiklik yaptıkça bunlar önizlemede görünür. Bunlardan vazgeçmek için önizlemenin altındaki Discard seçeneğini 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 hâline 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ş çalışmanız 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. Bunu canlı sitenize göndermez — bkz. Değişikliklerinizi yayınlayın.

Bir öğe seçildiğinde, Visual Editor 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 değişiklikler için Visual Editor'ü, yeni sayfalar, yeni özellikler veya backend mantığı gibi yapısal değişiklikler için ise sohbeti kullanın.
2. Bir kart veya düğme satırı boyunca aynı değişikliği 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 kontrolleriyle 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 gitmesini istediğinizi seçerek başlayın.

1. Ö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 seçin. Oluşturduğunuz 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ından Save 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 yerler

Image, yerleşik koleksiyondur. Belirli bir şey için Search assets kullanın veya bir kategoriye göz atın — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings ve People; geri kalanı için More tags bulunur. Bir kategori seçildiğinde açılır; geri dönmek için geri okunu kullanın. Alttaki Popular Images genel bir seçki gösterir. Herhangi bir görselin üzerine gelin ve uygulamak için Use asset 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ında istediğinizi yazın ve Generate seçin. Sonuçlar alanın altında görünür. Öğenize uygulamak için tamamlanmış küçük görseli 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 biçimlerinde ve en fazla 4MB 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. Oluşturduğunuz veya yüklediğiniz görseller ise 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ında Design etiketi ve Ask the Atoms team to modify the selected element… istemi görünür; böylece agent'lar talimatınızı tüm proje yerine o öğeye uygular.

Kayan araç çubuğu seçiminizin üzerinde durur. Soldaki etiket, 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: Visual Editor içinde bir özelliğe tıklamak onu hemen değiştirir. Bir istem göndermek ise 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ılığı 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 mobilde sık sık 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ündüğünde günlük panelini açın.

Beklenen sonuç: değişiklikleriniz, desteklemeyi planladığı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 ile değil önizleme ile ilgilidir. Sorun giderme adımları için Build and preview troubleshooting bölümüne bakın — Refresh, Console paneli, Resolve ve devam eden bir hatanın nasıl bildirileceği.

Design'a özgü bir durum şudur: 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öşeden Publish seçin veya proje zaten canlıysa Update seçin.

Not: Projeniz Specify Sürüm kullanıyorsa ve Always Latest kullanmı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 bir build sırasında bildirdiği hatalar için Sorun Bildir bölümüne bakın.