Canvas

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.

​

O que é o Canvas?

O Canvas é um espaço para explorar e iterar em designs com o Agent. Aqui, você verá seus artefatos — como aplicativos, vídeos e slides — exibidos em um frame. Você pode trabalhar com o Agent para criar mockups, comparar direções de design e aplicar alterações de volta ao seu aplicativo — tudo a partir de um único painel visual.

​

O que há no Canvas

O Canvas é um quadro infinito onde você pode ver e trabalhar com tudo visualmente.

• Seus aplicativos: Seus aplicativos em execução aparecem como prévias interativas ao vivo diretamente no Canvas. Você pode clicar e usá-los como faria em um navegador.
• Mockups de design: Protótipos visuais que o Agent cria para você. Eles parecem páginas reais — você pode interagir com eles, redimensioná-los e pedir ao Agent que os ajuste — mas são separados do seu aplicativo ao vivo para que você possa experimentar livremente.
• Formas e desenhos: Retângulos, círculos, estrelas, setas, corações e muito mais. Use-os para esboçar ideias, marcar designs ou mapear como as telas se conectam.
• Texto e notas adesivas: Adicione rótulos ou notas em qualquer lugar do Canvas para organizar seus pensamentos.
• Imagens: Solte capturas de tela ou imagens de referência no Canvas. O Agent pode recriar ou se inspirar no que vê.
• Vídeos: Coloque arquivos de vídeo no Canvas ao lado do seu outro conteúdo.

​

Colocando designs no Canvas

Há algumas maneiras de começar a criar designs. Escolha a que parecer mais natural.

​

Fazendo alterações

Quando você tiver um design no Canvas, há várias maneiras de iterar sobre ele.

​

Peça ao Agent por atualizações

Selecione um frame no Canvas e digite suas alterações no campo que aparece abaixo dele. Quando você pressionar Enter, o Agent pega o pedido, executa as atualizações e atualiza o mockup diretamente no Canvas.

​

Desenhe e anote

Use as ferramentas de desenho na barra de ferramentas inferior para esboçar diretamente no Canvas. Desenhe setas apontando para o que você quer alterar, circule áreas problemáticas ou adicione notas de texto com seu feedback. Em seguida, peça ao Agent que faça as alterações com base nas suas anotações.

​

Visualize em diferentes dispositivos

Veja como seus designs ficam em diferentes tamanhos de tela. Peça ao Agent para mostrar uma versão mobile, tablet ou desktop:

• Mobile — 390 × 844
• Tablet — 768 × 1024
• Desktop — 1280 × 720

Por exemplo, “Mostre-me a versão mobile desta página” e o Agent renderiza nesse tamanho.

​

Aplique alterações ao seu aplicativo

Quando você estiver satisfeito com um design, aplique as alterações de volta à sua versão principal. O Agent mostra um resumo do que foi feito e dá a você a opção de aplicar ou descartar.

​

Comparando direções de design

Quando você não tem certeza de qual direção seguir, peça ao Agent que gere várias versões para que você possa compará-las lado a lado.

• Várias versões de uma página: “Mostre-me cinco versões desta landing page.” O Agent cria cada uma e as dispõe lado a lado.
• Fluxos de várias páginas: “Design um fluxo de onboarding completo: boas-vindas, configuração de perfil, preferências e confirmação.” O Agent constrói cada tela e as organiza em ordem.
• Misture e combine: “Mostre-me a landing page e a página de preços em um estilo minimalista e em um estilo arrojado.” O Agent cria cada combinação para que você possa ver o quadro completo.

​

Mapeando fluxos de usuário

Disponha jornadas completas de usuário no Canvas — cadastro, onboarding, dashboard, configurações — e organize-as para ver como tudo se conecta.

• Coloque cada tela como um frame separado
• Peça ao Agent para gerar o fluxo completo: “Desenhe o fluxo completo de onboarding do meu aplicativo”
• Use setas e formas para mostrar como os usuários se movem entre as telas
• Peça ao Agent para transformar esboços aproximados em designs refinados

​

Transformando um design em um aplicativo real

Quando você estiver satisfeito com um design e quiser torná-lo real, há dois caminhos:

​

Torne-o um aplicativo completo

Se o seu design precisar de funcionalidade real — como salvar dados, contas de usuário ou conectar a outros serviços — peça ao Agent para transformá-lo em um aplicativo completo. Diga algo como “Torne isso um aplicativo real” ou “Adicione um backend a isso.” O Agent constrói tudo o que precisa para funcionar como um aplicativo real e publicável.

​

Converta para um tipo específico

Você também pode converter um frame de design em um tipo de artefato específico:

​

Perguntas frequentes

Os frames de design são iguais ao meu aplicativo em execução?

Não. Os frames de design são protótipos visuais — eles parecem a coisa real, mas não têm um backend ou banco de dados funcionando por trás deles. As prévias do seu aplicativo no Canvas, por outro lado, são o seu aplicativo real em execução.

Posso redesenhar uma página sem prejudicar meu aplicativo ao vivo?

Sim. Peça ao Agent que traga uma página para o Canvas — por exemplo, “Coloque meu dashboard no canvas.” O Agent faz uma cópia com a qual você pode experimentar. Seu aplicativo ao vivo não é afetado até que você escolha aplicar as alterações.

Como transformo um design em um aplicativo real?

Peça ao Agent para torná-lo um aplicativo completo (“Torne isso real”) ou converta-o para um tipo específico (“Converta isso em um aplicativo web”). O Agent constrói tudo o que precisa para se tornar um aplicativo funcional e publicável.

Posso converter para tipos diferentes de aplicativos web?

Sim. Você pode transformar frames do Canvas em aplicativos web, aplicativos mobile, slides, visualizações de dados e muito mais.

Posso importar designs do Figma ou de outras ferramentas?

Sim. Há algumas maneiras de trazer designs do Figma para o Replit:

• Importar do Figma: Acesse replit.com/import, conecte sua conta do Figma e cole a URL de um frame para converter um design em um aplicativo React funcional. Consulte o Guia de início rápido: Importar do Figma para detalhes.
• Figma MCP no chat do Agent: Cole um link do Figma diretamente no chat do Agent e peça que ele gere código, extraia dados de design ou construa um componente a partir do design. Consulte o guia Integração Figma MCP.
• Referência por captura de tela: Solte uma captura de tela no Canvas e peça ao Agent que recrie o design a partir dela.

O que mais posso colocar no Canvas?

Além de mockups de design e prévias de aplicativos, você pode adicionar formas, setas, rótulos de texto, notas adesivas, imagens e vídeos — úteis para esboçar ideias, anotar designs ou organizar seu raciocínio.

​

Disponibilidade

O Canvas está disponível em todos os planos, incluindo criação de frames, edição inline, geração de variantes e conversão para artefatos. Transformar designs em aplicativos completos requer um plano pago.