Habilidad de agente para trabajar con flows

La skill flow-generator permite que una herramienta de codificación con IA cree y edite tus flows desde la terminal. Dile qué quieres construir o cambiar, en lenguaje natural, y la herramienta leerá la configuración del builder del flow a través de la Adapty CLI, la reescribirá, renderizará una vista previa y guardará un borrador una vez que lo apruebes.

Una skill es un conjunto de instrucciones que tu herramienta de IA carga bajo demanda. Esta cubre las partes de la configuración de flow que son más fáciles de equivocarse: qué ediciones detienen una publicación, qué referencias se rompen al eliminar una pantalla, y qué puede y qué no puede demostrar una vista previa renderizada.

Antes de empezar

• Una herramienta de codificación con IA que admita skills: Claude Code, GitHub Copilot CLI, OpenAI Codex y Gemini CLI funcionan.
• Productos en tu catálogo de Adapty: Antes de diseñar una pantalla de venta, el skill lista tus productos y pregunta cuáles deben aparecer en ella. Si ninguno encaja, puede crear uno a partir de los IDs de producto del store que le indiques, y lo pregunta primero.

Qué puedes hacer con esto

Crear un flow desde cero

• Desde una descripción: “Un paywall para mi app de fitness, dos planes, el anual preseleccionado.” La skill elige la composición, lo construye a partir de patrones verificados por renderizado — tabs, tarjetas de plan, toggles, cuentas atrás, barras de progreso, bottom sheets — y usa los productos que elegiste de tu catálogo.
• Desde una captura de pantalla o un diseño: Pásale una referencia y ajusta el layout, los colores, la tipografía y el estilo de iconos, indicándote además cada diferencia que no pudo cerrar. La referencia puede ser el paywall de un competidor, una de tus propias pantallas o un frame de tu herramienta de diseño. Si tu herramienta de IA está conectada a esa herramienta de diseño a través de MCP, lee el frame directamente — nadie tiene que exportar una captura ni volver a describir el diseño con palabras.
• Evaluado según lo que convierte: Cuando no le proporcionaste un diseño, la skill ejecuta la librería paywall-teardown de Adapty sobre la pantalla que construyó y corrige lo que tiene mayor impacto, antes de que tú la veas siquiera. Obtienes una pantalla construida según los patrones que venden en tu categoría, no un layout genérico.

Cambiar un flow existente

• Localizar en nuevos mercados: Añade un idioma y rellena todos los campos localizables — titulares, etiquetas de botones, descripciones de planes, espacios de imágenes y marcadores de posición de entrada. Es la forma más rápida de llevar un paywall que ya funciona a diez idiomas.
• Reescribir el texto en todos los idiomas a la vez: Cambia la redacción sin tocar la estructura y edita alrededor de las variables de precio en lugar de a través de ellas, para que los precios sigan resolviéndose correctamente.
• Reestructurar el flow: Añade, elimina y reordena pantallas, luego repara la navegación que ese cambio rompe e informa de cualquier pantalla que quede inaccesible.
• Añadir cuestionarios y ramificaciones: Crea grupos seleccionables, IDs de opciones y las acciones condicionales que dirigen cada respuesta a su propia pantalla — el paso de personalización que convierte un onboarding en una visita al paywall ya cualificada.
• Crear variantes para una prueba: Genera un flow nuevo a partir de uno que ya funciona y aplica el cambio que quieres probar. El tema, las fuentes, los idiomas y los productos se mantienen, de modo que la variante solo difiere donde tú lo decidiste.
• Cambiar la imagen para una temporada o campaña: Toma muestras de colores de una imagen de referencia y aplica un nuevo tema a todo el flow, en lugar de rediseñar cada pantalla a mano.

Qué produce

Un paywall con una línea de tiempo de planes

Una línea de tiempo numerada sobre dos tarjetas de planes. Renderizado en un dispositivo, por lo que el store ha resuelto los precios, incluido el precio por mes que Adapty calcula para el plan anual.

Un paywall a partir de una frase

El prompt fue «añadir una pantalla de paywall» — sin referencia, sin flow de origen. El $0.00 es un marcador de vista previa, y la etiqueta muestra Best value porque nadie proporcionó un descuento.

