Under the hood, Design Grab uses a multi-stage pipeline to go from a live website to a structured design system file.
The Chrome extension injects a capture script into the active tab. This script walks the entire DOM tree and records every element's computed styles — including fonts, colors, spacing, borders, and layout properties. The result is a structured JSON representation of the page.
The captured data is sent to the local server which renders it into a pixel-perfect HTML replica. This rendered HTML preserves all visual properties with inline styles, making it easy to inspect and extract values.
The design extractor analyzes the rendered HTML across all captured pages for a site. It identifies recurring patterns — color values, font stacks, type scales, spacing rhythms, border radii, and component structures — and organizes them into a coherent design system.
The final output is a structured Markdown file containing the complete design system: color palette with usage tokens, typography scale with exact values, component patterns with code snippets, layout guidelines, and dos/don'ts for accurate reproduction.