AI Design System

Challenge

Rethinking the boundary between design and development.

The traditional handoff — finished screens, components and specifications passed from design to engineering — is changing as code-based design, interactive prototyping and AI-assisted development enter the product design workflow. I wanted to understand what this means for a product designer's role and how much further design work can go before implementation.

How quickly could I explore different directions? How closely could a design reflect a working product? And how would my responsibilities change if code became part of the design process rather than a step that followed it?

Figma Make provided an initial way to explore this workflow, but performance became a limitation as prototypes grew in size and complexity. I began exploring another approach: using the design system itself as the foundation for larger, functional prototypes.

Solution

A design system you can build with.

I combined product design, code-based design, interactive prototyping and AI-assisted development in a more hands-on workflow.

In Cursor, I built the design system in HTML and CSS, creating reusable components and patterns that could be assembled into functional prototypes. I also explored the approach through a React-based implementation in Lovable.

The design system became more than a collection of visual specifications: it became a working set of components for building and testing interfaces. I could explore implemented components and test states, behaviours, edge cases and empty states earlier. AI-assisted tools helped me take ideas beyond static screens and into functional, testable experiences.

Code became another medium for exploring and communicating design ideas, creating a more continuous workflow between designing, prototyping, validating and building.

Outcome

Exploring the product earlier.

The biggest finding wasn't simply that I could work faster. The nature of the work changed. I could explore more directions, create interactive prototypes earlier and investigate behaviours and edge cases before committing to an approach.

The design system also became part of product exploration and validation. Instead of representing components and interactions only in static design files, I could test them in their implemented form. This made the relationship between design and development more continuous, with handoff becoming an ongoing conversation rather than a final step.

I no longer see design as a sequence of static screens handed over to engineering. I aim to make ideas tangible and testable as early as possible. My practice now moves between research, design, prototyping, validation and hands-on building. The value lies in exploring possibilities, making better-informed decisions and bringing ideas closer to working products. This is the direction I want to keep developing: a more experimental, hands-on approach to product design.