design-extraction

You can extract a design system from a live website by evaluating the DOM to capture computed styles, assets, and typography, then compiling them into a machine-readable format. This process downloads fonts and images directly from the URL to ensure asset fidelity.

Yes, you can build a React and shadcn replica from an existing website URL by harvesting DOM content and assets. It rebuilds shared brand components and pages using shadcn/ui, Tailwind, and Lucide React while preserving the extracted text and visual structure.

Visual validation works by capturing screenshots of the original site and the replica, then comparing pixel differences. The system iterates on the component and page replicas until visual parity is achieved, ensuring the extracted design system matches the deployed site.

DOM scraping for design token extraction is the process of capturing headings, links, images, and computed styles directly from a live website's DOM. It compiles these elements and @font-face declarations into a validated, reusable design system for migration or documentation.

Yes, you need agent-browser access and network download capabilities to scrape fonts and SVGs from a website. This access allows the extraction process to evaluate the live DOM, verify downloaded assets against HTML error pages, and perform automated screenshot comparisons.

The best way to document a website's visual language for migration is to extract design tokens and assets into a validated DESIGN.md file. This approach reverse-engineers deployed sites across multiple pages, producing an installable SKILL.md and a local replica for testing and refactoring.