Un flow de tres pantallas

Cuestionario, plan, oferta, con la navegación conectada entre ellos. La cuenta atrás se muestra, pero solo un dispositivo puede confirmar que se activa.

Instalar la skill

La skill se incluye en el repositorio adapty-skills junto con adapty-integration, flow-audit, migrate-placements, ads-manager, paywall-teardown y onboarding-teardown. Cualquiera de estos comandos instala los siete.

claude plugin marketplace add adaptyteam/adapty-skills
claude plugin install adapty-skills@adapty

git clone https://github.com/adaptyteam/adapty-skills.git
cp -r adapty-skills/skills/* ~/.copilot/skills/

gemini skills install https://github.com/adaptyteam/adapty-skills

git clone https://github.com/adaptyteam/adapty-skills.git
cp -r adapty-skills/skills/* ~/.agents/skills/

npx skills add adaptyteam/adapty-skills --all

Luego úsala — /flow-generator en las herramientas que asocian comandos de barra a skills, o “Use the flow-generator skill” en las que no lo hacen.

A partir de ahí trabajas en lenguaje natural. La mayoría de las solicitudes son de este tipo:

• Describe el flow: Qué hace la app, qué tiene que vender la pantalla, qué plan preseleccionar.
• Señala un diseño: Una captura de pantalla, una de tus propias pantallas o un frame en tu herramienta de diseño.
• Pide una edición concreta: Nombra el flow y el cambio: una nueva localización, textos diferentes, una pantalla extra, una rama en una pregunta de quiz.
• Responde sus preguntas: Te preguntará qué productos poner en una pantalla y, ante cualquier número real, se negará a inventarlo.

Cómo funciona

Todo lo que construye el skill converge en un archivo local. Nada llega a tu dashboard hasta el último paso.

1. Configuración y autenticación. El skill instala o actualiza el Adapty CLI si es necesario, verifica tu inicio de sesión en Adapty y lee tu ID de app. Si no has iniciado sesión, abre el navegador para que te identifiques y espera a que termines.

2. Elige o crea el flow. Para ediciones, obtiene la configuración del flow y reporta lo que encontró — pantallas, idiomas, productos y el grafo de navegación — para detectar cualquier flow incorrecto antes de realizar cambios. Primero hace una copia de seguridad de la configuración obtenida. Para trabajo nuevo, crea un flow desde cero en lugar de generarlo sobre uno que ya tiene contenido.

3. Valida la configuración. La habilidad ejecuta dos validaciones contra el archivo local y una contra Adapty. El par local confirma que las referencias internas siguen siendo coherentes y que las propiedades tienen el formato correcto. adapty flows config validate ejecuta entonces el mismo servicio que controla la publicación, por lo que un resultado verde significa que la configuración es publicable. Ninguna de las tres guarda nada.

4. Vista previa e iteración. La skill renderiza cada pantalla modificada como una captura de pantalla y la examina. Si proporcionaste una imagen de referencia, compara el render con el archivo elemento a elemento —color, tipografía, estilo de iconos, proporciones— y corrige las diferencias que pueda resolver. Si algo no encaja, la skill vuelve al paso 3, lo que consume una captura de pantalla en lugar de un guardado.

5. Aprobar y guardar. Sobrescribir una configuración existente requiere tu confirmación explícita. La skill te muestra un antes y un después renderizado de cada pantalla que ha modificado, enumera los cambios que no tienen representación visual, abre una pantalla en vivo en el navegador y te indica el nombre del archivo de copia de seguridad. Solo entonces escribe.

Después de la ejecución

El skill te deja un borrador guardado. Para que llegue a los usuarios:

1. Abre el flow en el Flow & Paywall Builder. Si ya tenías el flow abierto en una pestaña del navegador, recarga la página: el Flow & Paywall Builder no detecta los cambios realizados a través de la CLI.
2. Revisa qué ha cambiado. Adapty marca un flow que estaba Published antes de guardar como Dirty, y todos los miembros de tu equipo verán ese estado. Tus usuarios seguirán viendo la última versión publicada.
3. Previsualiza en un dispositivo real. Previsualizar flows explica el proceso mediante código QR a través de la aplicación móvil de Adapty. Prueba todo lo que la skill haya marcado como no verificado: ramificaciones, toggles y cualquier idioma distinto al que se renderizó.
4. Publica. Haz clic en Publish to Live en la parte superior derecha del Flow & Paywall Builder, o ejecuta adapty flows publish desde el terminal. Un flow que no esté en un placement no llegará a nadie, y un flow en borrador no se puede añadir a uno, así que publícalo primero. Consulta Guardar y publicar flows.

Si el resultado es incorrecto, restaura desde la copia de seguridad: la skill copia la configuración antes de su primera edición y nombra el archivo en su mensaje de aprobación. Pídele que escriba ese archivo de vuelta, o corrige el flow manualmente en el Flow & Paywall Builder. De cualquier manera, un borrador guardado no cambia nada para tus usuarios.

Ejemplos de prompts

La skill lleva incorporados los comandos, el formato de configuración y sus propios pasos de verificación, así que no hace falta detallarlos en el prompt. Indica qué flow quieres y qué debe cumplirse cuando termine.

Traducir un paywall

Add Brazilian Portuguese to my "Summer 2026" paywall. Translate every
localizable field, not just the headline, and tell me what you couldn't.

Construir desde un diseño

Build a new paywall flow from the "Winter promo" frame in our Figma file.
Show me my products first and let me pick which ones go on it.

Añadir un cuestionario con ramificaciones

Add a quiz screen before my paywall: "What's your main goal?" with three
options, each routing to its own benefit screen, then on to the paywall.

Reescribir el copy

Rewrite the headline and CTA on my onboarding to be shorter and more direct.
Keep the price variables working, and apply it to every locale.

Crear una variante de prueba

Copy my "Main paywall" into a new flow and make the monthly plan the
preselected one. Leave the original alone.

Rediseñar para una campaña

Re-theme my paywall flow to match the colors in ./design/spring.png.
Copy and layout stay as they are.

Añade una pantalla

Add a social proof screen between the quiz and the paywall in my activation
flow — star rating and two testimonials. Ask me for the real numbers.

Dale tus imágenes

La skill sube una imagen desde tu ordenador y vincula la URL devuelta al flow, para que no tengas que añadir contenido multimedia en el Flow & Paywall Builder a mano. Necesita una ruta de archivo, no una imagen: cuando pegas o adjuntas una imagen en el chat, tu herramienta de IA recibe los píxeles pero no el archivo, así que no hay nada que subir.

Coloca los recursos en una carpeta de tu ordenador y luego indícale al tool dónde están:

The hero images are in ./design/paywall/. Use hero-calm.png on the first
screen and the three icons in ./design/paywall/icons/ for the benefit rows.

Los formatos y límites de tamaño coinciden con los de una carga manual en el Flow & Paywall Builder — consulta Imágenes, vídeos e iconos. El SVG es la única excepción: falla al subirse, así que la herramienta dibuja glifos de un solo color de forma inline en su lugar.

Cada carga añade un recurso independiente a tu biblioteca de medios, y ningún comando de la CLI elimina ninguno, por lo que volver a ejecutar una compilación deja copias acumuladas.

Si indicas un archivo que la herramienta no puede encontrar, te lo pregunta en lugar de sustituirlo por uno parecido. Un archivo incorrecto genera una pantalla que se renderiza correctamente pero con la imagen equivocada, algo que ningún paso del flujo de trabajo detecta.

Trae tu propio agente

Adapty también tiene un Editor de IA dentro del Flow & Paywall Builder. La diferencia no está en cuál tiene más funciones, sino en el entorno donde se realiza el trabajo.

El Editor de IA es el agente de Adapty, que trabaja en la pantalla que tienes abierta. El skill es el arreglo contrario: tu agente, tu modelo, tus herramientas, y Adapty como una herramienta más que sabe cómo operar. Todo lo que tu herramienta de IA ya puede alcanzar viene con ella: tu repositorio, tus archivos de diseño, tus servidores MCP, tus propios prompts y contexto.

Usa el AI Editor cuando ya estés en el builder y quieras rediseñar la pantalla que tienes delante. Usa el skill cuando prefieras no salir de tu propio entorno para trabajar en el flow.

Lo que la habilidad no hará

La habilidad trata tus flows como contenido en producción, ya que un flow publicado está sirviendo a usuarios reales.

• La publicación es tuya: La skill se detiene en un borrador guardado y nunca publica. Publícalo tú mismo en el Flow & Paywall Builder o con adapty flows publish.
• Sobrescribir requiere tu aprobación: Un guardado reemplaza toda la configuración, sin escrituras parciales ni opción de deshacer. La aprobación indica el nombre del flow, su ID, su estado y el archivo de copia de seguridad que la skill tomó antes de editar.
• Una edición simultánea falla la escritura: Cada escritura posterior a la primera envía el timestamp updated_at de la configuración de vuelta a Adapty. Si un compañero guardó el flow mientras tanto, Adapty rechaza la escritura en lugar de sobrescribir su trabajo.
• Eliminar un flow sigue siendo una acción del dashboard: La CLI no tiene comando de eliminación, así que un flow que la skill haya creado permanece hasta que lo elimines desde el dashboard.
• Los números reales y los recursos vienen de ti: Las valoraciones, el número de reseñas, los porcentajes de descuento y los precios de la store nunca se inventan. Cuando un patrón requiere uno que no has proporcionado, la skill lo pide o deja el elemento fuera, e indica cuál de las dos hizo.

Limitaciones

Las ejecuciones llevan tiempo

La habilidad valida y vuelve a renderizar tras cada cambio que realiza, lo que evita que una configuración rota llegue a tu dashboard — y eso hace que una ejecución sea más lenta que una respuesta de chat. Una edición pequeña termina en pocos minutos. Crear un flow con múltiples pantallas y ramificaciones lleva entre 10 y 40 minutos. Inícialo y vuelve más tarde en lugar de quedarte mirando.

Los vídeos y las fuentes personalizadas siguen siendo manuales

La habilidad sube imágenes, no vídeos, y no sube archivos de fuentes personalizadas. En ambos casos, construye el slot y te deja la subida a ti:

• Video: La skill coloca un elemento multimedia donde corresponde el vídeo, así que el layout ya es correcto cuando intercambies el archivo en el Flow & Paywall Builder.
• Fuentes: La skill crea los estilos de texto que requiere tu diseño y los apunta a una tipografía de marcador de posición. Sube la fuente en el Flow & Paywall Builder y asígnala a esos estilos.

La vista previa muestra una pantalla, en un estado

La página de vista previa del skill muestra una sola pantalla y no recorre el flow completo. No puede mostrarte ninguno de los siguientes aspectos. Prueba cada uno en un dispositivo real — Vista previa de flows explica cómo hacerlo:

• Navegación y ramificación: Un botón con una acción de navegación permanece donde está en la previsualización, así que una ruta condicional no puede activarse. Cada pantalla se renderiza por separado.
• Selección de toggle y opción múltiple: Una fila de toggle y una fila de opción múltiple se muestran en su estado desactivado según su valor predeterminado. Las filas de opción única y las tarjetas de producto sí renderizan su estado seleccionado.
• Cualquier idioma que no sea el que muestra: La previsualización ignora el idioma predeterminado del flow y el orden de la lista de idiomas, por lo que no es posible verificar visualmente una traducción. Cambia el idioma en el Flow & Paywall Builder y comprueba si algún texto desborda su contenedor.
• Todo lo que se resuelve en tiempo de ejecución: Precios reales, moneda del store y entrada del usuario. Una variable de precio se muestra como su token literal, que es más largo que cualquier precio y puede empujar texto por debajo de un botón anclado —una superposición que desaparece una vez que el precio se resuelve.
• Tamaños de pantalla que la página desconoce: Un diseño cuya seguridad depende de la altura del viewport necesita un teléfono pequeño para demostrarlo.

¿Qué sigue?

• Skill flow-audit — comprobación de solo lectura para verificar si el borrador que deja este skill está listo para producción, antes de publicarlo.
• Guardar y publicar flows — termina el borrador que deja el skill.
• Problemas frecuentes — qué impide que un flow se publique.
• Añadir una configuración regional en Adapty Flow & Paywall Builder — el mismo trabajo de localización de forma manual.
• Gestionar Adapty con agentes de IA y herramientas de código — los demás skills de Adapty y las herramientas de IA.