Reverse-engineering the web into structured design systems using AI.
Give it a URL. It renders the page in a real browser, recovers the typography, spacing, colour and components underneath, and writes them as documentation you can diff. Not a scrape. A reconstruction from evidence.
Built end to end: browser automation, the analysis pipeline, the API and workers, and the frontend.
One URL in, a reviewable design system out, in real time.
Render Website
~4sA real Chromium context, held until the page looks the way a visitor would see it: fonts resolved, lazy content triggered, layout settled.
Capture Structure
~2sA full-page screenshot and the computed style of every visible node, taken in the same frame, so pixels and properties describe one moment.
AI Analysis
~20sStatistics find the repeats: type scale, spacing rhythm, colour, clusters. The model gets the ranked candidates and names them.
Generate Documentation
~8sEach section is generated against a required shape and checked against the evidence. Anything ungrounded is dropped.
Validation and reachability run inline, so a site that will be rejected is rejected in under 300ms. Everything that owns a browser is one BullMQ job with four checkpointed stages, because a run holds around 400MB of Chromium and a crash has to cost one stage rather than the whole analysis.
Every team that has admired an interface has done the same manual archaeology.
Devtools open, padding values copied into a scratch file, colours eyedroppered one at a time. Nothing tells you which values are deliberate tokens and which are one-off overrides.
Existing tools each capture one layer and lose the relationship between them. Scrapers return markup. A stylesheet dump reports a hundred and forty font sizes: true and useless. Screenshots return design with the structure removed.
GetMD.Design renders the page for real, then treats design as a statistics problem before it treats it as a language problem. Frequency analysis over computed styles finds the type scale, the spacing grid and the repeated component signatures.
Only then does a model get involved, and only to name what was already found. What comes out is schema-validated markdown: every claim tied to a selector, a measurement or a crop, and anything ungrounded dropped rather than softened.
Every architecture looks inevitable once you delete the version that didn’t work. Each of these starts with the version that didn’t.
Knowing when a page is finished
networkidle never fires on the real web: analytics polling keeps the connection busy. Readiness is composite instead: load, then document.fonts.ready, then 400ms without DOM mutations, capped at eight seconds, plus a scripted full-height scroll to trigger the lazy loaders.
Statistics before the model
Sending markup to an LLM produced fluent, confident, unfalsifiable prose about intent that was never in the input. Computed styles become feature vectors ranked by frequency instead. When four hundred elements use six spacing values and thirty use everything else, the grid identifies itself.
Deciding twelve nodes are one component
Class hashes differ and subtrees are never equal, so grouping by either returns every node as its own component. Each node gets a signature (tag path, child multiset, style fingerprint at reduced precision), and two instances agreeing at 85% make a component. Tuned to split, because a false merge invents something that does not exist.
Documentation anyone would keep
Free-form generation regresses to “a clean sans-serif typeface and generous whitespace.” Each section is now prompted separately and validated against a required shape: token table, usage rule, evidence. Documents got 40% shorter and considerably more trusted.
Real browser rendering rather than HTML scraping, checkpointed background workers so a crashed render costs one stage instead of one run, and a model asked exactly one narrow question at the end.
One run against stripe.com. Every value below was measured on the rendered page, not read out of a stylesheet.
Frequency analysis separates the tokens carrying the system from the long tail of one-off values. The model assigns each one a role.
Size, weight, leading and tracking per step. The numbers are odd because they are real: 0.256px of tracking is what the page does.
Four pricing cards that share a signature, including the inverted variant, rendered live so the recovered tokens have to hold up.
Schema-validated markdown with stable anchors. This is the file that gets committed, reviewed and diffed after the next redesign.