Redesigning a Homepage in 20 Minutes: Figma MCP + Atlassian Design System MCP + Rovo Dev CLI

This post details an AI-powered workflow for rapidly redesigning an application homepage from Figma to production-ready React code using Figma MCP, ADS MCP, and Rovo Dev CLI, collapsing a multi-day effort into minutes by automating the translation of design data into ADS-compliant components and code, including iterative testing and issue resolution. It demonstrates the integration of Figma design data, Atlassian Design System (ADS) components and tokens via its MCP server, and Rovo Dev CLI for code generation and testing. The workflow involves extracting design context from Figma, querying ADS MCP for component APIs and tokens, reading project code patterns, generating new React components using ADS primitives and tokens, composing the layout, and iteratively fixing issues identified by the test suite (React.lazy wrapping, duplicate text, accessibility violations).