Web Studio

Web Studio, ön yüz çalışma alanıdır. Zekâyı motor sağlar, ajan ise onu baştan sona kullanır. Sol raydan (Alt+Shift+W) ya da başlangıç ekranındaki Bir ekran tasarla ile açın.

Ön yüz dizini

Yuli projenizin ön yüzünü dizinler:

• React, Vue, Angular, HTML ve JSP bileşenleri.
• CSS, SCSS ve LESS stilleri.
• Rotalar, HTTP çağrıları ve mikro ön yüzler.
• Arka uçla bağlantı.

Mimari ve etki

• Bileşen, dosya, rota, API ve stil grafikleri; sayfaların, bileşenlerin, servislerin, API'nin, arka ucun ve verinin birleşik görünümü.
• Etki analizi: bir dosyayı, bileşeni, seçiciyi, stil değişkenini veya rotayı değiştirdiğinizde neyin bozulacağı.
• Erişilebilirlik: WCAG tabanlı statik denetim.

Design Studio

Kod yazmadan önce tasarlayın.

• Cihaza göre sayfalar ve çerçeveler.
• Notlar ve bir durum akışı: taslak → inceleme → onaylandı → uygulandı.
• Diff, geri alma ve yineleme içeren sürümler.
• Tümleşik bir yapay zekâ çubuğu.

Design System

Renk, tipografi, boşluk, köşe yarıçapı, gölge, breakpoint ve hareket token'ları. Koddan içe aktarılır ve kontrast doğrulanır.

Tasarımdan koda

Yeni bileşenler, erişilebilir ve duyarlı işaretlemeyle projedeki bileşenleri yeniden kullanır. Yuli ayrıca mevcut koddan tasarımları yeniden oluşturur ve tasarımı kodla karşılaştırır.

İki sohbet, iki bağlam

• Ana sohbet kod üzerinde çalışır.
• Web Studio sohbeti, tuval üzerinde canlı olarak tasarım üzerinde çalışır.

Asla aynı konuşma dizisini paylaşmazlar. Ana sohbette arayüz tasarımına benzeyen bir şey yazarsanız, bu isteği tuvale gönderen «Web Studio'da tasarla» görünür. Açık bir tasarım varsa ana sohbet «Tasarımın sohbetine git» seçeneğini sunar.

Çalıştırmadan görünüm

Bir bileşeni, sayfayı, tasarımı veya yeni yazılmış kodu uygulamayı ya da geliştirme sunucusunu başlatmadan gösterir.

• Yalnızca o bileşeni projenin kendi araçlarıyla (SCSS ve LESS dahil) derler ve örnek prop'larla bağlar.
• Kurulu bağımlılıklar yoksa işaretlemeden yaklaşık bir taslak çizer.
• Kodu kaydettiğinizde veya tasarımı değiştirdiğinizde kendiliğinden güncellenir.

JSP uygulamaları

JSP web uygulamalarıyla da (Maven veya Gradle; Struts 1 veya 2, Spring MVC ya da yalnızca servlet'ler) çalışır: web kökünü, web.xml içindeki başlangıç sayfasını ve action rotalarını bulur; include'ları, iletileri ve taglib'leri çözümler.

Çalıştırmadan projenin tamamı

Geliştirme sunucusu olmadan, arka uç olmadan ve pencere açmadan uygulamanın tamamı:

• Paketleyicinin (Vite, webpack, CRA ve mikro ön yüzler) kullanacağı giriş noktasını, HTML sayfasını, temel rotayı ve .env profilini, gizli bilgileri açığa çıkarmadan kullanır.
• Proje başka bir araç kullanıyorsa Yuli'nin getirdiği esbuild'i kullanır.
• node_modules bağımlılıkları bir kez derlenir ve lockfile değişmediği sürece yeniden kullanılır.

API simülatörü

Uygulamanın her isteği şuradan yanıtlanır:

• Projenin OpenAPI veya Swagger sözleşmeleri.
• REST Client'ta kaydedilmiş yanıtlar.
• Özel kurallar: durum, gövde ve gecikme.

Tüm çağrıları canlı görürsünüz ve değişiklikler sayfa yeniden yüklenmeden ulaşır.

Kayıtlı rotalar

Rotaları proje bazında ad ve parametrelerle kaydedin. Uygulamanın doğrudan işe yarar durumda açılması için birini başlangıç rotası olarak işaretleyin.

Bölünmüş görünümler

• Tasarım + Kod: siz düzenlersiniz, görünüm kendiliğinden yeniden derlenir.
• Tasarım + YZ: istek rotayı, öğeyi, kodunu ve başarısız çağrıları içerir.

Gömülü önizleme

Her zaman IDE içinde, asla harici bir tarayıcıda değil:

• Projenin geliştirme sunucusu, bir bileşen veya herhangi bir URL.
• Bir seçici, aynı bileşeni «çalıştırmadan» ve «çalıştır» arasında değiştirir.
• Öğe ↔ bileşen ↔ kod satırı denetleyicisi.
• Konsol, ağ, ekran görüntüleri ve görsel karşılaştırma.

Compound

Compound, full-stack uygulamanın tamamını ayağa kaldırır:

• Bağımlılık sırasıyla, health check'lerle.
• Birleşik günlükler ve kademeli yeniden başlatma.
• Hata ayıklamaya hazır portlar.
• Gizli bilgiler her zaman maskelenmiş gösterilir.

Tanım .ai/compound.yaml içinde bulunur.

Ajanla birlikte

Ajan Web Studio'yu yuli_front_*, yuli_design_*, yuli_preview_* ve yuli_compound_* araçlarıyla kullanır: bir uygulama oluşturmadan veya çalıştırmadan görünümü inceleyebilir, görüntüsünü alabilir ve üzerinde yineleme yapabilir. Web Studio araçları, yalnızca projede ön yüz varsa modele gönderilir.