Reutilizar elementos entre flows

La mayoría de los paywalls de una app comparten los mismos bloques: la selección de plan, la línea de tiempo de prueba, el bloque de comparación. Reconstruirlos a mano en cada flow es lento y las copias acaban desincronizadas. La skill flow-generator puede guardar cualquier parte de un flow en un archivo y añadirla a otro flow —en la misma app o en una diferente— resolviendo los colores, fuentes, iconos y enlaces de productos de los que depende esa parte.

El archivo guardado es JSON plano. Puedes guardarlo junto al código de tu app, incluirlo en el repositorio o enviárselo a un compañero de equipo.

Important

Esto forma parte del skill flow-generator, así que no hay nada adicional que instalar — sigue los pasos de instalación del flow-generator y listo. Guarda los cambios en los flows de tu dashboard, así que ejecútalo primero contra un borrador y revisa el resultado en el Flow Builder antes de publicarlo.

Para qué sirve

  • Una biblioteca de componentes que tu equipo comparte de verdad. Guarda la selección de planes una vez. Cada nuevo flow parte de algo real, no de una aproximación.
  • Corrígelo una vez, aplícalo en todas partes. Corrige la cronología del período de prueba en un flow, guárdalo y añádelo a los demás.
  • Lleva un bloque probado a una nueva app. Un bloque que convierte en una app es un buen punto de partida en la siguiente. El skill vuelve a vincular sus productos al catálogo de la app de destino.
  • Mantén un sistema de diseño coherente. Guarda solo los colores y estilos de texto —sin ningún elemento— y aplícalos a otro flow.

Cómo usarlo

Pídelo en lenguaje natural. La habilidad se encarga del resto.

Guardar un fragmento de un flow

Save the plan selection from my Premium paywall so I can reuse it.

La habilidad escribe un archivo e imprime su ruta completa, para que siempre sepas qué archivo confirmar o enviar. También resume lo que contiene: cuántos elementos, y cuántos colores, estilos de texto, grupos y productos incluye.

Hace una sola pregunta: si lo vas a reutilizar dentro de la misma app o en cualquier sitio. El archivo es completo en cualquier caso, así que una respuesta equivocada no tiene ningún coste.

Puedes guardar un elemento y todo lo que contiene, una pantalla completa, un componente reutilizable o un tema por sí solo.

Agrégalo a otro flow

Add the two-plan selection to my onboarding paywall, above the CTA.

Antes de escribir nada, la función te muestra un plan: exactamente dónde quedará el bloque, qué añade, qué colores y estilos de texto toma del destino en lugar de los suyos propios, y qué IDs tiene que renombrar para evitar conflictos. También imprime el contenido que está importando, para que puedas detectar textos que pertenecían al flow anterior.

Anything it can’t resolve by itself — a product missing from this app’s catalog, a variable with no source here — is listed separately, as something for you to finish rather than something it guessed at.

Read the plan, then say go. The skill writes the draft and renders the screen so you can see the result.

Ejemplos

Cada fila muestra un mismo elemento guardado añadido a tres flows distintos. No se reconstruyó nada: el mismo archivo generó los tres, y el sistema lo adaptó a cada destino.

Una selección de dos planes, en una app de inversión, una app de idiomas y una app de música. Las tarjetas mantienen su estructura y adoptan el color de acento de cada app.

The same two-plan selection on three paywalls, in purple, navy, and green

Una línea de tiempo de prueba. La estructura se reutiliza; el texto es específico de cada producto, porque tres pasos numerados no significan nada si describen la aplicación equivocada.

La misma línea de tiempo de tres pasos en tres paywalls, con texto y colores de chip distintos

Una comparación de prueba. Esta no tiene productos ni variables, así que se puede mover entre aplicaciones sin cambios.

La misma comparación Default vs. Extended en tres paywalls, en verde, rosa y naranja

Cómo funciona

Un elemento guardado raramente existe de forma independiente. Hace referencia a colores, estilos de texto, fuentes, iconos, productos y variables que viven en otro lugar del flow. La habilidad los clasifica en dos tipos.

Lo que puede incluir. Los colores, estilos de texto, fuentes e iconos viajan dentro del archivo, junto con sus definiciones. En el destino:

El destinoQué ocurre
Ya tiene el mismo significado con ese nombreLo reutiliza
Usa ese nombre para algo distintoAdopta el valor del destino, y te lo indica
No lo conoceAñade la definición del archivo

Adoptar suele ser lo que quieres: una tarjeta movida a otra aplicación debería verse como esa aplicación. Ambos valores aparecen en el plan, por lo que puedes cambiar la elección.

Lo que no puede trasladar. Un ID de producto, la fuente de una variable, el destino de una acción Navigate to screen — estos apuntan a algo específico de un flow o una app. La habilidad los reasigna donde puede, y lista lo que no puede bajo NEEDS YOU en lugar de adivinar.

Antes de guardar el borrador, la habilidad vuelve a comprobar el flow completo: cada referencia se resuelve, cada idioma está relleno, ningún ID colisiona y el resultado sigue pasando la verificación de publicación. Todo lo que quede se muestra, nunca se corrige en silencio.

Qué comprobar

  • El copy hace referencia a un producto. Un bloque que funciona bien en el flow de origen puede ser incorrecto en el flow de destino. El plan muestra el texto que va a importar, bajo WILL SAY, para que puedas detectarlo antes de escribir.
  • Los precios son variables, no texto. Si el destino no tiene el producto al que hace referencia un precio, el precio se renderiza vacío. El plan así lo indica.
  • El tamaño puede depender del contexto. Un elemento dimensionado para llenar su contenedor original puede estirarse en el nuevo. La vista previa renderizada es lo que permite detectarlo.

Limitaciones

  • Los productos no se transfieren entre apps automáticamente. La habilidad vincula tus IDs de productos de la store para reasignarlos; si un producto no existe en la app de destino, elimina la vinculación y te pide que asignes uno.
  • Los vídeos y las fuentes personalizadas deben añadirse manualmente. Ninguno puede subirse desde la terminal.
  • La vista previa muestra una sola pantalla, en un solo estado. Un cambio de idioma o un estado seleccionado no aparecen en ella — consulta el plan para esos casos.