Saltar para o conteúdo principal

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 é este fluxo de trabalho?

O Design Canvas é para exploração — seu aplicativo vive na Prévia. Esta página percorre a jornada completa de transformar uma direção visual em um aplicativo publicado. Conceitos principais:
  • Canvas = rascunho: Os frames são mockups HTML estáticos para explorar ideias
  • Artefatos = saídas publicáveis: Converter um frame cria um artefato compilável e publicável
  • Fluxo unidirecional: Não há vínculo ao vivo entre o Canvas e seu aplicativo — você converte quando estiver pronto
  • Qualquer tipo de artefato: Converta para aplicativos web, aplicativos mobile, apresentações de slides, visualizações de dados e mais

​
Como ir do design ao aplicativo

​
Comece no Canvas

Abra o Design Canvas e explore sua ideia. Peça ao Agent mockups, gere variantes e compare direções lado a lado. Exemplos de prompts:
  • “Design uma landing page para o meu produto SaaS”
  • “Mostre-me cinco variações de um layout de dashboard”
  • “Esboce o fluxo completo de cadastro para o meu aplicativo”

​
Refine com o Visual Editor

Use o Visual Editor para fazer ajustes práticos diretamente nos seus frames — altere texto, ajuste cores, modifique espaçamento — sem passar por um loop do Agent ou consumir créditos de IA.

​
Escolha uma direção

Compare seus frames e escolha o que melhor corresponde à sua visão. Você não precisa que esteja perfeito — pode continuar refinando após a conversão.

​
Converta para um artefato

1

Selecione seu frame

Clique no frame que você deseja transformar em um aplicativo real.
2

Peça ao Agent para converter

Diga ao Agent o que você quer — por exemplo, “Converta isso em um aplicativo web” ou “Transforme isso em um aplicativo mobile.”
3

O Agent constrói seu aplicativo

O Agent cria um artefato real com o design que você escolheu. Ele adiciona o backend, banco de dados e a infraestrutura que seu aplicativo precisa.
4

Refine na Prévia

Mude para a Prévia para ver seu aplicativo em execução. Continue usando o Visual Editor ou converse com o Agent para adicionar funcionalidades, corrigir detalhes e polir.
5

Publique

Quando seu aplicativo estiver pronto, publique-o. O Replit cuida da hospedagem e da infraestrutura para que seu aplicativo funcione de forma confiável para o seu público.

​
O que é transferido

Quando você converte um frame para um artefato, o Agent usa o design como referência para construir um aplicativo real. O layout visual, as cores, a tipografia e a estrutura são transferidos. O Agent adiciona a funcionalidade — armazenamento de dados, contas de usuário, conexões de API — em cima disso.
A conversão é uma etapa unidirecional. O frame do Canvas e o artefato resultante são separados — alterações em um não afetam o outro.

​
O que você pode construir

  • Site estático → aplicativo full-stack: Comece com o design de uma landing page, depois converta e adicione um formulário de contato, pagamentos ou um backend de blog
  • Mockup de dashboard → visualização de dados ao vivo: Design o layout no Canvas, converta para um artefato e conecte fontes de dados reais
  • Conceito de aplicativo mobile → aplicativo nativo: Explore a interface no Canvas, depois converta para um artefato mobile com navegação e dados reais
  • Apresentação de slides + produto: Design seu aplicativo e uma apresentação de slides no mesmo projeto — ambos começam como explorações no Canvas, ambos se tornam artefatos reais

​
Perguntas frequentes

Não. Você pode pular o Canvas completamente e construir diretamente no modo App. O Canvas é para exploração — use-o quando quiser experimentar direções visuais antes de se comprometer.
Um frame é um mockup HTML estático no Canvas — não tem servidor, banco de dados ou backend. Um artefato é um aplicativo real e compilável que você pode publicar. Converter um frame cria um artefato.
Sim. Você pode converter um único frame em um aplicativo web, e depois convertê-lo separadamente em um aplicativo mobile ou apresentação de slides. Cada conversão cria um novo artefato.
O Canvas está sempre disponível. Você pode continuar criando novos frames, mas o artefato convertido e o frame original são independentes — editar um não altera o outro.
O Agent usa seu design como referência, então o layout, as cores e a estrutura são transferidos com proximidade. Alguns detalhes podem mudar à medida que o Agent adiciona funcionalidade real — você pode refinar na Prévia após a conversão.