Görsel Editör

Metin, renk, boşluk, yazı tipi ve daha fazlasını düzenlemek için elemanlara tıklayın. Küçük değişiklikler için en iyisi; daha büyük değişiklikler için sohbeti kullanın.

Görsel Editör, elemanlara tıklayarak ve özelliklerini doğrudan düzenleyerek uygulamanın arayüzünü değiştirmeni sağlar. Etkinleştirmek için builder araç çubuğunda Visual moduna geç.

Nasıl çalışır?

Araç çubuğunda Visual moduna geç (Preview, Code ve Dashboard’un yanında yer alır)
Önizlemedeki elemanların üzerine gel — bir katmanla vurgulanırlar
Seçmek için bir elemana tıkla
Kenar panel panelinde özellikleri düzenle: metin, renkler, boşluk, yazı tipleri, kenarlıklar, görseller, efektler

Değişiklikler önizlemeye anında uygulanır ve kaynak dosyalarına yazılır. Son özellik değişikliğini geri almak için kenar paneldeki Reset last edit düğmesini kullan.

Ne düzenleyebilirim?

Metin — İçeriği doğrudan düzenle
Yazı tipi boyutu — xs, sm, base, lg, xl, vb.
Yazı tipi kalınlığı — thin, light, normal, medium, semibold, bold, extrabold
Yazı tipi ailesi — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Yazı tipi stili — İtalik geçişi
Metin hizalama — left, center, right, justify
Metin rengi — Herhangi bir Tailwind rengi
Arka plan rengi — Herhangi bir Tailwind rengi
Boşluk — Her tarafta padding ve margin
Kenarlık — Genişlik, renk ve yarıçap (metin içeriği olmayan kapsayıcı elemanlarda kullanılabilir)
Görsel — Stok fotoğraf aramasıyla değiştir veya kendi görselini yükle (img elemanlarına ve arka plan görsellerine uygulanır)
Efektler — Gölge ve opaklık

Geri al / Yeniden yap

Değişiklikleri geri almak için Cmd+Z (Mac) veya Ctrl+Z (Windows) kullan. Yeniden yapmak için Cmd+Shift+Z / Ctrl+Shift+Z.

Sayfa paleti

Görsel Editör, sayfanı inceleyerek halihazırda kullanımda olan her Tailwind rengini ve CSS özel özelliğini ortaya çıkarır. Seçili elemanın renk seçicisini açtığında, hex kodlarını tahmin etmek yerine mevcut tasarım sisteminde tutarlı kalmak için bu sayfa paletinden seçim yapabilirsin.

Seçili eleman hakkında yapay zekaya sor

Özellik editörünün ifade edemediği değişiklikler için kenar panelin altındaki Ask AI alanına kısa bir istem yaz. Seçili eleman bağlam olarak iletilir; bu sayede “bu kartı daha kompakt yap” veya “hafif bir yükselme efektiyle hover durumu ekle” gibi istemler, hangi elemanı kastettiğini açıklamana gerek kalmadan çalışır.

Statik ve Dinamik Elemanlar

Görsel Editör, className ve metin içeriğinin JSX’te string literal olduğu statik elemanlarda en iyi şekilde çalışır. Dinamik elemanlar (hesaplanan className’ler, koşullu render, ifadeler) için editör otomatik olarak yapılandırılmış bir istemle AI sohbetine geçer.

Görsel Editörü ne zaman kullanmalıyım?

Görsel Editör, küçük ve hızlı değişiklikler için en iyisidir:

Yazım hatası düzeltme
Boşluk ayarlama
Renk değiştirme
Düğme metnini güncelleme

Daha büyük değişiklikler için (yeni bölümler, düzen yeniden yapılandırmaları, yeni özellikler) bunun yerine AI sohbetini kullan.

Değişiklikler nasıl kaydedilir?

Bir özelliği düzenlediğinde değişiklikler otomatik olarak kaydedilir. Dosya, runtime ortamına yazılır ve yapay zeka ya da sen bir commit oluşturduğunda işleme alınır.

SSS

Görsel düzenlemeleri geri alabilir miyim?

Evet. Geri almak için Cmd+Z / Ctrl+Z kullan. Görsel Editör, kendi geri al/yeniden yap yığınını korur.

Neden bazı elemanları düzenleyebiliyorum ama diğerlerini düzenleyemiyorum?

Statik metin ve className nitelikleri doğrudan düzenlenebilir. Dinamik veya hesaplanan değerler (template literal’lar, üçlü ifadeler, fonksiyon çağrıları) otomatik olarak AI sohbetine geçer.

Görsel Editör ile Kod Editörü arasındaki fark nedir?

Araç	En iyisi olduğu durum
Visual Editor	Tıklayarak hızlı özellik değişiklikleri (metin, renkler, boşluk)
Code Editor	VS Code ile tam kaynak kod düzenleme
AI Chat	Karmaşık değişiklikler, yeni özellikler, hata ayıklama