Compétence agent pour travailler avec les flows

La compétence flow-generator permet à un outil de codage IA de créer et modifier vos flows depuis le terminal. Décrivez ce que vous souhaitez créer ou modifier en langage naturel, et l’outil lit la configuration du flow builder via l’Adapty CLI, la réécrit, génère un aperçu, et enregistre un brouillon une fois que vous l’approuvez.

Une compétence est un ensemble d’instructions que votre outil IA charge à la demande. Celle-ci couvre les parties de la configuration du flow qui sont faciles à rater : quelles modifications bloquent une publication, quelles références se cassent quand vous supprimez un écran, et ce qu’un aperçu rendu peut et ne peut pas prouver.

Avant de commencer

• Un outil de codage IA qui prend en charge les skills : Claude Code, GitHub Copilot CLI, OpenAI Codex et Gemini CLI fonctionnent tous.
• Des produits dans votre catalogue Adapty : Avant de concevoir un écran de vente, le skill liste vos produits et vous demande lesquels y figureront. Si aucun ne convient, il peut en créer un à partir des ID de produits store que vous fournissez, et il vous le demande d’abord.

Ce que vous pouvez faire avec

Créer un flow de zéro

• À partir d’une description : « Une paywall pour mon application fitness, deux plans, annuel présélectionné. » La compétence choisit la composition, la construit à partir de patterns vérifiés — onglets, cartes de plan, bascules, comptes à rebours, barres de progression, bottom sheets — et utilise les produits que vous avez choisis dans votre catalogue.
• À partir d’une capture d’écran ou d’un design : Donnez-lui une référence et elle reproduit la mise en page, les couleurs, la typographie et le style des icônes, puis vous indique chaque différence qu’elle n’a pas pu combler. La référence peut être la paywall d’un concurrent, l’un de vos propres écrans, ou un frame de votre outil de design. Si votre outil IA est connecté à cet outil de design via MCP, il lit le frame directement — personne n’a besoin d’exporter une capture d’écran ni de redécrire le design en mots.
• Évalué selon ce qui convertit : Quand vous n’avez pas fourni de design, la compétence passe la bibliothèque paywall-teardown d’Adapty sur l’écran qu’elle a construit et corrige ce qui est classé le plus haut, avant même que vous ne le voyiez. Vous obtenez un écran construit sur les patterns qui vendent dans votre catégorie, pas une mise en page générique.

Modifier un flow existant

• Localiser vers de nouveaux marchés : Ajoute un locale et remplit chaque champ localisable — titres, libellés de boutons, légendes de plans, emplacements d’images et placeholders de champs. C’est la façon la plus rapide d’adapter un paywall qui fonctionne en dix langues.
• Réécrire le contenu dans tous les locales à la fois : Modifie la formulation sans toucher à la structure, et ajuste le texte autour des variables de prix plutôt qu’à travers elles, afin que les prix continuent de se résoudre.
• Restructurer le flow : Ajoute, supprime et réordonne les écrans, puis répare la navigation cassée par le changement et signale tout écran devenu inaccessible.
• Ajouter des quiz et des branchements : Construit des groupes sélectionnables, des identifiants d’options et les actions conditionnelles qui redirigent chaque réponse vers son propre écran — l’étape de personnalisation qui transforme un onboarding en une visite de paywall qualifiée.
• Créer des variantes pour un test : Crée un nouveau flow basé sur un flow existant qui fonctionne, puis applique le changement à tester. Le thème, les polices, les locales et les produits sont repris, de sorte que la variante ne diffère que là où vous le souhaitez.
• Changer le thème pour une saison ou une campagne : Échantillonne les couleurs d’une image de référence et applique un nouveau thème sur l’ensemble du flow, plutôt que de restyliser chaque écran manuellement.

Ce que ça produit

Un paywall avec une chronologie de plans

