Komponentutveckling med AEM Agent Skills
Lär dig hur du utvecklar en AEM-komponent med AEM Agent Skills som en del av AI-assisterad utveckling.
I den här genomgången använder du ett naturligt språk i en AI-driven IDE (till exempel Markör) för att utveckla en Promo Banner -komponent i WKND Sites Project. Kodningsagenten använder AEM Agent-kompetensen create-component för att generera implementeringen.
Förutsättningar
Om du vill följa den här självstudiekursen behöver du följande:
- En AI-driven IDE som Cursor eller Visual Studio Code med GitHub Copilot.
- En lokal klon av WKND Sites Project, som skapats och distribuerats till en lokal AEM SDK-instans.
- AEM Agent Skills har installerats i det projektet. Om du inte har gjort det än slutför du Konfigurera AEM Agent Skills.
Komponentkrav
Låt oss anta att WKND-teamet vill visa en kampanjbanderoll på startsidan, och designreferensen är följande:
Författare måste kunna ange fälten Promo label, CTA label och CTA link i komponentdialogrutan.
Designreferensen är en skärmbild som hämtas via trådramar, dummies eller statisk markup capture.
Utveckla komponenten
-
Öppna WKND-projektet i din utvecklingsmiljö. Bekräfta att AEM Agent Skills finns (till exempel under
.agents/skills) och starta sedan en ny agentchatt.
-
Ange en uppmaning enligt följande. Koppla skärmbilden för komponentdesign (hämtas via trådram, dummies eller statisk markup capture) om din utvecklingsmiljö stöder bilder i chatt:
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 -
Kodningsagenten använder AEM Agent-kompetensen
create-componentför att generera komponenten. Granska föreslagna HTML-, Sling Model-, dialog-XML- och relaterade filer.
create-component-kompetensen stöder Figma-designintegrationen-
Distribuera komponenten till den lokala AEM-instansen/SDK.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Placera kampanjbanderollen på startsidan och validera beteendet när du redigerar. Förfina implementeringen om den fortfarande avviker från designreferensen.
-
Granska den nya komponenten genom att publicera sidan eller Visa som publicerad.
Grattis! Du har skapat en ny AEM-komponent med AEM Agent Skills som en del av AI-stödd utveckling.
Förutom enkla komponenter
Den här genomgången använder en enkel komponent. Samma create-component-kompetens har även stöd för fler ärenden, inklusive:
- Flera fält och kapslade dialogrutefält
- AEM Core Components extensions (inklusive Sling Resource Merger patterns)
- Figma fil- eller bildrute-URL:er för layout och format när Figma MCP-servern (till exempel
plugin-figma-figma) är aktiverad i din IDE
För fälttyper, dialogmönster, Figma-regler och exempel, läs SKILL.md i din installerade kompetensmapp, till exempel .agents/skills/create-component/SKILL.md.
En översikt, installationssökvägar per IDE och felsökning finns i AEM Component Development Agent i Adobe Skills-databasen.
AGENTS.md
Innan vi går in i bilden måste vi förstå hur AGENTS.md genererades när komponenten skapades.
För AEM as a Cloud Service-projekt skapar bootstrap-kompetensen ensure-agents-md (väljs under Konfigurera AEM Agent Skills) AGENTS.md vid databasroten när den saknas. Det använder det som lär sig av din projektlayout.
Den skriver inte över en befintlig AGENTS.md-fil.
