Cracking Spec-Driven Development: Our Adobe Commerce Cloud Journey

In the traditional Adobe Commerce (Magento) ecosystem, the time between a requirement-gathering meeting and a deployable feature is often measured in weeks of manual toil. We write minutes of the meeting, align and sign off with customers, translate them into user stories, transform user stories into JIRA tickets, manually draft technical design documentation, interpret designs, and finally write code that hopefully matches the original intent. 

This is time-consuming and often turns into a game of whispers, where the message at the end is very different from what it was at the start. To address this, Github has introduced Spec-Driven development, where the "Spec", the requirement itself drives the implementation (code). 

Infogain has adopted End-to-End Spec-Driven AI SDLC for Adobe Commerce Cloud implementations. By leveraging Model Context Protocol (MCP) servers, a few specialized AI Agents and with human guardrails, our experts have converted the software lifecycle into a streamlined, automated assembly line. 

How did we move towards "Spec-Driven" Development? We provide the details in this blog. 

The Philosophy:  

The core philosophy is simple: The specification is the code. Once a requirement is captured (the Spec) and approved, AI agents take over execution. 

The Technology Stack: 

• Orchestration: GitHub Copilot & Custom Agentic Workflows built on Python 
• Connectivity: Atlassian MCP, Postman MCP, Figma MCP 
• Visuals: PlantUML & Figma 
• Core Platform: Adobe Commerce Cloud (PHP/Magento) & Next.js (Headless Frontend) 

The new commerce cloud module development with an end-to-end Spec-driven AI SDLC approach typically needs to introduce two distinguished parts: 

Part 1: Backend Engineering 

Our backend workflow automates the most tedious parts of engineering, i.e. documentation, boilerplate, and testing. 

Step 1: Intelligent User Story builder 

It starts with a conversation. 

• Input: Meeting transcripts from stakeholder discussions. 
• The Agent: User Story Generator Agent (GitHub Copilot). 
• Action: The agent parses the conversation, extracts functional requirements, and formats them into BDD-style User Stories. 

Step 2: Jira Story Creator 

Instead of a Project Manager manually typing tickets, our Jira Ticket Creator Agent facilitates: 

• Integration: Using the Atlassian MCP Server. 
• Action: Pushing structured user stories directly to the correct Jira boards, with acceptance criteria and priority tagging. 

Step 3: From Text to Blueprint (LLD & Diagrams) 

This is where Spec-Driven becomes a reality. 

• The Agent: Low-Level Design (LLD) Architecture Agent. 
• Action: Fetching Jira tickets and generating a comprehensive LLD Markdown document. This ensures LLD creation covers multiple user stories, if they are logically and architecturally related. 

Visuals: The agent interprets this LLD and generates  PlantUML code automatically, producing sequence diagrams that align with the code even if it is  developed. 

Step 4: The Build & Validation 

With the blueprint ready, the coding begins. 

• Backend Engineer Agent: Consumes the LLD and PlantUML diagrams to generate production-ready Adobe Commerce PHP modules (DI, Service Contracts, Models). Our teams automate 80% of the module, with only 20% human effort to make it production-ready. This human-in-the-loop step is crucial for ensuring accuracy. 
• Unit Testing Agent: Validates the generated code against strict PHP coding standards (CS) and writes comprehensive unit tests (PHPUnit) to ensure zero regression defects. 

Step 5 - (A): Quality Assurance 

• The Agent: API Testing Agent (via Postman MCP). 
• Action: It auto-generates collections for Smoke, Regression, and End-to-End testing, executes them, and reports back on compliance. 

Step 5 - (B): Quality Assurance 

• The Agent: Creation/Migration to Karate Automation Test Scripts 
• Action: This agent excels at generating or migrating existing manual test cases into Karate automation scripts for comprehensive end-to-end testing. It then executes these scripts and delivers detailed compliance reports, ensuring robust quality checks with minimal manual intervention. 

Part 2: Frontend Engineering  

For the headless frontend, we bridge the gap between design and implementation using the Figma MCP. 

Step 1: Design Extraction 

• The Agent: Frontend Engineer Agent. 
• Integration: Figma MCP Server. 
• Action: The agent reviews the approved design file and extracts Brand Guideline, UI assets, CSS tokens, and component hierarchy. It generates a structured analysis file that maps Figma components to React/NextJS logic. 

Step 2: Component Generation 

• Action: Using the analysis file, the agent generates Next.js/React.js components that accurately implement the design spec, complete with Tailwind/CSS styling. We achieved 85% automation while maintaining a 15% manual process to ensure human oversight. 

Step 3: User Journey Validation 

• The Agent: Frontend Testing Agent. 
• Integration: Playwright MCP Server. 
• Action: We provide the agent with a User Journey prompt (e.g., Guest Checkout Flow). The agent automatically writes and executes Python-based Playwright scripts to verify the UI behaves exactly as real users expect. 

This is about implementing code faster, with architectural integrity! 

Outcomes Generated: 

1. Time-to-market: 40% reduced development cycle, which leads to 30% faster time-to-market. 
2. Productivity Efficiency: It helps improve 50% productivity with the best possible quality standards. 
3. Traceability: Every line of code is traced back to a specific User Story and LLD document. 
4. Standardization: Agents are tireless, follow PHP coding standards and write Unit Tests 100% of the time. And the code is always compliant with the specs, which reduces maintenance and operational costs. 
5. Documentation First: The documentation is generated as part of the process, not as an afterthought. 

These data points have been validated through one of our major Adobe Commerce implementations for a U.S.-based high-tech company engaged in global B2B and B2C commerce. 

Treating the "Spec" as the single source of truth and using AI Agents to bridge the gaps between tools (Jira, Figma, Postman, IDE) has effectively created a software factory. The role of the engineer shifts from being a "bricklayer" to an "architect", where they define the specs and review the agent's work, while AI handles the heavy lifting! 

The Future of Adobe Commerce has arrived!  

Reference(s): 

Diving Into Spec-Driven Development With GitHub Spec Kit - Microsoft for Developers)