Desarrollo de componentes con habilidades de agente de AEM
Aprenda a desarrollar un componente de AEM con las habilidades de agente de AEM como parte de desarrollo asistido por IA.
En este tutorial, utilizará lenguaje natural en un IDE con tecnología de IA (por ejemplo, Cursor) para desarrollar un componente Banner promocional en el Proyecto de sitios WKND. El agente de codificación aplica la aptitud de agente de AEM create-component para generar la implementación.
Requisitos previos
Para seguir este tutorial, necesita lo siguiente:
- Un IDE con tecnología de IA, como Cursor o Visual Studio Code con el copiloto de GitHub.
- Un clon local del proyecto WKND Sites, creado e implementado en una instancia de AEM SDK local.
- Se han instalado aptitudes de agente de AEM en ese proyecto. Si aún no lo ha hecho, complete Configurar las aptitudes de agente de AEM.
Requisito de componente
Supongamos que el equipo de WKND desea mostrar un banner de promoción en la página principal y la referencia de diseño es la siguiente:
Los autores deben poder establecer los campos Etiqueta de promoción, Etiqueta de CTA y Vínculo de CTA en el cuadro de diálogo del componente.
La referencia de diseño es una captura de pantalla obtenida mediante malla metálica, maqueta o marcado estático.
Desarrollar el componente
-
Abra el proyecto WKND en el IDE. Confirme que las aptitudes de agente de AEM están presentes (por ejemplo, en
.agents/skills) y, a continuación, inicie un nuevo chat de agente.
-
Introduzca una solicitud como la siguiente. Adjunte la captura de pantalla de diseño del componente (obtenida mediante malla metálica, maqueta o captura estática de marcado) si su IDE admite imágenes en el 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 -
El agente de codificación utiliza la aptitud de agente de AEM
create-componentpara generar el componente. Revise el HTL, el modelo Sling, el XML de diálogo y los archivos relacionados propuestos.
create-component admite la integración de diseño Figma-
Implemente el componente en la instancia local de AEM/SDK.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
En la creación, coloque el titular de la promoción en la página principal y valide el comportamiento. Refine la implementación si aún difiere de la referencia de diseño.
-
Revise el componente recién creado publicando la página o viendo como publicado.
Enhorabuena. Ha creado correctamente un nuevo componente de AEM con Habilidades de agente de AEM como parte del desarrollo asistido por IA.
Más allá de componentes simples
Este tutorial utiliza un componente simple. La misma aptitud de create-component también admite casos más completos, incluidos:
- Campos múltiples y campos de cuadros de diálogo anidados
- Extensiones de componentes principales de AEM (incluidos los patrones de fusión de recursos de Sling)
- URL de marco o archivo Figma para diseño y estilo, cuando el servidor Figma MCP (por ejemplo,
plugin-figma-figma) está habilitado en su IDE
Para tipos de campo, patrones de diálogo, reglas de Figma y ejemplos, lea SKILL.md en la carpeta de aptitudes instalada, por ejemplo, .agents/skills/create-component/SKILL.md.
Para obtener información general, rutas de instalación por IDE y solución de problemas, consulte Agente de desarrollo de componentes de AEM en el repositorio de habilidades de Adobe.
AGENTS.md
Antes de finalizar, vamos a comprender cómo se generó AGENTS.md como parte de la creación del componente.
Para proyectos de AEM as a Cloud Service, la aptitud de arranque ensure-agents-md (seleccionada durante la configuración de aptitudes de agente de AEM) crea AGENTS.md en la raíz del repositorio cuando falta. Utiliza lo que aprende del diseño del proyecto.
no sobrescribe un archivo AGENTS.md existente.
Creación de
