Usa modo de diseño

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

Las capturas y grabaciones muestran la interfaz en inglés.

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

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 online.
Asegúrate de que la etiqueta de versión diga Actual y que la vista previa esté lista.
Selecciona Modo 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 Diseño, selecciónalo para habilitar la selección de elementos.
Muévete sobre la tienda y selecciona el elemento que deseas cambiar.

Anotaciones en inglés: Modo de Diseño abierto en la tienda online Quiet Mornings antes de la selección de elementos

Las anotaciones en inglés señalan los controles. Selecciona la imagen para ampliarla.

El Modo de Diseño está abierto, pero aún no se ha seleccionado ningún elemento. Selecciona el elemento que deseas cambiar para revelar sus controles disponibles; la captura de pantalla no muestra una edición o guardado.

Controles de Modo de diseño

Control	Por qué lo usas	Qué sucede cuando lo seleccionas
Modo 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 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 Pregúntale a Runner 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 Subir 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 Pregúntale a Runner 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 los diseños de PC, Tablet y Teléfono. Confirma que el encabezado, imagen o espaciado guardado aún está presente después de que se recargue la vista previa.
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 el 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.
Tu vista previa aún se está cargando.	La inspección de elementos no está lista.	Espera a que la tienda online termine de cargarse.
Podrás volver a editar visualmente cuando Runner termine de procesar.	Runner está manejando otra solicitud.	Espera a que la solicitud termine, luego selecciona el elemento nuevamente.
Runner comienza después de una solicitud Pregúntale a Runner	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.
No pudimos guardar tus cambios de diseño	Runner no pudo escribir una o más ediciones en los archivos de tu tienda. Esas ediciones permanecen en el editor y Guardar sigue disponible. Las ediciones que sí se guardaron siguen guardadas.	Selecciona Guardar de nuevo. Si sigue fallando, deshaz esa edición o describe el cambio en el chat de Runner.
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.