Desenvolvimento de componentes usando as habilidades do agente do AEM
Saiba como desenvolver um componente do AEM usando as Habilidades do AEM Agent como parte do desenvolvimento assistido por IA.
Nesta apresentação, você usa a linguagem natural em um IDE alimentado por IA (por exemplo, Cursor) para desenvolver um componente Banner promocional no Projeto de sites WKND. O agente de codificação aplica a create-component Habilidade do AEM Agent para gerar a implementação.
Pré-requisitos
Para seguir este tutorial, você precisa do seguinte:
- Um IDE alimentado por IA, como Cursor, ou código do Visual Studio com GitHub Copilot.
- Um clone local do Projeto de sites do WKND, criado e implantado em uma instância do AEM SDK local.
- Habilidades do AEM Agent instaladas nesse projeto. Se você ainda não tiver feito isso, conclua a Instalação das Habilidades do Agente do AEM.
Necessidade de componente
Suponhamos que a equipe da WKND deseje exibir um banner promocional na página inicial, e a referência de design seja a seguinte:
Os autores devem ser capazes de definir os campos Rótulo promocional, Rótulo do CTA e Link do CTA na caixa de diálogo de componentes.
A referência de design é uma captura de tela obtida por wireframe, maquete ou captura de marcação estática.
Desenvolver o componente
-
Abra o projeto WKND no IDE. Confirme se as Habilidades do Agente do AEM estão presentes (por exemplo, em
.agents/skills) e inicie um novo chat do agente.
-
Digite um prompt como o seguinte. Anexe a captura de tela de design do componente (obtida via wireframe, mockup ou captura de marcação estática) se o IDE suportar imagens no 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 -
O agente de codificação usa a Habilidade do AEM Agent
create-componentpara gerar o componente. Revise o HTL, o modelo Sling, o XML da caixa de diálogo e os arquivos relacionados propostos.
create-component dá suporte à integração de design do Figma-
Implante o componente na instância local do AEM/SDK.
code language-shell $ mvn clean install -PautoInstallSinglePackage -
Na criação, coloque o banner promocional na página inicial e valide o comportamento. Refine a implementação se ela ainda divergir da referência do design.
-
Revise o componente recém-criado publicando a página ou Visualizar como publicado.
Parabéns! Você criou com sucesso um novo componente do AEM usando as Habilidades do agente do AEM como parte do desenvolvimento assistido por IA.
Além dos componentes simples
Esta apresentação usa um componente simples. A mesma habilidade create-component também suporta casos mais ricos, incluindo:
- Campos múltiplos e de caixas de diálogo aninhadas
- Extensões dos Componentes principais do AEM (incluindo padrões Sling Resource Merger)
- URLs de arquivo ou quadro Figma para layout e estilo, quando o servidor Figma MCP (por exemplo,
plugin-figma-figma) estiver habilitado no IDE
Para tipos de campos, padrões de caixas de diálogo, regras de figuras e exemplos, leia SKILL.md na pasta de habilidades instalada, por exemplo, .agents/skills/create-component/SKILL.md.
Para obter uma visão geral, caminhos de instalação por IDE e solução de problemas, consulte Agente de Desenvolvimento de Componentes do AEM no repositório de Habilidades do Adobe.
AGENTS.md
Antes de concluirmos, vamos entender como o AGENTS.md foi gerado como parte da criação do componente.
Para projetos AEM as a Cloud Service, a habilidade de inicialização ensure-agents-md (selecionada durante Configurar Habilidades do AEM Agent) cria AGENTS.md na raiz do repositório quando está ausente. Ele usa o que aprende no layout do seu projeto.
Ele não substitui um arquivo AGENTS.md existente.
