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.

El menú contextual del elemento con la opción “Preguntar a la IA” 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 del DOM sobre el que se coloca el cursor.

El botón flotante adjunto a un nodo del DOM.

Desde el menú de comandos

Para abrir Asistencia de IA en el menú de comandos, escribe AI y, luego, ejecuta el comando Mostrar asistencia de IA, que tiene la insignia Panel lateral 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ú Más herramientas.

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 los 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

Cuando se envía una instrucción, se 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, la respuesta se muestra debajo de los pasos de investigación, incluidas las sugerencias para los mensajes 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 dio 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 tu instrucción es algo que la asistencia de IA debería poder analizar, informa un error.

Historial de conversaciones

Cuando inicias una conversación, cada respuesta se basa en tus interacciones previas con la IA.

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

El panel de asistencia de IA con los controles del 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 basada en IA es una función experimental. Por lo tanto, esperamos activamente tus comentarios para aprender cómo podemos mejorar la calidad de las respuestas y la experiencia en 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 que se encuentra junto a los botones de votación.