Editar e iterar en diseños de Flowstep mediante chat o lienzo

Los diseños de Flowstep son totalmente editables después de la generación. No estás bloqueado en lo que la IA produce primero—puedes ajustar visuales directamente en el editor, usar chat para describir cambios en lenguaje natural, o pedirle 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

​

Edita solo parte de una pantalla

No tienes que editar pantallas completas. Selecciona un subelemento — 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 intacto.

• Cambia a modo Direct selection con Shift+V (o el menú desplegable en el botón de la barra de herramientas Seleccionar) para seleccionar el elemento más profundo bajo tu clic. Presiona V para selección normal, u sostén Cmd (Mac) / Ctrl (Windows) para usar selección directa temporalmente. Escape sale de la selección directa.
• Selecciona subelementos en múltiples pantallas con Cmd+Shift — un solo 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: vista previa de la imagen, cámbiala arrastrando un nuevo archivo de imagen sobre la vista previa o haciendo clic en Pick image, o guárdala con Download image.

​

Copia y pega elementos

Copia una selección y pégala donde la necesites: en el mismo archivo, en otro archivo o en otra pestaña del navegador, ya que las copias van al portapapeles de tu sistema.

• Copia con Cmd+C (Mac) / Ctrl+C (Windows), corta con Cmd+X / Ctrl+X, y pega con Cmd+V / Ctrl+V.
• Duplica una selección en el mismo lugar con Cmd+D / Ctrl+D.
• Los elementos pegados aparecen ligeramente desplazados respecto a los originales para no taparlos.

Estos atajos actúan sobre los elementos seleccionados; mientras editas texto, recurren a la copia y el pegado de texto normal.

​

Nombra las pantallas en el lienzo

Cada pantalla muestra su nombre en una etiqueta sobre ella en el lienzo. Una pantalla que aún no has nombrado aparece como Screen.

• Haz doble clic en la etiqueta para cambiar el nombre de la pantalla y luego presiona Enter para guardar; hacer clic fuera también guarda. Los nombres pueden tener hasta 100 caracteres.
• Haz clic una vez en la etiqueta para seleccionar la pantalla y luego arrástrala para moverla por el lienzo.

​

Ajusta la opacidad, el modo de fusión y las esquinas

Selecciona un elemento para ajustar su apariencia con precisión en el panel de propiedades:

• Opacity (opacidad) — establece qué tan transparente es el elemento, de 0 a 100%. El mismo panel incluye un modo de fusión (Normal, Multiply, Screen, Overlay, y más) que controla cómo se mezcla el elemento con lo que hay detrás de él.
• Corners (esquinas) — redondea las esquinas del elemento. Establece un único Corner radius para las cuatro, o activa Per corner para dar a las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda su propio radio. Cada valor puede ser un Token de tu tema o una cantidad Custom (personalizada).

​

Amplía hasta el píxel

Amplía el lienzo hasta 25,600% para revisar el espaciado y la alineación con detalle. Más allá de 200%, aparecen líneas de cuadrícula alineadas a píxeles que se vuelven más visibles cuanto más amplías, para que puedas alinear los elementos con exactitud.

​

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 — Restore original para revertir ediciones, o Restore / Restore all para traer de vuelta pantallas eliminadas. Úsalo para volver a un estado conocido después de que una edición vaya en la dirección equivocada. Pasa el cursor sobre cualquier mensaje en el panel de chat para ver cuándo fue enviado. Los mensajes recientes muestran la hora; los más antiguos muestran hace cuánto tiempo fueron enviados (por ejemplo, “hace 1 día”), con la fecha y hora completa en una información emergente.

​

Acciones de un clic

Más allá de ediciones directas, puedes pedirle a Flowstep que explore alternativas:

• Try again from scratch — pídele a Flowstep que produzca una versión fresca de la pantalla actual con un diseño o dirección visual diferente.
• Show the next screen — pídele a Flowstep que genere lo que viene lógicamente después en el flujo del usuario.
• Make it pretty — ajusta espacios, alineación y colores en todo el diseño. El diseño permanece igual.

Estas opciones te permiten iterar rápidamente sin tener que escribir un prompt cada vez.

​

Iterando para refinar

El diseño rara vez es perfecto en el primer intento. Usa edición basada en chat para cada ronda de retroalimentación—describe qué funciona y qué no, y Flowstep se ajusta desde ahí. No hay límite en cuántas veces puedes iterar en una pantalla.