Une chronologie numérotée au-dessus de deux cartes de plan. Affichée sur un appareil, le store a résolu les prix — y compris le prix mensuel qu’Adapty calcule pour le plan annuel.

Un paywall en une phrase

La consigne était « ajouter un écran paywall » — sans référence, sans flow source. Le $0.00 est un espace réservé pour la prévisualisation, et le badge affiche Best value parce qu’aucune remise n’a été fournie.

Un flow à trois écrans

Quiz, plan, offre, avec la navigation câblée entre eux. Le compte à rebours s’affiche, mais seul un appareil réel peut confirmer qu’il se déclenche.

Installer le skill

Le skill est livré dans le dépôt adapty-skills avec adapty-integration, ads-manager et paywall-teardown. Chacune de ces commandes installe les quatre.

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

Ensuite, faites-y appel — /flow-generator dans les outils qui associent les commandes slash aux skills, ou « Use the flow-generator skill » dans ceux qui ne le font pas.

À partir de là, vous travaillez en langage naturel. La plupart des requêtes sont de l’un de ces types :

• Décrivez le flow : Ce que fait l’application, ce que l’écran propose à la vente, quel plan présélectionner.
• Indiquez un design : Une capture d’écran, l’un de vos propres écrans, ou un cadre dans votre outil de design.
• Demandez une modification précise : Nommez le flow et le changement — une nouvelle langue, un autre texte, un écran supplémentaire, une branche sur une réponse de quiz.
• Répondez à ses questions : Il vous demande quels produits placer sur un écran, et pour tout chiffre réel, il refuse d’en inventer.

Fonctionnement

Tout ce que la compétence construit converge vers un fichier local. Rien n’atteint votre tableau de bord avant la dernière étape.

1. Configuration et authentification. La compétence installe ou met à jour l’Adapty CLI si nécessaire, puis vérifie votre connexion Adapty et lit votre ID d’application. Si vous n’êtes pas connecté, elle ouvre le navigateur pour la connexion et attend que vous ayez terminé.

2. Choisissez ou créez le flow. Pour une modification, il récupère la configuration du flow et indique ce qu’il a trouvé — écrans, locales, produits et graphe de navigation — afin qu’un mauvais flow soit détecté avant que quoi que ce soit ne change. Il effectue d’abord une sauvegarde de la configuration récupérée. Pour un nouveau travail, il crée un flow vierge plutôt que de générer par-dessus un flow qui contient déjà du contenu.

3. Validez la config. La commande effectue deux validations en local et une via Adapty. Les validations locales vérifient que les références internes sont cohérentes et que les propriétés sont bien formées. adapty flows config validate exécute ensuite le même service que celui qui contrôle la publication — un résultat positif signifie que la config est prête à être publiée. Aucune des trois étapes ne sauvegarde quoi que ce soit.

4. Prévisualiser et itérer. La compétence génère une capture d’écran de chaque écran modifié et l’examine. Si vous avez fourni une image de référence, elle compare le rendu avec le fichier élément par élément — couleur, police, style d’icône, proportions — et corrige les écarts à sa portée. Tout ce qui semble incorrect renvoie la compétence à l’étape 3, ce qui coûte une capture d’écran plutôt qu’une sauvegarde.

5. Approuver et enregistrer. Écraser une configuration existante nécessite votre confirmation explicite. Le skill affiche un avant-après rendu pour chaque écran modifié, liste les changements sans aperçu visuel, ouvre un écran en direct dans votre navigateur et indique le nom du fichier de sauvegarde. Ce n’est qu’ensuite qu’il écrit.

Après l’exécution

La compétence vous laisse un brouillon enregistré. Pour le mettre devant les utilisateurs :

