Développement de composants à l’aide des compétences de l’agent AEM
Découvrez comment développer un composant AEM à l’aide des compétences de l’agent AEM dans le cadre du développement assisté par l’IA.
Dans cette présentation, vous utilisez le langage naturel dans un IDE optimisé par l’IA (par exemple, Cursor) pour développer un composant Bannière de promotion dans le projet Sites WKND. L’agent de codage applique les compétences create-component de l’agent AEM pour générer la mise en œuvre.
Prérequis
Pour suivre ce tutoriel, vous avez besoin des éléments suivants :
- Un IDE optimisé par l’IA tel que Cursor ou Visual Studio Code avec Copilote GitHub.
- Clone local du projet Sites WKND, créé et déployé sur une instance AEM SDK locale.
- Compétences de l’agent installées dans ce projet. Si vous ne l’avez pas encore fait, complétez Configuration des compétences de l’agent AEM.
Exigences en matière de composants
Supposons que l’équipe WKND souhaite afficher une bannière de promotion sur la page d’accueil et que la référence de conception soit la suivante :
Les auteurs doivent pouvoir définir les champs libellé de la promotion, libellé du CTA et lien du CTA dans la boîte de dialogue du composant.
La référence de conception est une capture d’écran obtenue par filaire, maquette ou capture de balises statiques.
Développement du composant
-
Ouvrez le projet WKND dans votre IDE. Vérifiez que les compétences de l’agent AEM sont présentes (par exemple, sous
.agents/skills), puis démarrez une nouvelle conversation d’agent.
-
Saisissez une invite comme celle-ci. Joignez la capture d’écran de conception du composant (obtenue par filaire, maquette ou capture de balisage statique) si votre IDE prend en charge les images dans la conversation :
code language-text Create a WKND Promo Banner Component. Please see attached screenshot for design reference. Dialog specification are: 1. Promo Label - Textfield, required 2. CTA Text - Textfield, required 3. CTA Link - Pathfield, required -
L’agent de codage utilise les compétences
create-componentde l’agent AEM pour générer le composant. Examinez le HTL proposé, le modèle Sling, le code XML de boîte de dialogue et les fichiers associés.
create-component prend en charge l’intégration de conception Figma-
Déployez le composant sur l’instance AEM/SDK locale.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Lors de la création, placez la bannière de promotion sur la page d’accueil et validez le comportement. Affinez l’implémentation si elle diverge toujours de la référence de conception.
-
Passez en revue le composant nouvellement créé en publiant la page ou en sélectionnant Afficher comme publié(e).
Félicitations. Vous avez créé un nouveau composant AEM à l’aide des compétences de l’agent AEM dans le cadre du développement assisté par l’IA.
Au-delà des composants simples
Cette procédure pas à pas utilise un composant simple. La même compétence create-component prend également en charge des cas plus complexes, notamment :
- Champs de champs multiples et de boîtes de dialogue imbriquées
- Extensions des composants principaux d’AEM (y compris les modèles Sling Resource Merger)
- Les URL de fichier ou de cadre Figma pour la mise en page et le style, lorsque le serveur MCP Figma (par exemple
plugin-figma-figma) est activé dans votre IDE
Pour connaître les types de champ, les modèles de boîte de dialogue, les règles Figma et des exemples, lisez-les SKILL.md dans votre dossier de compétences installé, par exemple .agents/skills/create-component/SKILL.md.
Pour obtenir une présentation, les chemins d’installation par IDE et la résolution des problèmes, consultez Agent de développement de composants dans le référentiel des compétences Adobe.
AGENTS.md
Avant de conclure, voyons comment le fichier AGENTS.md a été généré lors de la création du composant.
Pour les projets AEM as a Cloud Service, la compétence d’amorçage ensure-agents-md (sélectionnée pendant Configurer les compétences de l’agent AEM) crée des AGENTS.md à la racine du référentiel lorsqu’elle est manquante. Il utilise ce qu’il apprend de la disposition de votre projet.
Il ne remplace pas un fichier AGENTS.md existant.
