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 -
The coding agent uses the
create-componentAEM Agent Skill to generate the component. Review the proposed HTL, Sling Model, dialog XML, and related files.
create-component skill supports the Figma design integration-
Deploy the component to the local AEM instance/SDK.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
In authoring, place the Promo Banner on the home page and validate behavior. Refine the implementation if it still diverges from the design reference.
-
Review the newly created component by publishing the page or View as Published.
Herzlichen Glückwunsch! You have successfully created a new AEM component using AEM Agent Skills as part of AI-assisted development.
Beyond simple components
This walkthrough uses a simple component. The same create-component skill also supports richer cases, including:
- Multifields and nested dialogs fields
- AEM Core Components extensions (including Sling Resource Merger patterns)
- Figma file or frame URLs for layout and styling, when the Figma MCP server (for example
plugin-figma-figma) is enabled in your IDE
For field types, dialog patterns, Figma rules, and examples, read SKILL.md in your installed skill folder, for example, .agents/skills/create-component/SKILL.md.
For an overview, installation paths by IDE, and troubleshooting, see AEM Component Development Agent in the Adobe Skills repository.
AGENTS.md
Before we wrap up, let's understand how AGENTS.md was generated as part of creating the component.
For AEM as a Cloud Service projects, the ensure-agents-md bootstrap skill (selected during Setup AEM Agent Skills) creates AGENTS.md at the repository root when it is missing. It uses what it learns from your project layout.
It does not overwrite an existing AGENTS.md file.
