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.
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. |
| 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.
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. |
| 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 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. |
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.
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. |
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.
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.
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 — visão geral e anatomia.
- Toolbar — a barra de ferramentas flutuante; o Generate cria novos frames.
- Elements — as peças individuais dentro de um frame.
- Editor Visual — edições no nível de elemento dentro de um frame em foco.
