A detailed walkthrough of how we redesigned an entire React application homepage in under 20 minutes using Rovo Dev CLI and two MCP servers (Figma MCP and Atlassian Design System MCP). Covers the end‑to‑end workflow from Figma design extraction, ADS token and component planning, and code generation aligned to project conventions, through to automated test fixing and accessibility compliance.

Atlassian provides insights into software development collaboration, project management, and team productivity, offering documentation, tutorials, and best practices for using Atlassian's suite of tools, including Jira, Confluence, and Bitbucket. By exploring Atlassian's curated content, developers can learn about agile methodologies, version control workflows, and continuous integration practices for managing software development projects effectively. Whether you're working in a small startup or a large enterprise, Atlassian offers resources to streamline your collaboration and drive project success.

Atlassian

A detailed walkthrough of redesigning a React application homepage in under 20 minutes by chaining three tools: Figma MCP (to extract design structure and screenshots), Atlassian Design System MCP (to retrieve correct component APIs, design tokens, and accessibility guidance), and Rovo Dev CLI (to orchestrate code generation and test fixing). The workflow extracted Figma design data, queried ADS for tokens and components, read existing codebase conventions, generated six new React components, and iteratively fixed test failures including an axe-core accessibility violation — producing 1,381 lines of production-ready, ADS-compliant code. The post claims this reduced a 4–5 day developer effort to 20 minutes.

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

The Setup: RD CLI and Two MCP Servers Working Together

Step-by-Step: What Happened in Those 20 Minutes