Asistencia de IA para aplicar diseño

Matthias Rohmer
Matthias Rohmer

Usa el panel AI assistance para aplicar estilos y comprender el diseño general de un sitio web, los estilos de elementos específicos y obtener correcciones generadas por IA para errores de CSS.

Abre el panel "Asistencia de IA".

Se abrirá el panel de asistencia de IA en el panel lateral.

El panel de asistencia de IA se abrió en su estado predeterminado.

Desde el panel Elementos

Para abrir la asistencia de IA desde el panel Elementos, cuando inspeccionas un nodo DOM, haz clic con el botón derecho en el nodo y selecciona la opción Ask AI.

Menú contextual del elemento con la opción "Ask AI" destacada.

Cuando abres la asistencia de IA de esta manera, el elemento DOM inspeccionado ya está preseleccionado como elemento de contexto para la conversación.

También puedes hacer clic en el botón flotante adjunto a un nodo DOM sobre el que se colocó el cursor.

El botón flotante conectado a un nodo DOM

Desde el menú de comandos

Para abrir la asistencia de IA desde el menú de comandos, escribe AI y, luego, ejecuta el comando Show AI assistance, que tiene la insignia Drawer junto a él.

El menú de comandos abierto con la opción "Mostrar asistencia de IA" destacada

En el menú “Más herramientas”

Como alternativa, en la esquina superior derecha, selecciona Más opciones > Más herramientas > Asistencia de IA.

Se abrió el menú de herramientas adicionales.

Contexto de la conversación

Los chats con la asistencia de IA siempre se relacionan con el elemento que se está inspeccionando, que es el último elemento seleccionado en el árbol del DOM del panel Elements. En la esquina inferior izquierda del panel, se muestra una referencia a este elemento.

Panel de asistencia de IA con el elemento de contexto destacado.

Cambia el contexto con el botón del selector de elementos junto al elemento actual o seleccionando en el árbol del DOM del panel Elements.

Si bien el elemento inspeccionado actualmente es la base de la conversación, la asistencia de IA tiene acceso a todas las APIs web para recopilar más información de la página inspeccionada. Esto incluye consultar otros elementos con document.querySelector o evaluar estilos calculados.

Mensajes

Cuando inicias una conversación nueva, la asistencia de IA para aplicar diseño ofrece instrucciones de ejemplo para ayudarte a comenzar rápidamente.

Panel de asistencia de IA con las instrucciones de ejemplo destacadas.

Haz clic en cualquiera de las instrucciones para completar previamente el campo de entrada de la instrucción en la parte inferior del panel.

También puedes escribir tu propia instrucción o pregunta en el campo de entrada.

Para enviar una instrucción, presiona Enter o haz clic en la flecha que se encuentra a la derecha del campo de entrada.

Flujo de conversación

El envío de una instrucción inicia la conversación con el agente de diseño. Para obtener la información necesaria para responder mejor tu instrucción, el agente genera y ejecuta JavaScript que llama a APIs web. El progreso del agente se muestra en pasos. El estado del paso inicial es Investigating….

El panel de asistencia de IA después de que se inicia una conversación.

La etiqueta del paso se actualiza a medida que el agente ejecuta acciones más específicas para resolver tu pregunta.

Una vez que el agente llega a una respuesta final, esta se muestra debajo de los pasos de investigación, incluidas las sugerencias para las indicaciones de seguimiento.

Panel de asistencia de IA con una respuesta que brinda la IA.

Haz clic en cualquiera de las indicaciones sugeridas para continuar la conversación. Haz clic en .

de un paso de investigación para comprender mejor lo que hizo la asistencia de IA en segundo plano.

Panel de asistencia de IA con un paso de conversación expandido.

Cuando expandes un chip de progreso, ves el código que ejecutó el agente, junto con su valor devuelto. Copia el código ejecutado para usarlo más adelante, por ejemplo, con el panel de la consola.

Conversaciones en pausa

La asistencia de IA puede generar código con efectos secundarios. Cuando eso sucede, la conversación se detiene antes de que se ejecute el código.

Panel de asistencia de IA con una conversación en pausa.

Cuando se detenga la conversación, revisa el código que propuso el agente. Haz clic en Continuar para continuar.

No se proporcionó ninguna respuesta

Es posible que la asistencia de IA no proporcione respuestas por varios motivos.

Panel de asistencia de IA con una conversación rechazada.

Si crees que la asistencia de IA debería poder analizar tu instrucción, informa un error.

Historial de conversaciones

Una vez que inicias una conversación, cada respuesta se basa en tus interacciones anteriores entre tú y la IA.

Usa los controles de la esquina superior izquierda del panel para controlar el historial de conversaciones.

Panel de asistencia de IA con los controles de historial destacados.

Comenzar una medición nueva

Para iniciar una conversación nueva con el contexto de conversación seleccionado actualmente, haz clic en el botón .

Continuar

Para continuar una conversación anterior, haz clic en el botón y selecciónala en el menú contextual.

Borrar

Para borrar una conversación del historial, haz clic en el botón .

Califica las respuestas y envía comentarios

La asistencia de IA es una función experimental. Por lo tanto, buscamos activamente tus comentarios para saber cómo podemos mejorar la calidad de las respuestas y la experiencia general.

Panel de asistencia de IA con los controles de calificación destacados.

Votar respuestas

Para calificar una respuesta, usa los botones Me gusta y No me gusta que se encuentran debajo de ella.

Denunciar respuestas

Para denunciar contenido inapropiado, haz clic en el botón junto a los botones de votación.