Komponentenentwicklung mit AEM Agent Skills
Erfahren Sie, wie Sie mit AEM Agent Skills eine AEM-Komponente als Teil der KI-unterstützten Entwicklung“ .
In dieser exemplarischen Vorgehensweise verwenden Sie natürliche Sprache in einer KI-gestützten IDE (z. B. Cursor), um eine Promo-Banner-Komponente im WKND Sites-Projekt zu entwickeln. Der Codierungsagent wendet die create-component AEM Agent Skill an, um die Implementierung zu generieren.
Voraussetzungen
Für dieses Tutorial benötigen Sie Folgendes:
- Eine KI-gestützte IDE wie Cursor oder Visual Studio Code mit GitHub Copilot.
- Ein lokaler Klon des WKND Sites-Projekts, der erstellt und in einer lokalen AEM SDK-Instanz bereitgestellt wird.
- AEM Agent Skills in diesem Projekt installiert. Wenn Sie dies noch nicht getan haben, schließen Sie Einrichten von AEM Agent-Kenntnissen ab.
Komponentenbedarf
Nehmen wir an, das WKND-Team möchte ein Promo-Banner auf der Startseite anzeigen, und die Design-Referenz lautet wie folgt:
Autoren müssen in der Lage sein, die Felder Promo-Bezeichnung, CTA- und CTA- im Komponentendialogfeld festzulegen.
Die Design-Referenz ist ein Screenshot, der über Wireframe, Mockup oder statische Markup-Erfassung erhalten wird.
Entwickeln der Komponente
-
Öffnen Sie das WKND-Projekt in Ihrer IDE. Vergewissern Sie sich, dass AEM Agent Skills vorhanden sind (z. B. unter
.agents/skills), und starten Sie dann einen neuen Agent Chat.
-
Geben Sie eine Eingabeaufforderung wie die folgende ein. Hängen Sie den Screenshot zum Komponentendesign (erhalten über Wireframe, Mockup oder statische Markup-Erfassung) an, wenn Ihre IDE Bilder im Chat unterstützt:
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 -
Der Codierungsagent verwendet die
create-componentAEM Agent Skill, um die Komponente zu generieren. Überprüfen Sie die vorgeschlagenen HTL-, Sling-Modell-, Dialog-XML- und zugehörigen Dateien.
create-component-Kompetenz unterstützt die Figma Design Integration-
Stellen Sie die Komponente in der lokalen AEM-Instanz/SDK bereit.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Platzieren Sie im Authoring das Promo-Banner auf der Startseite und validieren Sie das Verhalten. Verfeinern Sie die Implementierung, wenn sie immer noch von der Entwurfsreferenz abweicht.
-
Überprüfen Sie die neu erstellte Komponente, indem Sie die Seite veröffentlichen oder Als veröffentlicht anzeigen.
Herzlichen Glückwunsch! Sie haben mit AEM Agent Skills im Rahmen der KI-unterstützten Entwicklung erfolgreich eine neue AEM-Komponente erstellt.
Über einfache Komponenten hinaus
In dieser exemplarischen Vorgehensweise wird eine einfache Komponente verwendet. Die gleiche create-component-Qualifikation unterstützt auch umfangreichere Fälle, darunter:
- Felder mit mehreren Feldern und verschachtelten Dialogfeldern
- Erweiterungen der AEM-Kernkomponenten (einschließlich Sling Resource Merger-Mustern)
- Figma-Datei- oder Frame-URLs für Layout und Stil, wenn der Figma MCP-Server (z. B.
plugin-figma-figma) in Ihrer IDE aktiviert ist
Für Feldtypen, Dialogmuster, Figmaregeln und Beispiele lesen Sie SKILL.md in Ihrem installierten Ordner für Kenntnisse, z. B. .agents/skills/create-component/SKILL.md.
Einen Überblick, Installationspfade nach IDE und Fehlerbehebung finden Sie unter AEM Component Development Agent im Adobe Skills Repository.
AGENTS.md
Bevor wir abschließen, sollten wir verstehen, wie AGENTS.md im Rahmen der Erstellung der Komponente generiert wurde.
Bei AEM as a Cloud Service-Projekten erstellt die ensure-agents-md Bootstrap-Kenntnisse (ausgewählt unter Einrichten von AEM-) AGENTS.md im Repository-Stamm, wenn sie fehlt. Es verwendet, was es aus Ihrem Projekt-Layout lernt.
Eine vorhandene AGENTS.md-Datei nicht.
