AI-First Design-to-Code Workflow

Overview

This project explores an AI-first approach to product development by eliminating the traditional gap between design and engineering. Instead of treating design files as static artifacts, I restructured the workflow so that design systems, code, and AI tools operate as a single, connected system.

The outcome is a scalable pipeline where Figma components, a shared codebase, and AI tools like Cursor and Claude work together to generate production-ready frontend code and accelerate iteration.

Designing Components for Code Generation

I began by restructuring the design system in Figma to better align with how components are implemented in code. This meant simplifying component logic, standardising naming conventions, and reducing visual ambiguity that could confuse AI tools during interpretation.

The goal was to make each component more "machine-readable", ensuring that variants, states, and properties could be clearly translated into reusable frontend components. This step laid the foundation for a reliable design-to-code pipeline.

Generating React Components with AI

Using Cursor in combination with Claude, I translated the Figma component library into reusable React components. By referencing structured design inputs, I was able to prompt the AI to generate consistent, scalable code that mirrored the design system.

Rather than manually coding each component, this approach significantly reduced development time while maintaining alignment with design intent.

Using Cursor with Claude to generate React components from the Figma design library.

Building a Centralised Component Repository

All generated components were organised into a shared repository on GitHub. This repository acts as the single source of truth for the design system in code.

By structuring components in a modular and reusable way, the system becomes easier to maintain, scale, and integrate across multiple products. It also ensures that both designers and engineers are working from the same foundation.

The Sojern design system repository on GitHub, organised with modular React components.

Connecting Design and Code with Figma MCP

Finally, I connected Figma to Cursor using Figma MCP, enabling a fully integrated workflow between design and development.

This allows AI to:

• Reference live Figma screens
• Generate frontend code using the existing component repository
• Assist in creating wireframes grounded in real, production-ready components

Alongside this, I developed a lightweight project framework and a set of reusable prompting patterns to guide how screens are generated and translated into code. This ensures consistency in how AI interprets layouts, applies components, and structures outputs, turning what could be an ad-hoc process into a repeatable system.

By combining structured prompts with a defined workflow, the system becomes more predictable, scalable, and easier for both designers and engineers to adopt.

Connecting Figma to Cursor via Figma MCP for a fully integrated design-to-code workflow.

Enabling Collaboration with Storybook

To improve collaboration between design and engineering, I implemented Storybook on top of the component repository.

This created a shared environment where components can be viewed, tested, and documented in isolation. Designers can validate visual accuracy, while engineers can explore component behaviour, reducing ambiguity and accelerating feedback loops.

Storybook as a shared environment for viewing, testing, and documenting components in isolation.

Outcome

This workflow transforms design from a static deliverable into an active part of the development system. By integrating AI into each stage, from component creation to code generation, it enables a faster, more consistent, and scalable way to build products.

Most importantly, it redefines collaboration: instead of handoff, design and engineering operate in sync through a shared, AI-powered pipeline.