Sviluppo di componenti con AEM Agent Skills
Scopri come sviluppare un componente AEM utilizzando le competenze dell'agente AEM nell'ambito dello sviluppo assistito da IA.
In questa procedura dettagliata si utilizza il linguaggio naturale in un IDE basato sull'intelligenza artificiale (ad esempio, Cursor) per sviluppare un componente Banner promozionale nel progetto Sites WKND. L'agente di codifica applica l'abilità dell'agente AEM create-component per generare l'implementazione.
Prerequisiti
Per seguire questa esercitazione, è necessario quanto segue:
- Un IDE basato sull’intelligenza artificiale come Cursore o Codice Visual Studio con Copilota GitHub.
- Clone locale del progetto WKND Sites, generato e distribuito in un'istanza AEM SDK locale.
- AEM Agent Skills installato nel progetto. Se non l'hai ancora fatto, completa Imposta le abilità dell'agente AEM.
Fabbisogno componente
Supponiamo che il team WKND desideri visualizzare un banner promozionale nella home page e che il riferimento di progettazione sia il seguente:
Gli autori devono essere in grado di impostare i campi Etichetta promozionale, Etichetta CTA e Collegamento CTA nella finestra di dialogo del componente.
Il riferimento di progettazione è uno screenshot ottenuto tramite wireframe, mockup o acquisizione di markup statico.
Sviluppare il componente
-
Apri il progetto WKND nell’IDE. Verificare che AEM Agent Skills sia presente (ad esempio, in
.agents/skills), quindi avviare una nuova chat agente.
-
Immetti un prompt simile al seguente. Allega la schermata di progettazione del componente (ottenuta tramite wireframe, mockup o acquisizione di markup statico) se l’IDE supporta le immagini in chat:
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'agente di codifica utilizza l'abilità dell'agente AEM
create-componentper generare il componente. Esamina i file HTL, Sling Model, dialog XML proposti e i file correlati.
-
Distribuisci il componente nell’istanza AEM/SDK locale.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Durante l’authoring, inserisci il banner promozionale nella pagina Home e convalida il comportamento. Affina l’implementazione se diverge ancora dal riferimento della progettazione.
-
Rivedi il componente appena creato pubblicando la pagina o Visualizza come pubblicato.
Congratulazioni. È stato creato un nuovo componente AEM utilizzando AEM Agent Skills nell’ambito dello sviluppo assistito da intelligenza artificiale.
Oltre i componenti semplici
In questa procedura dettagliata viene utilizzato un componente semplice. La stessa abilità create-component supporta anche casi più ricchi, tra cui:
- Campi con più campi e finestre di dialogo nidificate
- Estensioni dei Componenti core di AEM (inclusi i modelli di Sling Resource Merger)
- URL di file Figma o frame per layout e stile, quando il server Figma MCP (ad esempio
plugin-figma-figma) è abilitato nell'IDE
Per i tipi di campo, i modelli di finestre di dialogo, le regole Figma e gli esempi, leggere SKILL.md nella cartella abilità installata, ad esempio .agents/skills/create-component/SKILL.md.
Per una panoramica, i percorsi di installazione per IDE e la risoluzione dei problemi, vedere AEM Component Development Agent nell'archivio Adobe Skills.
AGENTS.md
Prima di concludere, comprendiamo come è stato generato AGENTS.md durante la creazione del componente.
Per i progetti AEM as a Cloud Service, l'abilità di avvio di ensure-agents-md (selezionata durante l'installazione di Competenze agente AEM) crea AGENTS.md nella radice del repository quando è mancante. Utilizza ciò che apprende dal layout del progetto.
not sovrascrive un file AGENTS.md esistente.
