Design System

Timeline: Q4 2025

Role: Design owner

I created a responsive, variable-driven design system for LearnLux. This established a unified visual language and drastically reduced the time required to design and implement new features. Importantly, I also leveraged Claude and the Figma MCP to accelerate the construction of the code-side component library.

Problem space

LearnLux faced a challenge shared by so many startups of a certain age:

  • Features had been implemented quickly without a strong underlying design language

  • The app had a mismatched look and feel

  • Elements didn’t behave predictably

  • A lot of time was lost by designing and implementing from scratch every time

I needed to create a library of reusable components driven by an underlying system of variables. Easy! But in an environment where resources were stretched very thin, the problem became. “How might I leverage the power of AI to minimize the demand for engineering resources?”

The Solution

Foundational variables afford quick, sweeping changes

I created a responsive system of variables that would automatically adapt to any screen size. I created a semantic layer of color and spacing variables — a layer of abstraction that would enable us to make broad, sweeping changes to the app’s visual language without having to edit each individual component.

A discrete, flexible set of Figma components

I conducted an audit of each screen in the app, identifying the minimum set of components necessary to maintaining baseline functionality. I then designed a flexible, interconnected component set linked by a common visual language, and created all necessary states and props as easy-to-use variants in Figma.

Claude skills to accelerate code-side implementation

Using the Figma MCP, I taught Claude how to use the foundational design system variables to create initial implementations of the Figma-side components. I even contained them in a neat little library. This meant that front-end engineers just had to review and clean up the code, drastically reducing the amount of time necessary to produce the code-side component library.

The Result

The design system provided dramatic and immediate improvements:

  • It took drastically less time to design a new feature

  • Engineers no longer had to implement countless versions of the same component

  • Components now behaved predictably across experiences, reducing frustration for users.

The design system created a unified visual language across our member app. Additionally, this project established a virtuous cycle with Claude: quickly building a code-side component library, and thus enabling the team to quickly create and test prototypes within our live app!