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.

⏰ Tempo estimado: 5 minutos · Continua de Construa e publique seu primeiro app O Canvas é um workspace visual onde você pode pedir ao Agent para gerar looks alternativos para um app que você já construiu, compará-los lado a lado e aplicar o que quiser. É a maneira mais rápida de explorar direções visuais sem se comprometer com uma reconstrução. Este guia usa o rastreador de corrida Runwell de Construa e publique seu primeiro app como exemplo prático, mas o mesmo fluxo funciona em qualquer projeto.

​
Antes de começar

Você precisa de um app existente no Replit. Escolha uma das opções:

​
Explore variações de design

1

Abra o Canvas e escolha seu frame

Abra a aba Canvas no Editor de Projeto. Seu app aparece como um frame no Canvas. Selecione o frame para exibir os controles Reimaginar… e Preview.
O app Runwell mostrado como um frame no Canvas, com os botões Reimaginar e Preview disponíveis no topo do frame
2

Reimagine o design

Clique em Reimaginar… para abrir um menu de direções que o Agent pode explorar. Escolha uma — para o Runwell, tente Explorar vibes diferentes. O Agent gera três variações estéticas, cada uma preservando o layout mas mudando a sensação visual.
O menu Reimaginar aberto com opções incluindo Explorar vibes diferentes, Experimentar layouts diferentes, Mais parecido com este, mas melhor, e outras
O conjunto completo de direções:
  • Explorar abordagens diferentes
  • Experimentar layouts diferentes
  • Explorar vibes diferentes
  • Mais parecido com este, mas melhor
  • Otimizar para usabilidade
  • Mostrar o oposto disso
  • Me surpreenda
Você também pode descrever uma direção com suas próprias palavras em vez de escolher no menu — por exemplo, “mostre-me um tema escuro, um tema minimalista e um tema colorido”.
3

Compare as variantes

Mova ou afaste o zoom no Canvas para ver as variações ao lado do original. Compare-as e decida qual direção você quer aplicar.
Três variações de design do Runwell no Canvas ao lado do original — Dawn Patrol, Track Day e Zen Trail
Se você quiser refinar uma antes de confirmar, pergunte ao Agent — por exemplo, “Gostei da segunda, mas deixe o cabeçalho maior.”
4

Aplique o design ao seu app

Selecione a variante que você quer e clique em Construir… no topo do frame. Na caixa de diálogo, escolha seu app existente (por exemplo, Runwell) para aplicar o novo design no lugar — em vez de criar uma cópia separada.
A caixa de diálogo Construir mostrando duas opções: Construir com este design (cria um novo app) ou aplicar ao app Runwell existente
Aguarde o Agent aplicar as alterações. Quando terminar, selecione o frame atualizado no Canvas e clique em Preview para ver o resultado. Faça as mesmas verificações que fez originalmente — para o Runwell: salve uma corrida, confirme que os totais são atualizados e redimensione o Preview para a largura de um telefone.
5

Publique o design atualizado (opcional)

Gostou do novo visual? Publique no chat do Agent ou no bloco Publicação no painel de Ferramentas e arquivos. Sua URL pública permanece a mesma — os visitantes veem a versão atualizada imediatamente.Consulte a etapa Publique seu app em Construa e publique seu primeiro app se precisar de um lembrete sobre o fluxo de publicação.

​
O que experimentar a seguir

Canvas

Aprofunde-se nos recursos e fluxos de trabalho do Canvas.

Editor Visual

Faça ajustes precisos em cores, texto e layout.

Vibe coding 101

Aprenda como guiar o Agent da ideia ao app funcional.