> ## 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.

# Criar design com Canvas

> Explore variações de design no Canvas, escolha uma direção e aplique ao seu aplicativo.

⏰ *Tempo estimado: 5 minutos* · Continuação de [Crie seu primeiro aplicativo](/getting-started/quickstarts/ask-ai)

O **Canvas** é um espaço visual onde você pode explorar múltiplas direções de design antes de criar seu aplicativo. Gere mockups, compare-os lado a lado e aplique o que mais gostar.

## Antes de começar

Você precisará de um aplicativo existente no Replit — do guia de início rápido [Crie seu primeiro aplicativo](/getting-started/quickstarts/ask-ai) ou de qualquer projeto.

<Tip>Você também pode começar do zero — basta criar um novo projeto e descrever sua ideia ao Agent primeiro.</Tip>

## Crie o design do seu aplicativo

<Steps>
  <Step title="Explore variações de design">
    Abra a aba **Canvas** no Editor de Projetos e clique em **Reimaginar**. Um menu suspenso oferece prompts rápidos para explorar diferentes direções.
    Escolha "Experimentar layouts diferentes" e o Agent gera vários mockups de design no Canvas.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/try_different_layouts-with_canvas.mp4" />
    </Frame>

    Aqui estão todas as opções disponíveis:

    * Explorar abordagens diferentes
    * Experimentar layouts diferentes
    * Explorar estilos diferentes
    * Mais como este, mas melhor
    * Otimizar para usabilidade
    * Mostrar o oposto disto
    * Me surpreenda

    Ou você pode simplesmente pedir ao Agent para gerar variações com suas próprias palavras:

    ```
    Mostre-me um tema escuro, um tema minimalista e um tema colorido no Canvas
    ```

    <Frame>
      <img src="https://mintcdn.com/replit/4_vaMd7KiBnniEFb/images/getting-started/quickstart_design_canvas_variations.png?fit=max&auto=format&n=4_vaMd7KiBnniEFb&q=85&s=2c848f63eeb54bd4af9a9302b310aa50" alt="Canvas mostrando múltiplas variações de design lado a lado" width="2538" height="1428" data-path="images/getting-started/quickstart_design_canvas_variations.png" />
    </Frame>
  </Step>

  <Step title="Escolha uma direção">
    Navegue pelas variações e escolha a que melhor se encaixa na sua visão. Você pode pedir ao Agent para refinar uma variação específica antes de confirmar:

    ```
    Gostei da segunda, mas deixe o cabeçalho maior
    ```
  </Step>

  <Step title="Aplique ao seu aplicativo">
    Quando estiver satisfeito com um design, peça ao Agent para aplicá-lo:

    ```
    Aplique este design ao meu aplicativo
    ```

    O Agent atualiza o código do seu aplicativo para corresponder ao design escolhido. Verifique a aba **Visualização** para ver o resultado.
  </Step>

  <Step title="Publique seu aplicativo atualizado (opcional)">
    Clique em **Publicar** no Editor de Projetos para colocar o novo design no ar. Sua URL existente permanece a mesma. Os visitantes verão a versão atualizada imediatamente.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-publish-app.mp4" />
    </Frame>

    Saiba mais sobre publicação em [Publicar seu aplicativo](/getting-started/quickstarts/publish).
  </Step>
</Steps>

## Próximos passos

<CardGroup cols={2}>
  <Card title="Canvas" icon="palette" href="/replitai/canvas">
    Aprofunde-se nos recursos e fluxos de trabalho do Canvas.
  </Card>

  <Card title="Editor Visual" icon="pen-ruler" href="/replitai/visual-editor">
    Faça ajustes precisos em cores, texto e layout.
  </Card>

  <Card title="Expandir seu projeto" icon="layer-group" href="/getting-started/quickstarts/expand-your-project">
    Adicione um aplicativo mobile, apresentação de slides ou outros artefatos ao seu projeto.
  </Card>
</CardGroup>