Web Studio

Web Studio este spațiul pentru front-end. Inteligența vine de la motor, iar agentul îl operează de la un capăt la altul. Deschide-l din șina din stânga (Alt+Shift+W) sau cu Proiectează un ecran de pe ecranul de start.

Indexul front-end-ului

Yuli indexează front-end-ul proiectului tău:

• Componente React, Vue, Angular, HTML și JSP.
• Stiluri CSS, SCSS și LESS.
• Rute, apeluri HTTP și microfrontend-uri.
• Legătura cu backend-ul.

Arhitectură și impact

• Grafuri de componente, fișiere, rute, API și stiluri, plus o vizualizare unificată a paginilor, componentelor, serviciilor, API-ului, backend-ului și datelor.
• Analiza impactului: ce se strică dacă modifici un fișier, o componentă, un selector, o variabilă de stil sau o rută.
• Accesibilitate: audit static bazat pe WCAG.

Design Studio

Proiectează înainte să scrii cod.

• Pagini și cadre pentru fiecare dispozitiv.
• Adnotări și un flux de stări: ciornă → revizuire → aprobat → implementat.
• Versiuni cu diff, anulare și refacere.
• O bară IA integrată.

Design System

Tokeni de culoare, tipografie, spațiere, raze, umbre, breakpoint-uri și mișcare. Se importă din cod, iar contrastul este verificat.

De la design la cod

Componentele noi le refolosesc pe cele din proiect, cu marcaj accesibil și responsive. Yuli reconstruiește și designuri pornind de la codul existent și compară designul cu codul.

Două chaturi, două contexte

• Chatul principal lucrează pe cod.
• Chatul din Web Studio lucrează pe design, în timp real, pe planșă.

Nu împart niciodată același fir. Dacă în chatul principal scrii ceva ce sună a design de interfață, apare „Proiectează în Web Studio”, care trimite cererea pe planșă. Dacă există un design deschis, chatul principal oferă „Mergi la chatul designului”.

Vizualizare fără rulare

Afișează o componentă, o pagină, un design sau cod abia scris fără să pornești aplicația sau serverul de dezvoltare.

• Compilează doar acea componentă cu uneltele proiectului (inclusiv SCSS și LESS) și o montează cu props de exemplu.
• Fără dependențe instalate, desenează o schiță aproximativă pornind de la marcaj.
• Se actualizează singură când salvezi codul sau modifici designul.

Aplicații JSP

Funcționează și cu aplicații web JSP (Maven sau Gradle, cu Struts 1 sau 2, Spring MVC sau doar servlet-uri): găsește rădăcina web, pagina de start din web.xml și rutele acțiunilor și rezolvă include-urile, mesajele și taglib-urile.

Proiectul complet fără rulare

Întreaga aplicație, fără server de dezvoltare, fără backend și fără a deschide ferestre:

• Folosește punctul de intrare, pagina HTML, ruta de bază și profilul .env pe care le-ar folosi bundler-ul (Vite, webpack, CRA și microfrontend-uri), fără a expune secrete.
• Dacă proiectul folosește altă unealtă, folosește esbuild-ul inclus în Yuli.
• Dependențele din node_modules se compilează o singură dată și sunt refolosite cât timp lockfile-ul nu se schimbă.

Simulator de API-uri

Fiecare cerere a aplicației primește răspuns din:

• Contractele OpenAPI sau Swagger ale proiectului.
• Răspunsuri salvate din REST Client.
• Reguli proprii: stare, corp și întârziere.

Vezi toate apelurile în timp real, iar modificările ajung în pagină fără reîncărcare.

Rute salvate

Salvează rute cu nume și parametri pentru fiecare proiect. Marchează una ca rută de start, ca aplicația să se deschidă direct în starea utilă.

Vizualizări împărțite

• Design + Cod: editezi, iar vizualizarea se recompilează singură.
• Design + IA: cererea include ruta, elementul, codul lui și apelurile eșuate.

Previzualizare încorporată

Mereu în interiorul IDE-ului, niciodată într-un browser extern:

• Serverul de dezvoltare al proiectului, o componentă sau orice URL.
• Un selector comută aceeași componentă între „fără rulare” și „rulare”.
• Inspector element ↔ componentă ↔ linie de cod.
• Consolă, rețea, capturi și comparare vizuală.

Compound

Compound pornește aplicația full-stack completă:

• În ordinea dependențelor, cu health checks.
• Loguri unificate și repornire în cascadă.
• Porturi pregătite pentru depanare.
• Secretele sunt afișate întotdeauna mascat.

Definiția se află în .ai/compound.yaml.

Cu agentul

Agentul operează Web Studio cu uneltele yuli_front_*, yuli_design_*, yuli_preview_* și yuli_compound_*: poate inspecta vizualizarea, o poate captura și poate itera pe ea fără să creeze sau să ruleze o aplicație. Uneltele Web Studio sunt trimise modelului doar dacă proiectul are front-end.