1. Ouvrez le flow dans le Flow Builder. Si vous aviez déjà le flow ouvert dans un onglet de navigateur, rafraîchissez la page — le Flow Builder ne détecte pas les modifications effectuées via le CLI.
2. Vérifiez ce qui a changé. Adapty marque un flow qui était Published avant la sauvegarde comme Dirty, et toute votre équipe voit ce statut. Vos utilisateurs continuent de voir la dernière version publiée.
3. Prévisualisez sur un vrai appareil. Prévisualiser les flows explique le processus via QR code dans l’application mobile Adapty. Testez tout ce que la compétence a signalé comme non vérifié — les branchements, les bascules et toutes les langues autres que celle qui a été rendue.
4. Publiez. Cliquez sur Publish to Live en haut à droite du Flow Builder. Un flow qui n’est pas dans un placement n’atteint personne, et un flow Draft ne peut pas y être ajouté — publiez donc d’abord. Consultez Sauvegarder et publier les flows.

Si le résultat n’est pas satisfaisant, restaurez la sauvegarde : avant toute modification, la compétence copie la configuration et indique le nom du fichier dans son message de validation. Demandez-lui de réécrire ce fichier, ou corrigez le flow manuellement dans le Flow Builder. Dans tous les cas, un brouillon enregistré ne change rien pour vos utilisateurs.

Exemples de prompts

La compétence embarque les commandes, le format de configuration et ses propres étapes de vérification, donc un prompt n’a pas besoin de tout détailler. Indiquez quel flow, et ce qui doit être vrai une fois terminé.

Traduire 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.

Construire depuis un 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.

Ajouter un quiz avec des 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.

Réécrire le texte

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.

Créer une variante de test

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

Re-skinner pour une campagne

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

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.

Fournissez vos images

La compétence charge une image depuis votre ordinateur et intègre l’URL retournée dans le flow, sans que vous ayez à ajouter des médias manuellement dans le Flow Builder. Elle a besoin d’un chemin de fichier, pas d’une image : lorsque vous collez ou joignez une image dans le chat, votre outil IA reçoit les pixels mais pas le fichier, il n’y a donc rien à charger.

Placez les ressources dans un dossier sur votre ordinateur, puis indiquez le chemin à l’outil :

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.

Les formats et limites de taille correspondent à un téléchargement manuel dans le Flow Builder — voir Images, vidéos et icônes. Le SVG est la seule exception : le téléchargement échoue, donc l’outil dessine les glyphes monocolores directement en ligne.

Chaque téléchargement ajoute un élément distinct à votre bibliothèque de médias, et aucune commande CLI n’en supprime, donc relancer un build laisse des copies en double.

Si vous nommez un fichier que l’outil ne trouve pas, il vous le demande plutôt que de substituer un fichier approchant. Un fichier incorrect produit un écran qui s’affiche correctement mais avec la mauvaise image, ce que rien dans le workflow ne détecte.

Apportez votre propre agent

Adapty dispose également d’un AI Editor intégré au Flow Builder. La différence ne tient pas aux fonctionnalités disponibles — mais à l’environnement dans lequel le travail s’effectue.

L’AI Editor est l’agent d’Adapty, qui opère sur l’écran que vous avez ouvert. Le skill, c’est l’inverse : votre agent, votre modèle, vos outils, et Adapty comme un outil parmi ceux qu’il sait utiliser. Tout ce à quoi votre outil d’IA a déjà accès l’accompagne — votre dépôt, vos fichiers de design, vos serveurs MCP, vos propres prompts et contexte.

Utilisez l’éditeur IA lorsque vous êtes déjà dans le builder et souhaitez remettre en forme l’écran sous vos yeux. Utilisez le skill lorsque vous préférez ne pas quitter votre propre environnement pour travailler sur vos flows.

Ce que la compétence ne fait pas

La compétence considère vos flows comme du contenu en production, car un flow publié est utilisé par de vrais utilisateurs.

