AI Design Component Mapper
Surfacing the design system already buried in your product
I made the core product decision: an opinionated auditor, not a passive extractor. Finding 8 button variants and suggesting 3 - that shift from mirror to collaborator became the product identity.
I chose to group by component type rather than atomic design hierarchy. Atomic introduces interpretation; types are concrete. Less margin for error, more useful output.
I designed a guided walkthrough rather than a dashboard dump - users review one category at a time (colours, typography, spacing, icons, components) with suggestions at each step. Progressive disclosure of complexity.
I designed the output to serve three audiences at once: a Figma file for designers, code tokens for developers, and an MCP server for AI-assisted builders - so the same design system is usable whether you drag, type, or talk.
Landing Page
The hero communicates the concept without explaining it - floating UI fragments from diverse products show what Madeleine reads. Hover the groups to see them spread.
Analysis
Designed to reduce perceived wait time: a ring visualization counting up, step checklist showing progress, and a cancel escape hatch. Every element addresses the anxiety of waiting for an AI.
Results
The auditor in action - 18 colours found, 7 suggested. Users toggle to keep or drop. The tool is confident but never locks you out of a decision.
Library Overview
Export to Figma, code tokens, or an MCP server - so your AI coding tools build on-brand without you pasting specs. The design system becomes something you talk to, not something you look up. Named after a cartographer, and after Proust's madeleine: the small thing that reveals what was always there.
Next project
Design Portfolio
A custom-built portfolio site - designed, coded, and deployed entirely using AI-assisted development with Claude Code. Live at antonengelbrecht.com.