Use o painel Assistência de IA para entender o layout geral de um site, estilos de elementos específicos e receber correções geradas por IA para bugs de CSS.
Abra o painel "Assistência de IA".
O painel Assistência de IA é aberto na gaveta.
No painel "Elementos"
Para abrir a assistência de IA no painel "Elementos", inspecione um nó DOM, clique com o botão direito do mouse no nó e selecione a opção Perguntar à IA.
Quando você abre a assistência de IA dessa forma, o elemento DOM inspecionado já está pré-selecionado como um elemento de contexto para a conversa.
Ou clique no botão flutuante anexado a um nó do DOM em que você passou o cursor.
No menu de comandos
Para abrir a Assistência de IA no menu de comandos, digite AI e execute o comando
Mostrar assistência de IA, que tem o selo Gaveta ao lado.
No menu "Mais ferramentas"
Como alternativa, no canto superior direito, selecione Mais opções > Mais ferramentas > Assistência de IA.
Contexto da conversa
As conversas com a assistência de IA sempre se relacionam ao elemento inspecionado no momento, que é o último elemento selecionado na árvore DOM do painel "Elementos". Uma referência a esse elemento aparece no canto inferior esquerdo do painel.
Mude o contexto usando o seletor de elementos ao lado do elemento atual ou selecionando na árvore DOM do painel "Elementos".
Com o contexto selecionado, você pode fazer uma captura de tela da janela de visualização e enviar para o chat. Clique no botão Capturar tela ao lado do campo de entrada de texto do chat.
Você pode usar capturas de tela para fornecer contexto visual adicional aos comandos, por exemplo, para verificar se todos os botões visíveis têm o mesmo espaçamento.
Embora o elemento inspecionado no momento seja a base da conversa, a assistência de IA tem acesso a todas as APIs da Web para coletar mais informações da página inspecionada. Isso inclui consultar outros elementos com
document.querySelector ou avaliar estilos computados.
Comandos
Ao iniciar uma nova conversa, a assistência de IA para estilização oferece exemplos de comandos para ajudar você a começar rapidamente.
Clique em qualquer um dos comandos para preencher o campo de entrada de comandos na parte de baixo do painel.
Se preferir, digite seu próprio comando ou pergunta no campo de entrada.
Para enviar um comando, pressione Enter ou clique na seta à direita do campo de entrada.
Fluxo de conversa
Enviar um comando inicia a conversa com o agente de estilização. Para fornecer as informações necessárias para responder melhor ao seu comando, o agente gera e executa JavaScript que chama APIs da Web. O progresso do agente é mostrado em etapas. O status da etapa inicial é Investigating….
O rótulo da etapa é atualizado à medida que o agente executa ações mais específicas para resolver sua dúvida.
Quando o agente chega a uma resposta final, ela é mostrada abaixo das etapas de investigação, incluindo sugestões de comandos de acompanhamento.
Clique em qualquer um dos comandos sugeridos para continuar a conversa. Clique em .
de uma etapa de investigação para entender melhor o que a assistência de IA fez nos bastidores.
Ao expandir um ícone de progresso, você vê o código executado pelo agente e o valor de retorno dele. Copie o código executado para uso posterior, como executar com o painel do console.
Conversas pausadas
A assistência de IA pode gerar código com efeitos colaterais. Quando isso acontece, a conversa é pausada antes da execução do código.
Quando a conversa pausar, revise o código proposto pelo agente. Clique em Continuar para prosseguir ou em Cancelar para impedir a execução.
Salvar as mudanças no espaço de trabalho
Com uma pasta de espaço de trabalho conectada, é possível salvar as mudanças de estilo sugeridas pela Assistência de IA de volta aos arquivos de origem CSS no seu computador.
Para fazer isto:
Primeiro, gere um arquivo de metadados e conecte uma pasta do espaço de trabalho.
Como alternativa, você pode adicionar uma pasta manualmente.
Inicie um chat no painel "Elementos".
Peça à assistência de IA para modificar seu CSS.
A assistência de IA pode gerar código e pausar a execução. Revise o código e clique em Continuar para testar as mudanças em tempo real.
Abra a seção Mudanças não salvas e clique em Aplicar ao espaço de trabalho.
Revise as mudanças em um
diffe clique em Salvar tudo.
Para aprender esse fluxo de trabalho, consulte:
Nenhuma resposta
A assistência de IA pode não fornecer respostas por vários motivos.
Se você acha que seu comando é algo que a assistência de IA deveria conseguir discutir, registre um bug.
Histórico da conversa
Depois que você inicia uma conversa, cada resposta subsequente é baseada nas suas interações anteriores com a IA.
A assistência de IA salva seu histórico de conversas entre sessões. Assim, você pode acessar seus chats anteriores mesmo depois de recarregar o Chrome ou o DevTools.
Use os controles no canto superior esquerdo do painel para controlar o histórico de conversas.
Iniciar nova
Para iniciar uma nova conversa com o contexto de conversa selecionado, clique no botão .
Continuar
Para continuar uma conversa anterior, clique no botão e selecione no menu de contexto.
Excluir
Para excluir uma conversa do histórico, clique no botão .
Classificar respostas e dar feedback
A assistência de IA é um recurso experimental. Por isso, estamos buscando ativamente seu feedback para saber como melhorar a qualidade das respostas e a experiência geral.
Votar em respostas
Avalie uma resposta usando os botões Gostei e Não gostei abaixo dela.
Denunciar respostas
Para denunciar conteúdo inadequado, clique no botão ao lado dos botões de votação.