Usa modo de diseño

Selecciona elementos de la tienda y usa los controles de edición visual de Runner de forma segura.

Ruta de entrada: Espacio de trabajo → selecciona una tienda → Tienda → Modo de diseño

Vista previa y controles de la tienda Runner

Qué cubre esta guía

Abre Modo de diseño en la última versión de la tienda, selecciona un elemento visible, realiza un cambio controlado y guárdalo como parte del proyecto actual.

Por qué y cuándo usar Modo de diseño

Usa Modo de diseño para cambios visuales enfocados que son más fáciles de señalar que describir desde cero: reescribe un encabezado, reemplaza una imagen, ajusta el espaciado, cambia la tipografía o elimina un elemento visible.

Usa el chat de Runner para trabajo más amplio que abarque varias páginas, cambie el comportamiento de la tienda o requiera nueva funcionalidad.

Disponibilidad y requisitos previos

Modo de diseño es condicional. Está disponible cuando:

usas un diseño de escritorio;
la última versión de la tienda está lista y seleccionada;
no estás viendo una versión anterior;
Runner no está procesando actualmente otra solicitud; y
la función Modo de diseño está habilitada para el espacio de trabajo.

Si la vista previa aún se está preparando, se selecciona una versión histórica o Runner está trabajando, el botón puede estar oculto o deshabilitado.

Abre Modo de diseño

Abre tu proyecto.
Selecciona Tienda.
Asegúrate de que la etiqueta de versión diga Actual y que la vista previa esté lista.
Selecciona Modo de diseño en la barra de herramientas de la tienda.
Si aparece una barra de edición en la parte inferior con otro control Modo de diseño, selecciónalo para habilitar la selección de elementos.
Muévete sobre la tienda y selecciona el elemento que deseas cambiar.

Controles de Modo de diseño

Control	Por qué lo usas	Qué sucede cuando lo seleccionas
Modo de diseño en la barra de herramientas de la tienda	Entra en la vista de edición dedicada.	Runner abre la tienda actual en el panel de diseño.
Modo de diseño en la barra inferior	Activa o desactiva la inspección de elementos.	Cuando está activado, los elementos seleccionables se delinean y seleccionar uno abre su barra de edición. Desactivarlo borra la sesión de edición actual.
Campo Pregunta a Runner AI y flecha de envío	Describe un cambio para el elemento seleccionado.	Runner recibe la instrucción con el elemento seleccionado. Cuando Runner comienza, borra la selección y reinicia las ediciones directas sin guardar y su historial de deshacer/rehacer, así que guarda cualquier edición directa pendiente antes de enviar.
Espaciado	Cambia el espacio dentro o alrededor del elemento.	Se abre un panel para margen y relleno horizontal y vertical.
Imagen	Reemplaza una imagen seleccionada o imagen de fondo.	Se abre un panel con opciones Cargar e Generado por IA cuando ese elemento admite edición de medios.
Texto	Cambia el estilo de tipo.	Se abre un panel para tamaño de fuente, peso, familia, color, opacidad y alineación cuando sea compatible.
Eliminar elemento	Elimina el elemento seleccionado de la edición actual.	El elemento desaparece inmediatamente en el editor. Usa Deshacer si fue accidental y revisa antes de guardar.
Deshacer	Revierte la última edición visual sin guardar.	Runner retrocede a través del historial de edición de Modo de diseño actual.
Rehacer	Reaplicar una edición que acabas de deshacer.	Runner avanza a través del historial de edición de Modo de diseño actual.
Guardar	Mantén las ediciones visuales actuales.	Runner escribe los cambios pendientes, registra una nueva instantánea de versión cuando es posible, borra el historial de deshacer/rehacer de esta sesión y recarga la vista previa. El botón está deshabilitado cuando no hay nada que guardar.
Cerrar	Deja el panel de diseño dedicado.	Runner vuelve a la vista previa normal de la tienda y borra ediciones sin guardar e historial de comandos. Guarda primero si deseas mantener los cambios.

Realiza un cambio visual seguro

Navega a la página de destino en Vista previa normal antes de abrir Modo de diseño.
Entra en Modo de diseño y selecciona un elemento.
Elige una ruta para este cambio:
- Para una edición directa, usa Espaciado, Imagen, Texto o Eliminar elemento, luego revísalo con Deshacer o Rehacer y selecciona Guardar.
- Para una solicitud de IA, guarda primero cualquier edición directa pendiente, reselecciona el elemento si es necesario, ingresa la instrucción en Pregunta a Runner AI y envíala. Cuando Runner comienza, la selección y el historial de edición directa sin guardar se borran.
Espera a que se complete la guardación o solicitud de Runner elegida, luego revisa la página en Vista previa normal.
Verifica la página nuevamente en diseños PC, Tablet y Teléfono.
Publica solo después de que la vista previa guardada pase tu revisión.

Estados, límites y solución de problemas

Lo que ves	Significado	Qué hacer
Iniciando modo de diseño…	Runner está preparando la vista previa editable.	Mantén la última versión seleccionada.
El modo de diseño no se inició	La vista previa editable no se hizo lista.	Selecciona Intentar de nuevo. Si se repite, vuelve a Vista previa normal y actualiza.
Iframe aún se está cargando	La inspección de elementos no está lista.	Espera a que la tienda termine de cargar.
Editor visual deshabilitado mientras la IA está procesando	Runner está manejando otra solicitud.	Espera a que se complete la solicitud, luego selecciona el elemento de nuevo.
Runner comienza después de una solicitud Pregunta a Runner AI	El editor visual se reinicia para la nueva tarea.	Cualquier edición directa sin guardar y su historial de deshacer/rehacer se descartan. Guarda ediciones directas antes de enviar la solicitud.
Edición de IA no disponible para contenido dinámico	El contenido seleccionado no se puede cambiar a través de ese control.	Describe la página y el resultado deseado en el chat regular de Runner.
Nada que deshacer / rehacer / guardar	La sesión actual de Modo de diseño no tiene la acción correspondiente.	Selecciona un elemento editable y realiza un cambio primero.
Cambios guardados en archivos de origen	Runner completó la guardación de Modo de diseño.	Espera a que se recargue la vista previa, luego revisa la página cambiada de nuevo.
La edición se guarda pero no está en vivo	Guardar cambios actualiza el proyecto, no la tienda publicada.	Revisa la versión actual, luego selecciona Publicar cambios.