← Back to AI Lab
A design system that people and AI build from.
I worked with our engineers to put our reusable components, and the documentation for each one, into Storybook. That gave design, engineering and AI tools one place to build from.
- Role
- Product Designer
- Team
- Me and engineering
- Tools
- Storybook, Figma, Claude, Claude Code
Context and problem
Design and code had two different sets of components.
The components in engineering's codebase and the components in the design library did not match. Every gap had to be talked through, so a lot of time went into communication instead of building.
Goals
- Align the two sides: one set of components, the same in design and in code.
- Make them easier to use: for designers, for engineers, and for AI working from them.
Key contributions
- Storybook, with engineering: the reusable components, each with its variants, in one shared library.
- Documentation beside every component: usage notes, so the build matches the system.
Storybook
One library, read the same way by design, code and AI.
Each component lives with its variants and a usage note, the way engineering builds it. Designers pick from the same parts engineers ship, and Claude and Claude Code work from them too.