DESIGN SYSTEMS · 2024–2025
Code First
What Building Brad Frost's Component System in Reverse Taught Me About Design
OVERVIEW
Building Brad Frost's component system in reverse — code-first, token-aligned, AI-assisted.
Working as part of Brad Frost's Maker Program, I joined a project where the code already existed. The challenge was to understand an existing system deeply enough to contribute meaningfully at the component and token level, bring Figma into alignment with code reality, and use AI tooling to close the loop between the two.
THE PROBLEM
Starting From Code
Most design system work starts in Figma. This project inverted that entirely. Every decision had to be justified against an existing, principled structure rather than invented from first principles — which turned out to be enormously useful.
PROCESS
Component Archaeology
System Investigation
Reading Storybook stories, tracing prop structures, and mapping how existing components composed.
Figma Alignment
Rebuilding Figma components to match code counterparts — matching variant names to prop names, ensuring token consistency.
AI-Assisted Investigation
Using Claude via MCP to surface token relationships and accelerate structural investigation.
OUTCOMES
Aligned, Documented, Maintainable
Figma and Storybook components aligned across the system. Token layer documented with explicit primitive → semantic → component chain. MCP workflow established for ongoing system investigation.
Have a project in mind?