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

# Do Design ao Aplicativo

> Saiba como transformar mockups do Design Canvas em aplicativos reais e funcionais — da exploração ao aplicativo publicado.

## 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](/replitai/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](/replitai/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

<Steps>
  <Step title="Selecione seu frame">
    Clique no frame que você deseja transformar em um aplicativo real.
  </Step>

  <Step title="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."
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

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

<Note>
  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.
</Note>

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

<Accordion title="Preciso começar no Canvas?">
  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.
</Accordion>

<Accordion title="Qual é a diferença entre um frame e um artefato?">
  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.
</Accordion>

<Accordion title="Posso converter o mesmo frame em vários tipos de 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.
</Accordion>

<Accordion title="Posso voltar ao Canvas após a conversão?">
  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.
</Accordion>

<Accordion title="Meu design ficará exatamente igual após a conversão?">
  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.
</Accordion>