> ## 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.
# Frames
> Reimagine, refine e construa a partir de Frames no Canvas.
Cada bloco no Canvas é um **frame**. Os frames são o que você seleciona, arrasta e sobre os quais você age. Esta página aborda os tipos de frame, a barra de ações por frame que aparece ao selecionar, e os recursos que você aciona a partir dela — Reimaginar, Refinar e Construir.
## Tipos de frame
Os dois tipos principais são **Artefatos** (superfícies ao vivo, com suporte de aplicativo) e **Designs** (mockups). O cabeçalho no canto superior esquerdo do frame mostra qual é o tipo.
| Tipo | Rótulo do cabeçalho | Suportado por | Interagir como app ao vivo? | Converter para um app real? |
| ---------------- | ----------------------------- | -------------------------- | --------------------------- | ---------------------------------------------------------------------- |
| Artefato | **Website**, **Slides**, etc. | Um artefato em execução | Sim | Já é um app. |
| Artefato móvel | **Mobile app** | Um artefato em execução | Sim (no simulador) | Já é um app. |
| Design | **Design** | Mock estático / interativo | Somente frame interativo | Sim — pelo menu **Construir…** do frame. Consulte [Construir](#build). |
| Imagem | **Image** | PNG / JPG gerado | Não | Não — use como referência. |
| Vídeo | **Video** | Vídeo gerado | Não | Não. |
| Gráfico vetorial | **Graphic** | SVG gerado | Não | Não — incorpore em um app real. |
Se um frame de Design se comporta como uma imagem estática ou um protótipo interativo depende do recurso **Frames interativos**. Quando habilitado, os frames de Design respondem a cliques e entradas de formulário como uma página real; caso contrário, são renderizados como um snapshot que você pode iterar, mas não clicar.
## Barra de ações por frame
Selecionar um frame exibe uma barra de ações. As ações dependem do tipo de frame.
### Frames de Artefato e Design
Para frames de Artefato (Website, Slides, etc.) e Design, a barra de ações percorre a parte superior do frame.
O conjunto de ações é comprimido em ícones em larguras estreitas e revela rótulos conforme o frame fica mais largo. O conjunto completo, da esquerda para a direita:
| Ação | O que faz |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Reimaginar | Abre o menu Reimaginar para gerar variantes do frame atual. |
| Construir… | Abre um menu listando todos os Artefatos do projeto — escolha um para aplicar o design a ele, ou escolha **Construir este design** para criar um novo Artefato. Somente frames de Design. Consulte [Construir](#build). |
| Visualizar | Entra no modo de foco no frame e o bloqueia como o painel de visualização principal. Alterna para **Voltar ao Canvas** enquanto focado. |
| Inspecionar | Abre o [Editor Visual](/pt/learn/design/visual-editor) focando em um elemento dentro do frame. Visível apenas enquanto o frame está no modo de foco e contém um elemento selecionável. |
Selecionar um frame também o anexa à próxima mensagem de chat do Agent como um snapshot — consulte [a visão geral do Canvas](/pt/references/design/canvas#anatomy-of-the-canvas).
A barra de ações respeita o **modo somente leitura**. Quando o Canvas está bloqueado em um contexto de tarefa em segundo plano, as ações de iteração ficam ocultas e apenas Visualizar permanece.
### Frames de mídia
Frames de Imagem, Vídeo e Gráfico vetorial mostram uma pequena barra de ações flutuante acima do frame com três controles:
* **Substituir mídia**: carregue um novo arquivo para trocar no frame, mantendo sua posição e tamanho no Canvas.
* **Baixar**: salve o arquivo de mídia no seu computador.
* **Texto alternativo**: adicione texto alternativo para acessibilidade e para que o Agent tenha mais contexto quando o frame for referenciado.
## Reimaginar
Reimaginar gera várias versões alternativas de um frame existente para que você possa comparar direções de design lado a lado.
### Prompts recomendados
Selecionar Reimaginar abre um popover ancorado ao frame com sete direções predefinidas. Cada predefinição é combinada com um prompt ajustado e uma contagem de variantes.
| Predefinição | Variantes | Ideal para |
| ------------------------------ | --------- | --------------------------------------------------------------------------- |
| Explorar abordagens diferentes | 4 | Conceitos fundamentalmente diferentes — varie a IA e o modelo de interação. |
| Tentar layouts diferentes | 3 | Mesmo conteúdo, organização espacial e hierarquia diferentes. |
| Explorar vibes diferentes | 3 | Mesmo layout, estética e direção tonal diferentes. |
| Mais como este, mas melhor | 2 | Polir a direção atual sem mudar a opinião de design. |
| Otimizar para usabilidade | 3 | Cada variação prioriza uma compensação de usabilidade diferente. |
| Me mostre o oposto disto | 2 | Inverte as escolhas de design dominantes para revelar suposições ocultas. |
| Me surpreenda | 3 | O Agent escolhe o eixo menos explorado para variar. |
As variantes escolhidas chegam ao Canvas como novos frames de Design posicionados ao lado da fonte. A fonte fica intacta para que você possa comparar.
### Prompts personalizados
Abaixo da lista de predefinições, o campo **Outra coisa…** aceita um prompt de texto livre. Use-o quando tiver uma direção específica em mente — por exemplo, "Gere três versões que enfatizem confiança e credibilidade para um público corporativo." Os prompts personalizados usam três variantes por padrão.
## Refinar (edições inline)
Refinar é o loop de edição inline em um único frame. Selecione um frame e digite sua alteração no campo de mensagem que aparece abaixo dele; o Agent reescreve o frame e o substitui no lugar. Não há um botão chamado "Refinar" — o campo inline é a superfície.
Use Refinar quando souber o que quer alterar e não precisar ver várias alternativas. Exemplos de prompts:
* "Deixe a imagem hero em largura total e adicione um CTA abaixo"
* "Mude a navegação para um layout de barra lateral"
* "Use uma paleta de cores mais suave — menos preto, mais cinza quente"
Ao contrário do Reimaginar, o Refinar modifica o frame selecionado diretamente em vez de produzir variantes. Se quiser manter o original, duplique o frame primeiro (clique com o botão direito → **Duplicar**).
## Construir
O menu **Construir…** em um frame de Design selecionado promove o design para um app ao vivo e em execução. O mesmo menu também cobre a aplicação do design a um Artefato já existente.
### Construir este design
Escolher **Construir este design** no menu inicia um novo Artefato a partir do frame de Design selecionado. O novo Artefato aparece na lista de artefatos do projeto e se torna um app ao vivo e em execução. Construir requer Core ou Pro.
### Aplicar a um Artefato existente
O menu Construir… lista todos os Artefatos do projeto. Escolher um aplica as alterações do Design selecionado a esse Artefato — o Agent reescreve o código do Artefato para corresponder ao design, deixando o frame de Design no Canvas como referência.
## Páginas relacionadas
* [Canvas](/pt/references/design/canvas) — visão geral e anatomia.
* [Barra de Ferramentas](/pt/references/design/toolbar) — a barra de ferramentas flutuante; Gerar cria novos frames.
* [Elementos](/pt/references/design/elements) — as partes individuais dentro de um frame.
* [Editor Visual](/pt/learn/design/visual-editor) — edições a nível de elemento dentro de um frame focado.