Reverse-engineering a website design system for a rebuild meant hours of manual inspection — colour picking, font stacks, spacing scales, animation timings. No tool existed that could extract all of it automatically.
← Back to work
tool
Internal Tool
Extracts design systems, CSS tokens, and component maps from any website for rapid cloning
Internal Tool
The Problem
The Solution
Node.js + Playwright tool that deep-analyses any URL: full-page screenshots across breakpoints, CSS variable extraction, typography and spacing scale detection, component hierarchy mapping, animation/transition documentation, and visual regression testing with pixel-diff scoring. Outputs a complete design token JSON and clone-ready HTML template.
The Results
< 2 min Analysis time
Tokens + HTML + screenshots Outputs
Mobile, tablet, desktop Breakpoints
Tech Stack
Node.jsPlaywrightNext.jsTypeScriptCSS AnalysisVisual Regression