Usa el panel de Asistencia de IA 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 Asistencia de IA en el panel lateral.
Desde el panel de elementos
Para abrir la Asistencia de IA desde el panel Elementos, cuando inspecciones un nodo DOM, haz clic con el botón derecho en el nodo y selecciona la opción Pregúntale a la IA.
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 coloca el cursor.
Desde el menú de comandos
Para abrir Asistencia de IA desde el menú de comandos, escribe AI y, luego, ejecuta el comando Show AI assistance, que tiene la insignia Cajón junto a él.
En el menú "Más herramientas"
Como alternativa, en la esquina superior derecha, selecciona Más opciones > Más herramientas > Asistencia de IA.
Contexto de la conversación
Los chats con 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 Elementos. En la esquina inferior izquierda del panel, se muestra una referencia a este elemento.
Cambia el contexto con el selector de elementos que se encuentra junto al elemento actual o selecciona el árbol del DOM del panel Elementos.
Con el contexto seleccionado, puedes capturar una captura de pantalla de la ventana gráfica y enviarla a tu chat. Haz clic en el botón Tomar captura de pantalla junto al campo de entrada del chat.
Puedes usar capturas de pantalla para proporcionar contexto visual adicional a tus instrucciones, por ejemplo, para verificar si todos los botones visibles tienen el mismo espaciado.
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.
Instrucciones
Cuando inicias una conversación nueva, la asistencia de IA para el diseño ofrece ejemplos de instrucciones para ayudarte a comenzar rápidamente.
Haz clic en cualquiera de las instrucciones para completar previamente el campo de entrada de instrucciones 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 Intro o haz clic en la flecha que se encuentra en el lado derecho 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 las APIs web. El progreso del agente se muestra en pasos. El estado inicial del paso es Investigating….
La etiqueta del paso se actualiza a medida que el agente ejecuta acciones más específicas para responder 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 de instrucciones de seguimiento.
Haz clic en cualquiera de las instrucciones sugeridas para continuar la conversación. Haz clic en .
de un paso de investigación para comprender mejor qué hizo la asistencia de IA en segundo plano.
Cuando expandes un chip de progreso, ves el código que ejecutó el agente junto con su valor de devolución. Copia el código ejecutado para usarlo más adelante, por ejemplo, para ejecutarlo con el panel de la consola.
Conversaciones pausadas
La asistencia de IA podría generar código con efectos secundarios. Cuando eso sucede, la conversación se pausa antes de que se ejecute el código.
Cuando la conversación se detenga, revisa el código que propuso el agente. Haz clic en Continuar para proceder o en Cancelar para evitar la ejecución.
Cómo guardar los cambios en tu lugar de trabajo
Con una carpeta de espacio de trabajo conectada, puedes guardar los cambios de estilo que sugiere la asistencia de IA en los archivos fuente de CSS de tu computadora.
Para ello, sigue estos pasos:
Primero, genera un archivo de metadatos y conecta una carpeta de espacio de trabajo.
Como alternativa, puedes agregar una carpeta de forma manual.
Inicia un chat desde el panel Elementos.
Pídele a la asistencia de IA que modifique tu CSS.
La asistencia de IA puede generar código y pausar la ejecución. Revisa el código y haz clic en Continuar para probar los cambios en vivo.
Expande la sección Cambios sin guardar y haz clic en Aplicar al lugar de trabajo.
Revisa los cambios en un
diffy haz clic en Guardar todo.
Para aprender este flujo de trabajo, consulta lo siguiente:
No se proporcionó respuesta.
La asistencia de IA podría no proporcionar respuestas por varios motivos.
Si crees que tu instrucción es algo que la asistencia de IA debería poder analizar, presenta un error.
Historial de conversación
Una vez que inicias una conversación, cada respuesta posterior se basa en tus interacciones anteriores con la IA.
La asistencia de IA guarda tu historial de conversaciones entre sesiones, por lo que puedes acceder a tus chats anteriores incluso después de que se recarguen las Herramientas para desarrolladores o Chrome.
Usa los controles de la esquina superior izquierda del panel para controlar el historial de conversaciones.
Comenzar una medición nueva
Para iniciar una conversación nueva con el contexto de conversación seleccionado, haz clic en el botón .
Continuar
Para continuar una conversación anterior, haz clic en el botón de 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 proporciona 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.
Vota las respuestas
Califica una respuesta con los botones de Me gusta y No me gusta que se encuentran debajo de la respuesta.
Denunciar respuestas
Para denunciar contenido inapropiado, haz clic en el botón junto a los botones de votación.