Web Studio

Web Studio es el espacio del front-end. La inteligencia la aporta el motor y el agente lo opera de punta a punta. Ábrelo desde el riel izquierdo (Alt+Shift+W) o con Diseñar una pantalla en la pantalla de inicio.

Índice del front

Yuli indexa el front-end de tu proyecto:

• Componentes de React, Vue, Angular, HTML y JSP.
• Estilos CSS, SCSS y LESS.
• Rutas, llamadas HTTP y microfrontends.
• El enlace con el backend.

Arquitectura e impacto

• Grafos de componentes, archivos, rutas, API y estilos, y una vista unificada de páginas, componentes, servicios, API, backend y datos.
• Análisis de impacto: qué se rompe al cambiar un archivo, un componente, un selector, una variable de estilo o una ruta.
• Accesibilidad: auditoría estática basada en WCAG.

Design Studio

Diseña antes de escribir código.

• Páginas y marcos por dispositivo.
• Anotaciones y un flujo de estados: borrador → revisión → aprobado → implementado.
• Versiones con diff, deshacer y rehacer.
• Una barra de IA integrada.

Design System

Tokens de color, tipografía, espaciado, radios, sombras, breakpoints y movimiento. Se importan desde el código y se verifica el contraste.

Del diseño al código

Los componentes nuevos reutilizan los del proyecto, con marcado accesible y responsive. Yuli también reconstruye diseños a partir del código existente y compara el diseño con el código.

Dos chats, dos contextos

• El chat principal trabaja en el código.
• El chat de Web Studio trabaja en el diseño, en vivo sobre el lienzo.

Nunca comparten hilo. Si en el chat principal escribes algo que suena a diseño de interfaz, aparece «Diseñar en Web Studio», que envía ese pedido al lienzo. Si hay un diseño abierto, el chat principal ofrece «Ir al chat del diseño».

Vista sin ejecutar

Muestra un componente, una página, un diseño o código recién escrito sin arrancar la aplicación ni el servidor de desarrollo.

• Compila solo ese componente con las herramientas del propio proyecto (incluidos SCSS y LESS) y lo monta con props de ejemplo.
• Sin dependencias instaladas, dibuja un boceto aproximado a partir del marcado.
• Se actualiza sola al guardar el código o cambiar el diseño.

Aplicaciones JSP

Funciona también con aplicaciones web JSP (Maven o Gradle, con Struts 1 o 2, Spring MVC o solo servlets): encuentra la raíz web, la página de inicio de web.xml y las rutas de las acciones, y resuelve includes, mensajes y taglibs.

Proyecto completo sin ejecutar

La aplicación entera, sin servidor de desarrollo, sin backend y sin abrir ventanas:

• Usa la entrada, la página HTML, la ruta base y el perfil .env que usaría el empaquetador (Vite, webpack, CRA y microfrontends), sin exponer secretos.
• Si el proyecto usa otra herramienta, usa el esbuild que trae Yuli.
• Las dependencias de node_modules se compilan una vez y se reutilizan mientras no cambie el lockfile.

Simulador de APIs

Cada petición de la app se responde desde:

• Contratos OpenAPI o Swagger del proyecto.
• Respuestas guardadas del REST Client.
• Reglas propias: estado, cuerpo y retraso.

Ves todas las llamadas en vivo y los cambios llegan a la página sin recargarla.

Rutas guardadas

Guarda rutas con nombre y parámetros por proyecto. Marca una como ruta de inicio para que la app abra ya en el estado útil.

Vistas divididas

• Diseño + Código: editas y la vista se recompila sola.
• Diseño + IA: el pedido lleva la ruta, el elemento, su código y las llamadas fallidas.

Vista previa embebida

Siempre dentro del IDE, nunca en un navegador externo:

• El servidor de desarrollo del proyecto, un componente o cualquier URL.
• Un selector cambia el mismo componente entre «sin ejecutar» y «ejecutar».
• Inspector elemento ↔ componente ↔ línea de código.
• Consola, red, capturas y comparación visual.

Compound

Compound levanta la aplicación full-stack completa:

• En orden de dependencias, con health checks.
• Logs unificados y reinicio en cascada.
• Puertos listos para depurar.
• Los secretos siempre se muestran enmascarados.

La definición vive en .ai/compound.yaml.

Con el agente

El agente opera Web Studio con las herramientas yuli_front_*, yuli_design_*, yuli_preview_* y yuli_compound_*: puede inspeccionar la vista, capturarla e iterar sobre ella sin crear ni correr una app. Las herramientas de Web Studio solo se envían al modelo si el proyecto tiene front-end.