Web Studio

Web Studio est l’espace du front-end. L’intelligence est fournie par le moteur, et l’agent le pilote de bout en bout. Ouvrez-le depuis le rail de gauche (Alt+Shift+W) ou avec Concevoir un écran sur l’écran d’accueil.

Index du front

Yuli indexe le front-end de votre projet :

• Les composants React, Vue, Angular, HTML et JSP.
• Les styles CSS, SCSS et LESS.
• Les routes, les appels HTTP et les microfrontends.
• Le lien avec le backend.

Architecture et impact

• Des graphes de composants, fichiers, routes, API et styles, ainsi qu’une vue unifiée des pages, composants, services, API, backend et données.
• Analyse d’impact : ce qui casse lorsque vous modifiez un fichier, un composant, un sélecteur, une variable de style ou une route.
• Accessibilité : audit statique fondé sur les WCAG.

Design Studio

Concevez avant d’écrire du code.

• Pages et cadres par appareil.
• Annotations et un flux d’états : brouillon → revue → validé → implémenté.
• Versions avec diff, annulation et rétablissement.
• Une barre d’IA intégrée.

Design System

Tokens de couleur, typographie, espacements, rayons, ombres, breakpoints et animations. Ils sont importés depuis le code et le contraste est vérifié.

Du design au code

Les nouveaux composants réutilisent ceux du projet, avec un balisage accessible et responsive. Yuli reconstruit également des designs à partir du code existant et compare le design au code.

Deux chats, deux contextes

• Le chat principal travaille sur le code.
• Le chat de Web Studio travaille sur le design, en direct sur le canevas.

Ils ne partagent jamais de fil. Si, dans le chat principal, vous écrivez quelque chose qui ressemble à de la conception d’interface, « Concevoir dans Web Studio » apparaît et envoie cette demande au canevas. Si un design est ouvert, le chat principal propose « Aller au chat du design ».

Aperçu sans exécution

Affiche un composant, une page, un design ou du code fraîchement écrit sans démarrer l’application ni le serveur de développement.

• Il compile uniquement ce composant avec les outils du projet lui-même (y compris SCSS et LESS) et le monte avec des props d’exemple.
• Sans dépendances installées, il dessine une ébauche approximative à partir du balisage.
• Il se met à jour automatiquement lorsque vous enregistrez le code ou modifiez le design.

Applications JSP

Il fonctionne aussi avec les applications web JSP (Maven ou Gradle, avec Struts 1 ou 2, Spring MVC ou de simples servlets) : il trouve la racine web, la page d’accueil de web.xml et les routes des actions, et résout les includes, les messages et les taglibs.

Projet complet sans exécution

L’application entière, sans serveur de développement, sans backend et sans ouvrir de fenêtres :

• Il utilise le point d’entrée, la page HTML, le chemin de base et le profil .env qu’utiliserait le bundler (Vite, webpack, CRA et microfrontends), sans exposer de secrets.
• Si le projet utilise un autre outil, il recourt à l’esbuild fourni avec Yuli.
• Les dépendances de node_modules sont compilées une seule fois et réutilisées tant que le lockfile ne change pas.

Simulateur d’API

Chaque requête de l’application reçoit une réponse provenant :

• Des contrats OpenAPI ou Swagger du projet.
• Des réponses enregistrées du REST Client.
• De vos propres règles : statut, corps et délai.

Vous voyez tous les appels en direct, et les modifications arrivent sur la page sans la recharger.

Routes enregistrées

Enregistrez des routes nommées avec leurs paramètres, par projet. Marquez-en une comme route de démarrage pour que l’application s’ouvre directement dans l’état utile.

Vues partagées

• Design + Code : vous modifiez et la vue se recompile toute seule.
• Design + IA : la demande inclut la route, l’élément, son code et les appels en échec.

Aperçu intégré

Toujours dans l’IDE, jamais dans un navigateur externe :

• Le serveur de développement du projet, un composant ou n’importe quelle URL.
• Un sélecteur bascule le même composant entre « sans exécution » et « exécution ».
• Inspecteur élément ↔ composant ↔ ligne de code.
• Console, réseau, captures d’écran et comparaison visuelle.

Compound

Compound démarre l’application full stack complète :

• Dans l’ordre des dépendances, avec des health checks.
• Logs unifiés et redémarrage en cascade.
• Ports prêts pour le débogage.
• Les secrets sont toujours affichés masqués.

La définition se trouve dans .ai/compound.yaml.

Avec l’agent

L’agent pilote Web Studio avec les outils yuli_front_*, yuli_design_*, yuli_preview_* et yuli_compound_* : il peut inspecter l’aperçu, le capturer et itérer dessus sans créer ni lancer d’application. Les outils de Web Studio ne sont envoyés au modèle que si le projet comporte un front-end.