Throughout my design career, I've often had to work backwards. Joining projects mid-stream means inheriting interfaces that were built without a system — no tokens, no component logic, just a collection of screens that somehow work. My brother-in-law, a software developer, described the exact same experience from the engineering side. We weren't the edge case. We were the norm.
Understanding the challenge
Designers and developers joining mid-project face the same silent tax: hours spent reverse-engineering decisions nobody documented. Existing tools either assume you're starting from scratch, or require a Figma file that was never maintained. There was nothing that could look at a live product — messy, inconsistent, real — and help you make sense of it.
How I got there
Started by mapping the exact moment the pain occurs: not at the start of a project, but the moment you join one already in motion. That specificity changed what the tool needed to do.
Defined the output first — a Figma file with components and code — because working backwards from the deliverable clarified what the tool actually needed to extract.
Chose to group by component type rather than atomic design hierarchy. Atomic design introduces interpretation; types are concrete. Less margin for error in pattern recognition.
Designed Madeleine to be opinionated: rather than mirroring the mess, it flags inconsistencies and nudges users toward a cleaner system. Finding 8 button variants and suggesting 3 — that shift from extractor to auditor became the product's identity.
Settled on a credits-based model with one free analysis. The use case is episodic, not daily. The free analysis isn't generosity — it's the product's best demo.
What I designed
Madeleine takes a URL or screenshot, analyzes the UI, and walks users through their component library one category at a time — Colors, Typography, Spacing, Icons, then Components — flagging inconsistencies and suggesting consolidation along the way. Users can preview the full Figma output and code before signing up, then export immediately on account creation. The product is named after a cartographer — and after Proust's madeleine, the small thing that reveals what was always there.
Results & reflections
Madeleine is currently in design. The core product definition — user flow, business model, interaction logic, and output format — was defined in a single focused design sprint. The design thesis: the best design systems tool for an existing product isn't one that asks you to start over. It's one that meets the product where it is.
Key takeaway
The most important design decision was making Madeleine opinionated. A tool that just extracts is a mirror. A tool that extracts and suggests is a collaborator. That shift — from passive to active — is what makes it worth building.
Next project
Redesigning Urban Mobility
A transit companion app that helps newcomers navigate unfamiliar city systems with confidence, not confusion.