> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Canvas > Gere, reimagine e construa designs de aplicativos visualmente no Canvas. ## O que é o Canvas? Canvas é a visualização de design do Editor de Projetos. O Agent gera frames representando sites, designs, imagens, gráficos vetoriais e vídeos, e os organiza em um quadro infinito. Você pode movê-los e redimensioná-los, gerar variantes e iterar com o chat. A aba Preview no Editor de Projetos com o botão Canvas destacado e sua dica de ferramenta aberta, exibindo 'Alternar para o modo Canvas — O Canvas permite que você projete, anote e refine todas as suas ideias em um só lugar.' Clique no botão **Canvas** no canto superior esquerdo da aba Preview para alternar o painel para o modo Canvas. Para voltar o painel ao aplicativo ao vivo, clique no seletor de artefatos ao lado do botão Canvas e escolha o artefato que deseja visualizar. ## Recursos do Canvas O Canvas expõe um pequeno conjunto de recursos, cada um acessado pela barra de ferramentas ou pela barra de ações por frame. * **[Gerar](/pt/references/design/toolbar#generate)**: crie novos frames (designs, imagens, gráficos vetoriais, vídeos) pelo menu Gerar da barra de ferramentas ou por um prompt no chat. * **[Refinar](/pt/references/design/frames#refine-inline-edits)**: aplique edições pontuais a um frame no local por meio do campo de edição inline. * **[Reimaginar](/pt/references/design/frames#reimagine)**: produza variantes lado a lado de um frame existente usando direções predefinidas ou um prompt personalizado. * **[Construir](/pt/references/design/frames#build)**: promova um frame de Design para um Artefato ao vivo pelo menu **Construir** do frame. ## Anatomia do Canvas Canvas com três regiões identificadas: dois Frames (um artefato Website à esquerda, um mockup de Design à direita), um Elemento destacado dentro do frame Website (a seção hero) e a Barra de Ferramentas flutuante — Chat, Desenho, Editar, Gerar — na parte inferior Terminologia do Canvas: * **Canvas**: a superfície infinita de pan e zoom que contém todos os frames, formas e notas. * **Frames**: cada bloco no Canvas é um frame. Os dois tipos principais são **Artefatos** (ao vivo, com suporte de aplicativo — o cabeçalho do frame exibe **Website**, **Slides**, etc.) e **Designs** (mockups que não interagem com o aplicativo ao vivo — o cabeçalho do frame exibe **Design**). Outros tipos incluem imagens, vídeos e gráficos vetoriais. * **Elementos**: as partes individuais dentro de um frame (texto, botões, imagens e outros componentes). Os elementos são o que você seleciona e ajusta com o Editor Visual. * **Barra de Ferramentas**: uma barra flutuante com as ferramentas do Canvas. Consulte [Barra de Ferramentas](/pt/references/design/toolbar) para o catálogo completo. Mais dois componentes aparecem em contexto: * **Barra de ações por frame**: aparece quando você seleciona um frame. Expõe Reimaginar, Construir..., Visualizar e Inspecionar — consulte [Frames](/pt/references/design/frames#per-frame-action-bar). * **Painel de chat**: Chat do Agent ancorado ao lado do Canvas. Selecionar frames antes de enviar uma mensagem os anexa como capturas para que o Agent tenha contexto visual. Construir um novo aplicativo a partir de um frame de Design requer Core ou Pro; todos os outros recursos do Canvas funcionam em todos os planos. Consulte [Cobrança](/pt/billing/ai-billing) para detalhes do plano. **Referência** * [Barra de Ferramentas](/pt/references/design/toolbar) — catálogo completo de ferramentas, gestos e seleção. * [Frames](/pt/references/design/frames) — Tipos de frames; a barra de ações por frame; Reimaginar, Refinar, Anotar e Construir. * [Elementos](/pt/references/design/elements) — as partes individuais dentro de um frame. * [Agent](/pt/references/agent/overview) — o Agent que gera e edita frames no Canvas. **Aprender** * [Guia do Canvas](/pt/learn/design/canvas) — tutorial passo a passo. * [Design com Canvas](/pt/build/design-with-canvas) — gere variações visuais de um aplicativo existente e aplique a que desejar. * [Canvas vs Visualização](/pt/learn/design/canvas-vs-preview) — quando usar cada superfície.