Reverse Engineer Any Website's Design System
Ever land on a website and think, "Wow, this feels incredibly consistent"? There's a good chance a solid design system is at work behind the scenes. But as developers, we often inherit projects without one, or we're tasked with building one from scratch. Figuring out the exact spacing, colors, and typography rules from an existing site can be a tedious, manual process of inspecting dozens of elements.
What if you could just point a tool at a live website and have it automatically extract the core design tokens and rules? That's the idea behind the Interface Design project.
What It Does
In short, this tool reverse engineers a website's visual DNA. You give it a URL, and it analyzes the page to systematically extract the foundational design tokens: the color palette, typography scale (font families, sizes, weights), spacing units, and even recurring component patterns. It doesn't just list hex codes and pixels; it aims to infer the rules—the system—that the site's design is built upon.
The goal is to output a structured snapshot of that design system, which you can then use as a reference, enforce in your own projects, or learn from.
Why It's Cool
The clever part is the automated deduction. Instead of you manually using a browser's dev tools to check margin values on twenty different components, this tool attempts to do that programmatically. It looks for consistency and repetition across the DOM to identify what's intentional design and what might be a one-off style.
For developers, this is a huge time-saver for several reasons:
- Auditing Legacy Projects: Quickly get a handle on the visual chaos of an older codebase to start building a proper system.
- Competitive Analysis & Inspiration: Understand the technical design choices behind sites you admire without the guesswork.
- Onboarding & Documentation: Generate a baseline style guide for a project that lacks one.
- Enforcement: The extracted tokens can be formatted to feed into tools like ESLint plugins, CSS-in-JS theme objects, or design linting workflows to maintain consistency.
It treats a live website as the single source of truth and works to derive the specification from it.
How to Try It
The project is open source on GitHub. To run it yourself, you'll need Node.js.
- Clone the repository:
git clone https://github.com/Dammyjay93/interface-design.git cd interface-design - Install the dependencies:
npm install