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.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.
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. |
| 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.
| 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. |
| 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 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. |
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. |
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.
- “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”
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 — visão geral e anatomia.
- Barra de Ferramentas — a barra de ferramentas flutuante; Gerar cria novos frames.
- Elementos — as partes individuais dentro de um frame.
- Editor Visual — edições a nível de elemento dentro de um frame focado.