Realizar cambios visuales con el agente de modernización de experiencias visual-changes
Esta guía es para diseñadores y otros usuarios que cambian el aspecto de un sitio: colores, fuentes, espaciado y el diseño de sus bloques. Describe un cambio en Experience Modernization Agent en Experience Modernization Console, lo comprueba en la vista previa y lo envía a un desarrollador para que lo revise. El agente escribe el código, por lo que no es necesario escribir CSS o JavaScript. Sin embargo, los cambios llegan al sitio a través de su repositorio de Git, por lo que necesita lo básico: inserta el trabajo en una rama y lo entrega en una solicitud de extracción. Si estos términos son nuevos para usted, consulte Palabras utilizadas en esta guía.
Antes de comenzar before-you-start
Pregunte a la persona que dirige el proyecto lo siguiente:
- Acceso a la consola. Ha iniciado sesión con su Adobe ID. Consulte Abrir la consola de modernización de experiencias.
- El sitio en el que trabajar. Conecta el repositorio Git del sitio al espacio de trabajo de la consola y necesita acceso de escritura al repositorio para hacerlo. Ver Conectar Su Sitio.
- Tu parte del trabajo. Acorde qué bloques, páginas o estilos son suyos, de modo que nadie más cambie los mismos archivos al mismo tiempo. Ver Comenzar con una persona y luego dividir el trabajo.
- Cómo entregar. La mayoría de los equipos protegen la rama principal para que un desarrollador revise cada cambio. Pregunte si desea insertar con Crear nuevo PR. Ver Entregar para revisión.
- Para diseños Figma, un asiento Figma que puede leer archivos. Ver Trabajo a partir de un diseño de Figma.
El trabajo permanece en su propio espacio de trabajo de la consola hasta que lo inserta. Nada de lo que intente en la vista previa llega al sitio activo por sí solo.
Qué puede cambiar what-you-can-change
En un sitio de Edge Delivery Services, los autores escriben el contenido y el código decide su aspecto. Por lo tanto, un cambio visual cambia el código del sitio, principalmente su CSS, y deja el contenido que los autores ingresaron tal cual. No es necesario que vuelva a importar ni cargar páginas.
Cada parte del código llega a una parte diferente del sitio. Antes de solicitar un cambio, decida hasta dónde debe llegar:
--link-color en los estilos globales.Las variantes, los estilos de sección y las plantillas sólo tienen efecto cuando los autores los aplican. Pida al agente que aplique una a la página en la que está trabajando para poder verla y que indique a los autores cuándo utilizarla.
Algunas solicitudes van más allá del aspecto del sitio. Al agregar un campo que los autores rellenan, cambiar la estructura del contenido de un bloque o agregar un comportamiento como un carrusel, se cambia el modelo de contenido del bloque o su lógica. Describa lo que necesita y deje estas decisiones en manos del desarrollador. Ver Crear, actualizar y refactorizar bloques.
Limitar un cambio a algunas páginas impact
Un cambio en un bloque o en los estilos globales cambia todas las páginas que los utilizan. Antes de pedir uno, pregunte al agente dónde se utiliza el bloque o estilo, por ejemplo “¿Qué páginas de mi espacio de trabajo utilizan el bloque de tarjetas?”
Cuando un cambio solo deba aplicarse a algunas páginas, pida una de estas opciones:
- Una variante de bloque, cuando solo algunas instancias de un bloque deberían tener un aspecto diferente.
- Un estilo de sección, cuando una parte de una página, como un área resaltada, necesita su propio aspecto.
- Una plantilla de página, cuando un tipo de página, como todas las páginas de productos, necesita su propio aspecto.
Mostrar lo que quiere decir references
Una imagen suele ser más precisa que una descripción. Use Adjuntar archivos (icono de clip) en el mensaje para adjuntar:
- Captura de pantalla del resultado que desea, o del problema, con una frase sobre qué mirar.
- Páginas de la guía de estilo de la marca, como imágenes o como archivo de Word o PowerPoint.
También puede señalar a una página del sitio que ya tiene el aspecto correcto: “Haga que las tarjetas de /adventures se parezcan a las tarjetas de /magazine”. Utilice únicamente diseños y sitios de referencia que su equipo pueda utilizar.
El agente no recuerda las reglas de la marca entre conversaciones. Una vez establecida una regla, como estilos de botón o tamaños de encabezado, pídale al agente que la escriba en los archivos de instrucciones del proyecto, de modo que siga la regla en cada conversación. Ver Instrucciones y memoria del proyecto.
Trabajar desde un diseño Figma figma
El agente puede leer un diseño de Figma a través del complemento de importación de Figma. Convierte los colores, la tipografía, el espaciado y las variables del diseño en tokens de diseño del sitio y sus componentes en bloques o variantes de bloques.
- En Figma, cree un token de acceso personal con los ámbitos de solo lectura enumerados en la configuración de credenciales de la consola.
- En la consola, abre Configuración, escribe el token en Credenciales y selecciona Guardar. Un nuevo token puede tardar un par de minutos en surtir efecto.
- En Figma, seleccione un componente o marco y copie su vínculo. El enlace incluye un
node-idque identifica su selección. - En la consola, envíe una solicitud con el vínculo, como “Actualice el bloque de teaser para que coincida con este componente de Figma:
{Figma link}. Reutilice nuestros tokens de diseño existentes”.
Cosas que hay que saber:
- Un componente o fotograma a la vez. El agente crea un bloque a partir de un componente o una página a partir de un marco. Compruebe cada resultado antes de enviar el siguiente vínculo. Ver Crear un bloque de Figma y Crear una nueva página de Figma.
- Su token, sus archivos. El token de acceso personal lee cada archivo Figma que puede abrir, y nada más. Figma lo emite y establece sus límites. Cada persona almacena su propio token. No tiene nada que ver con los tokens de diseño, los colores y el espaciado que el agente lee del diseño.
- Su asiento Figma. Necesita un asiento Dev o Full Figma; consulte Sistemas Figma y Diseño. Si la consola informa de un error de API de Figma con el estado 429, el token ha alcanzado el límite de tarifa de Figma.
- El complemento. La importación de Figma es una capacidad opcional. Si no está activado para el proyecto, el agente ofrece activarlo.
- Diseñar tokens. Comparar los tokens nuevos con los existentes. Cuando un valor de Figma solo difiere ligeramente de un token existente, decida cuál conservar en lugar de mantener ambos.
Para obtener información sobre lo que su organización aprueba antes de que los usuarios usen Figma con el agente, consulte Figma and Design Systems.
Realice El Primer Cambio first-change
- Abra una página en el panel de vista previa de la consola.
- En el menú Ventanilla, elija la anchura que desea comprobar: Escritorio, Tablet o Móvil.
- Activar modo de inspección con el icono de selección en el panel de vista previa.
- Seleccione el elemento que desea cambiar, como un encabezado, una imagen o un botón. El elemento se añade a la solicitud: el agente recibe su HTML y su posición en la página y limita sus cambios a ese elemento.
- Describa el cambio y hasta dónde debe llegar, a continuación, envíe el mensaje. Por ejemplo: “Haga que este botón utilice nuestro estilo principal, aquí y en cada página”.
- Cuando finalice el agente, seleccione Actualizar vista previa si la vista previa no se ha actualizado. Compruebe el resultado en cada tamaño de ventanilla.
- Si algo no está bien, diga lo que ve, como “En un móvil, el texto toca la imagen”. Pida un cambio a la vez y compruébelo antes de pedir el siguiente.
Para deshacer un cambio, pídale al agente que lo revierta. Para soltar todos los cambios no insertados en un archivo, abre la vista Cambios y selecciona Descartar junto al archivo. Ver Cambios en las acciones.
Si el agente sigue sin obtener un cambio justo después de varios intentos, pregunta a tu desarrollador o selecciona Solicitar ayuda en la barra de menús y describe lo que pediste y lo que ves. Su solicitud llega al equipo que crea el agente. Cuando una conversación no va bien, la consola también puede ofrecer ayuda en ¿Necesitas una mano? Ver Solicitar asistencia.
Indicadores de ejemplo example-prompts
- “Haga que todos los encabezados utilicen la fuente de encabezado de la guía de estilo adjunta.”
- “Dé a las cartas en el bloque de tarjetas la misma altura, con sus botones alineados en la parte inferior”.
- “Agregue una variante
darkdel bloque de teaser con texto en blanco en nuestro color de marca oscuro y aplíquela al segundo teaser de/adventures”. - “Agregue un estilo de sección
highlightcon un fondo claro y más espacio por encima y por debajo, y utilícelo para la sección del boletín informativo de la página principal”. - “En dispositivos móviles, apile las columnas y coloque la imagen sobre el texto.”
- “¿Qué páginas de mi espacio de trabajo utilizan el bloque héroe? Muéstrame cómo se ve cada uno después de este cambio”.
- “Escriba los estilos de botón que acordamos en los archivos de instrucciones del proyecto”.
Comprobación Antes De Entregar check
- Comprueba cada ventanilla, especialmente móvil.
- Compruebe otras páginas que utilicen el mismo bloque, estilo o plantilla, no solo la página en la que ha trabajado.
- Compruebe cómo el diseño gestiona el contenido real: encabezados largos, cortos, imágenes faltantes y listas con muchos elementos.
- Compruebe que el texto sigue siendo legible en segundo plano. Puede preguntar al agente: “Compruebe el contraste de color del texto en el bloque de teaser con WCAG AA”.
- Después de pulsar, abra las direcciones URL de vista previa que aparecen en la solicitud de extracción y compruebe las páginas allí. Ver diferencia en la vista previa de la consola con respecto al sitio.
Entregar para revisión hand-over
- Inserte su código con Crear nueva PR, tal como se describe en Cambios en el código push. Almacene en zona intermedia sólo los archivos que pertenecen al cambio y describa el cambio en una frase sencilla, como “Esquinas redondeadas y sombras para tarjetas”.
- Seleccione Ver PR en la notificación y envíe el vínculo de la solicitud de extracción al desarrollador que la revisa.
Para realizar los cambios que pide el revisor, siga trabajando en la misma rama e inserte Insertar en la rama actual; la solicitud de extracción se actualiza.
El cambio llega al sitio activo cuando el desarrollador lo combina. Si también ha cambiado texto o imágenes en una página, se trata de un cambio de contenido: solo llega al sitio cuando se carga y publica la página. De acuerdo con los autores que lo hacen. Consulte Coordinar cambios de contenido.
Palabras utilizadas en esta guía glossary
--link-color.main.Las secciones, los bloques y el contenido predeterminado se explican con más detalle en Dar forma a la estructura de contenido.