Um editor de sites com IA deve tornar compreensível uma alteração solicitada ao storefront antes de a tornar pública. O Runner AI trabalha a partir do projeto atual da loja, de um briefing específico, de imagens de referência opcionais e do elemento que selecionar. Devolve alterações aos ficheiros de origem e pré-visualizações responsivas que pode inspecionar, rever e guardar separadamente da publicação.
Dê ao editor de sites com IA um briefing delimitado sobre o storefront
Comece pela página e pela ação do cliente que devem mudar. Indique o problema atual, o resultado visível pretendido e as partes da loja que devem permanecer estáveis. Um pedido útil pode solicitar ao Runner AI que torne uma coleção mais fácil de encontrar a partir da homepage, preservando a navegação, os dados de produtos, o percurso do carrinho e a linguagem da marca existentes. Acrescente os estados dos dispositivos e o percurso de cliques que pretende verificar, em vez de pedir uma melhoria vaga.
Os dados fornecidos podem incluir os ficheiros atuais do storefront, factos verificados do catálogo, textos aprovados, regras da marca, uma imagem de referência e a rota ou secção abrangida. Uma imagem de referência é evidência para a aparência, não substitui a verdade sobre os produtos. O Runner continua a precisar de produtos, preços, regras de inventário, políticas, destinos e limites de responsabilidade exatos quando estes afetam o resultado. Se uma imagem de origem ou um exemplo pertencer a terceiros, use-o apenas com os direitos e a autorização exigidos para o projeto.
Mantenha um único resultado coerente por pedido. Quando o primeiro resultado não atingir o objetivo, indique a secção exata, explique o estado esperado e forneça uma referência mais clara, se necessário. Isto cria um registo de revisão em torno de uma alteração específica, em vez de voltar a gerar repetidamente um site inteiro. Para um projeto que começa num URL público autorizado e não numa secção de uma loja existente, a clonagem de sites com IA abrange o fluxo separado da captura ao código e os respetivos limites de direitos.
Selecione um elemento do storefront e preserve o contexto do código
O Design Mode do Runner AI destina-se a edições visuais específicas na versão atual e pronta do storefront. Num computador, pode abrir o storefront, entrar no Design Mode e selecionar um elemento visível. O elemento selecionado e o contexto do código envolvente podem acompanhar uma instrução Ask Runner AI, limitando o pedido ao componente que escolheu. Isto é útil quando «altere este título» ou «substitua esta imagem» é mais claro do que descrever a localização de memória.
Os controlos diretos abrangem alterações suportadas de espaçamento, imagem, texto e remoção. Para elementos multimédia suportados, o painel de imagens pode apresentar opções de carregamento e geração com IA, enquanto os controlos de texto podem ajustar propriedades como tamanho, peso, família, cor, opacidade e alinhamento. Anular e Refazer aplicam-se ao histórico atual não guardado do Design Mode. Como um pedido à IA repõe a seleção e o histórico de edições diretas não guardadas quando o processamento começa, guarde as edições diretas pendentes antes de passar dos controlos diretos para Ask Runner AI.
A disponibilidade depende do estado do projeto. O Design Mode pode não estar disponível quando a versão mais recente do storefront não está pronta, está a pré-visualizar uma versão anterior, outro pedido está em curso, a funcionalidade não está ativa no workspace ou não está a usar um layout de computador. O chat normal do Runner continua a ser o caminho adequado para trabalhos em várias páginas, novos comportamentos ou funcionalidades mais amplas. O editor não deve ser apresentado como um controlo universal que ignora a preparação do projeto ou a ativação de funcionalidades.
Reveja as alterações aos ficheiros de origem e as pré-visualizações responsivas
Guardar uma edição visual escreve a alteração pendente no projeto e, quando o fluxo atual o permite, pode registar um novo snapshot da versão. A pré-visualização é depois recarregada para que o resultado visível possa ser novamente verificado. Reveja a página nos layouts para PC, tablet e telemóvel e percorra a ação do cliente indicada no briefing. Uma secção que pareça correta numa largura pode ainda cortar texto, esconder um controlo, quebrar uma rota ou deslocar uma ação de produto para uma sequência inconveniente noutro local.
O Runner também disponibiliza, sob determinadas condições, um editor de código para inspecionar os ficheiros do storefront por trás da pré-visualização. A vista Git separa ficheiros guardados, diferenças, staging, commits e pushes. Esta separação é importante: um ficheiro guardado não é automaticamente incluído num commit, um commit não é automaticamente enviado por push e nenhuma destas ações publica o storefront. Reveja a diferença de ficheiros pretendida e evite agrupar alterações não relacionadas apenas porque se encontram no mesmo workspace.
Use a pré-visualização responsiva como evidência do estado atual do projeto, não como prova de todos os sistemas ligados. Verifique os dados reais dos produtos, ligações, pesquisa, comportamento do carrinho, responsabilidade pelo checkout, analytics, acessibilidade e rotas públicas na fonte adequada. Se a alteração fizer parte de uma revisão mais ampla da navegação, hierarquia das páginas e conteúdo, o redesenho de sites ecommerce explica como manter o redesenho ligado às evidências da loja atual, em vez de fazer uma atualização visual genérica.
Mantenha separados o ato de guardar, a revisão de versões e a publicação
Um editor de sites com IA é mais seguro quando cada passo importante permanece explícito. No Design Mode, as alterações diretas podem ser revistas com Anular e Refazer antes de escolher Guardar. Depois de guardar, a pré-visualização normal do storefront mostra o resultado atual. O histórico de versões, quando disponível para o projeto, oferece outra forma de inspecionar ou restaurar trabalhos anteriores no storefront sem tratar cada proposta guardada como a resposta pública final.
A publicação é uma decisão separada. Antes de publicar, compare o resultado com o briefing original e verifique se a secção selecionada continua a funcionar com o catálogo, a página envolvente, os layouts dos dispositivos e o percurso do cliente. Confirme qualquer texto factual no sistema responsável por essa informação. Uma descrição gerada não comprova o inventário, uma pré-visualização não comprova a disponibilidade de pagamentos e uma gravação de ficheiro bem-sucedida não comprova que todas as rotas ou integrações funcionam corretamente.
Este limite de revisão é a distinção útil do Runner AI para as equipas de comércio. O editor trabalha dentro do projeto do storefront e pode ligar um elemento selecionado ao respetivo contexto de origem, mas o operador pode ainda inspecionar o que mudou e decidir se o resultado está pronto. O resultado não é apenas um mockup plano ou uma alteração visual sem explicação. É uma alteração editável do projeto, com ficheiros visíveis e pré-visualizações que apoiam um processo de aprovação deliberado.
Perguntas frequentes sobre o editor de sites com IA
Que dados posso fornecer ao Runner AI para editar um site?
Forneça ao Runner AI o projeto atual da loja, a página ou o elemento abrangido, a ação do cliente que pretende melhorar, factos verificados do catálogo ou do conteúdo e os limites que deve preservar. Pode acrescentar uma imagem de referência aprovada quando a aparência for importante. No Design Mode, a seleção de um elemento também pode anexar esse elemento e o contexto do código envolvente a um pedido específico com Ask Runner AI.
Posso editar um storefront sem alterar manualmente o código?
O Design Mode oferece controlos diretos para alterações suportadas de espaçamento, imagem, texto e remoção de elementos, além de um campo Ask Runner AI para pedidos sobre o elemento selecionado. Pode solicitar alterações mais amplas no chat normal. Um editor de código disponível sob determinadas condições continua acessível a quem precise de inspecionar ou fazer uma edição específica num ficheiro, mas não é necessário para todos os ajustes visuais.
Guardar uma edição publica-a imediatamente?
Não. Guardar atualiza o workspace do projeto e recarrega a pré-visualização atual. Commit, push e publicação continuam a ser ações separadas, com as respetivas permissões e verificações. Reveja a página afetada em PC, tablet e telemóvel, inspecione as alterações relevantes aos ficheiros e verifique o percurso do cliente antes de decidir publicar o storefront.
Qual é a diferença em relação a um gerador genérico de sites com IA?
Um gerador genérico começa frequentemente por um prompt vazio e dá prioridade ao primeiro site completo. O fluxo de edição do Runner AI pode começar pelo projeto de comércio atual, por um elemento selecionado do storefront, pelo contexto de origem envolvente, por imagens de referência e por factos verificados da loja. O resultado verificável inclui ficheiros alterados e pré-visualizações responsivas, para que possa rever uma alteração específica sem tratar a geração, o ato de guardar e a publicação como o mesmo evento.
Edite um storefront atual com um resultado verificável
Forneça o storefront atual, a página exata ou o elemento selecionado, factos verificados do catálogo e da marca, uma imagem de referência opcional e a ação do cliente que deve permanecer intacta. Peça ao Runner AI os ficheiros de origem alterados e as pré-visualizações para PC, tablet e telemóvel, para poder inspecionar o resultado antes de decidir se o publica.
Abra o fluxo do editor de sites com IA no Runner AI