01 / The Challenge
The Problem & Context
Design systems are usually documented by hand, if at all — engineers copy hex codes and spacing values out of DevTools one element at a time. DesignRip asks a different question: given any public URL, can a machine extract the whole design system in the time it takes to load the page?
02 / Technical Approach
Architecture & Implementation
A Playwright headless-browser pipeline visits the target URL, walks the rendered DOM, and captures computed CSS (color, type scale, spacing, radii, shadows) alongside high-fidelity component screenshots.
Raw scraped JSON is passed to Groq running Llama 3.3-70B, which restructures it into a clean, human-readable design.md — palettes, type ramps, spacing tokens and component notes, ready to drop into a repo.
Built on Next.js 15 for a fast, server-rendered intake flow (paste a URL, get a document) with minimal client-side weight.
Optimized the extraction pipeline for speed — the Groq/Llama inference step is the only variable-latency stage, everything else runs in parallel where possible.
04 / Technology
Technologies & Tools Used
05 / Impact
Results & Metrics
Key Accomplishments
- Organic traction across 5 countries within days of launch, with zero marketing spend — driven entirely by word of mouth.
- End-to-end extraction-to-document time measured in seconds, not minutes, making it viable as a quick reference tool rather than a batch job.