Web Studio

Web Studio ist der Arbeitsbereich fürs Frontend. Die Intelligenz liefert die Engine, und der Agent bedient es von Anfang bis Ende. Öffne es über die linke Leiste (Alt+Shift+W) oder mit Einen Bildschirm gestalten auf dem Startbildschirm.

Frontend-Index

Yuli indiziert das Frontend deines Projekts:

• Komponenten in React, Vue, Angular, HTML und JSP.
• Styles in CSS, SCSS und LESS.
• Routen, HTTP-Aufrufe und Microfrontends.
• Die Verbindung zum Backend.

Architektur und Auswirkungen

• Graphen von Komponenten, Dateien, Routen, APIs und Styles sowie eine einheitliche Ansicht von Seiten, Komponenten, Services, APIs, Backend und Daten.
• Auswirkungsanalyse: was kaputtgeht, wenn du eine Datei, eine Komponente, einen Selektor, eine Style-Variable oder eine Route änderst.
• Barrierefreiheit: statisches Audit auf Basis der WCAG.

Design Studio

Gestalte, bevor du Code schreibst.

• Seiten und Frames pro Gerät.
• Anmerkungen und ein Status-Workflow: Entwurf → Prüfung → genehmigt → umgesetzt.
• Versionen mit Diff, Rückgängig und Wiederholen.
• Eine integrierte KI-Leiste.

Design System

Tokens für Farbe, Typografie, Abstände, Radien, Schatten, Breakpoints und Bewegung. Sie werden aus dem Code importiert, und der Kontrast wird geprüft.

Vom Design zum Code

Neue Komponenten verwenden die vorhandenen des Projekts wieder, mit barrierefreiem und responsivem Markup. Yuli rekonstruiert außerdem Designs aus bestehendem Code und vergleicht das Design mit dem Code.

Zwei Chats, zwei Kontexte

• Der Hauptchat arbeitet am Code.
• Der Chat von Web Studio arbeitet am Design, live auf der Arbeitsfläche.

Sie teilen nie einen Verlauf. Wenn du im Hauptchat etwas schreibst, das nach Oberflächendesign klingt, erscheint „In Web Studio gestalten“ und schickt diese Anfrage an die Arbeitsfläche. Ist ein Design geöffnet, bietet der Hauptchat „Zum Chat des Designs“ an.

Ansicht ohne Ausführen

Zeigt eine Komponente, eine Seite, ein Design oder frisch geschriebenen Code an, ohne die Anwendung oder den Entwicklungsserver zu starten.

• Kompiliert nur diese Komponente mit den projekteigenen Werkzeugen (einschließlich SCSS und LESS) und rendert sie mit Beispiel-Props.
• Ohne installierte Abhängigkeiten zeichnet sie eine ungefähre Skizze aus dem Markup.
• Aktualisiert sich automatisch, wenn du den Code speicherst oder das Design änderst.

JSP-Anwendungen

Funktioniert auch mit JSP-Webanwendungen (Maven oder Gradle, mit Struts 1 oder 2, Spring MVC oder reinen Servlets): Sie findet das Web-Root, die Startseite aus web.xml und die Routen der Actions und löst Includes, Messages und Taglibs auf.

Komplettes Projekt ohne Ausführen

Die gesamte Anwendung, ohne Entwicklungsserver, ohne Backend und ohne Fenster zu öffnen:

• Verwendet den Einstiegspunkt, die HTML-Seite, den Basispfad und das .env-Profil, die auch der Bundler verwenden würde (Vite, webpack, CRA und Microfrontends), ohne Geheimnisse preiszugeben.
• Nutzt das Projekt ein anderes Werkzeug, verwendet sie das mitgelieferte esbuild von Yuli.
• Die Abhängigkeiten aus node_modules werden einmal kompiliert und wiederverwendet, solange sich das Lockfile nicht ändert.

API-Simulator

Jede Anfrage der App wird beantwortet aus:

• OpenAPI- oder Swagger-Verträgen des Projekts.
• Gespeicherten Antworten aus dem REST Client.
• Eigenen Regeln: Status, Body und Verzögerung.

Du siehst alle Aufrufe live, und Änderungen erreichen die Seite, ohne dass sie neu geladen wird.

Gespeicherte Routen

Speichere Routen mit Namen und Parametern pro Projekt. Markiere eine als Startroute, damit die App direkt im nützlichen Zustand öffnet.

Geteilte Ansichten

• Design + Code: Du bearbeitest, und die Ansicht kompiliert sich automatisch neu.
• Design + KI: Die Anfrage enthält die Route, das Element, seinen Code und die fehlgeschlagenen Aufrufe.

Eingebettete Vorschau

Immer innerhalb der IDE, nie in einem externen Browser:

• Der Entwicklungsserver des Projekts, eine Komponente oder eine beliebige URL.
• Ein Umschalter wechselt dieselbe Komponente zwischen „ohne Ausführen“ und „ausführen“.
• Inspektor Element ↔ Komponente ↔ Codezeile.
• Konsole, Netzwerk, Screenshots und visueller Vergleich.

Compound

Compound startet die komplette Full-Stack-Anwendung:

• In der Reihenfolge der Abhängigkeiten, mit Health Checks.
• Einheitliche Logs und kaskadierender Neustart.
• Ports, die bereit zum Debuggen sind.
• Geheimnisse werden immer maskiert angezeigt.

Die Definition liegt in .ai/compound.yaml.

Mit dem Agenten

Der Agent bedient Web Studio mit den Werkzeugen yuli_front_*, yuli_design_*, yuli_preview_* und yuli_compound_*: Er kann die Ansicht inspizieren, Screenshots davon machen und darauf iterieren, ohne eine App zu erstellen oder auszuführen. Die Werkzeuge von Web Studio werden nur an das Modell gesendet, wenn das Projekt ein Frontend hat.