---
title: Usa modo de diseño
description: 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](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

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

1. Abre tu proyecto.
2. Selecciona **Tienda**.
3. Asegúrate de que la etiqueta de versión diga **Actual** y que la vista previa esté lista.
4. Selecciona **Modo de diseño** en la barra de herramientas de la tienda.
5. 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.
6. 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

1. Navega a la página de destino en Vista previa normal antes de abrir Modo de diseño.
2. Entra en Modo de diseño y selecciona un elemento.
3. 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.
4. Espera a que se complete la guardación o solicitud de Runner elegida, luego revisa la página en Vista previa normal.
5. Verifica la página nuevamente en diseños **PC**, **Tablet** y **Teléfono**.
6. 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**. |

## Guías relacionadas

- [Edita contenido, páginas y medios](./edit-content-pages-and-media)
- [Vista previa de tu tienda](./preview-your-store)
- [Usa historial de versiones](./version-history)