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 em 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 direto no Canvas. Você pode clicar e usá-los assim 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.
Colocando designs no Canvas
Há algumas formas de começar a criar designs. Escolha o que parecer mais natural.Pergunte ao Agent no chat
Digite o que você quer ver na entrada do 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, mobile, slides, design e mais. Use o carrossel para escolher antes de enviar seu prompt.
Fazendo alterações
Uma vez que você tem um design no Canvas, há várias formas de iterar nele.Peça atualizações ao Agent
Selecione um frame no Canvas e digite suas alterações na entrada que aparece abaixo dele. Quando você pressiona Enter, o Agent pega a solicitação, executa as atualizações e atualiza o mockup direto 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. Em seguida, 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 mobile, tablet ou desktop:- Mobile — 390 × 844
- Tablet — 768 × 1024
- Desktop — 1280 × 720
Aplicar 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.Exportar 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 a um colega.Abrir o menu do frame
Clique com o botão direito no artefato ou frame de design que você deseja exportar. Um menu aparece com as ações disponíveis.
O PNG exportado corresponde ao que o frame está mostrando atualmente no Canvas. Se seu app ou design ainda estiver carregando, aguarde que ele renderize completamente antes de exportar.
Comparando direções de design
Quando você não sabe 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 lado a lado.
- 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.
- Mix e match: “Mostre-me a landing page e a página de preços em um estilo minimalista e em um estilo ousado.” O Agent cria cada combinação para que você possa ver o quadro completo.
Mapeando fluxos de usuário
Organize jornadas completas de usuário no Canvas — cadastro, onboarding, dashboard, configurações — e disponha-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:Transformar em um app completo
Se o seu design precisa 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 app completo. Diga algo como “Torne isso um app real” ou “Adicione um backend a isso.” O Agent constrói tudo o que é necessário para funcionar como um app real e publicável.Transformar um design em um app completo requer um plano pago.
Converter 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 app web” 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. Frames de design são protótipos visuais — eles parecem e funcionam como o real, mas não têm um backend ou banco de dados funcionando por trás deles. Suas prévias de 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é você escolher 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 app web”). O Agent constrói tudo o que é necessário para se tornar um app funcional e publicável.
Posso converter para tipos além de apps web?
Posso converter para tipos além de apps web?
Sim. Você pode transformar frames do Canvas em apps web, apps mobile, 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 formas de trazer designs do Figma para o Replit:
- Importar do Figma: Vá para replit.com/import, conecte sua conta Figma e cole uma URL de frame para converter um design em um app React funcional. Consulte o Início rápido de 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 ele gerar código, extrair dados de design ou construir um componente a partir do design. Consulte 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 app, 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.