--- title: "Habilidad de agente para trabajar con flows" description: "Instala la habilidad flow-generator para que tu herramienta de IA pueda crear, traducir y reestructurar flows de Adapty a través de la CLI de Adapty." --- > **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all` La [skill flow-generator](https://github.com/adaptyteam/adapty-skills) 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](developer-cli-quickstart), 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 fáciles de equivocar: 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. :::important La skill del generador de flows es experimental y guarda los cambios directamente en los flows de tu dashboard. Ejecútala primero contra un borrador o una copia, y revisa cada cambio en el Flow Builder antes de publicar. ::: ## Antes de empezar \{#before-you-start\} - **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 \{#what-you-can-do-with-it\} ### Crear un flow desde cero \{#author-a-flow-from-scratch\} - **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 \{#change-a-flow-you-already-have\} - **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 \{#what-it-produces\} ### Un paywall con una línea de tiempo de planes \{#a-paywall-with-a-plan-timeline\} 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 \{#a-three-screen-flow\} 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 el skill \{#install-the-skill\} El skill se distribuye en el repositorio `adapty-skills` junto con `adapty-integration`, `ads-manager` y `paywall-teardown`. Cualquiera de estos comandos instala los cuatro. ```bash claude plugin marketplace add adaptyteam/adapty-skills claude plugin install adapty-skills@adapty ``` Luego ejecuta `/reload-plugins` en Claude Code para activar las habilidades. ```bash git clone https://github.com/adaptyteam/adapty-skills.git cp -r adapty-skills/skills/* ~/.copilot/skills/ ``` ```bash gemini skills install https://github.com/adaptyteam/adapty-skills ``` ```bash git clone https://github.com/adaptyteam/adapty-skills.git cp -r adapty-skills/skills/* ~/.agents/skills/ ``` ```bash npx skills add adaptyteam/adapty-skills --all ``` `--all` instala todas las skills en cada agente que detecta la [CLI de skills](https://skills.sh). Para instalar solo esta skill, usa `--skill flow-generator`. Las skills instaladas de esta forma no se actualizan automáticamente — ejecuta `npx skills update` para obtener una versión más reciente. 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 \{#how-it-works\} 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](developer-cli-quickstart) 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 \{#after-the-run\} El skill te deja un borrador guardado. Para que llegue a los usuarios: 1. **Abre el flow en el Flow Builder.** Si ya tenías el flow abierto en una pestaña del navegador, recarga la página — el Flow Builder no detecta los cambios realizados a través del CLI. 2. **Revisa qué cambió.** 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.** [Vista previa de flows](paywall-device-compatibility-preview) explica el proceso mediante código QR a través de la app móvil de Adapty. Prueba todo lo que la skill haya indicado como no verificado: ramificaciones, toggles y cualquier idioma distinto al que se renderizó. 4. **Publica.** Haz clic en **Publish to Live** en la esquina superior derecha del Flow Builder. Un flow que no está en un [placement](create-placement) no llega a nadie, y un flow en estado Draft no se puede añadir a uno — así que primero publícalo. Consulta [Guardar y publicar flows](builder-save-publish). Si el resultado es incorrecto, restáuralo desde la copia de seguridad: la habilidad copia la configuración antes de su primera edición y nombra el archivo en su mensaje de aprobación. Pídele que restaure ese archivo, o corrige el flow manualmente en el Flow Builder. De cualquier forma, un borrador guardado no cambia nada para tus usuarios. ## Ejemplos de prompts \{#example-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 \{#translate-a-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-from-a-design\} ``` 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-that-branches\} ``` 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-screen\} ``` 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. ``` ## Proporciona tus imágenes \{#give-it-your-images\} El skill sube una imagen desde tu ordenador y vincula la URL resultante al flow, así no tienes que añadir elementos multimedia en el Flow Builder manualmente. Necesita una **ruta de archivo**, no una imagen en sí: cuando pegas o adjuntas una imagen en el chat, tu herramienta de IA recibe los píxeles pero no el archivo, por lo 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 subida manual en el Flow Builder — consulta [Imágenes, vídeos e iconos](custom-media). SVG es la única excepción: falla al subir, por lo que la herramienta genera glifos de un solo color directamente en línea. Cada subida añade un recurso independiente a tu biblioteca de medios, y ningún comando de la CLI elimina ninguno, así que si vuelves a ejecutar una compilación quedarán copias duplicadas. Si indicas un archivo que la herramienta no puede encontrar, te pregunta en lugar de sustituirlo por uno parecido. Un archivo incorrecto produce 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 \{#bring-your-own-agent\} Adapty también tiene un [Editor de IA](flow-ai-editor) dentro del Flow Builder. La diferencia no está en cuál tiene más funciones, sino en qué entorno 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 opuesto: tu agente, tu modelo, tus herramientas, y Adapty como una herramienta más que sabe cómo manejar. 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. | | Editor con IA | skill flow-generator | |---|---|---| | De quién es el agente | De Adapty, en el navegador | Tuyo, en tu terminal | | Qué puede ver | La pantalla que tienes abierta | Todo lo que tu herramienta de IA pueda alcanzar | | Alcance de un prompt | Una pantalla | El flow completo: pantallas, navegación, locales | | Localización | No está incluida | Añade un locale y rellena todos los campos localizables | | Deshacer | Un clic por prompt | Un archivo de respaldo y tu aprobación antes de cada guardado | | Configuración | Ninguna | Adapty CLI más el skill | 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á \{#what-the-skill-wont-do\} 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**: El CLI de Adapty no tiene comando de publicación, por lo que la tarea termina en un borrador guardado. - **Sobrescribir requiere tu aprobación**: Guardar reemplaza toda la configuración, sin escrituras parciales ni deshacer. La aprobación indica el nombre del flow, su ID, su estado y el archivo de copia de seguridad que la tarea hizo antes de editar. - **Una edición concurrente 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 es una acción del dashboard**: El CLI no tiene comando de eliminación, por lo que un flow creado por la tarea permanecerá hasta que lo elimines desde el dashboard. - **Los datos reales y los assets los pones tú**: 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 alguno que no has proporcionado, la tarea te lo pide o deja el elemento fuera, e indica cuál de las dos ha hecho. :::note Las lecturas, validaciones y previsualizaciones no tienen ningún coste ni cambian nada. Guardar una configuración es la única acción que llega a tu dashboard, y requiere tu aprobación. ::: ## Limitaciones \{#limitations\} #### Las ejecuciones llevan tiempo \{#runs-take-time\} 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 \{#videos-and-custom-fonts-stay-manual\} La habilidad sube imágenes, no [vídeos](custom-media), y no sube archivos de [fuentes personalizadas](using-custom-fonts-in-flow-builder). En ambos casos, construye el slot y te deja la subida a ti: - **Video**: La habilidad coloca un elemento multimedia donde corresponde el vídeo, de modo que el layout ya está listo cuando intercambias el archivo en el Flow Builder. - **Fuentes**: La habilidad crea los estilos de texto que requiere tu diseño y los apunta a una tipografía de marcador. Sube la fuente en el Flow Builder y asígnala a esos estilos. #### La vista previa renderiza una pantalla en un único estado \{#the-preview-renders-one-screen-in-one-state\} La página de vista previa de la habilidad muestra una sola pantalla y no recorre el flow completo. No puede mostrarte nada de lo siguiente. Prueba cada cosa en un dispositivo real — [Vista previa de flows](paywall-device-compatibility-preview) explica cómo: - **Navegación y bifurcaciones**: Un botón con una acción de navegación permanece en la vista previa tal como está, por lo que una ruta condicional no puede activarse. Cada pantalla es un render independiente. - **Selección de alternancia y opción múltiple**: Una fila de alternancia 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í muestran su estado seleccionado. - **Cualquier idioma que no sea el que renderiza**: La vista previa 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 Builder y busca texto que desborde su contenedor. - **Cualquier valor que se resuelva en tiempo de ejecución**: Precios reales, moneda de la store y entrada del usuario. Una variable de precio se renderiza como su token literal, que es más largo que cualquier precio y puede empujar texto bajo un botón anclado — una superposición que desaparece una vez que se resuelve el precio. - **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 comprobarse. ## ¿Qué sigue? \{#whats-next\} - [Guardar y publicar flows](builder-save-publish) — termina el borrador que te deja la skill. - [Problemas comunes](flow-common-issues) — qué impide que un flow se publique. - [Agregar una configuración regional en Adapty Flow Builder](add-paywall-locale-in-adapty-paywall-builder) — el mismo trabajo de localización de forma manual. - [Gestionar Adapty con agentes de IA y herramientas de código](manage-adapty-with-ai) — las otras skills de Adapty y las herramientas de IA.