Componentontwikkeling met AEM Agent Skills
Leer hoe te om een component van AEM te ontwikkelen gebruikend de Vaardigheden van de Agent van AEM als deel van AI-bijgewoonde ontwikkeling .
In deze analyse, gebruikt u natuurlijke taal in een AI-Gerichte winde (bijvoorbeeld, Curseur) om a component van de Banner van de Banner van 0} Promo in het Project van de Plaatsen WKND te ontwikkelen. De coderingsagent past de create-component Vaardigheid van de Agent van AEM toe om de implementatie te produceren.
Vereisten
Voor het volgen van deze zelfstudie hebt u het volgende nodig:
- Een IDE van AI-Aangedreven zoals Cursor, of Code van Visual Studio met Kopilot GitHub.
- Een lokale kloon van het Project van Plaatsen WKND , gebouwd en opgesteld aan a lokale AEM SDK instantie.
- de Vaardigheden van de Agent van AEM die in dat project worden geïnstalleerd. Als u dat nog niet hebt gedaan, voltooi de Vaardigheden van de Agent van AEM van de Opstelling .
Onderdeelvereiste
Laten we aannemen dat het WKND-team een promotiebanner op de homepage wil weergeven. De ontwerpreferentie ziet er als volgt uit:
De auteurs moeten etiket van de Promo, CTA etiket, en de verbindingsgebieden van CTA in de componentendialoog kunnen plaatsen.
De ontwerpverwijzing is een schermafbeelding die is verkregen via draadframe, mockup of statische opmaakcode.
De component ontwikkelen
-
Open het WKND project in uw winde. Bevestig dat de Vaardigheden van de Agent van AEM aanwezig zijn (bijvoorbeeld, onder
.agents/skills), dan een nieuw agentenpraatje begint.
-
Voer een soortgelijke vraag in. Bevestig het het schermschot van het componentenontwerp (dat via draadframe wordt verkregen, mockup of statische prijsverhoging vangt) als uw winde beelden in praatje steunt:
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 -
De coderingsagent gebruikt de
create-componentVaardigheid van de Agent van AEM om de component te produceren. Bekijk de voorgestelde HTML-, Sling-model-, dialoogvenster-XML- en verwante bestanden.
create-component vaardigheid steunt de het ontwerpintegratie van Figma -
Implementeer de component in de lokale AEM-instantie/SDK.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Plaats in de ontwerpfase de Banner Promo op de startpagina en valideer het gedrag. Verfijn de implementatie als deze nog steeds afwijkt van de ontwerpreferentie.
-
Controleer de nieuwe component door de pagina of de weergave te publiceren zoals deze is gepubliceerd.
Gefeliciteerd. U hebt met succes een nieuwe component van AEM gecreeerd gebruikend de Vaardigheden van de Agent van AEM als deel van AI-bijgewoonde ontwikkeling.
Buiten eenvoudige componenten
Deze analyse gebruikt een eenvoudige component. Dezelfde create-component vaardigheid ondersteunt ook rijkere gevallen, waaronder:
- Meerdere velden en geneste dialoogvelden
- AEM Core Components-extensies (inclusief Sling Resource Merger-patronen)
- Het dossier of kader URLs van figuren voor lay-out en het stileren, wanneer de server van Figma MCP (bijvoorbeeld
plugin-figma-figma) in uw winde wordt toegelaten
Lees voor veldtypen, dialoogvensterpatronen, figuurregels en voorbeelden SKILL.md in de installatiemap voor vaardigheden, bijvoorbeeld .agents/skills/create-component/SKILL.md .
Voor een overzicht, installatiepaden door winde, en het oplossen van problemen, zie {de Agent van de Ontwikkeling van de Component van 0} AEM 🔗 in de bewaarplaats van de Vaardigheden van Adobe.
AGENTS.md
Alvorens wij samenvatten, begrijpen wij hoe AGENTS.md als deel van het creëren van de component werd geproduceerd.
Voor de projecten van AEM as a Cloud Service, leidt de ensure-agents-md bootstrap vaardigheid (die tijdens de Vaardigheden van de Agent van AEM van de Opstelling wordt geselecteerd) AGENTS.md bij de bewaarplaatswortel wanneer het mist. Het gebruikt wat het uit uw projectlay-out leert.
Het overschrijft geen bestaand AGENTS.md dossier.
