Skip to main content
A barra de ferramentas do Canvas é uma barra flutuante ancorada na parte inferior central do quadro. Ela expõe as ferramentas que você usa para navegar, desenhar, editar e adicionar conteúdo. A barra de ferramentas aparece no modo Canvas.
Detalhe da barra de ferramentas do Canvas com os botões apenas com ícone Interact (selecionado) e Pan à esquerda, seguidos dos botões com rótulo Chat, Draw, Edit e Generate à direita

​
Ferramentas

Selecionar uma ferramenta a torna ativa. A ferramenta ativa é destacada com um fundo preenchido. O grupo mais à esquerda é de navegação (Interact, Pan). O restante são ferramentas de conteúdo e marcação. As ferramentas são mutuamente exclusivas, o que significa que selecionar uma desativa as outras.

​
Interact

Interact é a ferramenta padrão. Use-a para selecionar frames, arrastá-los e clicar em um Artifact ativo para usá-lo como um app real em execução. Com o Interact ativo, clicar em um frame o seleciona e exibe a barra de ações por frame.
Canvas com um artifact de Website selecionado usando a ferramenta Interact — o frame está contornado com alças de seleção e a barra de ações por frame é exibida acima dele. A ferramenta Interact está destacada na barra de ferramentas flutuante na parte inferior.
Atalho de teclado: V. Disponibilidade: sempre ativa.

​
Pan

Pan transforma o cursor em uma ferramenta de arrastar para que você possa mover o próprio quadro. Enquanto o Pan está ativo, clicar e arrastar move o viewport em vez de selecionar um frame. Você também pode navegar (pan) a partir de qualquer outra ferramenta segurando a barra de espaço e arrastando, ou arrastando com o botão do meio do mouse.
Canvas com a ferramenta Pan ativa — um artifact de Website (Velocity — Supercar Rental) e um mockup de Design (Velocity — Home (Mockup)) estão visíveis no quadro, e a ferramenta Pan (cursor de mão) está destacada na barra de ferramentas flutuante na parte inferior.
Atalho de teclado: H. Disponibilidade: sempre ativa.

​
Chat

Chat coloca um pequeno campo de chat diretamente no quadro para que você possa enviar prompts ao Agent sem sair do Canvas. Elementos e frames selecionados continuam anexados à mensagem como capturas, da mesma forma que ao enviar pelo painel de chat lateral do Agent.
Canvas no modo Chat com o restante do quadro escurecido e o campo de chat inline sobreposto a um artifact de Website. Um chip 'div' no campo de chat indica um elemento selecionado, e o prompt diz 'suggest three alternatives to this image'. A ferramenta Chat está destacada na barra de ferramentas flutuante na parte inferior.
Disponibilidade: ferramenta Chat (somente desktop).

​
Draw

Draw ativa as ferramentas de marcação, como desenho livre, setas, notas adesivas e formas, para que você possa esboçar sobre os frames ou anotar o quadro. Use-a para circular pontos problemáticos, apontar para elementos que você quer mudar ou deixar uma nota escrita ao lado de um frame. Quando o Draw está ativo, uma barra de Shape properties aparece acima da barra de ferramentas flutuante com controles de cor, traço e preenchimento para a ferramenta de marcação atual. Ela é ocultada automaticamente quando você volta para o Interact ou o Pan.
Canvas com a ferramenta Draw ativa — um retângulo 'Widget' desenhado e uma nota adesiva roxa 'Add a widget' estão posicionados ao lado de um frame. A barra Shape properties (ferramentas de lápis, texto, retângulo, seta e nota adesiva, além de amostras de cor e um controle de tamanho de texto Aa) é exibida acima da barra de ferramentas flutuante, com o Draw destacado.
Disponibilidade: sempre ativa.

​
Edit

