PwCRAGAI
- Client
- DEPT proof of concept
- Engagement
- Figma-to-AEM AI pipeline
Built a Figma-to-AEM AI pipeline using Figma's MCP server and VS Code Copilot, generating production-ready AEM components directly from designs.
- Figma MCP pipeline
- AI agent and skill instructions
- AEM component generation
- Design token system
The initial engagement deliverable was an AEM React.js landing page proof of concept, establishing the project's frontend foundation and component architecture.
On top of that foundation, this project designed and built a Figma-to-AEM AI pipeline using Figma's MCP server and VS Code Copilot, automating full component and page generation directly from Figma designs with no manual scaffolding. Custom agent and skill instruction files were authored to guide AI output accuracy, enabling the pipeline to generate production-ready AEM components complete with CQ dialogs, Sling Models and SCSS styles.
A design token system using CSS variables and theming was implemented as part of the generated output.
What shipped
- Figma MCP server plus VS Code Copilot driving component generation
- Custom agent and skill instructions tuned for AI output accuracy
- Generated components ship with CQ dialogs, Sling Models and SCSS
- Design token system with CSS variables built into the output