Use Modo de Design

Selecione elementos da loja e use os controles de edição visual do Runner com segurança.

Caminho de entrada: Espaço de Trabalho → selecione uma loja → Loja → Modo de Design

Prévia e controles da loja Runner

O que este guia cobre

Abra Modo de Design na versão mais recente da loja, selecione um elemento visível, faça uma alteração controlada e salve-a como parte do projeto atual.

Por que e quando usar Modo de Design

Use Modo de Design para alterações visuais focadas que são mais fáceis de apontar do que descrever do zero: reescreva um título, substitua uma imagem, ajuste espaçamento, altere tipografia ou remova um elemento visível.

Use o chat do Runner para trabalho mais amplo que abrange várias páginas, altera o comportamento da loja ou requer nova funcionalidade.

Disponibilidade e pré-requisitos

Modo de Design é condicional. Está disponível quando:

você está usando um layout de desktop;
a versão mais recente da loja está pronta e selecionada;
você não está visualizando uma versão mais antiga;
o Runner não está processando outra solicitação no momento; e
a funcionalidade Modo de Design está ativada para o espaço de trabalho.

Se a visualização ainda está sendo preparada, uma versão histórica está selecionada ou o Runner está trabalhando, o botão pode estar oculto ou desativado.

Abra Modo de Design

Abra seu projeto.
Selecione Loja.
Certifique-se de que o rótulo de versão diz Atual e a visualização está pronta.
Selecione Modo de Design na barra de ferramentas da loja.
Se uma barra de edição inferior aparecer com outro controle Modo de Design, selecione-o para ativar a seleção de elemento.
Mova sobre a loja e selecione o elemento que deseja alterar.

Controles do Modo de Design

Controle	Por que você o usa	O que acontece quando você o seleciona
Modo de Design na barra de ferramentas da loja	Entre na visualização de edição dedicada.	O Runner abre a loja atual no painel de design.
Modo de Design na barra inferior	Ative ou desative a inspeção de elemento.	Quando ativado, elementos selecionáveis são contornados e selecionar um abre sua barra de edição. Desativá-lo limpa a sessão de edição atual.
Campo Pergunte ao Runner AI e seta de envio	Descreva uma alteração para o elemento selecionado.	O Runner recebe a instrução com o elemento selecionado. Quando o Runner inicia, limpa a seleção e redefine edições diretas não salvas e seu histórico de desfazer/refazer, então salve quaisquer edições diretas pendentes antes de enviar.
Espaçamento	Altere o espaço dentro ou ao redor do elemento.	Um painel abre para margem e preenchimento horizontal e vertical.
Imagem	Substitua uma imagem selecionada ou imagem de fundo.	Um painel abre com opções Carregar e Gerado por IA quando esse elemento suporta edição de mídia.
Texto	Altere o estilo de tipo.	Um painel abre para tamanho de fonte, peso, família, cor, opacidade e alinhamento quando suportado.
Deletar Elemento	Remova o elemento selecionado da edição atual.	O elemento desaparece imediatamente no editor. Use Desfazer se isso foi acidental e revise antes de salvar.
Desfazer	Reverta a edição visual não salva mais recente.	O Runner volta pelo histórico de edição do Modo de Design atual.
Refazer	Reaplique uma edição que você acabou de desfazer.	O Runner avança pelo histórico de edição do Modo de Design atual.
Salvar	Mantenha as edições visuais atuais.	O Runner escreve as alterações pendentes, registra um novo instantâneo de versão quando possível, limpa o histórico de desfazer/refazer desta sessão e recarrega a visualização. O botão está desativado quando não há nada para salvar.
Fechar	Saia do painel de design dedicado.	O Runner retorna à visualização normal da loja e limpa edições não salvas e histórico de comando. Salve primeiro se quiser manter as alterações.

Faça uma alteração visual segura

Navegue até a página de destino em Visualização normal antes de abrir Modo de Design.
Entre em Modo de Design e selecione um elemento.
Escolha um caminho para esta alteração:
- Para uma edição direta, use Espaçamento, Imagem, Texto ou Deletar Elemento, depois revise com Desfazer ou Refazer e selecione Salvar.
- Para uma solicitação de IA, salve quaisquer edições diretas pendentes primeiro, reselecione o elemento se necessário, digite a instrução em Pergunte ao Runner AI e envie. Quando o Runner inicia, a seleção e o histórico de edição direta não salvo são limpos.
Aguarde a conclusão da economia ou solicitação do Runner escolhida, depois revise a página em Visualização normal.
Verifique a página novamente em layouts PC, Tablet e Telefone.
Publique apenas após a visualização salva passar em sua revisão.

Estados, limites e solução de problemas

O que você vê	Significado	O que fazer
Iniciando modo de design…	O Runner está preparando a visualização editável.	Mantenha a versão mais recente selecionada.
Modo de design não iniciou	A visualização editável não ficou pronta.	Selecione Tentar Novamente. Se repetir, retorne à Visualização normal e atualize.
Iframe ainda está carregando	A inspeção de elemento não está pronta.	Aguarde a conclusão do carregamento da loja.
Editor visual desativado enquanto IA está processando	O Runner está tratando outra solicitação.	Aguarde a conclusão da solicitação, depois selecione o elemento novamente.
O Runner inicia após uma solicitação Pergunte ao Runner AI	O editor visual redefine para a nova tarefa.	Quaisquer edições diretas não salvas e seu histórico de desfazer/refazer são descartados. Salve edições diretas antes de enviar a solicitação.
Edição de IA não disponível para conteúdo dinâmico	O conteúdo selecionado não pode ser alterado através desse controle.	Descreva a página e o resultado desejado no chat regular do Runner.
Nada para desfazer / refazer / salvar	A sessão atual do Modo de Design não tem ação correspondente.	Selecione um elemento editável e faça uma alteração primeiro.
Alterações salvas em arquivos de origem	O Runner concluiu o salvamento do Modo de Design.	Aguarde a recarga da visualização, depois revise a página alterada novamente.
A edição está salva mas não ativa	Salvar alterações atualiza o projeto, não a loja publicada.	Revise a versão atual, depois selecione Publicar Alterações.