design-extract provides a powerful solution for reverse-engineering the complete design language of any website in a single command. Utilizing a headless browser, it extracts a wide array of style properties, including colors, typography, spacing, shadows, and much more. This tool generates eight distinct output files that offer comprehensive insights into the site's design structure, facilitating seamless design adaptation and application.

Features

• Comprehensive Extraction: Extracts every computed style from the live DOM, including layout structures, responsive behaviors, and interaction states, ensuring a thorough representation of the design.
• Multi-format Output: Generates an AI-optimized markdown file, visual HTML preview, Tailwind CSS configuration, React themes, Figma variables, W3C design tokens, and CSS custom properties.

Quick Usage

Extract the design language of a site with a simple command:

npx designlang https://stripe.com

For a complete rundown with all additional features:

npx designlang https://stripe.com --full

What You Receive

The following files are generated:

Enhanced Features

• Layout System Extraction: Captures the underlying structural layout, identifying grid patterns, flex usage, and spacing configurations, thereby revealing the architecture of the site.
• Responsive Multi-Breakpoint Capture: Observes the design’s adaptation across various screen sizes, offering insights into how elements adjust at different resolutions.
• Interaction State Capture: Records stylistic transitions for interactive elements, providing a clear view of dynamic user interactions.

Additional Capabilities

• Sync Feature: Keep local tokens updated by syncing with live site changes.
• Multi-Brand Comparison: Analyze and compare design attributes across multiple brands effortlessly.
• Design System Scoring: Evaluate the quality of a site's design, identifying strengths and weaknesses in a user-friendly format.

Example Output

Running the command for a website will produce detailed insights:

designlang https://vercel.com --full

Expected Summary:

• Colors, fonts, spacing adjustments, shadows, breakpoints, typography specifics, and interaction states—detailed outcomes are provided in a clear, actionable report.

Learning and Collaboration

Designed with community in mind, contributions are encouraged through the GitHub repository. Engage with documentation and enhancement opportunities to further refine the functionality of design-extract.