Fazer alterações visuais com o Agente de modernização de experiência visual-changes
Este guia é para designers e outras pessoas que mudam a aparência de um site: cores, fontes, espaçamento e o layout de seus blocos. Você pode descrever uma alteração no Agente de modernização de experiência no Console de modernização de experiência, marcá-la na pré-visualização e enviá-la a um desenvolvedor para análise. O agente grava o código, de modo que não é necessário gravar CSS ou JavaScript. No entanto, as alterações chegam ao site por meio do repositório Git, portanto, é necessário ter as noções básicas: você envia seu trabalho para uma ramificação e o entrega em uma solicitação de pull. Se esses termos forem novos para você, consulte Palavras Usadas neste Guia.
Antes de começar before-you-start
Pergunte à pessoa que lidera o projeto o seguinte:
- Acesso ao console. Faça logon com sua Adobe ID. Consulte Abrir o Console de Modernização da Experiência.
- O site no qual trabalhar. Você conecta o repositório Git do site ao espaço de trabalho do console e precisa de acesso de gravação ao repositório para fazer isso. Consulte Conectar ao Site.
- Sua parte do trabalho. Concorde quais blocos, páginas ou estilos são seus, para que ninguém mais altere os mesmos arquivos ao mesmo tempo. Consulte Iniciar com uma pessoa e Dividir o trabalho.
- Como entregar. A maioria das equipes protege a ramificação principal para que um desenvolvedor analise cada alteração. Pergunte se você envia por push com Criar nova PR. Consulte Entrega para Revisão.
- Para designs do Figma, um assento do Figma que possa ler arquivos. Consulte Trabalhar com um design de diagrama.
Seu trabalho permanece no espaço de trabalho do console até que você o envie por push. Nada que você tente na pré-visualização alcança o site ativo por si só.
O que você pode alterar what-you-can-change
Em um site do Edge Delivery Services, os autores escrevem o conteúdo e o código decide sua aparência. Portanto, uma alteração visual altera o código do site, principalmente o CSS, e deixa o conteúdo inserido pelos autores como está. Não é necessário importar ou carregar páginas novamente.
Cada parte do código atinge uma parte diferente do site. Antes de solicitar uma alteração, decida até que ponto ela deve chegar:
--link-color nos estilos globais.Variantes, estilos de seção e modelos têm efeito somente onde os autores os aplicam. Peça ao agente para aplicar uma à página em que está trabalhando, para que você possa visualizá-la e informar aos autores quando usá-la.
Algumas solicitações vão além da aparência do site. Adicionar um campo que os autores preenchem, alterar como o conteúdo de um bloco é estruturado ou adicionar comportamento, como um carrossel, altera o modelo de conteúdo do bloco ou sua lógica. Descreva o que você precisa e deixe essas decisões para o desenvolvedor. Consulte Criar, Atualizar e Refatorar Blocos.
Limitar uma alteração a algumas páginas impact
Uma alteração em um bloco ou nos estilos globais altera cada página que os usa. Antes de solicitar um, pergunte ao agente onde o bloco ou estilo é usado. Por exemplo, “Quais páginas no meu espaço de trabalho usam o bloco de cartões?”
Quando uma alteração precisar ser aplicada somente a algumas páginas, peça uma destas opções:
- Uma variante de bloco, quando apenas algumas instâncias de um bloco devem parecer diferentes.
- Um estilo de seção, quando uma parte de uma página, como uma área realçada, precisa de sua própria aparência.
- Um modelo de página, quando um tipo de página, como todas as páginas de produto, precisa de sua própria aparência.
Mostrar o que você quer dizer references
Muitas vezes, uma imagem é mais precisa do que uma descrição. Use Anexar arquivos (ícone de clipe de papel) no prompt para anexar:
- Uma captura de tela do resultado que você quer, ou do problema, com uma frase sobre o que olhar.
- Páginas do guia de estilo da marca, como imagens ou como um arquivo do Word ou PowerPoint.
Você também pode apontar para uma página do site que já esteja com a aparência correta: “Faça com que os cartões em /adventures se pareçam com os cartões em /magazine.” Use somente designs e sites de referência que sua equipe tem permissão para usar.
O agente não se lembra das regras de marca entre as conversas. Depois que uma regra for resolvida, como estilos de botão ou tamanhos de cabeçalho, peça ao agente para escrevê-la nos arquivos de instrução do projeto, para que ela siga a regra em cada conversa. Consulte Instruções e memória do projeto.
Trabalhar a partir de um design de diagrama figma
O agente pode ler um design do Figma por meio do complemento de importação do Figma. Ela transforma as cores, a tipografia, o espaçamento e as variáveis do design nos tokens de design do site e seus componentes em blocos ou variantes de bloco.
- No Figma, crie um token de acesso pessoal com os escopos somente leitura listados nas Credenciais configurações do console.
- No console, abra Configurações, insira o token em Credenciais e selecione Salvar. Um novo token pode levar alguns minutos para entrar em vigor.
- Na Figura, selecione um componente ou quadro e copie o link. O link inclui uma
node-idque identifica sua seleção. - No console, envie um prompt com o link, como “Atualize o bloco de teaser para corresponder a este componente Figma:
{Figma link}. Reutilizar nossos tokens de design existentes.”
O que você deve saber:
- Um componente ou quadro por vez. O agente cria um bloco de um componente ou uma página de um quadro. Verifique cada resultado antes de enviar o próximo link. Consulte Criar um Bloco de Figma e Criar uma Nova Página de Figma.
- Seu token, seus arquivos. O token de acesso pessoal lê todos os arquivos Figma que você pode abrir e nada mais. O Figma o emite e define seus limites. Cada pessoa armazena seu próprio token. Não tem nada a ver com os tokens de design, as cores e o espaçamento que o agente lê do design.
- Seu assento no Figma. Você precisa de um assento Dev ou Full Figma; consulte Figma and Design Systems. Se o console relatar um erro da API do Figma com status 429, o token atingiu o limite de taxa do Figma.
- O complemento. A importação de figuras é um recurso opcional. Se não estiver ativado para o seu projeto, o agente oferece ativá-lo.
- Criar tokens. Compare os novos tokens com os existentes. Quando um valor de Figma for ligeiramente diferente de um token existente, decida qual deles manter, em vez de manter ambos.
Para saber o que sua organização aprova antes de as pessoas usarem o Figma com o agente, consulte Figma e Sistemas de Design.
Faça sua primeira alteração first-change
- Abra uma página no painel de visualização do console.
- No menu Visor, escolha a largura que deseja verificar: Área de Trabalho, Tablet ou Celular.
- Ative o Modo de inspeção com o ícone de seleção no painel de visualização.
- Selecione o elemento que deseja alterar, como um cabeçalho, uma imagem ou um botão. O elemento é adicionado ao seu prompt: o agente recebe seu HTML e sua posição na página e limita suas alterações a esse elemento.
- Descreva a alteração e até que ponto ela deve ser atingida e envie o prompt. Por exemplo: “Faça com que este botão use nosso estilo principal, aqui e em cada página”.
- Quando o agente terminar, selecione Atualizar visualização se a visualização não tiver sido atualizada. Verifique o resultado em cada tamanho de Viewport.
- Se algo não estiver certo, diga o que você vê, como “No celular, o texto toca a imagem”. Solicite uma alteração de cada vez e verifique-a antes de solicitar a próxima.
Para desfazer uma alteração, peça ao agente para revertê-la. Para descartar todas as alterações não enviadas para um arquivo, abra o modo de exibição Alterações e selecione Descartar ao lado do arquivo. Consulte Ações de alterações.
Se o agente ainda não receber uma alteração após algumas tentativas, pergunte ao desenvolvedor ou selecione Solicitar suporte na barra de menus e descreva o que você solicitou e o que vê. Sua solicitação chega à equipe que cria o agente. Quando uma conversa não está indo bem, o console também pode oferecer ajuda em Precisa de ajuda? Consulte Solicitar Suporte.
Exemplo de Prompts example-prompts
- “Fazer com que todos os cabeçalhos usem a fonte de cabeçalho do guia de estilo anexado.”
- “Dê às placas no bloco de placas a mesma altura, com os botões alinhados na parte inferior.”
- “Adicione uma variante
darkdo bloco de teaser com texto branco na cor de nossa marca escura e aplique-a ao segundo teaser em/adventures.” - “Adicione um estilo de seção
highlightcom um plano de fundo claro e mais espaço acima e abaixo, e use-o para a seção de informativo na home page.” - “Em dispositivos móveis, empilhe as colunas e coloque a imagem acima do texto.”
- “Quais páginas no meu espaço de trabalho usam o bloco principal? Mostre-me como cada um cuida dessa mudança.”
- “Escreva os estilos de botão que concordamos nos arquivos de instruções do projeto.”
Verifique Antes De Entregar check
- Verifique cada tamanho de Viewport, especialmente Mobile.
- Verifique outras páginas que usam o mesmo bloco, estilo ou modelo, não apenas a página em que você trabalhou.
- Verifique como o design lida com o conteúdo real: cabeçalhos longos, curtos, imagens ausentes e listas com muitos itens.
- Verifique se o texto permanece legível em relação ao plano de fundo. Você pode perguntar ao agente: “Verifique o contraste de cor do texto no bloco de teaser em relação à WCAG AA”.
- Depois de enviar, abra os URLs de visualização listados na solicitação de pull e verifique as páginas lá. Consulte Visualização de Console Diferente do Site.
Entregar para revisão hand-over
- Envie seu código por push com Criar nova PR, conforme descrito em Enviar Alterações de Código. Prepare apenas os arquivos que pertencem à sua alteração e descreva-a em uma frase simples, como “Cantos arredondados e sombra para cartões”.
- Selecione Exibir PR na notificação e envie o link da solicitação de pull para o desenvolvedor que a revisa.
Para fazer as alterações solicitadas pelo revisor, continue trabalhando na mesma ramificação e envie com Enviar para a ramificação atual; a solicitação de pull é atualizada.
Sua alteração chega ao site ativo quando o desenvolvedor a mescla. Se você também alterou texto ou imagens em uma página, isso é uma alteração de conteúdo: ela chega ao site somente quando a página é carregada e publicada. Concordo com os autores que fazem isso. Consulte Coordenar Alterações de Conteúdo.
Palavras Usadas neste Guia glossary
--link-color.main.Seções, blocos e conteúdo padrão são explicados com mais detalhes em Formatar a estrutura do conteúdo.