Not Starting From Scratch
I already had a Figma library I’d cleaned up and aligned across 2 teams after joining, so this built on existing work rather than starting cold.
A screenshot of Storybook showing a design system banner component
Context: Different Stacks, No Shared Reference
Every product app had its own component library. Same button, same field, built slightly differently each time, with nothing shared to point back to.
Fragmented by Stack
Each app kept a separate library, so components weren't actually shared or reused across teams.
No Source of Truth
Without one shared system, small inconsistencies piled up and nobody had time to fix them properly.
Heavy, Manual QA
Engineers often didn't catch UI issues themselves, so even small local changes needed a full manual check before shipping.
PET Project: Building It Solo
The team’s time was mostly going toward other innitiatives or supporting other teams’ work, so this wasn’t going to get dedicated capacity on its own. I built it myself, using AI-assisted coding on top of prior hands-on experience with code and design systems.
One Set of Components, Multiple Stacks
Built as LIT web components, with React and Angular wrappers on top, so teams on different stacks can use the same components instead of rebuilding them.
Docs That Stay Up to Date
Storybook is generated from the components themselves, so the docs reflect what’s actually shipped instead of drifting over time.
The Roadmap
This is step 1 of a 3-step plan:
Rebuild
Recreate existing UI as a proper, documented design system. Done, solo.
Adopt
Replace fragmented components, layouts, and app frames in production.
Redesign
Was planned for Q4, currently on hold.
Why It Matters
Less time spent checking unrelated parts of the product for every small change
One place engineering and design can both check what a component actually does
A working demo to show, not just describe, when pitching step 2 (adoption)
A useful reminder that AI-assisted coding can help one person get further with limited time
