Görsel arayüz istemi oluşturucu
Canlı tipografi, renk, spacing ve yarı kontrolleri ile görsel bir yön oluşturun. Kesin bir UI kopyalayın istem veya indirmek CSS değişkenler.
Ayrıntıları ayarlayın. Onları canlı görün.
Interface önizleme
PREVIEWOdayı yapmak için
Yeni bir şey.
Bir el-on seramik atölyesi. İyi bir şirket, küçük bir çamur ve daha yavaş bir Cumartesi.
Stüdyo oturumu
2 saat · 8 yer
Illustrative önizleme. Yapıcınız son arayüzü uygular.
Tasarım yönünüzün yönü
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
Dışa aktarılan metin İngilizce kalır; girdileriniz olduğu gibi korunur.
No signup. Hiçbir AI kredisi yok. Bu araç tarayıcınızda çıktınızı birleştirir.
Bir fikirden faydalı bir şey için.
- 01
Bir başlangıçla başlayın, sonra ayrıntıları ayarlar.
- 02
Canlı arayüzde seçimlerinizi kontrol edin.
- 03
Tasarım kısasını kopyalayın veya indirmenizi indirin CSS değişkenler.
Küçük bir bağlam.
Görsel tercihleri pratik bir eloff için açın Lovable, Bolt, v0, ya da kodlama ajanınız. Tanıtım ve Tanıtım istem Aynı ayarları kullanın, böylece seçilmiş spacing, tipi ve renkler tutarlı kalır. Bu araç seçiminizden talimatları birleştirir; AI ile tasarımları analiz etmez veya üretir.
İyi sorular.
kullanabilir miyim? istem Herhangi bir uygulama oluşturucuda?
Evet. Çıktı standart arayüz özelliklerini açıklar ve tasarım yönü olarak çalışır Lovable, Bolt, v0, ve kodlama asistanları. İnşaatınız hala onları nasıl uygulayacağına karar verir.
Ne dahil edilir CSS download?
Küçük bir set küçük bir set CSS aksan rengi, arka plan, metin, font, spacing, yarıçap ve gölgeniz için özel özellikler. Onları bir projede kullanmadan önce mevcut tasarım Jetonlarına haritalayın.
önizleme kontrol erişilebilir mi?
Araç, aksanınız ve düğme metniniz arasındaki kontrastı bildiriyor. Bu dar bir renk kontrolü, tam erişilebilirlik denetimi değil. Son arayüzü de klavye ve yardımcı teknoloji ile test edin.