Building DesignMD — extracting real design systems from production websites
Most design inspiration tools stop at screenshots, but I became more interested in the actual frontend implementation layer behind polished products.
So I started building DesignMD — a system that analyzes live DOM/CSSOM structure and extracts things like:
• typography systems
• spacing scales
• CSS variables
• responsive breakpoints
• interaction states
• motion behavior
• component patterns
directly from production websites.
Been testing it against sites like Stripe, Airbnb, Linear, GitHub, Apple, and Vercel.
One of the most interesting parts has been seeing how differently companies structure frontend systems internally even when the visual design feels similar from the outside.
Still improving extraction quality and normalization, but early feedback has been really helpful.
Would genuinely love thoughts from frontend engineers, designers, or anyone working on design systems.
Also launched on Product Hunt today:
https://designmd.adityaraj.info/
https://www.producthunt.com/products/designmd-2?launch=designmd-2
The gap between "what a design looks like" and "how it's actually implemented" is exactly where I've hit walls building a landing page analysis tool. You can describe visual hierarchy from a screenshot, but the reasoning behind a spacing decision or typography scale is invisible until you're looking at the CSSOM.
Curious about the normalization step — when you extract spacing scales from Stripe vs Airbnb you're presumably getting different naming conventions and different underlying values. How much of that is automated pattern recognition vs manual cleanup?
Also wondering whether you're capturing what gets overridden vs what the base system defines. The deltas often tell you more about how a design system is actually used in practice than the base tokens do.
Honestly these are exactly the kinds of problems I’ve been spending most of my time thinking about lately 😄
The extraction itself is only one part — normalization and identifying what’s actually “system logic” versus one-off implementation noise is where things get much harder. Especially once different products structure tokens and overrides completely differently underneath.
And yeah, the “deltas vs base system” point is really interesting. In a lot of real products, the overrides/end deviations reveal more about actual design behavior than the original token definitions themselves.