• La publication reste de votre ressort : l’Adapty CLI ne dispose pas de commande de publication, donc la compétence s’arrête à un brouillon sauvegardé.
• L’écrasement nécessite votre approbation : une sauvegarde remplace l’intégralité de la configuration, sans écriture partielle ni annulation possible. L’approbation indique le nom du flow, son ID, son statut et le fichier de sauvegarde créé par la compétence avant la modification.
• Une modification simultanée fait échouer l’écriture : après la première écriture, chaque écriture suivante renvoie le timestamp updated_at de la configuration à Adapty. Si un coéquipier a sauvegardé le flow entre-temps, Adapty rejette l’écriture plutôt que d’écraser son travail.
• La suppression d’un flow reste une action du tableau de bord : le CLI ne dispose pas de commande de suppression, donc un flow créé par la compétence reste présent jusqu’à ce que vous le supprimiez depuis le tableau de bord.
• Les chiffres réels et les assets viennent de vous : les notes, les nombres d’avis, les pourcentages de réduction et les prix en store ne sont jamais inventés. Lorsqu’un modèle en requiert un que vous n’avez pas fourni, la compétence vous le demande ou omet l’élément en question, et vous indique ce qu’elle a fait.

Limitations

Les runs prennent du temps

La compétence valide et re-rend après chaque modification, ce qui évite qu’une configuration cassée n’apparaisse sur votre tableau de bord — et cela rend un run plus lent qu’une réponse de chat. Une petite modification se termine en quelques minutes. Créer un flow multi-écrans avec des branchements prend 10 à 40 minutes. Lancez-le et revenez plutôt que de le surveiller.

Les vidéos et les polices personnalisées restent manuelles

La compétence importe des images, pas des vidéos, et n’importe pas les fichiers de polices personnalisées. Pour les deux, elle construit l’emplacement et vous laisse faire l’import :

• Vidéo : le skill place un élément média à l’endroit prévu pour la vidéo, de sorte que la mise en page est déjà correcte quand vous remplacez le fichier dans le Flow Builder.
• Polices : le skill crée les styles de texte requis par votre design et les associe à une police de substitution. Importez la police dans le Flow Builder et assignez-la à ces styles.

La prévisualisation affiche un seul écran, dans un seul état

La page de prévisualisation du skill affiche un seul écran et ne parcourt pas le flow. Elle ne peut pas vous montrer ce qui suit. Testez chaque point sur un vrai appareil — Prévisualiser les flows explique comment procéder :

• Navigation et branchements : un bouton associé à une action de navigation reste affiché là où il est dans la prévisualisation, donc une route conditionnelle ne peut pas se déclencher. Chaque écran est un rendu indépendant.
• Toggle et sélection multi-choix : une ligne de type toggle et une ligne multi-choix s’affichent dans leur état désactivé, selon leur valeur par défaut. Les lignes à choix unique et les cartes produit affichent bien leur état sélectionné.
• Toute locale autre que celle utilisée pour le rendu : la prévisualisation ignore la locale par défaut du flow et l’ordre de la liste des locales, il est donc impossible de vérifier visuellement une traduction. Changez de locale dans le Flow Builder et cherchez les textes qui débordent de leur conteneur.
• Tout ce qui se résout à l’exécution : les prix réels, la devise du store et les saisies utilisateur. Une variable de prix s’affiche sous forme de son token littéral, qui est plus long que n’importe quel prix et peut faire passer du texte sous un bouton ancré — un chevauchement qui disparaît une fois le prix résolu.
• Les tailles d’écran que la page ne connaît pas : une mise en page dont la sûreté dépend de la hauteur de la fenêtre a besoin d’un téléphone avec un petit écran pour être validée.

Et ensuite

• Enregistrer et publier des flows — finalisez le brouillon là où la compétence vous laisse.
• Problèmes courants — ce qui empêche un flow d’être publié.
• Ajouter une locale dans Adapty Flow Builder — le même travail de localisation fait manuellement.
• Gérer Adapty avec des agents IA et des outils de code — les autres compétences Adapty et les outils d’IA.