> ## 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. Todo bloco no Canvas é um **frame**. Frames são o que você seleciona, arrasta e age sobre. Esta página cobre os tipos de frame, a barra de ações por frame que aparece na seleção, e as capacidades que você aciona a partir dela — Reimagine, Refine e Build. Dois frames organizados no Canvas: um artefato de Website (Velocity — Supercar Rental) à esquerda e um mockup de Design (Velocity — Home (Mockup)) à direita. ## Tipos de frame Os dois tipos principais são **Artefatos** (superfícies ativas, apoiadas por um aplicativo) e **Designs** (mockups). O cabeçalho no canto superior esquerdo do frame mostra qual é o tipo. | Tipo | Rótulo do cabeçalho | Apoiado por | Interage como um aplicativo ativo? | Converte para um aplicativo real? | | --------------- | ----------------------------- | ---------------------------- | ---------------------------------- | -------------------------------------------------------------- | | Artifact | **Website**, **Slides**, etc. | Um artefato em execução | Sim | Já é um aplicativo. | | Mobile artifact | **Mobile app** | Um artefato em execução | Sim (no simulador) | Já é um aplicativo. | | Design | **Design** | Mockup estático / interativo | Apenas frame interativo | Sim — pelo menu **Build…** do frame. Consulte [Build](#build). | | Image | **Image** | PNG / JPG gerado | Não | Não — use como referência. | | Video | **Video** | Vídeo gerado | Não | Não. | | Vector graphic | **Graphic** | SVG gerado | Não | Não — incorpore em um aplicativo real. | Se um frame de Design se comporta como uma imagem estática ou como um prototipo interativo depende da capacidade **Interactive frames**. Quando ela está ativada, os frames de Design respondem a cliques e entradas de formulário como uma página real; caso contrário, eles são renderizados como um snapshot no qual você pode iterar, mas não navegar. ## Barra de ações por frame Selecionar um frame exibe uma barra de ações. As ações dependem do tipo do frame. ### Frames de Artifact e Design Para frames de Artifact (Website, Slides, etc.) e Design, a barra de ações fica na parte superior do frame. Canvas com um frame de Website Velocity selecionado, mostrando a barra de ações por frame na parte superior com o rótulo do tipo e o botão Preview, e três variantes de Design geradas pelo Reimagine organizadas abaixo dele. O grupo de ações se compacta em ícones em larguras estreitas e revela rótulos conforme o frame fica mais largo. O conjunto completo, em ordem da esquerda para a direita: | Ação | O que faz | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Reimagine | Abre o menu Reimagine para gerar variantes do frame atual. | | Build… | Abre um menu listando todos os Artifacts do projeto — escolha um para aplicar o design a ele, ou escolha **Build this design** para criar um novo Artifact. Apenas para frames de Design. Consulte [Build](#build). | | Preview | Entra no modo de foco no frame e o trava como o painel de prévia principal. Alterna para **Back to Canvas** enquanto em foco. | | Inspect | Abre o [Editor Visual](/pt/learn/design/visual-editor) direcionado a um elemento dentro do frame. Só é visível enquanto o frame está em 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/features/design/canvas#anatomy-of-the-canvas). A barra de ações respeita o **Read-only mode**. Quando o Canvas está travado dentro de um contexto de tarefa em segundo plano, as ações de iteração ficam ocultas e apenas o Preview permanece. ### Frames de mídia Frames de Image, Video e Vector graphic mostram uma pequena barra de ações flutuante acima do frame com três controles: * **Replace media**: envie um novo arquivo para substituir o conteúdo do frame, mantendo sua posição e tamanho no Canvas. * **Download**: salve o arquivo de mídia no seu computador. * **Alt text**: adicione texto alternativo para acessibilidade e para que o Agent tenha mais contexto quando o frame for referenciado. ## Reimagine O Reimagine gera várias versões alternativas de um frame existente para que você possa comparar direções de design lado a lado. Menu Reimagine aberto em um frame de Website Velocity selecionado, com o cabeçalho 'Reimagine your design' e uma lista de sete prompts recomendados: Explore different approaches, Try different layouts, Explore different vibes, More like this but better, Optimize for usability, Show me the opposite of this, Surprise me — mais um campo de entrada livre 'Something else…' na parte inferior. ### Prompts recomendados Selecionar Reimagine abre um popover ancorado ao frame com sete direções predefinidas. Cada predefinição é combinada com um prompt ajustado e uma quantidade de variantes. | Predefinição | Variantes | Melhor para | | ---------------------------- | --------- | --------------------------------------------------------------------------- | | Explore different approaches | 4 | Conceitos fundamentalmente diferentes — varia a IA e o modelo de interação. | | Try different layouts | 3 | Mesmo conteúdo, organização espacial e hierarquia diferentes. | | Explore different vibes | 3 | Mesmo layout, direção estética e tonal diferente. | | More like this, but better | 2 | Refina a direção atual sem mudar a opinião de design. | | Optimize for usability | 3 | Cada variação prioriza uma compensação de usabilidade diferente. | | Show me the opposite of this | 2 | Inverte as escolhas de design dominantes para revelar suposições ocultas. | | Surprise me | 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 permanece intocada para que você possa comparar. ### Prompts personalizados Abaixo da lista de predefinições, o campo **Something else…** aceita um prompt livre. Use-o quando você tiver uma direção específica em mente — por exemplo, "Generate three versions that emphasize trust and credibility for an enterprise audience." Prompts personalizados geram três variantes por padrão. ## Refine (edições inline) O Refine é o ciclo 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 "Refine" — o campo inline é a superfície. Um frame de Design selecionado (Velocity — Home (Mockup)) no Canvas com a barra de ações por frame visível na parte superior (Reimagine, Build…, Preview) e o campo inline de Refine abaixo do frame contendo o prompt 'Add Ask AI icon next to the search bar'. Use o Refine quando você já sabe o que quer alterar e não precisa ver várias alternativas. Exemplos de prompts: * "Make the hero image full-width and add a CTA below it" * "Switch the navigation to a sidebar layout" * "Use a softer color palette — less black, more warm gray" Diferente do Reimagine, o Refine modifica o frame selecionado diretamente em vez de produzir variantes. Se você quiser manter o original, duplique o frame primeiro (clique com o botão direito → **Duplicate**). ## Build O menu **Build…** em um frame de Design selecionado transforma o design em um aplicativo ativo em execução. O mesmo menu também cobre a aplicação do design a um Artifact que já existe. Menu Build… aberto em um frame de Design selecionado com o cabeçalho 'Build or apply your designs'. Duas seções são visíveis: 'Create something new…' com uma opção 'Build this design — A new artifact will be created', e 'Apply to an existing creation…' listando o artefato Website do projeto (Velocity — Supercar Rental). ### Build this design Escolher **Build this design** no menu inicia um novo Artifact a partir do frame de Design selecionado. O novo Artifact chega à lista de artefatos do projeto e se torna um aplicativo ativo em execução. O Build requer o plano Core ou Pro. ### Apply to an existing Artifact O menu Build… lista todos os Artifacts do projeto. Escolher um aplica as alterações do Design selecionado a esse Artifact — o Agent reescreve o código do Artifact para corresponder ao design, deixando o frame de Design no Canvas como referência. ## Páginas relacionadas * [Canvas](/pt/features/design/canvas) — visão geral e anatomia. * [Toolbar](/pt/features/design/toolbar) — a barra de ferramentas flutuante; o Generate cria novos frames. * [Elements](/pt/features/design/elements) — as peças individuais dentro de um frame. * [Editor Visual](/pt/learn/design/visual-editor) — edições no nível de elemento dentro de um frame em foco.