Building a scalable React design system for an educational platform

Context

Junior Einstein is an educational web platform for primary schools in the Netherlands. Designers, frontend developers, and backend developers work on it together.

The designers created a design system in Figma. The frontend team built a component library on top of it in React and TypeScript, documented in Storybook.

In 2025, management set a goal to become an AI-first company. AI tools had to be used to speed up development, including turning Figma designs into React components.

My role

I joined as a frontend developer in November 2025. My main task was to build reusable components for the library and product UI for the platform.

Beyond that, I took the initiative on the Figma-to-React process:

• Wrote a report on where frontend time was actually going when working with AI-generated components.
• Researched existing approaches: AI-friendly design systems, token architectures, and AI-first Figma-to-code workflows.
• Ran experiments in Figma, in React, and with different AI models to find a setup that produced correct components on the first attempt.
• Proposed the new token architecture and workflow to management and the design team, and helped implement it.

Problem

AI generated components quickly, but the results had many errors. Fixing them by hand took frontend developers several days per component. The cause was not the AI model, but the input it received.

• No structure in Figma. Variables and styles were not organised into layers, so it was unclear how values related to each other.
• No token architecture. Colours, spacing, and typography were often hard-coded values instead of named tokens.
• Inconsistent values. The same colour or size could appear in several slightly different variants across components.
• No link between design and code. Figma components were not connected to their React counterparts, so AI did not know which code already existed and generated duplicates.

As a result, every AI-generated component had to be reverse-engineered. Developers guessed which token was meant, corrected values, and removed duplication.

Solution

Together with the designers and backend developers, I set up a process where the design system is the single source of truth for both people and AI.

• Three-layer token architecture. Primitive tokens (raw palette, spacing scale, type scale) → semantic tokens (background, text, and border roles) → component tokens (button background, input border). Designers restructured the Figma file around this model.
• Figma plugin. A custom plugin exports the Figma variables as CSS variables into the React monorepo. Backend developers built the plugin; I defined the token structure and output format and integrated the variables into the component library.
• Code Connect. Figma components are linked to their React implementation, so AI and developers see which component and props already exist.
• Component library. Components are styled with Tailwind CSS and the token variables. Each component is documented in Storybook with all variants and states.
• AI workflow. I set up Claude Code skills, workflows, and agents that read the Figma structure and token layers and produce React components in the project's conventions.
• Testing. Unit tests with Vitest, end-to-end tests with Playwright, and code review for every AI-generated component.

Impact

• Days → hours. Measured on the same components: before, AI generation plus two to three days of manual fixes; after, a few hours including review and tests.
• Fewer errors. Named tokens and component links leave less room for guessing, in AI-generated code and in hand-written code.
• Consistent values. One source of truth for colours, spacing, and typography, in Figma and in code.
• Reuse across apps. The same components are used across several applications of the platform, in Next.js and in React.
• Adopted by the team. Management accepted the proposal, and it became part of the team's process. Designers rebuilt the Figma file around the new structure.

What I learned and trade-offs

• Structure matters more than the model. The quality of AI-generated code depended far more on how the Figma file and tokens were organised than on the choice of model, prompt, or AI harness.
• It is an investment. Restructuring the tokens and the Figma file took weeks before the first component benefited. That time had to be planned and defended.
• The system depends on discipline. It works only while designers follow the token structure. New values outside the system bring the old problems back.
• AI code is still reviewed. Faster generation did not remove code review and tests. It made them the main place where developers spend their time.