Summary

This project automates the reverse-engineering of website design languages, extracting colors, typography, spacing, layout, responsiveness, and interaction states into multiple structured formats. It targets engineers and designers, streamlining the process of understanding, replicating, or migrating existing website designs with actionable outputs for various development workflows.

How It Works

The tool uses headless Chromium via Playwright to crawl websites, extracting computed styles, layout data, SVGs, fonts, and image metadata from the DOM. Extractor and formatter modules generate outputs like AI-optimized Markdown, W3C Design Tokens, Tailwind configs, and React themes. Novelty includes comprehensive extraction of layout systems, multi-breakpoint responsiveness, interaction states, and WCAG accessibility scoring.

Quick Start & Requirements

• Primary Command: npx designlang <url> (no installation needed).
• Global Install: npm install -g designlang.
• Agent Integration: npx skills add Manavarya09/design-extract.
• Prerequisites: Node.js/npm environment.

Highlighted Details

• Generates 8 output files: AI-optimized Markdown, HTML preview, W3C Design Tokens, Tailwind config, CSS variables, Figma variables, React theme, and shadcn/ui theme.
• Extracts layout systems and responsive behavior across 4 breakpoints.
• Captures interaction states (hover, focus, active).
• Supports live site synchronization (sync command).
• Enables multi-brand comparison (brands command).
• Offers a clone command to generate a Next.js starter app.
• Provides design system scoring (score command) across 7 categories.
• Includes advanced extraction for gradients, z-index maps, SVG icons, font files, image styles, and dark mode.
• Supports authenticated page extraction.

Maintenance & Community

The project welcomes contributions ("PRs welcome!") and provides a CONTRIBUTING.md. No specific community channels or roadmaps are detailed.

Licensing & Compatibility

• License: MIT.
• Compatibility: MIT license permits commercial use and integration into closed-source projects.

Limitations & Caveats

The README does not list explicit limitations. Reliance on headless browser rendering may miss dynamic JavaScript behaviors. "AI-optimized markdown" effectiveness is LLM-dependent. Crawling depth defaults to the initial page.