Assistência de IA para a estilização

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Matthias Rohmer

Sofia Emelianova

Use o painel Assistência de IA para entender o layout geral de um site, estilos de elementos específicos e para receber correções geradas por IA para bugs do CSS.

Abrir o painel "Assistência por IA"

O painel Assistência de IA é aberto na gaveta.

No painel "Elementos"

Para abrir a assistência de IA no painel "Elements", ao inspecionar um nó DOM, clique com o botão direito do mouse no nó e selecione a opção Ask AI.

Quando você abre a assistência por IA dessa forma, o elemento DOM inspecionado já está pré-selecionado como um elemento de contexto para a conversa.

Como alternativa, clique no botão flutuante anexado a um nó do DOM com o cursor.

No menu de comando

Para abrir a Assistência por IA no menu de comando, digite AI e execute o comando Mostrar assistência por IA, que tem o selo Drawer ao lado.

No menu "Mais ferramentas"

Como alternativa, no canto superior direito, selecione configurações Mais opções > Mais ferramentas > Assistência por IA.

Contexto da conversa

As conversas com assistência de IA sempre se relacionam ao elemento inspecionado no momento, que é o último elemento selecionado na árvore DOM do painel "Elements". Uma referência a esse elemento é mostrada 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 "Elements".

Embora o elemento inspecionado atualmente seja a base da conversa, a assistência com tecnologia 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.

Solicitações de prompt

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 uma das solicitações para preencher o campo de entrada de comando na parte de baixo do painel.

Como alternativa, digite seu próprio comando ou pergunta no campo de entrada.

Para enviar uma solicitação, pressione Enter ou clique na seta à direita do campo de entrada.

Fluxo de conversa

O envio de um comando inicia a conversa com o agente de estilo. Para receber as informações necessárias para responder melhor à solicitação, 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 pergunta.

Quando o agente chega a uma resposta final, ela aparece abaixo das etapas de investigação, incluindo sugestões para solicitações de acompanhamento.

Clique em qualquer uma das sugestões para continuar a conversa. Clique em keyboard_arrow_down.

de uma etapa de investigação para entender melhor o que a assistência por IA fez nos bastidores.

Quando você expande um ícone de progresso, o código executado pelo agente é mostrado, junto com o valor de retorno. Copie o código executado para uso futuro, como execução 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 que o código seja executado.

Quando a conversa pausar, revise o código proposto pelo agente. Clique em play_arrow Continuar para prosseguir ou em Cancelar para impedir a execução.

Salvar mudanças no seu espaço de trabalho

Com uma pasta de espaço de trabalho conectado, é possível salvar as mudanças de estilo sugeridas pela assistência de IA nos arquivos de origem do CSS no computador.

Para fazer isto:

1. Primeiro, gere um arquivo de metadados e conecte uma pasta do espaço de trabalho.

   Você também pode adicionar uma pasta manualmente.

2. Inicie uma conversa no painel "Elementos".

3. Solicite a assistência de IA para modificar seu CSS.

4. 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.

5. Abra a seção Mudanças não salvas e clique em Aplicar ao espaço de trabalho.

6. Revise as mudanças em uma diff e clique em Salvar tudo.

Para saber mais sobre esse fluxo de trabalho, consulte:

Nenhuma resposta

A assistência por IA pode não fornecer respostas por vários motivos.

Se você acha que a instrução é algo que a assistência por IA pode discutir, envie um bug.

Histórico da conversa

Depois que você inicia uma conversa, cada resposta é baseada nas interações anteriores entre você e a IA.

A assistência de IA salva o histórico de conversas entre as sessões. Assim, você pode acessar as conversas anteriores mesmo depois de recarregar o Chrome DevTools ou o Chrome.

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 adicionar.

Continuar

Para continuar uma conversa anterior, clique no botão histórico e selecione-o no menu de contexto.

Excluir

Para excluir uma conversa do histórico, clique no botão excluir.

Avaliar respostas e enviar feedback

A assistência de IA é um recurso experimental. Por isso, estamos buscando seu feedback para saber como podemos melhorar a qualidade das respostas e a experiência geral.

Votar nas respostas

Avalie uma resposta usando os botões thumb_up Gostei e thumb_down Não gostei abaixo da resposta.

Denunciar respostas

Para denunciar conteúdo inadequado, clique no botão denunciar ao lado dos botões de votação.