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 apps, vídeos e slides — exibidos em um frame. Você pode trabalhar com o Agent para criar mockups, comparar direções de design e aplicar mudanças de volta ao seu app — tudo a partir de um quadro visual.
O que está no Canvas
O Canvas é um quadro infinito onde você pode ver e trabalhar com tudo visualmente.
- Seus apps: Seus apps em execução aparecem como prévias interativas ao vivo diretamente no Canvas. Você pode clicar e usá-los exatamente como faria em um navegador.
- Mockups de design: Protótipos visuais que o Agent cria para você. Eles parecem e funcionam como páginas reais — você pode interagir com eles, redimensioná-los e pedir ao Agent para ajustá-los — mas são separados do seu app ao vivo para que você possa experimentar livremente.
- Formas e desenhos: Retângulos, círculos, estrelas, setas, corações e mais. Use-os para esboçar ideias brutas, 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.
Obtendo designs no Canvas
Há algumas maneiras de começar a criar designs. Escolha a que parecer mais natural.Peça ao Agent no chat
Digite o que você quer ver no campo de chat e o Agent o coloca como um frame interativo no Canvas.
Escolha um tipo de saída
Você também pode escolher que tipo de saída quer — web, móvel, slides, design e mais. Use o carrossel para escolher antes de enviar seu prompt.
Fazendo alterações
Depois de ter um design no Canvas, há várias maneiras de iterá-lo.Peça ao Agent atualizações
Selecione um frame no Canvas e digite suas alterações no campo que aparece abaixo dele. Quando você pressionar Enter, o Agent recebe a solicitação, 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 mudar, circule áreas problemáticas ou adicione notas de texto com seu feedback. Depois peça ao Agent para fazer 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 móvel, tablet ou desktop:- Mobile — 390 × 844
- Tablet — 768 × 1024
- Desktop — 1280 × 720
Aplique as alterações ao seu app
Quando 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.Exporte um frame como PNG
Você pode salvar qualquer artefato ou frame de design no Canvas como uma imagem PNG. Isso é útil para compartilhar uma prévia em um documento ou chat, capturar um instantâneo antes de iterar mais ou enviar uma captura de tela para um colega.Abra o menu do frame
Clique com o botão direito no artefato ou frame de design que você quer exportar. Um menu aparece com as ações disponíveis.
O PNG exportado corresponde ao que o frame mostra atualmente no Canvas. Se seu app ou design ainda estiver carregando, aguarde até que renderize completamente antes de exportar.
Comparando direções de design
Quando não tiver certeza de qual direção seguir, peça ao Agent para gerar múltiplas versões para que você possa compará-las lado a lado.- Múltiplas versões de uma página: “Mostre-me cinco versões desta landing page.” O Agent cria cada uma e as dispõe uma ao lado da outra.
- Fluxos de múltiplas páginas: “Projete 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 app”
- Use setas e formas para mostrar como os usuários se movem entre as telas
- Peça ao Agent para transformar esboços brutos em designs refinados
Transformando um design em um app real
Quando estiver satisfeito com um design e quiser torná-lo real, há dois caminhos:Torne-o um app completo
Se o seu design precisa de funcionalidade real — como salvar dados, contas de usuário ou conexão com outros serviços — peça ao Agent para transformá-lo em um app completo. Diga algo como “Torne isso um app real” ou “Adicione um backend a isso.” O Agent constrói tudo que precisa para funcionar como um app real e publicável.Transformar um design em um app completo requer um plano pago.
Converta para um tipo específico
Você também pode converter um frame de design em um tipo de artefato específico:Peça ao Agent para converter
Diga ao Agent o que você quer — por exemplo, “Converta isso em um web app” ou “Transforme isso em slides.”
Perguntas frequentes
Os frames de design são iguais ao meu app em execução?
Os frames de design são iguais ao meu app em execução?
Não. Os frames de design são protótipos visuais — eles parecem e funcionam como o app real, mas não têm um backend ou banco de dados funcionando por trás deles. As prévias do seu app no Canvas, por outro lado, são seu app real em execução.
Posso redesenhar uma página sem quebrar meu app ao vivo?
Posso redesenhar uma página sem quebrar meu app ao vivo?
Sim. Peça ao Agent para trazer 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 app ao vivo não é afetado até que você escolha aplicar as alterações.
Como transformo um design em um app real?
Como transformo um design em um app real?
Peça ao Agent para torná-lo um app completo (“Torne isso real”) ou converta-o para um tipo específico (“Converta isso em um web app”). O Agent constrói tudo que precisa para se tornar um app funcional e publicável.
Posso converter para tipos além de web apps?
Posso converter para tipos além de web apps?
Sim. Você pode transformar frames do Canvas em web apps, apps móveis, slides, visualizações de dados e mais.
Posso importar designs do Figma ou outras ferramentas?
Posso importar designs do Figma ou 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 um URL de frame para converter um design em um app React funcional. Veja 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 para gerar código, extrair dados de design ou construir um componente a partir do design. Veja o guia de Integração Figma MCP.
- Referência de captura de tela: Solte uma captura de tela no Canvas e peça ao Agent para recriar o design a partir dela.
O que mais posso colocar no Canvas?
O que mais posso colocar no Canvas?
Além de mockups de design e prévias de apps, 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 pensamento.