使用AEM Agent技能的元件開發
瞭解如何使用AEM代理程式技能來開發AEM元件，作為AI輔助開發的一部分。
在此逐步解說中，您在AI支援的IDE （例如Cursor）中使用自然語言，在WKND Sites專案中開發 促銷橫幅 元件。 編碼代理程式會套用create-component AEM代理程式技能以產生實作。
先決條件
若要依照本教學課程操作，您需要具備以下條件：
- AI支援的IDE，例如Cursor或具有GitHub Copilot的Visual Studio Code。
- WKND Sites專案的本機復本，已建置並部署至 本機AEM SDK 執行個體。
- 在該專案中安裝AEM代理程式技能。 如果您尚未完成，請完成設定AEM代理程式技能。
元件需求
假設WKND團隊想要在首頁上顯示促銷橫幅，設計參考如下：
作者必須在元件對話方塊中設定促銷標籤、CTA標籤及 CTA連結 欄位。
設計參考是透過線框、模型或靜態標籤擷取取得的熒幕擷圖。
開發元件
-
在IDE中開啟WKND專案。 確認AEM代理程式技能存在（例如，
.agents/skills底下），然後開始新的代理程式聊天。
-
輸入類似以下的提示。 如果IDE支援聊天中的影像，請附加元件設計熒幕擷取畫面（透過線框、模型或靜態標籤擷取取得）：
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 -
編碼代理程式使用
create-componentAEM代理程式技能來產生元件。 檢閱建議的HTL、Sling模型、對話方塊XML和相關檔案。
-
將元件部署至本機AEM執行個體/SDK。
code language-shell $ mvn clean install -PautoInstallSinglePackage -
在製作時，請將「促銷橫幅」放置在首頁上，並驗證行為。 如果實作仍偏離設計參考，請調整實作。
-
透過發佈頁面或檢視為已發佈來檢閱新建立的元件。
恭喜！ 您已成功使用AEM代理程式技能建立新的AEM元件，作為AI輔助開發的一部分。
超越簡單元件
此逐步解說使用簡單元件。 相同的create-component技能也支援更豐富的案例，包括：
- 多欄位和巢狀對話方塊欄位
- AEM核心元件擴充功能（包括Sling資源合併模式）
- 在IDE中啟用Figma MCP伺服器（例如
plugin-figma-figma）時，配置與樣式的Figma檔案或框架URL
對於欄位型別、對話方塊模式、Figma規則和範例，請讀取已安裝技能資料夾中的SKILL.md，例如.agents/skills/create-component/SKILL.md。
如需概觀、依IDE提供的安裝路徑以及疑難排解，請參閱Adobe技能存放庫中的AEM元件開發代理程式。
AGENTS.md
總結之前，請先瞭解建立元件時如何產生AGENTS.md。
對於AEM as a Cloud Service專案，ensure-agents-md啟動程式技能（在設定AEM代理程式技能期間選取）會在存放庫根目錄中建立AGENTS.md，但此時有遺失。 它會使用從您的專案版面中學習到的內容。
它 不會 覆寫現有的AGENTS.md檔案。
