> ## 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.
# Design com Canvas
> Gere variações visuais de um app existente no Canvas, compare-as lado a lado e aplique a que você preferir — sem reconstruir.
export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
if (!videoId) {
return null;
}
let url = "https://www.youtube.com/embed/" + videoId;
if (startAt) {
url = url + "?start=" + startAt;
}
return
;
};
⏰ *Tempo estimado: 5 minutos* · Continua de [Construa e publique seu primeiro app](/pt/build/your-first-app)
O [Canvas](/pt/learn/projects-and-artifacts/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](/pt/build/your-first-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:
* Conclua [Construa e publique seu primeiro app](/pt/build/your-first-app) para ter o Runwell aberto, ou
* Use qualquer outro projeto — as etapas abaixo funcionam da mesma forma.
## Explore variações de design
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**.
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 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".
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.
Se você quiser refinar uma antes de confirmar, pergunte ao Agent — por exemplo, "Gostei da segunda, mas deixe o cabeçalho maior."
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.
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.
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](/pt/build/your-first-app) se precisar de um lembrete sobre o fluxo de publicação.
## O que experimentar a seguir
Aprofunde-se nos recursos e fluxos de trabalho do Canvas.
Faça ajustes precisos em cores, texto e layout.
Aprenda como guiar o Agent da ideia ao app funcional.