> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Edita e itera en diseños de Flowstep mediante chat o canvas
> Refina cualquier pantalla generada por Flowstep mediante edición visual manual o prompts basados en chat — itera tantas veces como sea necesario hasta que el diseño sea correcto.
Los diseños de Flowstep son completamente editables después de la generación. No estás limitado a lo que la IA produce inicialmente — puedes ajustar los elementos visuales directamente en el editor, usar chat para describir cambios en lenguaje natural, o pedir a Flowstep que genere variaciones y nuevas pantallas. Usa el método que se ajuste mejor al cambio que quieres hacer.
## Dos formas de editar
Realiza cambios directamente en el canvas seleccionando y modificando elementos. Este método funciona mejor para ajustes precisos — mover un componente, cambiar un color, actualizar una etiqueta o ajustar el espaciado.
Haz clic en cualquier componente o capa en tu diseño para seleccionarlo.
Usa los controles del editor para ajustar propiedades como color, tamaño, posición o contenido de texto.
Tus cambios se aplican inmediatamente en el canvas. Continúa editando o muévete a la siguiente pantalla.
Describe el cambio que quieres en lenguaje natural y Flowstep actualiza el diseño para ti. Este método es más rápido para cambios amplios o estructurales — ajustar el diseño, replantear una sección o aplicar una dirección de estilo.
Selecciona la pantalla que deseas editar, luego abre la entrada de chat.
Escribe lo que quieres que Flowstep actualice. Sé específico sobre qué debe cambiar y por qué, si es útil.
Flowstep aplica el cambio y te muestra el resultado. Si no es exactamente correcto, envía un mensaje de seguimiento para refinar más.
Las ediciones y regeneraciones actualizan la pantalla seleccionada **en el lugar** en lugar de agregar una nueva pantalla — mientras Flowstep transmite el cambio, el elemento en el que está trabajando actualmente se resalta con un borde punteado verde. Generar sin una pantalla seleccionada agrega una nueva pantalla en su lugar.
## Edita solo parte de una pantalla
No tienes que editar pantallas completas. Selecciona un sub-elemento — una tarjeta, un botón, una etiqueta de texto — y tu prompt de chat se aplica solo a él, dejando el resto de la pantalla sin tocar.
* Cambia al modo **Direct selection** con **Shift+V** (o el menú desplegable en el botón de barra de herramientas Seleccionar) para seleccionar el elemento más profundo bajo tu clic. Presiona **V** para selección normal, o mantén **Cmd** (Mac) / **Ctrl** (Windows) para usar selección directa temporalmente. **Escape** cierra la selección directa.
* Selecciona sub-elementos en múltiples pantallas con **Cmd+Shift** — un único prompt puede editar hasta 6 pantallas por mensaje.
Cuando se selecciona un elemento de imagen (fuera del modo wireframe), aparece un panel **Image** en el panel de propiedades: obtén una vista previa de la imagen, cámbiala arrastrando un nuevo archivo de imagen a la vista previa o haciendo clic en **Pick image**, o descárgala con **Download image**.
## Restaura una versión anterior
Cada generación de IA en el historial de chat mantiene su resultado original. Si una pantalla ha sido editada o eliminada desde que fue generada, su mensaje de chat muestra un botón **Restore** — usa **Restore original** para revertir ediciones, o **Restore** / **Restore all** para recuperar pantallas eliminadas. Úsalo para volver a un estado funcional después de que una edición vaya en la dirección equivocada.
## Acciones de un clic
Más allá de ediciones directas, puedes pedir a Flowstep que explore alternativas:
* **Try again from scratch** — pide a Flowstep que produzca una nueva versión de la pantalla actual con un diseño o dirección visual diferente.
* **Show the next screen** — pide a Flowstep que genere lo que viene lógicamente después en el flujo del usuario.
* **Make it pretty** — ajusta el espaciado, la alineación y los colores en todo el diseño. La estructura se mantiene igual.
Estas opciones te permiten iterar rápidamente sin tener que escribir un prompt cada vez.
## Itera para refinar
El diseño rara vez sale perfecto en el primer intento. Usa edición basada en chat para cada ronda de retroalimentación — describe qué está funcionando y qué no, y Flowstep se ajusta desde allí. No hay límite en cuántas veces puedes iterar en una pantalla.
Cuando iteras a través de chat, referencia elementos específicos por nombre o ubicación para obtener resultados más precisos. Por ejemplo: "Mueve el botón de llamada a la acción al final de la pantalla y hazlo de ancho completo" es más efectivo que "arregla el botón."