Ferramentas de Captura

Forneça ao AI um contexto visual preciso. Capturas de tela, seleção de elementos e imagens.

Quanto mais preciso for o contexto visual que você fornecer ao AI, melhores serão as edições. O Proyecta oferece diversas ferramentas de captura.

Selecionar um elemento (Visual Editor)

No modo Visual Editor, cada elemento do preview se torna clicável. Passe o cursor para destacar e clique para selecionar. O elemento selecionado é destacado com uma sobreposição, e suas propriedades editáveis (texto, cores, espaçamento, fontes, bordas, efeitos) aparecem no painel lateral.

Depois de selecionar um elemento, você pode:

• Editá-lo diretamente — alterar propriedades de forma inline sem escrever nenhum prompt
• Perguntar ao AI sobre ele — a seleção é passada como contexto, então você pode dizer "make this button bigger" ou "move this section above the hero" e o AI saberá exatamente o que você quer dizer

Elementos dinâmicos (classNames computados, renderização condicional, expressões) recorrem automaticamente ao chat do AI com um prompt estruturado.

Veja Visual Edit para a lista completa de propriedades editáveis.

Colar ou arrastar capturas de tela no chat

O campo de chat aceita imagens diretamente:

1. Colar — copie uma captura de tela com o atalho do seu sistema operacional (Cmd+Shift+4 no Mac, Win+Shift+S no Windows) e cole no chat
2. Arrastar — solte qualquer arquivo de imagem no campo de chat

Formatos suportados: PNG, JPEG, WebP, GIF, AVIF. Tamanho máximo: 10 MB por imagem.

Capturas de tela do preview

O AI pode tirar suas próprias capturas de tela do seu preview a qualquer momento por meio de uma ferramenta integrada chamada preview_screenshot. Você verá os resultados das capturas aparecerem inline no chat. O AI aciona isso automaticamente quando precisa verificar suas alterações ou entender o estado atual do seu app.

A ferramenta de captura pode ter como alvo rotas específicas (por exemplo, /dashboard, /settings) e captura dimensões, o que ajuda o AI a raciocinar sobre layout e espaçamento.

Perguntas frequentes

Como faço para apontar o AI para um botão ou texto específico?

Use o modo Visual Editor e clique no elemento. Isso passa uma referência precisa e estruturada para o AI — muito melhor do que descrever o elemento em palavras.

Em breve

As seguintes ferramentas de captura estão implementadas internamente, mas ainda não estão disponíveis na interface:

• Annotate — capture o preview atual e desenhe setas, retângulos, círculos, traços à mão livre e rótulos de texto antes de enviar ao AI.
• Screen Record — grave uma interação de múltiplas etapas (cliques, navegação, animações) e anexe os frames capturados à sua mensagem no chat. Ideal para bugs sensíveis ao tempo que uma única captura de tela não consegue capturar.