Edit é o seletor visual de elementos. Com o Edit ativo, clique dentro de um Artifact ativo para atingir um elemento (um botão, um título, uma imagem). Selecionar um elemento abre o Visual Editor — um painel de controles à direita (Layout, Color, Border e mais) combinado com um prompt inline para pedir ao Agent que mude apenas aquela parte. Veja Elements e Visual Editor para o fluxo completo.
A ferramenta Edit ativa em um site de aluguel de superesportivos com um elemento div selecionado, e o painel do Visual Editor mostrando os controles Text, Layout, Color e Border, além dos botões Discard e Save edits
Disponibilidade: sempre ativa (desktop). Desativada até que exista pelo menos um frame; a dica exibe “Crie um artifact ou gere um design para editar.” Oculta em dispositivos móveis.

​
Generate

Generate abre o popover Generate media para imagens, vídeos e gráficos vetoriais. Escolha um tipo, escreva um prompt e o Agent coloca o resultado como um novo frame no quadro.
O menu + Add do Canvas aberto com quatro opções empilhadas verticalmente: Design ('Mock up interfaces and visual concepts'), Image ('Generate and edit images'), Video ('Generate motion clips and animations') e Vector Graphic ('Generate vector illustrations and SVGs'). O espaço do Generate na barra de ferramentas flutuante na parte inferior agora exibe '+ Generate'.
O popover tem quatro abas no topo:
  • Design — Image
  • Video
  • Vector Graphic
Alguns controles são compartilhados entre os tipos; outros são específicos de cada tipo. Controles compartilhados (todos os tipos):
  • Model: o modelo de geração a ser usado. Os modelos disponíveis variam conforme o tipo (veja a tabela abaixo).
  • Prompt: descrição em linguagem natural do que você quer que o Agent gere.
  • Generate: envia a solicitação e reserva um frame de espaço reservado na posição do cursor. O espaço reservado se transforma em um frame ativo assim que o recurso fica pronto; se a geração falhar, o espaço reservado é removido e um erro aparece no painel de chat.
Modelos e controles por tipo:
A lista de modelos muda com frequência. A tabela reflete o que está disponível atualmente; confira o menu suspenso no produto para saber o que sua conta pode usar hoje.
Para saber o que cada tipo de frame é e o que você pode fazer com ele depois de criado, veja Frames.

​
Anexe referências visuais

Antes de gerar, você pode anexar itens já presentes no seu quadro como referências visuais. O Agent usa essas referências para guiar o resultado para que combine com a aparência do seu projeto. Abra o menu + dentro do formulário Generate media e escolha uma opção:
  • Upload file: envie uma imagem do seu computador para usar como referência.
  • Select canvas elements: escolha itens existentes no quadro. Frames são capturados como screenshots; formas de texto e notas são anexadas como resumos de texto.
Cada referência aparece como um chip no formulário. Adicione quantas precisar, escreva seu prompt e selecione Generate. Para remover uma referência, selecione o chip.
O formulário Generate media no Canvas com o menu de mais aberto, mostrando as opções Upload file e Select canvas elements e o menu suspenso de modelo definido como Nano Banana Pro

O formulário Generate media com o menu + aberto, mostrando Upload file e Select canvas elements.

O ChatGPT Images 2.0 não suporta uploads no momento. Troque o modelo, por exemplo para o Nano Banana Pro, para anexar referências visuais.
Quando o Add menu está habilitado, o botão Generate é substituído por um menu + que reúne os tipos do popover com Design (um mockup visual independente que não afeta o código ativo): Disponibilidade: geração de imagens. Vector Graphic precisa da geração de gráficos vetoriais; Video precisa da geração de vídeo. O menu + requer o Add menu (que por sua vez requer a geração de imagens). Panorâmica, zoom, gestos de seleção e seus atalhos de teclado são comportamentos no nível do quadro, não ferramentas da barra de ferramentas. Veja Navegue pelo quadro na página do Canvas.

​
Páginas relacionadas

  • Canvas — o próprio quadro: como abri-lo, navegar por ele e o que existe nele.
  • Frames — tipos de frame; a barra de ações por frame; Build e Focus.
  • Elements — as peças individuais dentro de um frame.
  • Visual Editor — o fluxo de seleção de elementos para o qual o Edit te leva.