Documentação / O IDE

Web Studio

O espaço do front-end. Desenhe no Design Studio, veja o app sem executá-lo, simule APIs e suba o sistema completo com o Compound.

O Web Studio é o espaço do front-end. A inteligência vem do motor, e o agente o opera de ponta a ponta. Abra-o pela barra lateral esquerda (Alt+Shift+W) ou com Desenhar uma tela na tela inicial.

Índice do front

O Yuli indexa o front-end do seu projeto:

  • Componentes de React, Vue, Angular, HTML e JSP.
  • Estilos CSS, SCSS e LESS.
  • Rotas, chamadas HTTP e microfrontends.
  • A ligação com o backend.

Arquitetura e impacto

  • Grafos de componentes, arquivos, rotas, API e estilos, e uma visão unificada de páginas, componentes, serviços, API, backend e dados.
  • Análise de impacto: o que quebra ao alterar um arquivo, um componente, um seletor, uma variável de estilo ou uma rota.
  • Acessibilidade: auditoria estática baseada nas WCAG.

Design Studio

Desenhe antes de escrever código.

  • Páginas e frames por dispositivo.
  • Anotações e um fluxo de estados: rascunho → revisão → aprovado → implementado.
  • Versões com diff, desfazer e refazer.
  • Uma barra de IA integrada.

Design System

Tokens de cor, tipografia, espaçamento, raios, sombras, breakpoints e movimento. Eles são importados a partir do código, e o contraste é verificado.

Do design ao código

Ação O que faz
Implementar com IA Entrega os arquivos gerados ao chat principal para revisá-los na janela de alterações.
Criar arquivos Grava-os diretamente.

Os componentes novos reutilizam os do projeto, com marcação acessível e responsiva. O Yuli também reconstrói designs a partir do código existente e compara o design com o código.

Dois chats, dois contextos

  • O chat principal trabalha no código.
  • O chat do Web Studio trabalha no design, ao vivo sobre a tela de desenho.

Eles nunca compartilham a mesma conversa. Se no chat principal você escrever algo que soa como design de interface, aparece “Desenhar no Web Studio”, que envia esse pedido para a tela de desenho. Se houver um design aberto, o chat principal oferece “Ir ao chat do design”.

Visualização sem executar

Mostra um componente, uma página, um design ou um código recém-escrito sem iniciar a aplicação nem o servidor de desenvolvimento.

  • Compila só esse componente com as ferramentas do próprio projeto (incluindo SCSS e LESS) e o monta com props de exemplo.
  • Sem dependências instaladas, desenha um esboço aproximado a partir da marcação.
  • Atualiza-se sozinha ao salvar o código ou alterar o design.

Aplicações JSP

Também funciona com aplicações web JSP (Maven ou Gradle, com Struts 1 ou 2, Spring MVC ou apenas servlets): encontra a raiz web, a página inicial do web.xml e as rotas das actions, e resolve includes, mensagens e taglibs.

Projeto completo sem executar

A aplicação inteira, sem servidor de desenvolvimento, sem backend e sem abrir janelas:

  • Usa a entrada, a página HTML, o caminho base e o perfil .env que o empacotador usaria (Vite, webpack, CRA e microfrontends), sem expor segredos.
  • Se o projeto usa outra ferramenta, usa o esbuild que vem com o Yuli.
  • As dependências de node_modules são compiladas uma vez e reutilizadas enquanto o lockfile não mudar.

Simulador de APIs

Cada requisição do app é respondida a partir de:

  • Contratos OpenAPI ou Swagger do projeto.
  • Respostas salvas do REST Client.
  • Regras próprias: status, corpo e atraso.

Você vê todas as chamadas ao vivo, e as alterações chegam à página sem recarregá-la.

Rotas salvas

Salve rotas com nome e parâmetros por projeto. Marque uma como rota inicial para que o app já abra no estado útil.

Visualizações divididas

  • Design + Código: você edita e a visualização se recompila sozinha.
  • Design + IA: o pedido leva a rota, o elemento, o código dele e as chamadas que falharam.

Pré-visualização incorporada

Sempre dentro do IDE, nunca em um navegador externo:

  • O servidor de desenvolvimento do projeto, um componente ou qualquer URL.
  • Um seletor alterna o mesmo componente entre “sem executar” e “executar”.
  • Inspetor elemento ↔ componente ↔ linha de código.
  • Console, rede, capturas de tela e comparação visual.

Compound

O Compound sobe a aplicação full-stack completa:

  • Na ordem das dependências, com health checks.
  • Logs unificados e reinício em cascata.
  • Portas prontas para depurar.
  • Os segredos sempre aparecem mascarados.

A definição fica em .ai/compound.yaml.

Com o agente

O agente opera o Web Studio com as ferramentas yuli_front_*, yuli_design_*, yuli_preview_* e yuli_compound_*: ele pode inspecionar a visualização, capturá-la e iterar sobre ela sem criar nem rodar um app. As ferramentas do Web Studio só são enviadas ao modelo se o projeto tiver front-end.