DesignRip
AI-Powered Design Intelligence
The Problem✦
Why it existsDesign 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?
Approach✦
How it's built- 01
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.
- 02
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.
- 03
Built on Next.js 15 for a fast, server-rendered intake flow (paste a URL, get a document) with minimal client-side weight.
- 04
Optimized the extraction pipeline for speed — the Groq/Llama inference step is the only variable-latency stage, everything else runs in parallel where possible.
Gallery✦
Screenshots incomingStack✦
Built withResults✦
What shipped- 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.